/* _content/FocusBooksFrontShare/Components/Layout/MainLayout.razor.rz.scp.css */
/*
기능: MainLayout 전용 CSS — 전체화면 레이아웃, 콘텐츠 영역, 빌드 정보 오버레이 정의.
영향: FocusBooksWeb·FocusBooksClient 양쪽에서 사용되는 MainLayout.razor에 적용됨.
참조: MainLayout.razor, App.razor (--safe-area-inset-* CSS 변수 주입)
*/

/*
기능: 최상위 페이지 컨테이너 — height:100vh + overflow:hidden으로 스크롤 없는 전체화면 레이아웃 구성.
영향: 하위 main·article이 이 영역 안에서 크기를 결정함.
참조: App.razor의 setSystemBarInsets() — --safe-area-inset-top/bottom 변수 주입
*/
.page[b-ilqndjm2fn] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding-top: var(--safe-area-inset-top, 0px);
    padding-bottom: var(--safe-area-inset-bottom, 0px);
    box-sizing: border-box;
}

/*
기능: 메인·아티클 콘텐츠 영역 — flex:1로 .page 내 남은 공간을 채우고, 스크롤을 각 페이지에 위임.
영향: 각 페이지 컴포넌트가 자체 overflow-y:auto로 스크롤을 직접 제어.
참조: MainLayout.razor의 @Body 렌더 위치
*/
main[b-ilqndjm2fn] {
    flex: 1;
    overflow: hidden;
    width: 100%;
}

article[b-ilqndjm2fn] {
    width: 100%;
    height: 100%;
}

/*
기능: 빌드 정보 오버레이 — 개발·스테이징 환경에서 빌드 번호·일시를 화면 좌하단에 표시.
영향: 최상위 레이어(z-index:9999)에 고정 표시되며 텍스트 선택 가능.
참조: MainLayout.razor의 BuildInfo 렌더링 조건부 블록
*/
.build-info[b-ilqndjm2fn] {
    position: fixed;
    bottom: 6px;
    left: 8px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 4px;
    padding: 2px 7px;
    line-height: 1.6;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: text;
    user-select: text;
}
/* _content/FocusBooksFrontShare/Components/Layout/NavMenu.razor.rz.scp.css */
/*
기능: NavMenu 컴포넌트 전용 스타일 — 상단 바, 브랜드, 아이콘, 링크, 활성/호버 상태, 모바일 스크롤 메뉴 정의.
영향: FocusBooksFrontShare/Components/Layout/NavMenu.razor 전체 레이아웃 외관.
참조: NavMenu.razor, Bootstrap 아이콘(data URI SVG 인라인), --nav-item CSS 변수.
*/

/*
기능: 네비게이션 상단 바 — 반투명 검정 배경으로 헤더 영역 표시.
영향: NavMenu.razor의 .top-row 영역.
참조: Bootstrap .top-row 클래스.
*/
.top-row[b-5rkkcc5joe] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

/*
기능: 앱 브랜드명 폰트 크기 지정.
영향: .navbar-brand 텍스트 표시.
참조: Bootstrap .navbar-brand.
*/
.navbar-brand[b-5rkkcc5joe] {
    font-size: 1.1rem;
}

/*
기능: Bootstrap 아이콘 공통 스타일 — 배경 이미지로 아이콘 표시, 크기·위치 기준 설정.
영향: .bi-* 아이콘 클래스 전체에 적용.
참조: NavMenu.razor 내 아이콘 요소들.
*/
.bi[b-5rkkcc5joe] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

/*
기능: 홈 메뉴 아이콘 — 집 모양 SVG를 data URI로 인라인 삽입.
영향: NavMenu.razor 홈 메뉴 항목의 아이콘 표시.
참조: .bi 공통 스타일.
*/
.bi-house-door-fill-nav-menu[b-5rkkcc5joe] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

/*
기능: 추가(+) 메뉴 아이콘 — 플러스 사각형 SVG를 data URI로 인라인 삽입.
영향: NavMenu.razor 추가 메뉴 항목의 아이콘 표시.
참조: .bi 공통 스타일.
*/
.bi-plus-square-fill-nav-menu[b-5rkkcc5joe] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

/*
기능: 음악 메뉴 아이콘 — 음표 SVG를 data URI로 인라인 삽입.
영향: NavMenu.razor 음악 메뉴 항목의 아이콘 표시.
참조: .bi 공통 스타일.
*/
.bi-music-nav-menu[b-5rkkcc5joe] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z'/%3E%3C/svg%3E");
}

/*
기능: 물음표 메뉴 아이콘 — 원형 물음표 SVG를 data URI로 인라인 삽입.
영향: NavMenu.razor 도움말 메뉴 항목의 아이콘 표시.
참조: .bi 공통 스타일.
*/
.bi-question-circle-nav-menu[b-5rkkcc5joe] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-question-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
}

/*
기능: 목록 메뉴 아이콘 — 중첩 리스트 SVG를 data URI로 인라인 삽입.
영향: NavMenu.razor 목록 메뉴 항목의 아이콘 표시.
참조: .bi 공통 스타일.
*/
.bi-list-nested-nav-menu[b-5rkkcc5joe] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

/*
기능: 네비게이션 메뉴 항목 — 폰트 크기·여백 및 첫/마지막 항목 특수 여백 정의.
영향: NavMenu.razor의 모든 .nav-item 요소 레이아웃.
참조: .nav-item ::deep a 링크 스타일.
*/
.nav-item[b-5rkkcc5joe] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    /* 첫 번째 항목 — 로고/브랜드 아래 상단 여백 확보 */
    .nav-item:first-of-type[b-5rkkcc5joe] {
        padding-top: 4rem;
    }

    /* 마지막 항목 — 하단 여백 확보 */
    .nav-item:last-of-type[b-5rkkcc5joe] {
        padding-bottom: 1rem;
    }

    /*
    기능: 메뉴 링크 기본 스타일 — 색상, 높이, flex 정렬, 둥근 모서리 정의.
    영향: NavMenu.razor 내 모든 앵커 링크 표시.
    참조: --nav-item CSS 변수, .nav-item:first-of-type/.nav-item:last-of-type.
    */
    .nav-item[b-5rkkcc5joe]  a {
        color: var(--nav-item, #d7d7d7);
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

        /* 활성(현재 페이지) 링크 — 반투명 흰색 배경 적용 */
        .nav-item[b-5rkkcc5joe]  a.active {
            background-color: rgba(255,255,255,0.37);
            color: white;
        }

        /* 호버 링크 — 약한 반투명 흰색 배경 적용 */
        .nav-item[b-5rkkcc5joe]  a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }

/*
기능: 모바일 스크롤 네비게이션 — 기본 숨김, 토글 시 display:flex로 전환.
영향: NavMenu.razor의 UserSetting.IsMenuVisible 상태와 연동되는 슬라이드 메뉴.
참조: NavMenu.razor IsMenuVisible 바인딩.
*/
.nav-scrollable[b-5rkkcc5joe] {
    display: none;
}
/* _content/FocusBooksFrontShare/Components/Pages/Account.razor.rz.scp.css */
/*
기능: 계정 페이지(Account.razor) 전용 스타일 — 아바타·프로필·언어 선택·구매 내역·로그아웃 UI를 정의한다.
영향: FocusBooksFrontShare의 Account 페이지에만 적용(Blazor CSS 격리 scoped).
참조: Account.razor, shared.css, Music.razor.css(레이아웃 구조 참고)
*/

/* ─── 페이지 ──────────────────────────────────────────────────────────── */
/*
기능: 페이지 루트 — 밝은 회색 그라디언트 배경과 기본 텍스트 색상 지정.
영향: .account-page 하위 모든 요소의 배경·색상 기준.
참조: 없음
*/
.account-page[b-1yiypajqlr] {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,0.92) 0, rgba(255,255,255,0) 34%),
        linear-gradient(180deg, #f1f0ec 0%, #e6e2da 100%);
    color: #1c1c1e;
}


/* ─── 상단 패널: 연동 플랫폼 + FocusBooks ID ───────────────────────────── */
/* .top-panel은 Blazor CSS 격리(scoped) — 이 파일 범위에서만 적용되며 shared.css와 충돌 없음 */
.top-panel[b-1yiypajqlr] {
    margin: 14px 16px 8px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(78,68,55,0.08);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.9), rgba(250,247,239,0.72));
    box-shadow: 0 12px 32px rgba(64,56,45,0.1);
}

/* ─── 오른쪽 정보 영역 ───────────────────────────────────────────────── */
.top-info[b-1yiypajqlr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.linked-platform-row[b-1yiypajqlr] {
    display: grid;
    grid-template-columns: minmax(72px, 0.75fr) minmax(0, 1.4fr) auto;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    border-bottom: 1px solid rgba(78,68,55,0.09);
}

.account-link-column[b-1yiypajqlr] {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 64px;
    padding: 12px 12px;
}

.account-link-column + .account-link-column[b-1yiypajqlr] {
    border-left: 1px solid rgba(78,68,55,0.09);
}

.account-link-status-column[b-1yiypajqlr],
.account-link-logout-column[b-1yiypajqlr] {
    justify-content: center;
}

.account-link-platform-column[b-1yiypajqlr] {
    align-items: center;
    justify-content: center;
}

.linked-status-pill[b-1yiypajqlr] {
    padding: 5px 9px;
    border: 1px solid rgba(78,68,55,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.56);
    color: #786d60;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.linked-account-id[b-1yiypajqlr] {
    min-width: 0;
    color: #3e3932;
    font-size: 0.86rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-identity[b-1yiypajqlr] {
    flex: 1 1 auto;
    min-width: 0;
}

/* FocusBooks ID 와 플랫폼 식별값이 같은 형태의 행으로 위아래에 쌓인다. */
.account-panel-actions[b-1yiypajqlr] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px 16px;
}

.focusbooks-id-toggle[b-1yiypajqlr] {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 12px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(78,68,55,0.1);
    border-radius: 14px;
    color: #302b25;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

.focusbooks-id-toggle .chevron[b-1yiypajqlr] {
    margin-left: 0;
    width: 18px;
    height: 18px;
    color: #8d8172;
}

.focusbooks-id-toggle.expanded .chevron[b-1yiypajqlr] {
    transform: rotate(180deg);
}

.focusbooks-id-row[b-1yiypajqlr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid rgba(78,68,55,0.08);
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
}

.account-card[b-1yiypajqlr] {
    overflow: hidden;
    margin: 0 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(78,68,55,0.07);
    box-shadow: 0 8px 24px rgba(64,56,45,0.06);
}

.account-card .list-section-header[b-1yiypajqlr] {
    margin-top: 0;
}

.account-card .list-section-header + .list-section-header[b-1yiypajqlr] {
    border-top: none;
}

.account-card .purchase-item:last-child[b-1yiypajqlr],
.account-card .list-section-header:last-child[b-1yiypajqlr] {
    border-bottom: none;
}

.refund-date[b-1yiypajqlr] {
    font-size: 12px;
    color: #8e8e93;
}

.refund-error[b-1yiypajqlr] {
    color: #ff3b30;
    font-size: 13px;
    margin-top: 8px;
}

.account-userid-value[b-1yiypajqlr] {
    font-size: 0.8rem;
    color: #3e3932;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 플랫폼 식별값 ────────────────────────────────────────────────────
   FocusBooks ID 와 같은 접기 행이라 배치·전환은 focusbooks-id-* 규칙을 그대로 쓴다.
   값이 이메일처럼 길 수 있어 잘림만 따로 지정한다. */
.provider-identifier-value[b-1yiypajqlr],
.provider-identifier-none[b-1yiypajqlr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.provider-identifier-none[b-1yiypajqlr] {
    font-weight: 600;
    color: #8d8172;
}

/* ─── 언어 선택 드롭다운 ────────────────────────────────────────────── */
.lang-dropdown-wrap[b-1yiypajqlr] {
    padding: 8px 16px 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lang-desc[b-1yiypajqlr] {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
    line-height: 1.4;
}

.lang-select[b-1yiypajqlr] {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e8e8ed;
    border-radius: 10px;
    background: #fafafa;
    font-size: 0.95rem;
    color: #222;
    cursor: pointer;
    appearance: auto;
}

.client-log-export[b-1yiypajqlr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px 14px;
    background: #fff;
}

.client-log-export-desc[b-1yiypajqlr],
.client-log-export-warning[b-1yiypajqlr],
.client-log-export-message[b-1yiypajqlr] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
}

.client-log-export-desc[b-1yiypajqlr] { color: #6c6257; }
.client-log-export-warning[b-1yiypajqlr] { color: #9a5a2a; }
.client-log-export-message[b-1yiypajqlr] { color: #2d8f55; }

.client-log-file[b-1yiypajqlr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(78,68,55,0.12);
    border-radius: 10px;
    background: rgba(255,255,255,0.72);
    color: #3e3932;
    text-align: left;
}

.client-log-file.selected[b-1yiypajqlr] {
    border-color: #6a9f78;
    background: #edf8f0;
}

.client-log-file-name[b-1yiypajqlr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.76rem;
}

.client-log-file-meta[b-1yiypajqlr] {
    flex: 0 0 auto;
    color: #8d8172;
    font-size: 0.72rem;
}

.client-log-export-btn[b-1yiypajqlr] {
    align-self: flex-end;
    padding: 9px 12px;
    border: 0;
    border-radius: 10px;
    background: #4b7d59;
    color: #fff;
    font-weight: 800;
}

.client-log-export-btn:disabled[b-1yiypajqlr] { opacity: 0.45; }

/* ─── 플랫폼 배지 ─────────────────────────────────────────────────────── */
.platform-badges[b-1yiypajqlr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.platform-badge[b-1yiypajqlr] {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.platform-badge.google[b-1yiypajqlr]   { background: #eef2fc; color: #4285f4; }
.platform-badge.kakao[b-1yiypajqlr]    { background: #fff5cc; color: #3c1e1e; }
.platform-badge.naver[b-1yiypajqlr]    { background: #e6faf0; color: #03c75a; }
.platform-badge.line[b-1yiypajqlr]     { background: #e9faf0; color: #06c755; }
.platform-badge.facebook[b-1yiypajqlr] { background: #eef4ff; color: #1877f2; }
.platform-badge.email[b-1yiypajqlr]    { background: #f0f0f5; color: #3c3c43; }
.platform-badge.mock-tag[b-1yiypajqlr] { background: #fff3cd; color: #856404; font-style: italic; }

/* ─── 스크롤 목록: 계정 정보 + 구매 내역 공통 컨테이너 ──────────────── */
.purchase-list[b-1yiypajqlr] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 calc(var(--safe-area-inset-bottom, 0px) + 24px);
}

/* ─── 구매 내역 헤더 (접기/펼치기 버튼) ─────────────────────────────── */
.list-section-header[b-1yiypajqlr] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    margin-top: 8px;
    background: rgba(255,255,255,0.72);
    border: none;
    border-top: 1px solid rgba(0,0,0,0.07);
    border-bottom: 1px solid rgba(0,0,0,0.07);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.list-section-header:active[b-1yiypajqlr] {
    background: rgba(0,0,0,0.05);
}

.list-section-label[b-1yiypajqlr] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3c3c43;
}

.danger-section-header .list-section-label[b-1yiypajqlr],
.danger-section-header .chevron[b-1yiypajqlr] {
    color: #c73b2c;
}

.purchase-count[b-1yiypajqlr] {
    color: #9e9ea6;
}

.chevron[b-1yiypajqlr] {
    margin-left: auto;
    color: #b0b0b8;
    transition: transform 0.22s ease;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.list-section-header.expanded .chevron[b-1yiypajqlr] {
    transform: rotate(180deg);
}

/* ─── 구매 항목 ──────────────────────────────────────────────────────── */
.purchase-item[b-1yiypajqlr] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    background: rgba(255,255,255,0.5);
}

.empty-item[b-1yiypajqlr] {
    justify-content: center;
    padding: 20px 16px;
}

.empty-text[b-1yiypajqlr] {
    font-size: 0.88rem;
    color: #aeaeb2;
    font-style: italic;
}

/* 쇼핑백 SVG 아이콘 — SvgManager level3/bag, draw-color 변수로 색상 지정 */
.purchase-icon[b-1yiypajqlr] {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    --draw-color-0: #c8c8d0;
    --draw-color-1: #a8a8b4;
}

.purchase-svg-icon[b-1yiypajqlr] {
    width: 26px;
    height: 26px;
}

/* 구매 정보 블록 */
.purchase-info[b-1yiypajqlr] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* 키-값 행 */
.purchase-row[b-1yiypajqlr] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.purchase-key[b-1yiypajqlr] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #aeaeb2;
    white-space: nowrap;
    flex-shrink: 0;
}

.purchase-key[b-1yiypajqlr]::after {
    content: ':';
}

.purchase-product[b-1yiypajqlr] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-date[b-1yiypajqlr] {
    font-size: 0.65rem;
    color: #aeaeb2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.purchase-pg[b-1yiypajqlr] {
    font-size: 0.65rem;
    color: #aeaeb2;
}

/* 우측: 상태 배지 */
.purchase-right[b-1yiypajqlr] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

/* ─── 구매 상태 배지 ──────────────────────────────────────────────────── */
.purchase-status[b-1yiypajqlr] {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.purchase-status.completed[b-1yiypajqlr]       { background: #e6faf0; color: #28a745; }
.purchase-status.pending[b-1yiypajqlr]         { background: #fff3cd; color: #856404; }
.purchase-status.failed[b-1yiypajqlr]          { background: #fff0ef; color: #ff3b30; }
.purchase-status.none[b-1yiypajqlr]            { background: #f0f0f5; color: #8e8e93; }
.purchase-status.refunded[b-1yiypajqlr]        { background: #f0f0f5; color: #8e8e93; }
.purchase-status.refundrequested[b-1yiypajqlr] { background: #fff3e0; color: #e65100; }

/* ─── 환불 가능 버튼 (텍스트형 버튼으로 환불요청 기능 수행) ─────────── */
.refund-available-btn[b-1yiypajqlr] {
    font-size: 0.65rem;
    font-weight: 400;
    color: #b8860b;
    background: rgba(255,193,7,0.08);
    border: 1px solid rgba(184,134,11,0.25);
    border-radius: 20px;
    padding: 2px 8px;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    width: fit-content;
    align-self: flex-start;
}

.refund-available-btn:hover[b-1yiypajqlr] { background: rgba(255,193,7,0.18); }
.refund-available-btn:disabled[b-1yiypajqlr] { opacity: 0.4; cursor: not-allowed; }

.refund-available-btn--expired[b-1yiypajqlr] {
    color: #aeaeb2;
    background: none;
    border-color: rgba(0,0,0,0.12);
    cursor: default;
}

.refund-unavailable-reason[b-1yiypajqlr] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid rgba(198, 40, 40, 0.22);
    border-radius: 7px;
    background: rgba(255, 235, 238, 0.85);
    color: #b3261e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    word-break: keep-all;
}

/* ─── 로그아웃 버튼 (소형, top-panel 내 배치) ─────────────────────────── */
.logout-btn[b-1yiypajqlr] {
    appearance: none;
    padding: 9px 12px;
    background: rgba(255,255,255,0.58);
    border: 1px solid rgba(168,67,56,0.18);
    border-radius: 14px;
    color: #b4483f;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}

.logout-btn:hover[b-1yiypajqlr] {
    background: rgba(255,59,48,0.12);
    border-color: rgba(255,59,48,0.5);
}

.logout-btn:active[b-1yiypajqlr] { background: rgba(255,59,48,0.18); }

/* ─── 다이얼로그 ──────────────────────────────────────────────────────── */
.dialog-btn.cancel[b-1yiypajqlr]  { background: #f2f2f7; color: #1c1c1e; }
.dialog-btn.confirm[b-1yiypajqlr] { background: #ff3b30; color: #fff; }


/* ─── 계정 상단 정리: 동일 셀 + 텍스트형 액션 ───────────────────────── */
.linked-platform-row[b-1yiypajqlr] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-link-column[b-1yiypajqlr] {
    justify-content: center;
    min-height: 64px;
    padding: 10px 16px;
}

.linked-status-pill[b-1yiypajqlr],
.platform-badge[b-1yiypajqlr] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
}

.linked-status-pill[b-1yiypajqlr] {
    color: #3b362f;
}

.platform-badge.google[b-1yiypajqlr],
.platform-badge.kakao[b-1yiypajqlr],
.platform-badge.naver[b-1yiypajqlr],
.platform-badge.line[b-1yiypajqlr],
.platform-badge.facebook[b-1yiypajqlr],
.platform-badge.email[b-1yiypajqlr],
.platform-badge.mock-tag[b-1yiypajqlr] {
    background: transparent;
}

.platform-badges[b-1yiypajqlr] {
    align-items: center;
}

.logout-btn[b-1yiypajqlr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #c94137;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
}

.logout-btn:hover[b-1yiypajqlr],
.logout-btn:active[b-1yiypajqlr] {
    background: transparent;
    border-color: transparent;
}

.account-panel-actions[b-1yiypajqlr] {
    padding: 14px 16px 16px;
}

.focusbooks-id-control[b-1yiypajqlr] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
}

.focusbooks-id-toggle[b-1yiypajqlr] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #2f2a24;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.25;
    overflow: hidden;
}

.focusbooks-id-toggle:hover[b-1yiypajqlr],
.focusbooks-id-toggle:active[b-1yiypajqlr] {
    background: transparent;
}

.focusbooks-id-label[b-1yiypajqlr] {
    flex: 0 0 auto;
}

.focusbooks-id-arrow[b-1yiypajqlr] {
    flex: 0 0 auto;
    color: #8d8172;
    transition: transform 0.18s ease, color 0.18s ease;
}

.focusbooks-id-control.expanded .focusbooks-id-arrow[b-1yiypajqlr] {
    transform: translateX(3px);
    color: #5f574d;
}

.focusbooks-id-inline-value[b-1yiypajqlr] {
    flex: 0 1 min(52vw, 520px);
    min-width: 0;
    text-align: left;
    font-size: 0.9rem;
    font-weight: 700;
    color: #5f574d;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-10px);
    transition:
        opacity 0.16s ease,
        transform 0.18s cubic-bezier(.2,.8,.2,1),
        clip-path 0.2s cubic-bezier(.2,.8,.2,1),
        visibility 0s linear 0.2s;
    will-change: opacity, transform, clip-path;
}

.focusbooks-id-control.expanded .focusbooks-id-inline-value[b-1yiypajqlr] {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
    transition:
        opacity 0.1s ease,
        transform 0.18s cubic-bezier(.2,.8,.2,1),
        clip-path 0.2s cubic-bezier(.2,.8,.2,1),
        visibility 0s;
}

.focusbooks-id-fill[b-1yiypajqlr] {
    flex: 1 1 auto;
    min-width: 0;
}

.focusbooks-id-toggle .chevron[b-1yiypajqlr] {
    margin-left: 0;
    color: #8d8172;
}

.focusbooks-id-copy-btn[b-1yiypajqlr] {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #6c6257;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition:
        opacity 0.14s ease,
        transform 0.18s cubic-bezier(.2,.8,.2,1),
        color 0.14s ease,
        visibility 0s linear 0.18s;
}

.focusbooks-id-control.expanded .focusbooks-id-copy-btn[b-1yiypajqlr] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition:
        opacity 0.12s ease 0.04s,
        transform 0.18s cubic-bezier(.2,.8,.2,1),
        color 0.14s ease,
        visibility 0s;
}

.focusbooks-id-copy-btn:active[b-1yiypajqlr] {
    color: #2f2a24;
}

.focusbooks-id-copy-btn:disabled[b-1yiypajqlr] {
    pointer-events: none;
}

.focusbooks-id-copy-btn.copied[b-1yiypajqlr] {
    color: #2d8f55;
}
/* _content/FocusBooksFrontShare/Components/Pages/Coupon.razor.rz.scp.css */
/* Coupon 페이지는 기능을 MediaSlot으로 이동하여 비워둔다. */
.coupon-page[b-m7t69o7ys1] {
    background: #f5f5f5;
}
/* _content/FocusBooksFrontShare/Components/Pages/CouponHelp.razor.rz.scp.css */
/*
 * 기능: CouponHelp.razor 페이지 전용 스타일 — 헤더, 섹션 카드, 본문 텍스트.
 * 영향: /coupon/help 페이지 전체 레이아웃.
 * 참조: CouponHelp.razor
 */

.coupon-help-page[b-vqg7img7sl] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f7f8fa;
}

/* ─── 헤더 ────────────────────────────────────────────────── */
.coupon-help-header[b-vqg7img7sl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    z-index: 10;
}

.help-back-btn[b-vqg7img7sl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}
.help-back-btn:hover[b-vqg7img7sl] { background: #f0f0f0; }
.help-back-btn:active[b-vqg7img7sl] { background: #e0e0e0; }

.help-title[b-vqg7img7sl] {
    flex: 1;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.help-header-spacer[b-vqg7img7sl] { width: 40px; flex-shrink: 0; }

/* ─── 본문 ────────────────────────────────────────────────── */
.coupon-help-body[b-vqg7img7sl] {
    flex: 1;
    padding: 18px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
}

/* 도움말 섹션 카드 */
.help-section[b-vqg7img7sl] {
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid #ececec;
}

.help-section-header[b-vqg7img7sl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.help-section-icon[b-vqg7img7sl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.help-section-title[b-vqg7img7sl] {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1a1a1a;
}

.help-section-body[b-vqg7img7sl] {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
    word-break: keep-all;
}

/* 섹션별 톤 — 규칙은 앰버(주의 환기), 슬롯은 초록(다음 액션) */
.help-section-rule .help-section-icon[b-vqg7img7sl] { background: #fff8e1; color: #f57f17; }
.help-section-slot .help-section-icon[b-vqg7img7sl] { background: #e8f5e9; color: #2e7d32; }

/* 하단 돌아가기 버튼 */
.help-bottom-back-btn[b-vqg7img7sl] {
    margin-top: 8px;
    padding: 12px 16px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.help-bottom-back-btn:hover[b-vqg7img7sl]  { background: #333; }
.help-bottom-back-btn:active[b-vqg7img7sl] { background: #000; }
/* _content/FocusBooksFrontShare/Components/Pages/Feedback.razor.rz.scp.css */
/*
기능: 피드백 페이지(Feedback.razor) 전용 스타일 — 목록·신규 폼·스레드 상세 UI.
영향: FocusBooksFrontShare의 Feedback 페이지에만 적용(Blazor CSS 격리 scoped).
참조: Feedback.razor, shared.css, Account.razor.css(레이아웃 구조 참고)
*/

/* ─── 페이지 기본 ─────────────────────────────────────────────── */
.feedback-page[b-5zct7xf9w1] {
    background: linear-gradient(180deg, #ececf1 0%, #e4e4ea 100%);
    color: #1c1c1e;
    overflow: hidden;
}

/* ─── 스크롤 영역 ─────────────────────────────────────────────── */
.fb-scroll-area[b-5zct7xf9w1] {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 24px;
}

/* ─── 목록 뷰 ─────────────────────────────────────────────────── */
.fb-list-toolbar[b-5zct7xf9w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0 10px;
    gap: 10px;
}

.fb-list-hint[b-5zct7xf9w1] {
    font-size: 13px;
    color: #6e6e73;
}

.btn-new-fb[b-5zct7xf9w1] {
    flex-shrink: 0;
    padding: 7px 16px;
    background: #1c1c1e;
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-new-fb:hover[b-5zct7xf9w1] { opacity: .8; }

.fb-empty[b-5zct7xf9w1] {
    text-align: center;
    padding: 48px 0;
    font-size: 14px;
    color: #8e8e93;
}

/* ─── 피드백 아이템 카드 ──────────────────────────────────────── */
.fb-item[b-5zct7xf9w1] {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: box-shadow .15s;
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.fb-item:hover[b-5zct7xf9w1] { box-shadow: 0 4px 12px rgba(0,0,0,.12); }

.fb-item-top[b-5zct7xf9w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fb-date[b-5zct7xf9w1] {
    font-size: 11px;
    color: #8e8e93;
}

.fb-preview[b-5zct7xf9w1] {
    font-size: 14px;
    color: #1c1c1e;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fb-msg-count[b-5zct7xf9w1] {
    font-size: 11px;
    color: #8e8e93;
}

/* ─── 상태 배지 ───────────────────────────────────────────────── */
.fb-status-badge[b-5zct7xf9w1] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.fb-status-badge.status-open[b-5zct7xf9w1]     { background: #e9f4ff; color: #0a7cff; }
.fb-status-badge.status-replied[b-5zct7xf9w1]  { background: #e3f9e5; color: #28a745; }
.fb-status-badge.status-closed[b-5zct7xf9w1]   { background: #f0f0f4; color: #8e8e93; }

/* ─── 더 불러오기 버튼 ────────────────────────────────────────── */
.btn-load-more[b-5zct7xf9w1] {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    font-size: 13px;
    color: #6e6e73;
    cursor: pointer;
    margin-top: 4px;
    transition: background .15s;
}
.btn-load-more:hover[b-5zct7xf9w1] { background: rgba(0,0,0,.04); }

/* ─── 폼 영역 ─────────────────────────────────────────────────── */
.fb-form-area[b-5zct7xf9w1] {
    padding-top: 8px;
}

.fb-form-label[b-5zct7xf9w1] {
    font-size: 13px;
    font-weight: 600;
    color: #3c3c43;
    margin-bottom: 8px;
}

.fb-required[b-5zct7xf9w1] {
    color: #ff3b30;
    margin-left: 2px;
}

.fb-textarea[b-5zct7xf9w1] {
    width: 100%;
    min-height: 140px;
    padding: 12px;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #1c1c1e;
    background: #fff;
    resize: vertical;
    box-sizing: border-box;
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}
.fb-textarea:focus[b-5zct7xf9w1] { border-color: #0a7cff; }

.fb-char-count[b-5zct7xf9w1] {
    text-align: right;
    font-size: 11px;
    color: #8e8e93;
    margin: 4px 0 12px;
}

/* ─── 이미지 첨부 ─────────────────────────────────────────────── */
.btn-attach[b-5zct7xf9w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f2f2f7;
    border: 1px dashed #c7c7cc;
    border-radius: 8px;
    font-size: 13px;
    color: #6e6e73;
    cursor: pointer;
    margin-bottom: 12px;
    transition: background .15s;
}
.btn-attach:hover[b-5zct7xf9w1] { background: #e5e5ea; }

.fb-image-preview[b-5zct7xf9w1] {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.fb-preview-img[b-5zct7xf9w1] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    display: block;
    object-fit: contain;
}

.btn-remove-img[b-5zct7xf9w1] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ff3b30;
    color: #fff;
    border: none;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ─── 오류 메시지 ─────────────────────────────────────────────── */
.fb-error[b-5zct7xf9w1] {
    color: #ff3b30;
    font-size: 13px;
    margin-bottom: 10px;
}

/* ─── 폼 버튼 행 ──────────────────────────────────────────────── */
.fb-form-btns[b-5zct7xf9w1] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}

.btn-fb-cancel[b-5zct7xf9w1] {
    padding: 10px 20px;
    background: #f2f2f7;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #3c3c43;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-fb-cancel:hover[b-5zct7xf9w1]   { opacity: .8; }
.btn-fb-cancel:disabled[b-5zct7xf9w1] { opacity: .4; cursor: default; }

.btn-fb-submit[b-5zct7xf9w1] {
    padding: 10px 24px;
    background: #1c1c1e;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s;
}
.btn-fb-submit:hover[b-5zct7xf9w1]    { opacity: .8; }
.btn-fb-submit:disabled[b-5zct7xf9w1] { opacity: .4; cursor: default; }

/* ─── 상세 뷰 ─────────────────────────────────────────────────── */
.fb-detail-area[b-5zct7xf9w1] {
    display: flex;
    flex-direction: column;
}

.fb-detail-header[b-5zct7xf9w1] {
    display: flex;
    align-items: center;
    padding: 12px 0 8px;
    gap: 10px;
}

/* ─── 메시지 목록 ─────────────────────────────────────────────── */
.fb-messages[b-5zct7xf9w1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.fb-msg[b-5zct7xf9w1] {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* 사용자 메시지: 오른쪽 정렬 */
.fb-msg.user[b-5zct7xf9w1] {
    align-self: flex-end;
    background: #1c1c1e;
    color: #fff;
}

/* 운영자 메시지: 왼쪽 정렬 */
.fb-msg.admin[b-5zct7xf9w1] {
    align-self: flex-start;
    background: #fff;
    color: #1c1c1e;
}

.fb-msg-header[b-5zct7xf9w1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.fb-msg-author[b-5zct7xf9w1] {
    font-size: 11px;
    font-weight: 700;
    opacity: .7;
}

.fb-msg-time[b-5zct7xf9w1] {
    font-size: 10px;
    opacity: .5;
}

.fb-msg-text[b-5zct7xf9w1] {
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.fb-msg-img[b-5zct7xf9w1] {
    display: block;
    max-width: 100%;
    max-height: 180px;
    border-radius: 6px;
    margin-top: 8px;
    object-fit: contain;
}

/* ─── 답변 입력 영역 ─────────────────────────────────────────── */
.fb-reply-area[b-5zct7xf9w1] {
    border-top: 1px solid #e5e5ea;
    padding-top: 16px;
    margin-top: 4px;
}
/* _content/FocusBooksFrontShare/Components/Pages/Home.razor.rz.scp.css */
/*
 * Home.razor.css - 홈(SVG 그리드 뷰) 페이지 스타일
 * 코드 기반 무한 이동 애니메이션:
 *   Phase 1 - 홀수 컬럼이 CSS transition으로 1 Row 아래 이동
 *   Phase 2 - 홀수 Row가 CSS transition으로 1 컬럼 오른쪽 이동
 * transition 완료 후 C# 코드에서 데이터를 shift하고 transform을 리셋하여
 * 무한히 한 방향으로 흘러가는 효과를 만든다.
 */

/* ===== 프리셋 선택 오버레이 (중앙 정렬) ===== */

.preset-overlay[b-1ku3voqay7] {
    position: fixed;
    top: var(--safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    bottom: var(--safe-area-inset-bottom, 0px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    pointer-events: none;
    padding: 16px;
}

.preset-container[b-1ku3voqay7] {
    background: rgba(245, 246, 248, 0.97);
    backdrop-filter: blur(24px);
    border-radius: 28px;
    padding: 8px 24px 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    pointer-events: auto;
    animation: fadeInScale-b-1ku3voqay7 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

@keyframes fadeInScale-b-1ku3voqay7 {
    from { opacity: 0; transform: scale(0.92) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== 하단 플랫 메뉴: 사용법 + 계정 ===== */

.bottom-menu[b-1ku3voqay7] {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin: 0 -24px -8px -24px;
    padding: 4px 24px 4px;
    background: rgba(240, 240, 245, 0.8);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.bottom-btn[b-1ku3voqay7] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 16px;
    background: transparent;
    border: none;
    border-radius: 20px;
    color: rgba(0, 0, 0, 0.35);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.bottom-btn svg[b-1ku3voqay7] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.bottom-btn:hover[b-1ku3voqay7] {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.05);
}

.bottom-btn:active[b-1ku3voqay7] { opacity: 0.7; }

/* ===== 섹션 레이블 ===== */

.section-label[b-1ku3voqay7] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(240, 240, 245, 0.8);
    margin: -8px -24px 8px -24px;
    padding: 12px 24px 8px 26px;
}

/* ===== 1~4단계 + 자장가 카드 버튼 영역 =====
 * 2열 8행 개념적 그리드 — position: relative 컨테이너 + 자식 position: absolute.
 * 행 단위(--row): 30px, 간격(--g): 10px.
 *   3행 카드(--h3): 110px  →  1·2·3·4단계 기본 높이
 *   5행 카드(--h5): 190px  →  last-used 확장 높이
 *   2행 카드(--h2):  70px  →  자장가 기본 높이
 *   행4 시작(--r4): 120px  →  3·4단계 기본 top
 *   행6 시작(--r6): 200px  →  밀린 3·4단계 top
 *   행7 시작(--r7): 240px  →  자장가 top (고정)
 * 영향: App.razor snapCard·fbClearCardSnap JS, Home.razor.Grid.cs last-used 복원. */

.preset-grid[b-1ku3voqay7] {
    --row: 30px;
    --g: 10px;
    --h3: calc(3 * var(--row) + 2 * var(--g));
    --h5: calc(5 * var(--row) + 4 * var(--g));
    --h2: calc(2 * var(--row) + 1 * var(--g));
    --r4: calc(3 * var(--row) + 3 * var(--g));
    --r6: calc(5 * var(--row) + 5 * var(--g));
    --r7: calc(6 * var(--row) + 6 * var(--g));
    --mid: calc(50% + var(--g) / 2);

    position: relative;
    width: 100%;
    height: calc(8 * var(--row) + 7 * var(--g));
    overflow: visible;
    margin-bottom: 8px;
}

/* ─── 카드 공통 ─────────────────────────────────────────────────────────── */

.preset-card[b-1ku3voqay7] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    padding: 16px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    overflow: hidden;
    width: calc(50% - var(--g) / 2);
    box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.30);
}

.preset-card:active[b-1ku3voqay7] { transform: scale(0.97); }

/* ─── 개별 카드 기본 위치·크기 ──────────────────────────────────────────── */

.preset-card.level-1[b-1ku3voqay7] {
    left: 0;
    top: 0;
    height: var(--h3);
    z-index: 1;
    transition: height 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.25s;
}

.preset-card.level-2[b-1ku3voqay7] {
    left: var(--mid);
    top: 0;
    height: var(--h3);
    z-index: 1;
    transition: height 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.25s;
}

.preset-card.level-3[b-1ku3voqay7] {
    left: 0;
    top: var(--r4);
    height: var(--h3);
    z-index: 1;
    transition: top 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                height 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.25s;
}

.preset-card.level-4[b-1ku3voqay7] {
    left: var(--mid);
    top: var(--r4);
    height: var(--h3);
    z-index: 1;
    transition: top 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                height 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.25s;
}

/* 자장가: 전체 너비 기본 — width: auto + left·right 조합으로 확장 */
.preset-card.level-music[b-1ku3voqay7] {
    left: 0;
    right: 0;
    width: auto;
    top: var(--r7);
    height: var(--h2);
    z-index: 0;
    justify-content: center;
    align-items: center;
    transition: left 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                right 0.35s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.25s;
}

/* ─── 최근 사용 카드 (last-used) ────────────────────────────────────────────
 * C#이 _lastUsedLevel에 따라 .last-used 클래스를 부여. */

.preset-card.level-1.last-used[b-1ku3voqay7] {
    height: var(--h5);
}
.preset-grid:has(.level-1.last-used) .level-3[b-1ku3voqay7]   { top: var(--r6); }
.preset-grid:has(.level-1.last-used) .level-music[b-1ku3voqay7] { left: var(--mid); right: 0; }

.preset-card.level-2.last-used[b-1ku3voqay7] {
    height: var(--h5);
}
.preset-grid:has(.level-2.last-used) .level-4[b-1ku3voqay7]   { top: var(--r6); }
.preset-grid:has(.level-2.last-used) .level-music[b-1ku3voqay7] { left: 0; right: var(--mid); }

.preset-card.level-3.last-used[b-1ku3voqay7] {
    height: var(--h5);
}
.preset-grid:has(.level-3.last-used) .level-music[b-1ku3voqay7] { left: var(--mid); right: 0; }

.preset-card.level-4.last-used[b-1ku3voqay7] {
    height: var(--h5);
}
.preset-grid:has(.level-4.last-used) .level-music[b-1ku3voqay7] { left: 0; right: var(--mid); }

.preset-card.level-music.last-used[b-1ku3voqay7] {
}

/* ─── 단계별 배경 ────────────────────────────────────────────────────────── */

.preset-card.level-1[b-1ku3voqay7] {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f5 100%);
}
.preset-card.level-2[b-1ku3voqay7] {
    background: linear-gradient(135deg, #ff2d78 0%, #cc0033 100%);
}
.preset-card.level-3[b-1ku3voqay7] {
    background: linear-gradient(135deg, #ffe600 0%, #ffc800 100%);
}
.preset-card.level-4[b-1ku3voqay7] {
    background: linear-gradient(135deg, #2979ff 0%, #7c4dff 100%);
}

/* ─── 아이콘 ─────────────────────────────────────────────────────────────── */

.preset-icon[b-1ku3voqay7] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    opacity: 0.6;
    transition: opacity 0.2s, transform 0.2s;
}

.preset-icon svg[b-1ku3voqay7] {
    width: 100%;
    height: 100%;
}

.preset-card.level-1 .preset-icon[b-1ku3voqay7] { color: rgba(0, 0, 0, 0.45); }
.preset-card.level-2 .preset-icon[b-1ku3voqay7] { color: rgba(255, 255, 255, 0.8); }
.preset-card.level-3 .preset-icon[b-1ku3voqay7] { color: rgba(0, 0, 0, 0.45); }
.preset-card.level-4 .preset-icon[b-1ku3voqay7] { color: rgba(255, 255, 255, 0.85); opacity: 1; }

.preset-card:hover .preset-icon[b-1ku3voqay7] {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
}

/* ─── 레이블·설명 텍스트 ─────────────────────────────────────────────────── */

.preset-level[b-1ku3voqay7] {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    position: relative;
}

.preset-card.level-1 .preset-level[b-1ku3voqay7] { color: #1a1a1a; }
.preset-card.level-2 .preset-level[b-1ku3voqay7] { color: #ffffff; }
.preset-card.level-3 .preset-level[b-1ku3voqay7] { color: #1a1a1a; }
.preset-card.level-4 .preset-level[b-1ku3voqay7] { color: #ffffff; }

.preset-description[b-1ku3voqay7] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    position: relative;
}

.preset-card.level-1 .preset-description[b-1ku3voqay7] { color: rgba(0, 0, 0, 0.5); }
.preset-card.level-2 .preset-description[b-1ku3voqay7] { color: rgba(255, 255, 255, 0.75); }
.preset-card.level-3 .preset-description[b-1ku3voqay7] { color: rgba(0, 0, 0, 0.5); }
.preset-card.level-4 .preset-description[b-1ku3voqay7] { color: rgba(255, 255, 255, 0.75); }

/* ─── 자장가 카드 추가 스타일 ────────────────────────────────────────────── */

.preset-card.level-music[b-1ku3voqay7] {
    background: linear-gradient(135deg, #0d2137 0%, #1a4a6e 100%);
}

.music-card-content[b-1ku3voqay7] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.music-note-icon[b-1ku3voqay7] {
    width: 22px;
    height: 22px;
    color: #7ec8e3;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}

.preset-card.level-music:hover .music-note-icon[b-1ku3voqay7] {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
}

.preset-card.level-music .preset-level[b-1ku3voqay7] { font-size: 18px; }

/* ===== 하단 메뉴: 구성, 슬롯, 계정 ===== */

.menu-section-wrap[b-1ku3voqay7] {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.menu-section-hint[b-1ku3voqay7] {
    text-align: left;
    font-size: 10px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.35);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(240, 240, 245, 0.8);
    margin: 0 -24px;
    padding: 8px 24px 8px 24px;
}

.menu-section[b-1ku3voqay7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 0;
}

.menu-btn[b-1ku3voqay7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    color: rgba(0, 0, 0, 0.7);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.menu-btn:hover[b-1ku3voqay7] {
    background: rgba(245, 245, 250, 1);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.menu-btn:active[b-1ku3voqay7] {
    transform: scale(0.93) translateY(1px);
    background: rgba(235, 235, 240, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.menu-icon[b-1ku3voqay7] {
    width: 22px;
    height: 22px;
}

.menu-icon svg[b-1ku3voqay7] {
    width: 100%;
    height: 100%;
}

/* ===== 반응형 ===== */
@media (max-width: 400px) {
    .preset-container[b-1ku3voqay7] { padding: 6px 16px 6px; }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 940px) {
    .preset-overlay[b-1ku3voqay7] {
        align-items: center;
        padding: 8px max(8px, var(--safe-area-inset-left, 0px)) 8px max(8px, var(--safe-area-inset-right, 0px));
    }

    .preset-container[b-1ku3voqay7] {
        --landscape-panel-width: 520px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(128px, 148px);
        grid-template-rows: auto auto 1fr;
        column-gap: 8px;
        max-width: min(var(--landscape-panel-width), calc(100vw - var(--safe-area-inset-left, 0px) - var(--safe-area-inset-right, 0px) - 16px));
        max-height: calc(100dvh - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px) - 16px);
        padding: 6px 14px 6px;
    }

    .section-label[b-1ku3voqay7] {
        grid-column: 1;
        grid-row: 1;
        margin: -6px -14px 6px -14px;
        padding: 8px 14px 5px 16px;
        font-size: 10px;
    }

    .preset-grid[b-1ku3voqay7] {
        --row: 24px;
        --g: 8px;
        grid-column: 1;
        grid-row: 2 / span 2;
        margin-bottom: 6px;
    }

    .preset-card[b-1ku3voqay7] {
        padding: 12px;
        border-radius: 16px;
        gap: 2px;
    }

    .preset-icon[b-1ku3voqay7] {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
    }

    .preset-level[b-1ku3voqay7] {
        font-size: 18px;
    }

    .preset-description[b-1ku3voqay7] {
        font-size: 10px;
    }

    .preset-card.level-music .preset-level[b-1ku3voqay7] {
        font-size: 16px;
    }

    .music-note-icon[b-1ku3voqay7] {
        width: 18px;
        height: 18px;
    }

    .menu-section-wrap[b-1ku3voqay7] {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-width: 0;
    }

    .menu-section-hint[b-1ku3voqay7] {
        margin: 0;
        padding: 2px 0 8px;
        background: transparent;
        font-size: 9px;
    }

    .menu-section[b-1ku3voqay7] {
        display: flex;
        flex-direction: column;
        gap: 7px;
        padding: 0;
    }

    .menu-btn[b-1ku3voqay7] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 5px;
        padding: 9px 10px;
        border-radius: 12px;
        font-size: 10px;
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.18);
    }

    .menu-icon[b-1ku3voqay7] {
        width: 18px;
        height: 18px;
    }

    .bottom-menu[b-1ku3voqay7] {
        grid-column: 2;
        grid-row: 3;
        align-self: end;
        flex-direction: column;
        justify-content: flex-end;
        gap: 2px;
        margin: 0;
        padding: 0;
        background: transparent;
        border-top: none;
    }

    .bottom-btn[b-1ku3voqay7] {
        width: 100%;
        justify-content: flex-end;
        gap: 4px;
        padding: 2px 0;
        background: transparent;
        border: none;
        border-radius: 0;
        color: rgba(0, 0, 0, 0.38);
        font-size: 10px;
        font-weight: 500;
        box-shadow: none;
    }

    .bottom-btn svg[b-1ku3voqay7] {
        display: block;
        width: 11px;
        height: 11px;
        color: rgba(0, 0, 0, 0.32);
    }

    .bottom-btn:hover[b-1ku3voqay7] {
        color: rgba(0, 0, 0, 0.5);
        background: transparent;
    }
}

/* ===== 배경 그리드 ===== */

/* 격자 외부 컨테이너 - 배경으로 사용, 시스템 바 뒤까지 확장 */
.grid-container[b-1ku3voqay7] {
    width: 100vw;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: linear-gradient(160deg, #0a1208 0%, #0e1a0a 60%, #0a1008 100%);
}

/* 격자 내부 - 실제 CSS Grid (화면보다 +2행/열 크게 생성, 음수 마진으로 오프셋) */
.grid-inner[b-1ku3voqay7] {
    display: grid;
    gap: 0;
}

/* 개별 격자 셀 - transition 없음 (리셋 시 즉시 원위치) */
.grid-item[b-1ku3voqay7] {
    width: var(--grid-size);
    height: var(--grid-size);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
}

/* 격자 내 SVG 아이콘 크기 */
.animated-svg[b-1ku3voqay7] {
    width: var(--svg-size);
    height: var(--svg-size);
}

/* ─── 그리드 셀 색상 재정의 ─────────────────────────────────────────────
 * Home 배경 그리드의 파스텔 색상. --draw-color-0~5를 단일 고정색으로 덮어쓴다.
 * 영향: Home.razor의 gridData[r,c].Color로 각 셀에 col-sky/col-pink 클래스 지정. */
.col-sky[b-1ku3voqay7]  {
    --draw-color-0: #a8d0f0;
    --draw-color-1: #a8d0f0;
    --draw-color-2: #a8d0f0;
    --draw-color-3: #a8d0f0;
    --draw-color-4: #a8d0f0;
    --draw-color-5: #a8d0f0;
}
.col-pink[b-1ku3voqay7] {
    --draw-color-0: #f0a8c8;
    --draw-color-1: #f0a8c8;
    --draw-color-2: #f0a8c8;
    --draw-color-3: #f0a8c8;
    --draw-color-4: #f0a8c8;
    --draw-color-5: #f0a8c8;
}

/* ─── 그리드 셀 이동 애니메이션 클래스 ──────────────────────────────────
 * C# 코드에서 클래스 적용 → transition 완료 → 데이터 shift → 클래스 제거 순서로 무한 루프.
 * 영향: Home.razor의 GetAnimClass()에서 phase/col에 따라 move-down/move-right 반환. */
.move-down[b-1ku3voqay7] {
    transform: translateY(var(--grid-size));
    transition: transform 1s ease-in-out;
}

.move-up[b-1ku3voqay7] {
    transform: translateY(calc(var(--grid-size) * -1));
    transition: transform 1s ease-in-out;
}

.move-right[b-1ku3voqay7] {
    transform: translateX(var(--grid-size));
    transition: transform 1s ease-in-out;
}
/* _content/FocusBooksFrontShare/Components/Pages/HowToUse.razor.rz.scp.css */
/* HowToUse.razor.css - 초점책 사용 가이드 페이지 스타일 (흰색 테마) */

/* ─── 페이지 ──────────────────────────────────────────────────────── */
.howtouse-page[b-ibvs3ubfuq] {
    overflow: hidden;
    background: #f5f5f5;
    color: #1a1a1a;
}

/* ─── 헤더 ────────────────────────────────────────────────────────── */

/* ─── 단계 헤더 행 ─────────────────────────────────────────────────── */
.stage-header-row[b-ibvs3ubfuq] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

/* ─── 단계 아이콘 ─────────────────────────────────────────────────── */
.stage-icon-wrap[b-ibvs3ubfuq] {
    width: 88px; height: 88px;
    flex-shrink: 0;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.stage-icon[b-ibvs3ubfuq] {
    width: 52px; height: 52px;
    object-fit: contain;
}

/* ─── 단계 정보 ───────────────────────────────────────────────────── */
.stage-info[b-ibvs3ubfuq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stage-badge[b-ibvs3ubfuq] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #43a047;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.stage-title[b-ibvs3ubfuq] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a1a;
}

.stage-sub[b-ibvs3ubfuq] {
    font-size: 0.8rem;
    color: #888;
}

/* ─── 스크롤 콘텐츠 ───────────────────────────────────────────────── */
.content-list[b-ibvs3ubfuq] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 24px);
}

/* ─── 단계 상세 카드 ──────────────────────────────────────────────── */
.detail-card[b-ibvs3ubfuq] {
    padding: 20px 20px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.info-grid[b-ibvs3ubfuq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.info-row[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
}
.info-row:nth-child(even)[b-ibvs3ubfuq] { border-right: none; }
.info-row:nth-last-child(-n+2)[b-ibvs3ubfuq] { border-bottom: none; }

.info-label[b-ibvs3ubfuq] {
    font-size: 0.65rem;
    font-weight: 700;
    color: #43a047;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-ibvs3ubfuq] {
    font-size: 0.88rem;
    color: #1a1a1a;
    font-weight: 500;
}

.stage-tip[b-ibvs3ubfuq] {
    font-size: 0.82rem;
    color: #888;
    line-height: 1.6;
    margin: 0 0 16px;
}

.apply-btn[b-ibvs3ubfuq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #1a1a1a;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}
.apply-btn:hover[b-ibvs3ubfuq] { opacity: 0.85; }
.apply-btn:active[b-ibvs3ubfuq] { opacity: 0.75; }

/* ─── 구분선 ──────────────────────────────────────────────────────── */
.section-divider[b-ibvs3ubfuq] {
    height: 7px;
    background: #f0f0f0;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
}

/* ─── 섹션 레이블 ─────────────────────────────────────────────────── */
.section-label[b-ibvs3ubfuq] {
    color: #999;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 20px 6px;
}

.section-label-caution[b-ibvs3ubfuq] {
    background: #fff8f3;
    color: #c8622a;
    padding: 12px 20px 6px;
}

/* ─── 앱 사용 스텝 ────────────────────────────────────────────────── */
.step-item[b-ibvs3ubfuq] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid #f5f5f5;
    background: #fff;
}

.step-num[b-ibvs3ubfuq] {
    flex-shrink: 0;
    width: 26px; height: 26px;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.step-content[b-ibvs3ubfuq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-title[b-ibvs3ubfuq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
}

.step-desc[b-ibvs3ubfuq] {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.5;
}

/* ─── 주의사항 ────────────────────────────────────────────────────── */
.caution-item[b-ibvs3ubfuq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid #fde8d0;
    background: #fff8f3;
}

.caution-dot[b-ibvs3ubfuq] {
    flex-shrink: 0;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #e8804a;
    margin-top: 7px;
}

.caution-text[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.caution-title[b-ibvs3ubfuq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a1a;
}

.caution-desc[b-ibvs3ubfuq] {
    font-size: 0.78rem;
    color: #888;
    line-height: 1.5;
}

.reference-panel[b-ibvs3ubfuq] {
    margin: 0;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.reference-summary[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 13px 20px 14px;
    cursor: pointer;
    user-select: none;
}

.reference-summary[b-ibvs3ubfuq]::-webkit-details-marker {
    display: none;
}

.reference-summary[b-ibvs3ubfuq]::marker {
    content: "";
}

.reference-summary-notice[b-ibvs3ubfuq] {
    color: #777;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.6;
}

.reference-toggle[b-ibvs3ubfuq] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 7px 13px;
    border: 1px solid #e6d5cb;
    border-radius: 999px;
    background: #fff7f2;
    color: #c06a3b;
    box-shadow: 0 2px 7px rgba(224, 128, 74, 0.12);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
}

.reference-toggle[b-ibvs3ubfuq]::after {
    content: "▾";
    font-size: 0.78rem;
}

.reference-panel[open] .reference-toggle[b-ibvs3ubfuq]::after {
    content: "▴";
}

.reference-toggle-hide[b-ibvs3ubfuq] {
    display: none;
}

.reference-panel[open] .reference-toggle-show[b-ibvs3ubfuq] {
    display: none;
}

.reference-panel[open] .reference-toggle-hide[b-ibvs3ubfuq] {
    display: inline-flex;
}

.reference-list[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid #f0f0f0;
}

.reference-link[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    border-bottom: 1px solid #f5f5f5;
    color: inherit;
    text-decoration: none;
}

.reference-link:last-child[b-ibvs3ubfuq] {
    border-bottom: none;
}

.reference-title[b-ibvs3ubfuq] {
    color: #1a1a1a;
    font-size: 0.78rem;
    font-weight: 700;
}

.reference-desc[b-ibvs3ubfuq] {
    color: #888;
    font-size: 0.7rem;
    line-height: 1.45;
}

/* ─── 탭 ──────────────────────────────────────────────────────────── */
.howtouse-tabs[b-ibvs3ubfuq] {
    display: flex;
    gap: 8px;
    padding: 10px 20px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.howtouse-tab[b-ibvs3ubfuq] {
    flex: 1;
    padding: 9px 0;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #f5f5f5;
    color: #888;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.howtouse-tab:hover[b-ibvs3ubfuq] { background: #e8e8e8; }

.howtouse-tab-active[b-ibvs3ubfuq],
.howtouse-tab-active:hover[b-ibvs3ubfuq] {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

/* ─── 기능 가이드 카드 ────────────────────────────────────────────── */
.feature-card[b-ibvs3ubfuq] {
    padding: 16px 20px 18px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}

.feature-row[b-ibvs3ubfuq] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.feature-icon[b-ibvs3ubfuq] {
    width: 48px; height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    display: flex; align-items: center; justify-content: center;
    color: #43a047;
}

.feature-heading[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.feature-title[b-ibvs3ubfuq] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
}

.feature-sub[b-ibvs3ubfuq] {
    font-size: 0.78rem;
    color: #888;
}

.feature-desc[b-ibvs3ubfuq] {
    font-size: 0.85rem;
    line-height: 1.65;
    color: #888;
    margin: 0 0 14px;
}

.feature-steps[b-ibvs3ubfuq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-step[b-ibvs3ubfuq] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.feature-step-num[b-ibvs3ubfuq] {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}

.feature-step-text[b-ibvs3ubfuq] {
    font-size: 0.85rem;
    line-height: 1.55;
    color: #1a1a1a;
}

.feature-tip[b-ibvs3ubfuq] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    background: #fff8f3;
    border-radius: 10px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: #c8622a;
}

.feature-tip-dot[b-ibvs3ubfuq] {
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e8804a;
    margin-top: 7px;
}

.feature-shot[b-ibvs3ubfuq] {
    margin-top: 14px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.feature-shot img[b-ibvs3ubfuq] {
    display: block;
    width: 100%;
    height: auto;
}

.feature-shot-row[b-ibvs3ubfuq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.feature-shot-row .feature-shot[b-ibvs3ubfuq] { margin-top: 0; }

/* 토스트는 app.css의 .sub-toast 사용 */
/* _content/FocusBooksFrontShare/Components/Pages/Intro.razor.rz.scp.css */
/*
 * Intro.razor.css - 스플래시(인트로) 화면 스타일
 * 앱 시작 시 5초간 표시되는 로고 애니메이션 화면.
 * 회색 그라디언트 배경 위에 원형 로고와 앱 이름을 애니메이션으로 보여준다.
 */

/* 인트로 페이지 전체 컨테이너 - 화면 전체를 회색 그라디언트로 채움 */
.intro-page[b-pc7r4pws18] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: var(--safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    bottom: var(--safe-area-inset-bottom, 0px);
    background: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 50%, #2a2a2a 100%); /* 입체감 있는 회색 그라디언트 */
    color: #ffffff;
    font-family: Arial, sans-serif;
    cursor: pointer;    /* 클릭하면 인트로를 건너뛸 수 있음을 표시 */
    overflow: hidden;
}

/* SVG 로고를 감싸는 컨테이너 - 화면 높이의 80%를 차지 */
.svg-container[b-pc7r4pws18] {
    height: 80%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    opacity: 0; /* .ready 전까지 숨김 — Blazor 하이드레이션 후 애니메이션 시작 */
}

/* .ready 클래스가 붙으면 애니메이션 시작 (pre-rendering 중복 재생 방지) */
.ready .svg-container[b-pc7r4pws18] {
    animation: fadeIn-b-pc7r4pws18 2s ease-in-out forwards;
}

/* SVG 로고 자체 크기 - 화면에 꽉 차게 크게 */
.animated-logo[b-pc7r4pws18] {
    width: min(80vw, 80vh);
    height: min(80vw, 80vh);
    background: transparent;     /* 명시적으로 배경 투명 */
    overflow: visible;           /* 그림자 효과가 잘리지 않도록 */
}

/* 로고의 원형 테두리 - 선이 그려지는 애니메이션 효과 (고대비) */
.circle[b-pc7r4pws18] {
    fill: none;
    stroke: #ffffff;
    stroke-width: 8;
    stroke-dasharray: 565.48;     /* 원 둘레 길이 (2πr ≈ 565.48, r=90) */
    stroke-dashoffset: 565.48;    /* 처음에는 선이 보이지 않음 */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

.ready .circle[b-pc7r4pws18] {
    animation: drawCircle-b-pc7r4pws18 2s ease-in-out forwards;
}

/* 로고 중앙의 "FocusBooks" 텍스트 (고대비) */
.text[b-pc7r4pws18] {
    fill: #ffffff;
    font-size: 20px;
    font-weight: bold;
    opacity: 0;
}

.ready .text[b-pc7r4pws18] {
    animation: fadeInText-b-pc7r4pws18 2s ease-in-out 1.5s forwards;
}

/* 하단 크레딧 텍스트 "Developed by MicroRegalo" */
.credit-text[b-pc7r4pws18] {
    margin-top: 20px;
    font-size: 16px;
    color: #cccccc;
    opacity: 0;
}

.ready .credit-text[b-pc7r4pws18] {
    animation: fadeInText-b-pc7r4pws18 2s ease-in-out 2s forwards;
}

/* 원 테두리가 점진적으로 그려지는 애니메이션 */
@keyframes drawCircle-b-pc7r4pws18 {
    to {
        stroke-dashoffset: 0; /* offset을 0으로 줄이면 선이 완전히 나타남 */
    }
}

/* 로고 컨테이너 페이드인 + 스케일업 애니메이션 */
@keyframes fadeIn-b-pc7r4pws18 {
    from {
        opacity: 0;
        transform: scale(0.8); /* 80% 크기에서 시작 */
    }
    to {
        opacity: 1;
        transform: scale(1);   /* 100% 크기로 확대 */
    }
}

/* 텍스트 페이드인 애니메이션 (투명 → 불투명) */
@keyframes fadeInText-b-pc7r4pws18 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* _content/FocusBooksFrontShare/Components/Pages/MediaSlot.razor.rz.scp.css */
/*
기능: MediaSlot 목록 페이지 전체 스타일 (흰색 테마)
영향: MediaSlot.razor 컴포넌트의 모든 시각적 표현 (슬롯 목록, 카드, 액션 버튼, 결제 모달)
참조: MediaSlot.razor, shared.css (loading-spinner 오버라이드)
*/

/* ── 페이지 ── */
.mediaslot-page[b-w18t7vr6q0] {
    background: #f5f5f5;
    color: #1a1a1a;
}

/* shared.css의 .loading-spinner는 다크 배경 전제 — 흰색 테마용 오버라이드 */
.mediaslot-page .loading-spinner[b-w18t7vr6q0] {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #1a1a1a;
}

/* ── 헤더 ── */
.mediaslot-header[b-w18t7vr6q0] {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
}

.mediaslot-header-title[b-w18t7vr6q0] {
    min-width: 0;
    margin: 0;
}

.mediaslot-header-spacer[b-w18t7vr6q0] {
    width: 40px;
}

.header-slot-guide-link[b-w18t7vr6q0] {
    max-width: 100%;
    justify-self: end;
}

/* ── 로딩 ── */
.mediaslot-loading[b-w18t7vr6q0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: #999;
    font-size: 14px;
}

.mediaslot-media-loading[b-w18t7vr6q0] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 12px 16px 0;
    padding: 9px 12px;
    border: 1px solid rgba(70, 104, 217, 0.24);
    border-radius: 10px;
    background: #eef2ff;
    color: #334155;
    font-size: 13px;
    font-weight: 600;
}

.mediaslot-media-loading-spinner[b-w18t7vr6q0] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid rgba(70, 104, 217, 0.2);
    border-top-color: #4668d9;
    border-radius: 50%;
    animation: media-slot-progress-spin-b-w18t7vr6q0 0.8s linear infinite;
}

@keyframes media-slot-progress-spin-b-w18t7vr6q0 {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mediaslot-media-loading-spinner[b-w18t7vr6q0] { animation: none; }
}

/* ── 스크롤 래퍼 ── */
.mediaslot-scroll[b-w18t7vr6q0] {
    flex: 1;
    overflow-y: auto;
}

/* ── 슬롯 목록 ── */
.mediaslot-list[b-w18t7vr6q0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px calc(var(--safe-area-inset-bottom, 0px) + 24px);
}

.slot-coupon-section-divider[b-w18t7vr6q0] {
    order: 20;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 -16px;
    padding: 6px 16px;
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-color: rgba(0, 0, 0, 0.07);
    background: rgba(236, 236, 241, 0.92);
    color: #1c1c1e;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    box-shadow: none;
}

.slot-coupon-section-title[b-w18t7vr6q0] {
    flex: 1;
    min-width: 0;
    text-align: center;
}

/* ─── 쿠폰 이미지 (위/아래 clip 분리 슬라이드인) ────────────────────── */
.coupon-img-wrap[b-w18t7vr6q0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
}

.coupon-split-wrap[b-w18t7vr6q0] {
    position: relative;
    width: 64px;
    height: 64px;
}

/* 이미지 기본 스타일 (그림자·clip·애니메이션 분리) */
.coupon-illust-img[b-w18t7vr6q0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    object-fit: contain;
    transform: rotate(90deg);
}

/* 애니메이션+그림자 래퍼 — clip보다 바깥에 위치해야 그림자가 잘리지 않음 */
.coupon-piece[b-w18t7vr6q0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

/* clip 래퍼 — 세로 분할: 절취선은 90도 회전 후 부모 박스 기준 좌측 32% 위치 */
.coupon-clip-right[b-w18t7vr6q0] {
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 64px;
    clip-path: inset(0 0 0 32%);   /* 오른쪽 68% 표시 (SVG 상단=쿠폰면) */
}

.coupon-clip-left[b-w18t7vr6q0] {
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 64px;
    clip-path: inset(0 68% 0 0);   /* 왼쪽 32% 표시 (SVG 하단=바코드면) */
}

/* 애니메이션: 오른쪽 조각 — 띠용 후 살짝 떨어진 채 정지 */
.coupon-piece-right[b-w18t7vr6q0] {
    animation: coupon-right-tear-b-w18t7vr6q0 0.85s linear 0.8s both;
}

/* 애니메이션: 왼쪽 조각 — 띠용 후 살짝 떨어진 채 정지 */
.coupon-piece-left[b-w18t7vr6q0] {
    animation: coupon-left-tear-b-w18t7vr6q0 0.85s linear 0.8s both;
}

@keyframes coupon-right-tear-b-w18t7vr6q0 {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(6px); }
    60%  { transform: translateX(0px); }
    75%  { transform: translateX(3px); }
    88%  { transform: translateX(1px); }
    100% { transform: translateX(2px); }
}

@keyframes coupon-left-tear-b-w18t7vr6q0 {
    0%   { transform: translateX(0); }
    35%  { transform: translateX(-6px); }
    60%  { transform: translateX(0px); }
    75%  { transform: translateX(-3px); }
    88%  { transform: translateX(-1px); }
    100% { transform: translateX(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .coupon-piece-right[b-w18t7vr6q0],
    .coupon-piece-left[b-w18t7vr6q0] { animation: none; }
}

/* ── 에러 ── */
.mediaslot-error[b-w18t7vr6q0] {
    margin: 0 16px 12px;
    padding: 10px 14px;
    background: #ffebee;
    border: 1px solid #ef9a9a;
    border-radius: 8px;
    color: #c62828;
    font-size: 13px;
}

/* 동기화 실패 배너 — 안내 문구와 재시도 버튼을 한 줄로 배치 */
.mediaslot-sync-retry[b-w18t7vr6q0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

.mediaslot-sync-retry button[b-w18t7vr6q0] {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid #c62828;
    border-radius: 6px;
    background: #fff;
    color: #c62828;
    font-size: 13px;
    cursor: pointer;
}


/* ─── 결제 모달 공통 ─────────────────────────────────────── */
.slot-guide-modal[b-w18t7vr6q0] {
    width: min(92vw, 430px);
    max-height: min(86vh, 760px);
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: hidden;
}

.slot-guide-modal-header[b-w18t7vr6q0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.slot-guide-title[b-w18t7vr6q0] {
    margin: 0 0 6px;
    text-align: left;
}

.slot-guide-intro[b-w18t7vr6q0] {
    margin: 0;
    color: #5f6775;
    font-size: 13px;
    line-height: 1.45;
    word-break: keep-all;
}

.slot-guide-close-icon[b-w18t7vr6q0] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #555;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.slot-guide-close-icon:active[b-w18t7vr6q0] { background: #e5e7eb; }

.slot-guide-content[b-w18t7vr6q0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    padding-right: 2px;
}

.slot-guide-image[b-w18t7vr6q0] {
    width: 100%;
    max-height: 320px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    object-fit: cover;
    object-position: top;
}

.slot-guide-section[b-w18t7vr6q0] {
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid #eceff5;
    background: #fff;
}

.slot-guide-section-label[b-w18t7vr6q0] {
    display: inline-flex;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
}

.slot-guide-section p[b-w18t7vr6q0] {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
    word-break: keep-all;
}

.slot-guide-section.paid[b-w18t7vr6q0] { background: #f5f7ff; border-color: #dbe4ff; }
.slot-guide-section.paid .slot-guide-section-label[b-w18t7vr6q0] { color: #4668d9; }
.slot-guide-section.paid-coupon[b-w18t7vr6q0] { background: #fff8eb; border-color: #ffe1aa; }
.slot-guide-section.paid-coupon .slot-guide-section-label[b-w18t7vr6q0] { color: #c77700; }
.slot-guide-section.free-coupon[b-w18t7vr6q0] { background: #eefcf6; border-color: #c8f4df; }
.slot-guide-section.free-coupon .slot-guide-section-label[b-w18t7vr6q0] { color: #0f9f6e; }
.slot-guide-section.add[b-w18t7vr6q0] { background: #fff9db; border-color: #f6df82; }
.slot-guide-section.add .slot-guide-section-label[b-w18t7vr6q0] { color: #a46a00; }
.slot-guide-section.coupon-rule[b-w18t7vr6q0] { background: #fff8e1; border-color: #ffe082; }
.slot-guide-section.coupon-rule .slot-guide-section-label[b-w18t7vr6q0] { color: #f57f17; }
.slot-guide-section.coupon-share[b-w18t7vr6q0] { background: #f5f3ff; border-color: #ddd6fe; }
.slot-guide-section.coupon-share .slot-guide-section-label[b-w18t7vr6q0] { color: #6d28d9; }
.slot-guide-section.coupon-slot[b-w18t7vr6q0] { background: #e8f5e9; border-color: #a5d6a7; }
.slot-guide-section.coupon-slot .slot-guide-section-label[b-w18t7vr6q0] { color: #2e7d32; }

.slot-guide-close-btn[b-w18t7vr6q0] {
    margin-top: 14px;
    padding: 12px 16px;
    border: none;
    border-radius: 12px;
    background: #111827;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.slot-guide-close-btn:active[b-w18t7vr6q0] { background: #000; }

.pg-select-modal[b-w18t7vr6q0] {
    min-width: 300px;
    max-width: 360px;
    width: 100%;
}

.pg-cancel[b-w18t7vr6q0] {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin-top: 4px;
}

/* ─── 1단계: 지역 선택 ──────────────────────────────────── */
.pg-region-btns[b-w18t7vr6q0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 12px;
}

.pg-region-btn[b-w18t7vr6q0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid #ddd;
    background: #fafafa;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    width: 100%;
    text-align: left;
}
.pg-region-btn:active[b-w18t7vr6q0] { transform: scale(0.98); }

.pg-region-domestic[b-w18t7vr6q0] { border-color: #4a90d9; background: #f0f6ff; }
.pg-region-domestic:hover[b-w18t7vr6q0] { background: #e3eeff; border-color: #2970c0; }
.pg-region-global[b-w18t7vr6q0] { border-color: #ff9800; background: #fff8f0; }
.pg-region-global:hover[b-w18t7vr6q0] { background: #ffecd6; border-color: #e65100; }

.pg-region-icon[b-w18t7vr6q0] { font-size: 28px; flex-shrink: 0; line-height: 1; }

.pg-region-info[b-w18t7vr6q0] { display: flex; flex-direction: column; gap: 3px; }
.pg-region-label[b-w18t7vr6q0] { font-size: 1rem; font-weight: 700; color: #1a1a2e; }
.pg-region-sub[b-w18t7vr6q0] { font-size: 0.75rem; color: #777; }

/* ─── 2단계: 국내 결제수단 ──────────────────────────────── */
.pg-method-modal[b-w18t7vr6q0] { max-width: 380px; }

.pg-method-header[b-w18t7vr6q0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.pg-method-header .sub-dialog-title[b-w18t7vr6q0] { margin: 0; flex: 1; }

.pg-back-btn[b-w18t7vr6q0] {
    background: none;
    border: none;
    font-size: 18px;
    color: #555;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    line-height: 1;
}
.pg-back-btn:hover[b-w18t7vr6q0] { background: rgba(0,0,0,0.06); }

.pg-method-grid[b-w18t7vr6q0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px 0 12px;
}

.pg-method-btn[b-w18t7vr6q0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    font-size: 12px;
    font-weight: 600;
    min-height: 72px;
}
.pg-method-btn:active[b-w18t7vr6q0] { transform: scale(0.95); opacity: 0.85; }

.pg-method-icon[b-w18t7vr6q0] {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.pg-method-label[b-w18t7vr6q0] { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; }

.pg-method-card[b-w18t7vr6q0]  { background: #EEF2FF; color: #3949AB; }
.pg-method-card .pg-method-icon[b-w18t7vr6q0] { background: #3949AB; color: #fff; }

.pg-method-naver[b-w18t7vr6q0] { background: #E8F9ED; color: #03C75A; }
.pg-method-naver .pg-method-icon[b-w18t7vr6q0] { background: #03C75A; color: #fff; font-family: 'Arial Black', sans-serif; }

.pg-method-kakao[b-w18t7vr6q0] { background: #FFFDE7; color: #3C1E1E; }
.pg-method-kakao .pg-method-icon[b-w18t7vr6q0] { background: #FEE500; color: #3C1E1E; font-family: 'Arial Black', sans-serif; }

.pg-method-samsung[b-w18t7vr6q0] { background: #E8EAF6; color: #1428A0; }
.pg-method-samsung .pg-method-icon[b-w18t7vr6q0] { background: #1428A0; color: #fff; font-family: 'Arial Black', sans-serif; }
/* _content/FocusBooksFrontShare/Components/Pages/MediaSlotSetting.razor.rz.scp.css */
/* MediaSlotSetting.razor.css - MediaSlot 슬롯 설정 페이지 스타일 */

.mediaslot-setting-page[b-z9xv1ha7bh] {
    overflow-y: auto;
    background-color: #757575;
}

/* ── 헤더 ── */
.mediaslot-header[b-z9xv1ha7bh] {
    background-color: #4a4a4a;
    border-bottom: 1px solid #555;
    position: sticky;
    top: 0;
    z-index: 10;
    /* h2 absolute 기준점 */
    isolation: isolate;
}

.mediaslot-header h2[b-z9xv1ha7bh] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #F0F0F0;
    pointer-events: none;
    margin: 0;
}

.slot-title-text[b-z9xv1ha7bh] {
    font-size: 15px;
    font-weight: 600;
}

.slot-color-green[b-z9xv1ha7bh] { color: #81C784; }
.slot-color-amber[b-z9xv1ha7bh] { color: #FFD54F; }
.slot-color-blue[b-z9xv1ha7bh]  { color: #64B5F6; }
.slot-color-gray[b-z9xv1ha7bh]  { color: #E0E0E0; }

/* ── 콘텐츠 ── */
.setting-content[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px;
}

/* ── 섹션 ── */
.setting-section[b-z9xv1ha7bh] {
    background-color: #5a5a5a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-label[b-z9xv1ha7bh] {
    font-size: 14px;
    font-weight: 600;
    color: #E0E0E0;
}

.section-hint[b-z9xv1ha7bh] {
    font-weight: 400;
    color: #999;
    font-size: 12px;
}

.permission-purpose-text[b-z9xv1ha7bh] {
    margin-top: -6px;
    color: #bdbdbd;
    font-size: 12px;
    line-height: 1.45;
}

/* ─── 이미지 미리보기 영역 ─────────────────────────────────────────────
 * aspect-ratio:1의 정사각형 컨테이너.
 * 영향: MediaSlotSetting.razor의 _isProcessingImage 상태로 스피너/이미지 분기 표시. */
.image-preview-area[b-z9xv1ha7bh] {
    position: relative;
    width: min(100%, 512px);
    aspect-ratio: 1;
    max-width: 512px;
    align-self: center;
    border-radius: 12px;
    overflow: hidden;
    background-color: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-img[b-z9xv1ha7bh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.crop-preview-viewport[b-z9xv1ha7bh] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #262626;
    cursor: grab;
    touch-action: none;
}

.crop-source-img[b-z9xv1ha7bh] {
    position: absolute;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
}

.crop-selection-frame[b-z9xv1ha7bh] {
    position: absolute;
    inset: 0;
    border: 2px solid #facc15;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.75) inset;
    pointer-events: none;
}

.crop-selection-frame[b-z9xv1ha7bh]::before,
.crop-selection-frame[b-z9xv1ha7bh]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(250, 204, 21, 0.55) calc(33.333% - 0.5px), rgba(250, 204, 21, 0.55) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(250, 204, 21, 0.55) calc(66.666% - 0.5px), rgba(250, 204, 21, 0.55) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(250, 204, 21, 0.55) calc(33.333% - 0.5px), rgba(250, 204, 21, 0.55) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(250, 204, 21, 0.55) calc(66.666% - 0.5px), rgba(250, 204, 21, 0.55) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.crop-selection-frame[b-z9xv1ha7bh]::after {
    display: none;
}

.crop-step-overlay[b-z9xv1ha7bh] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    z-index: 2;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(17, 24, 39, 0.78);
    color: #facc15;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.source-preview-viewport[b-z9xv1ha7bh] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

.source-preview-layer[b-z9xv1ha7bh] {
    position: absolute;
    inset: 0;
    transform-origin: center center;
}

.segment-selection-overlay[b-z9xv1ha7bh] {
    pointer-events: none;
    mix-blend-mode: screen;
}

.segment-tap-img[b-z9xv1ha7bh] {
    cursor: crosshair;
}

.tap-hint-overlay[b-z9xv1ha7bh] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    pointer-events: none;
    animation: tapHintFade-b-z9xv1ha7bh 2.6s ease-out 1 forwards;
    z-index: 2;
}

.tap-hint-pulse[b-z9xv1ha7bh] {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 0.25);
    border: 2px solid rgba(250, 204, 21, 0.92);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5);
    animation: tapHintPulse-b-z9xv1ha7bh 1.2s ease-out 2;
}

.tap-hint-pulse[b-z9xv1ha7bh]::after {
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    margin: 17px auto;
    border-radius: 999px;
    background: #facc15;
}

.tap-hint-label[b-z9xv1ha7bh] {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.78);
    color: #fef3c7;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

@keyframes tapHintPulse-b-z9xv1ha7bh {
    0% { transform: scale(0.78); box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.5); }
    65% { transform: scale(1); box-shadow: 0 0 0 18px rgba(250, 204, 21, 0); }
    100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

@keyframes tapHintFade-b-z9xv1ha7bh {
    0%, 72% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

.crop-control-panel[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(250, 204, 21, 0.28);
    border-radius: 12px;
    background: rgba(38, 38, 38, 0.45);
}

.crop-control-hint[b-z9xv1ha7bh] {
    color: #e5e7eb;
    font-size: 12px;
    line-height: 1.45;
}

.crop-drag-label[b-z9xv1ha7bh] {
    color: #fde68a;
    font-size: 12px;
    font-weight: 800;
}

.crop-confirm-btn[b-z9xv1ha7bh] {
    border: 0;
    border-radius: 12px;
    padding: 11px 14px;
    background: #facc15;
    color: #111827;
    font-size: 13px;
    font-weight: 850;
}

.crop-confirm-btn:disabled[b-z9xv1ha7bh] {
    opacity: 0.55;
}

.segment-workflow[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.segment-step[b-z9xv1ha7bh] {
    padding: 9px 11px;
    border-radius: 10px;
    background: #4a4a4a;
    color: #d6d6d6;
    font-size: 12px;
    font-weight: 700;
}

.segment-step.active[b-z9xv1ha7bh] {
    color: #111827;
    background: #facc15;
}

.segment-step.done[b-z9xv1ha7bh] {
    color: #d1fae5;
    background: #166534;
}

.segment-preview-row[b-z9xv1ha7bh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.segment-expand-panel[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
    transform-origin: top center;
    animation: segmentExpandDown-b-z9xv1ha7bh 220ms ease-out 1 both;
}

@keyframes segmentExpandDown-b-z9xv1ha7bh {
    from {
        opacity: 0;
        transform: scaleY(0.94) translateY(-8px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: scaleY(1) translateY(0);
        max-height: 2400px;
    }
}

.segment-option-grid[b-z9xv1ha7bh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 10px;
}

.segment-option-grid.backgrounds[b-z9xv1ha7bh] {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.segment-option[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #6b7280;
    border-radius: 12px;
    background: #666;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.segment-option.image-option[b-z9xv1ha7bh],
.segment-preview-card.image-option[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px;
    min-height: 0;
    overflow: hidden;
}

.segment-option.image-option img[b-z9xv1ha7bh],
.segment-preview-card.image-option img[b-z9xv1ha7bh] {
    width: 100%;
    height: clamp(108px, 18vw, 180px);
    border-radius: 9px;
    object-fit: contain;
    background: repeating-conic-gradient(#3f3f46 0% 25%, #52525b 0% 50%) 50% / 18px 18px;
}

.segment-option.image-option span[b-z9xv1ha7bh],
.segment-preview-card.image-option span[b-z9xv1ha7bh] {
    line-height: 1.2;
}

.segment-preview-card[b-z9xv1ha7bh] {
    border: 1px solid #6b7280;
    border-radius: 12px;
    background: #666;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 750;
}

.segment-inline-processing[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 152px;
    border: 1px solid rgba(174, 227, 255, 0.25);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(30, 42, 53, 0.72) 0%, rgba(42, 58, 74, 0.72) 100%);
    animation: img-processing-pulse-b-z9xv1ha7bh 1.6s ease-in-out infinite;
}

.segment-option.selected[b-z9xv1ha7bh] {
    border-color: #facc15;
    background: #facc15;
    color: #111827;
}

.segment-option-grid.needs-selection .segment-option[b-z9xv1ha7bh] {
    animation: optionSelectCue-b-z9xv1ha7bh 2.4s ease-in-out infinite;
}

.segment-option-grid.needs-selection .segment-option:nth-child(2)[b-z9xv1ha7bh] { animation-delay: 0.12s; }
.segment-option-grid.needs-selection .segment-option:nth-child(3)[b-z9xv1ha7bh] { animation-delay: 0.24s; }
.segment-option-grid.needs-selection .segment-option:nth-child(4)[b-z9xv1ha7bh] { animation-delay: 0.36s; }
.segment-option-grid.needs-selection .segment-option:nth-child(5)[b-z9xv1ha7bh] { animation-delay: 0.48s; }
.segment-option-grid.needs-selection .segment-option:nth-child(6)[b-z9xv1ha7bh] { animation-delay: 0.60s; }
.segment-option-grid.needs-selection .segment-option:nth-child(7)[b-z9xv1ha7bh] { animation-delay: 0.72s; }

@keyframes optionSelectCue-b-z9xv1ha7bh {
    0%, 72%, 100% {
        transform: translateY(0) scale(1);
        border-color: #6b7280;
        box-shadow: none;
    }
    14% {
        transform: translateY(-4px) scale(1.018);
        border-color: #facc15;
        box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.36), 0 10px 18px rgba(0, 0, 0, 0.22);
    }
    28% {
        transform: translateY(0) scale(1);
        border-color: #facc15;
        box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.22);
    }
}

.segment-option:disabled[b-z9xv1ha7bh] {
    opacity: 0.42;
    cursor: not-allowed;
}

.segment-final-note[b-z9xv1ha7bh] {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.16);
    color: #bbf7d0;
    font-size: 12px;
    font-weight: 700;
}

.preview-placeholder[b-z9xv1ha7bh],
.hc-placeholder[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ── 사진 처리 로딩 오버레이 ── */
.img-processing-overlay[b-z9xv1ha7bh] {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(30, 42, 53, 0.72) 0%, rgba(42, 58, 74, 0.72) 100%);
    backdrop-filter: blur(2px);
    animation: img-processing-pulse-b-z9xv1ha7bh 1.6s ease-in-out infinite;
}

.img-processing-icon[b-z9xv1ha7bh] {
    color: #AEE3FF;
    animation: img-processing-rotate-b-z9xv1ha7bh 2s linear infinite;
    opacity: 0.9;
}

.img-processing-label[b-z9xv1ha7bh] {
    font-size: 11px;
    color: #AEE3FF;
    opacity: 0.7;
    letter-spacing: 0.3px;
}

@keyframes img-processing-pulse-b-z9xv1ha7bh {
    0%, 100% { background: linear-gradient(135deg, rgba(30, 42, 53, 0.72) 0%, rgba(42, 58, 74, 0.72) 100%); }
    50%       { background: linear-gradient(135deg, rgba(36, 48, 64, 0.78) 0%, rgba(48, 64, 80, 0.78) 100%); }
}

@keyframes img-processing-rotate-b-z9xv1ha7bh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── 버튼 가로 배치 ── */
.pick-btn-row[b-z9xv1ha7bh] {
    display: flex;
    gap: 8px;
}

.pick-btn-row .pick-btn[b-z9xv1ha7bh] {
    flex: 1;
}

/* ── 파일 선택 버튼 ── */
.pick-btn[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #666;
    border: none;
    border-radius: 10px;
    color: #F0F0F0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    align-self: stretch;
}

.pick-btn:disabled[b-z9xv1ha7bh] {
    opacity: 0.5;
    cursor: default;
}

.pick-btn:not(:disabled):active[b-z9xv1ha7bh] {
    background-color: #777;
}

/* ── 음성 상태 ── */
.voice-status[b-z9xv1ha7bh] {
    font-size: 14px;
}

.voice-set[b-z9xv1ha7bh] {
    color: #7ec8e3;
}

.voice-empty[b-z9xv1ha7bh] {
    color: #999;
}

/* ─── 녹음 인디케이터 ───────────────────────────────────────────────────
 * _isRecording=true일 때 빨간 점(rec-dot)과 경과 시간(rec-time)을 표시.
 * 영향: MediaSlotSetting.razor의 _isRecording, _recordingElapsed 필드. */
.recording-indicator[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rec-dot[b-z9xv1ha7bh] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e74c3c;
    animation: rec-blink-b-z9xv1ha7bh 1s ease-in-out infinite;
}

.rec-time[b-z9xv1ha7bh] {
    color: #FF8A80;
    font-weight: 600;
    font-size: 14px;
}

.rec-stop-btn[b-z9xv1ha7bh] {
    background-color: #c0392b !important;
}

.rec-stop-btn:not(:disabled):active[b-z9xv1ha7bh] {
    background-color: #a93226 !important;
}

@keyframes rec-blink-b-z9xv1ha7bh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── 저장/취소 버튼 ── */
.action-btns[b-z9xv1ha7bh] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.save-btn[b-z9xv1ha7bh] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    background-color: #2980b9;
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.save-btn:disabled[b-z9xv1ha7bh] {
    background-color: #555;
    color: #888;
    cursor: default;
}

.save-btn:not(:disabled):active[b-z9xv1ha7bh] {
    background-color: #2471a3;
}

.cancel-btn[b-z9xv1ha7bh] {
    flex: 0 0 auto;
    padding: 14px 20px;
    background-color: #555;
    border: none;
    border-radius: 12px;
    color: #CCC;
    font-size: 15px;
    cursor: pointer;
}

.cancel-btn:disabled[b-z9xv1ha7bh] {
    opacity: 0.5;
    cursor: default;
}

.cancel-btn:not(:disabled):active[b-z9xv1ha7bh] {
    background-color: #666;
}

/* ── 에러 ── */
.mediaslot-error[b-z9xv1ha7bh] {
    padding: 10px 14px;
    background-color: rgba(192,57,43,0.2);
    border: 1px solid #c0392b;
    border-radius: 8px;
    color: #FF8A80;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ── 로딩 ── */
.mediaslot-loading[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 16px;
    color: #E0E0E0;
    font-size: 14px;
}

/* 로딩 스피너 → app.css .loading-spinner / .loading-spinner-sm 으로 전역 공통화 */

/* ─── 이탈 확인 다이얼로그 ──────────────────────────────────────────────
 * _showLeaveConfirm=true 시 표시. DoLeave(나가기) / _showLeaveConfirm=false(계속 편집).
 * 영향: MediaSlotSetting.razor.cs RequestLeave() */
.leave-confirm-overlay[b-z9xv1ha7bh] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.leave-confirm-dialog[b-z9xv1ha7bh] {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 24px 20px 20px;
    width: min(320px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.leave-confirm-msg[b-z9xv1ha7bh] {
    color: #e0e0e0;
    font-size: 15px;
    text-align: center;
    line-height: 1.6;
    margin: 0;
}

.leave-confirm-btns[b-z9xv1ha7bh] {
    display: flex;
    gap: 10px;
}

.leave-btn-confirm[b-z9xv1ha7bh] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: #e53935;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.leave-btn-cancel[b-z9xv1ha7bh] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #444;
    background: transparent;
    color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
}

/* ─── 카메라 뷰파인더 모달 ──────────────────────────────────────────────
 * _showCamera=true 시 전체화면 오버레이로 표시. video 요소에 스트림 연결.
 * 영향: MediaSlotSetting.razor.cs CaptureImage/TakePhoto/CloseCamera/ToggleCameraFacing */
.camera-modal-overlay[b-z9xv1ha7bh] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.camera-modal[b-z9xv1ha7bh] {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    background: #111;
}

.camera-header[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #1a1a1a;
}

.camera-title[b-z9xv1ha7bh] {
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 600;
}

.camera-close-btn[b-z9xv1ha7bh] {
    background: none;
    border: none;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.camera-close-btn:active[b-z9xv1ha7bh] {
    color: #fff;
}

.camera-preview-area[b-z9xv1ha7bh] {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.camera-preview-area video[b-z9xv1ha7bh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-starting[b-z9xv1ha7bh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #aaa;
    font-size: 14px;
}

.camera-controls[b-z9xv1ha7bh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    background: #1a1a1a;
}

.camera-shutter-btn[b-z9xv1ha7bh] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.camera-shutter-btn:disabled[b-z9xv1ha7bh] {
    opacity: 0.4;
    cursor: default;
}

.camera-shutter-btn:not(:disabled):active .shutter-inner[b-z9xv1ha7bh] {
    transform: scale(0.85);
}

.shutter-inner[b-z9xv1ha7bh] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.1s;
}

.camera-flip-btn[b-z9xv1ha7bh] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.camera-flip-btn:disabled[b-z9xv1ha7bh] {
    opacity: 0.4;
    cursor: default;
}

.camera-flip-btn:not(:disabled):active[b-z9xv1ha7bh] {
    background: rgba(255,255,255,0.3);
}
/* _content/FocusBooksFrontShare/Components/Pages/Music.razor.rz.scp.css */
/* Music.razor.css - 배경음악 선택 페이지 스타일 */

/* ─── 페이지 ──────────────────────────────────────────────────────────── */
.music-page[b-1efa2i4kch] {
    overflow: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
    color: #fff;
}

/* ─── 헤더 ────────────────────────────────────────────────────────────── */
.header[b-1efa2i4kch] {
    background: rgba(26, 26, 46, 0.9);
    backdrop-filter: blur(10px);
}

.header-btn[b-1efa2i4kch] {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.header-btn:hover[b-1efa2i4kch] { background: rgba(255,255,255,0.2); }

/* ─── 상단 패널: 링 + 정보 + 재생 시간 ───────────────────────────────── */
.top-panel[b-1efa2i4kch] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 20px 16px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* 링 + 트랙 이름: 세로 배치 중앙 정렬 */
.top-row[b-1efa2i4kch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* 재생 시간 설정: 아래줄 전체 너비 */
.timer-section[b-1efa2i4kch] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ─── 링 타이머 ─────────────────────────────────────────────────────────
 * SVG 원형 진행 링 + 중앙 시간 표시. 클릭 시 재생/일시정지. */
.ring-wrap[b-1efa2i4kch] {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
}

.ring-svg[b-1efa2i4kch] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ring-bg[b-1efa2i4kch] {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 6;
}

.ring-progress[b-1efa2i4kch] {
    fill: none;
    stroke: rgba(100,180,255,0.75);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s;
}

.ring-progress.playing[b-1efa2i4kch] {
    animation: ring-glow-b-1efa2i4kch 2s ease-in-out infinite;
}

@keyframes ring-glow-b-1efa2i4kch {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(100,180,255,0.2)); }
    50%       { filter: drop-shadow(0 0 6px rgba(100,180,255,0.6)) drop-shadow(0 0 12px rgba(100,180,255,0.3)); }
}

.ring-center[b-1efa2i4kch] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
}

.ring-emoji[b-1efa2i4kch] {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
}

@keyframes emoji-wobble-b-1efa2i4kch {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

.ring-emoji.playing-wobble[b-1efa2i4kch] {
    animation: emoji-wobble-b-1efa2i4kch 1.8s ease-in-out infinite;
}

.ring-time[b-1efa2i4kch] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.9);
    font-variant-numeric: tabular-nums;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ring-time.infinity[b-1efa2i4kch] {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.5);
}

.ring-play-state[b-1efa2i4kch] {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── 트랙 정보 영역 ─────────────────────────────────────────────────── */
.top-info[b-1efa2i4kch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.selected-track[b-1efa2i4kch] { min-width: 0; }

.selected-name[b-1efa2i4kch] {
    font-size: 1.06rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: center;
}

.selected-name.no-track[b-1efa2i4kch] {
    color: rgba(255,255,255,0.3);
    font-weight: 400;
    font-style: italic;
}

.timer-label[b-1efa2i4kch] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
}

.timer-options[b-1efa2i4kch] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.timer-btn[b-1efa2i4kch] {
    padding: 4px 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.timer-btn:hover[b-1efa2i4kch] {
    background: rgba(255,255,255,0.13);
    color: #fff;
}
.timer-btn.active[b-1efa2i4kch] {
    background: rgba(100,180,255,0.2);
    border-color: rgba(100,180,255,0.5);
    color: rgba(100,180,255,1);
    font-weight: 600;
}

.stop-btn[b-1efa2i4kch] {
    padding: 6px 12px;
    width: fit-content;
    background: rgba(255,80,80,0.12);
    border: 1px solid rgba(255,80,80,0.25);
    border-radius: 8px;
    color: rgba(255,120,120,0.9);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.2s;
}
.stop-btn:hover[b-1efa2i4kch] { background: rgba(255,80,80,0.22); }

/* ─── 카테고리 헤더 ──────────────────────────────────────────────────── */
.track-category-header[b-1efa2i4kch] {
    padding: 10px 16px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(100,180,255,0.55);
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.track-category-header:first-child[b-1efa2i4kch] {
    border-top: none;
    margin-top: 0;
}

/* ─── 트랙 목록 ──────────────────────────────────────────────────────── */
.track-list[b-1efa2i4kch] {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 calc(var(--safe-area-inset-bottom, 0px) + 24px);
}

.track-item[b-1efa2i4kch] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.track-item:hover[b-1efa2i4kch] { background: rgba(255,255,255,0.06); }
.track-item:active[b-1efa2i4kch] { background: rgba(255,255,255,0.1); }
.track-item.selected[b-1efa2i4kch] { background: rgba(100,180,255,0.12); }
.track-item.selected:hover[b-1efa2i4kch] { background: rgba(100,180,255,0.18); }

.track-emoji[b-1efa2i4kch] {
    font-size: 1.3rem;
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}

.track-info[b-1efa2i4kch] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.track-name[b-1efa2i4kch] {
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-meta[b-1efa2i4kch] {
    font-size: 0.72rem;
    line-height: 1.25;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-attribution[b-1efa2i4kch] {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-item.selected .track-name[b-1efa2i4kch] {
    color: rgba(100,180,255,1);
    font-weight: 700;
}
.track-item.selected .track-meta[b-1efa2i4kch] { color: rgba(210,230,255,0.78); }
.track-item.selected .track-attribution[b-1efa2i4kch] { color: rgba(100,180,255,0.45); }

.track-check[b-1efa2i4kch] {
    color: rgba(100,180,255,0.9);
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.track-check-placeholder[b-1efa2i4kch] { visibility: hidden; }

@keyframes pulse-playing-b-1efa2i4kch {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.35; }
}
.playing-icon[b-1efa2i4kch] { animation: pulse-playing-b-1efa2i4kch 1s ease-in-out infinite; }

/* ─── 필터 탭 ───────────────────────────────────────────────────────── */
.filter-tabs[b-1efa2i4kch] {
    display: flex;
    gap: 0;
    padding: 8px 16px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.filter-tab[b-1efa2i4kch] {
    padding: 7px 16px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255,255,255,0.4);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: -1px;
}
.filter-tab:hover[b-1efa2i4kch] { color: rgba(255,255,255,0.7); }
.filter-tab.active[b-1efa2i4kch] {
    color: rgba(100,180,255,1);
    border-bottom-color: rgba(100,180,255,0.8);
    font-weight: 600;
}

/* ─── 즐겨찾기 버튼 ──────────────────────────────────────────────────── */
.fav-btn[b-1efa2i4kch] {
    background: transparent;
    border: none;
    font-size: 1rem;
    color: rgba(255,255,255,0.2);
    cursor: pointer;
    padding: 4px 6px;
    width: 28px;
    min-width: 28px;
    flex-shrink: 0;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
}
.fav-btn:hover[b-1efa2i4kch] { color: rgba(255,200,50,0.7); transform: scale(1.2); }
.fav-btn.fav-on[b-1efa2i4kch] { color: rgba(255,200,50,1); }

/* ─── 즐겨찾기 빈 상태 ───────────────────────────────────────────────── */
.empty-favorites[b-1efa2i4kch] {
    padding: 40px 20px;
    text-align: center;
    color: rgba(255,255,255,0.25);
    font-size: 0.85rem;
}

/* ─── 라이선스 안내 ──────────────────────────────────────────────────── */
.license-notice[b-1efa2i4kch] {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.2);
    text-align: center;
    line-height: 1.6;
    padding: 16px;
}
/* _content/FocusBooksFrontShare/Components/Pages/Render.razor.rz.scp.css */
/* Render.razor.css - 전체화면 SVG 렌더링 */

/* ─── 전체화면 렌더링 컨테이너 ─────────────────────────────────────────
 * position:fixed로 화면 전체를 덮고 SVG를 중앙에 배치.
 * 배경색·그림색은 Render.razor에서 GetBgColor()/GetDrawColorStyle()로 인라인 주입. */
.render-container[b-67qsa6688m] {
    /* width/height는 top/left/right/bottom inset으로 대체 — 모바일 100vh 버그 방지 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--svg-color);
    background-color: var(--svg-bg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 1000;
    overflow: hidden;
    touch-action: none;              /* 브라우저 스크롤·줌 제스처 차단 → pointercancel 방지 */
    user-select: none;               /* 텍스트 선택 차단 → OS 롱프레스 타이머 충돌 방지 */
    -webkit-user-select: none;       /* iOS Safari */
    -webkit-touch-callout: none;     /* iOS: 이미지·링크 롱프레스 팝업(공유/복사 메뉴) 차단 */
}

.render-content[b-67qsa6688m] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.render-empty-state[b-67qsa6688m] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.render-content[b-67qsa6688m]  svg {
    /* 가로·세로 중 작은 축 기준으로 맞춰 낮은 화면에서도 넘치지 않게 제한 */
    width: min(90vw, 90dvh);
    height: min(90vw, 90dvh);
    max-width: 90%;
    max-height: 90%;
}

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

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

/* ─── 이미지 전환 효과 ──────────────────────────────────────────────────
 * .render-slide-out: 현재 SVG DOM wrapper 자체를 왼쪽으로 슬라이드 아웃 (0.8s)
 * 새 이미지는 .render-content-next 아래 레이어에 미리 렌더된 채 기존 SVG가 벗겨지며 드러남.
 * SVG를 복제하지 않고 현재 DOM의 회전 transform을 유지해 전환 첫 프레임 flicker를 피한다. */
@keyframes svgSlideOutLeft-b-67qsa6688m {
    from { transform: translateX(0); }
    to   { transform: translateX(-110%); }
}

.render-current-shell[b-67qsa6688m] {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.render-slide-out[b-67qsa6688m] {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translateX(0);
    animation: svgSlideOutLeft-b-67qsa6688m 0.8s ease-in-out forwards;
    /* 그림자 색은 그림자가 드리우는 다음 배경(흰색/검정)에 맞춰 Render.razor.cs 가 인라인 주입한다.
     * 검정 배경에서 검정 그림자는 묻혀 페이지 경계가 사라지므로 밝은 가장자리 광으로 뒤집는다. */
    box-shadow: var(--slide-edge-shadow, 12px 0 24px rgba(0, 0, 0, 0.16));
    pointer-events: none;
}

.render-content-next[b-67qsa6688m] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* ─── 이미지 로테이트 (Render.razor.Rotate.cs) ───────────────────────────
 * 현재 이미지(`.render-content`) 에는 transition + transform: rotate(Xdeg) 를 inline style 로 직접
 * 주입한다. 별도 키프레임 없이 단순 transition 으로 45도씩 회전. transform-origin 기본값(center)을 사용.
 * .render-content 가 뷰포트 전체를 차지하므로 회전 시 박스 모서리가 일부 가려질 수 있으나, SVG 는
 * 90% 이내로 중앙 배치되어 시각적으로는 SVG 만 도는 효과로 보인다. */

/* ─── 컨트롤 바 ─────────────────────────────────────────────────────────
 * 세로(portrait): 상단 중앙 가로 배치. 가로(landscape): 우측 중앙 세로 배치.
 * .hidden 시 opacity:0 + pointer-events:none으로 상호작용 차단. */
/* ─── 컨트롤 바: 항상 상단 중앙 고정 ──────────────────────────────────── */
.control-bar[b-67qsa6688m] {
    position: fixed;
    top: calc(var(--safe-area-inset-top, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    z-index: 100;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.control-bar.hidden[b-67qsa6688m] {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
}

.control-btn[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.control-btn:hover[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.control-btn:active[b-67qsa6688m] {
    transform: scale(0.95);
}

.first-use-guide-target[b-67qsa6688m] {
    position: relative;
    outline: 3px solid rgba(255, 226, 90, 0.98);
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(255, 226, 90, 0.28);
    pointer-events: none;
}

.pause-btn[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.3);
}

.pause-btn:hover[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.45);
}

.stop-btn[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.25);
}

.stop-btn:hover[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.4);
}

.settings-btn:hover[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.45);
}

.cooldown-container[b-67qsa6688m] {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cooldown-svg[b-67qsa6688m] {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cooldown-bg[b-67qsa6688m] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.cooldown-progress[b-67qsa6688m] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.7);
    stroke-width: 3;
    stroke-dasharray: 113.097;
    stroke-dashoffset: 113.097;
    transition: stroke-dashoffset 0.1s linear;
    stroke-linecap: round;
}

/* 로테이트 진행 cooldown 서클 — 안쪽(r=14)에 노란 톤으로 표시. 로테이팅 사이클 진행도 시각화. */
.cooldown-progress-rotate[b-67qsa6688m] {
    stroke: rgba(255, 200, 60, 0.9);
    stroke-dasharray: 87.964;
    stroke-dashoffset: 87.964;
}

.cooldown-text[b-67qsa6688m] {
    position: absolute;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .control-bar[b-67qsa6688m] {
        padding: 10px 16px;
        gap: 12px;
    }

    .control-btn[b-67qsa6688m] {
        width: 36px;
        height: 36px;
    }

    .control-btn svg[b-67qsa6688m] {
        width: 20px;
        height: 20px;
    }

    .cooldown-container[b-67qsa6688m] {
        width: 44px;
        height: 44px;
    }

    .cooldown-text[b-67qsa6688m] {
        font-size: 14px;
    }
}

/* 롱프레스 링은 JS DOM(fbInitLongPress)에서 직접 생성·제거.
 * keyframe(fb-lp-fill)은 App.razor에서 전역 <style>로 주입. */

/* ─── 진입 로딩 오버레이 ─────────────────────────────────────────────────
 * Render 페이지 진입 시 검정 화면을 덮고 로고 애니메이션을 표시.
 * fade-out 클래스 적용 후 0.35s transition 완료 시 _isLoading=false로 DOM에서 제거. */
.render-loading[b-67qsa6688m] {
    position: absolute;
    inset: 0;
    z-index: 100;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.render-loading.fade-out[b-67qsa6688m] {
    opacity: 0;
    pointer-events: none;
}

/* .render-loading-logo, .render-loading-circle, .render-loading-text 및
   @keyframes rl-draw-circle, rl-fade-in-text 는
   CSS isolation 우회를 위해 wwwroot/css/app.css 에 정의됨 */

/* ─── 좌우 가장자리 이전/다음 버튼 ──────────────────────────────────────
 * 항상 표시. 탭으로 이전/다음 전환. 좌우 pulse 애니메이션으로 제스처 안내. */
.nav-edge-btn[b-67qsa6688m] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 80px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 22px;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    z-index: 200;
    padding: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.nav-edge-btn:active[b-67qsa6688m] {
    background: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.95);
}

.nav-edge-btn.hidden[b-67qsa6688m] {
    opacity: 0;
    pointer-events: none;
}

.nav-edge-prev[b-67qsa6688m] { left: 12px; }
.nav-edge-next[b-67qsa6688m] { right: 12px; }

/* ─── 음악 패널 (트랙 선택 바텀 시트) ──────────────────────────────────
 * 반투명 어두운 배경 + 슬라이드업 패널. z-index 500으로 컨트롤 바 위에 표시.
 * 영향: Render.razor의 _showMusicPanel 상태, ControlBar.cs의 패널 메서드. */
.music-panel-backdrop[b-67qsa6688m] {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.45);
}

@keyframes musicPanelSlideUp-b-67qsa6688m {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.music-panel[b-67qsa6688m] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 501;
    max-height: 72%;
    background: rgba(18, 18, 28, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    animation: musicPanelSlideUp-b-67qsa6688m 0.28s ease-out forwards;
    overflow: hidden;
}

.music-panel-header[b-67qsa6688m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.music-panel-title[b-67qsa6688m] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.music-panel-close[b-67qsa6688m] {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

/* 현재 재생 트랙 행 */
.music-panel-now[b-67qsa6688m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.music-panel-now-emoji[b-67qsa6688m] { font-size: 1.2rem; }

.music-panel-now-name[b-67qsa6688m] {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-panel-pause-btn[b-67qsa6688m],
.music-panel-stop-btn[b-67qsa6688m] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s;
}

.music-panel-pause-btn[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.music-panel-stop-btn[b-67qsa6688m] {
    background: rgba(255, 70, 70, 0.28);
    color: #ff6b6b;
}

.music-panel-pause-btn:active[b-67qsa6688m],
.music-panel-stop-btn:active[b-67qsa6688m] { opacity: 0.65; }

/* 트랙 목록 */
.music-panel-list[b-67qsa6688m] {
    overflow-y: auto;
    flex: 1;
    padding-bottom: calc(var(--safe-area-inset-bottom, 0px) + 12px);
}

.music-panel-cat[b-67qsa6688m] {
    padding: 8px 20px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.38);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.music-panel-track[b-67qsa6688m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.15s;
}

.music-panel-track:active[b-67qsa6688m] {
    background: rgba(255, 255, 255, 0.08);
}

.music-panel-track.active[b-67qsa6688m] {
    background: rgba(100, 180, 255, 0.14);
}

.music-panel-track-emoji[b-67qsa6688m] { font-size: 1.1rem; flex-shrink: 0; }

.music-panel-track-info[b-67qsa6688m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.music-panel-track-name[b-67qsa6688m] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-panel-track-meta[b-67qsa6688m] {
    font-size: 0.7rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.56);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-panel-track-credit[b-67qsa6688m] {
    font-size: 0.62rem;
    line-height: 1.25;
    color: rgba(100, 180, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-panel-track.active .music-panel-track-name[b-67qsa6688m] {
    color: #64b4ff;
    font-weight: 600;
}

.music-panel-playing[b-67qsa6688m] {
    width: 18px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64b4ff;
    opacity: 0.8;
}

.music-panel-playing-placeholder[b-67qsa6688m] { visibility: hidden; }
/* _content/FocusBooksFrontShare/Components/Pages/RenderProfile.razor.rz.scp.css */
/*
 * RenderProfile.razor.css - 구성 페이지 스타일
 * 모던 카드 기반 UI, 라운드 디자인.
 * 테마 색상은 CSS 변수로 MainLayout에서 AppColors를 통해 주입된다.
 */

/* ===== 페이지 레이아웃 ===== */

.setting-page[b-s1ftp20f5u] {
    background-color: var(--setting-page-bg, #fafafa);
    overflow: hidden;
}

/* ===== 상단 헤더 ===== */
/* position:fixed(.setting-page) + overflow:hidden 구조에서 flex 첫 번째 자식으로 상단 고정됨.
   sticky는 의미없으므로 제거. */

.header[b-s1ftp20f5u] {
    justify-content: space-between;
    z-index: 100;
}

/* ===== 스크롤 콘텐츠 ===== */

/* .content 레이아웃은 sub-content로 공통화됨 */

/* ===== 섹션 공통 ===== */

.section[b-s1ftp20f5u] {
    background: var(--card-bg, #ffffff);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.first-use-guide-target[b-s1ftp20f5u] {
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--accent, #4a4a4a), 0 0 0 7px rgba(255, 255, 255, 0.86);
    pointer-events: none;
}

#first-media-slot-guide-images[b-s1ftp20f5u],
#first-media-slot-guide-touch-ball[b-s1ftp20f5u],
#first-media-slot-guide-media-ball[b-s1ftp20f5u] {
    scroll-margin-block: 100px;
}

.section-title[b-s1ftp20f5u] {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #333);
    margin: 0 0 12px 0;
}

.section-divider[b-s1ftp20f5u] {
    height: 1px;
    background: var(--border-color, #e8e8e8);
    margin: 12px 0;
}

/* ===== 단계별 프리셋 패널 (sticky) ===== */

.preset-panel[b-s1ftp20f5u] {
    background: var(--setting-page-bg, #fafafa);
    padding: 10px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.preset-row[b-s1ftp20f5u] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.reset-btn[b-s1ftp20f5u] {
    padding: 10px 10px;
    background: transparent;
    color: var(--text-secondary, #888);
    border: 2px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.reset-btn:hover[b-s1ftp20f5u] {
    background: var(--accent-light, #f0f0f0);
    color: var(--text-primary, #333);
    border-color: var(--accent, #4a4a4a);
}

.preset-btn[b-s1ftp20f5u] {
    flex: 1;
    padding: 10px 0;
    border: 2px solid var(--preset-border, #e0e0e0);
    border-radius: 12px;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #333);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover[b-s1ftp20f5u] {
    border-color: var(--accent, #4a4a4a);
    background: var(--accent-light, #f0f0f0);
}

.preset-active[b-s1ftp20f5u] {
    background: var(--accent, #4a4a4a) !important;
    border-color: var(--accent, #4a4a4a) !important;
    color: #fff !important;
}

/* ===== 바로 실행하기 버튼 ===== */

/* 네모 → 세모 모핑 애니메이션 */
@keyframes square-to-play-b-s1ftp20f5u {
    0%   { d: path("M 4,4 C 4,4 20,4 20,4 C 20,4 20,20 20,20 C 20,20 4,20 4,20 C 4,20 4,4 4,4 Z"); }
    100% { d: path("M 8,5 C 14,8.5 20,12 20,12 C 14,15.5 8,19 8,19 C 8,19 8,12 8,12 C 8,12 8,5 8,5 Z"); }
}

.morph-path[b-s1ftp20f5u] {
    animation: square-to-play-b-s1ftp20f5u 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 0.4s both;
}

.start-render-btn[b-s1ftp20f5u] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    background: var(--accent, #4a4a4a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 2px 8px rgba(74, 74, 74, 0.25);
}

.start-render-btn:hover[b-s1ftp20f5u] {
    background: var(--accent-dark, #3a3a3a);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(74, 74, 74, 0.35);
}

.start-render-btn:active[b-s1ftp20f5u] {
    transform: translateY(0);
}

/* ===== 이미지 교체 간격 슬라이더 한 행 ===== */

.speed-row-container[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--setting-page-bg, #fafafa);
    border-radius: 10px;
    margin-bottom: 6px;
}

.speed-label[b-s1ftp20f5u] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    white-space: nowrap;
    flex-shrink: 0;
}

.speed-slider[b-s1ftp20f5u] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background: var(--preset-border, #e0e0e0);
    outline: none;
    min-width: 0;
}

.speed-slider[b-s1ftp20f5u]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #4a4a4a);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.speed-slider[b-s1ftp20f5u]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent, #4a4a4a);
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.speed-value[b-s1ftp20f5u] {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent, #4a4a4a);
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
    flex-shrink: 0;
}

/* ─── 이중 구간 슬라이더 (이미지 교체 간격) ─────────────────────────────
 * 왼쪽 절반(1초~60초): 얇은 트랙 / 오른쪽 절반(1분~10분): 두꺼운 트랙
 * 네이티브 트랙을 투명하게 하고 .dual-speed-track 배경 레이어로 구간 표현 */

.dual-speed-slider-wrap[b-s1ftp20f5u] {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 24px;
}

.dual-speed-track[b-s1ftp20f5u] {
    position: absolute;
    left: 9px;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    pointer-events: none;
    align-items: center;
}

.dual-track-left[b-s1ftp20f5u] {
    flex: 1;
    height: 4px;
    background: var(--preset-border, #e0e0e0);
    border-radius: 3px 0 0 3px;
}

.dual-track-right[b-s1ftp20f5u] {
    flex: 1;
    height: 9px;
    background: var(--preset-border, #e0e0e0);
    border-radius: 0 3px 3px 0;
    opacity: 0.85;
}

.dual-speed-input[b-s1ftp20f5u] {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 20px;
    background: transparent;
    margin: 0;
}

.dual-speed-input[b-s1ftp20f5u]::-webkit-slider-runnable-track {
    background: transparent;
    height: 9px;
}

/* webkit: 18px thumb을 9px 트랙 중앙에 맞추기 위한 offset */
.dual-speed-input[b-s1ftp20f5u]::-webkit-slider-thumb {
    margin-top: -4.5px;
}

.dual-speed-input[b-s1ftp20f5u]::-moz-range-track {
    background: transparent;
    height: 9px;
}

/* ─── CSS 슬라이딩 스위치 ──────────────────────────────────────────────
 * checkbox를 숨기고 .switch-track과 ::after pseudo-element로 iOS 스타일 토글 구현.
 * checked 시 배경을 --accent 색상으로 전환하고 ::after를 우측으로 이동. */

.switch-label[b-s1ftp20f5u] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

.switch-label input[type="checkbox"][b-s1ftp20f5u] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track[b-s1ftp20f5u] {
    display: block;
    width: 40px;
    height: 22px;
    background: #ccc;
    border-radius: 11px;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}

.switch-track[b-s1ftp20f5u]::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: left 0.25s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.switch-label input:checked + .switch-track[b-s1ftp20f5u] {
    background: var(--accent, #4a4a4a);
}

.switch-label input:checked + .switch-track[b-s1ftp20f5u]::after {
    left: 20px;
}

/* ===== 토글 행 (AutoColorShift, TouchBall) ===== */

.toggle-row[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.toggle-row-info[b-s1ftp20f5u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.toggle-row-label[b-s1ftp20f5u] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #333);
}

.toggle-row-desc[b-s1ftp20f5u] {
    font-size: 11px;
    color: var(--text-secondary, #aaa);
}

.toggle-row-disabled[b-s1ftp20f5u] {
    opacity: 0.45;
    pointer-events: none;
}

.media-ball-slot-status[b-s1ftp20f5u] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.media-ball-slot-count[b-s1ftp20f5u],
.media-ball-slot-empty[b-s1ftp20f5u] {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}

.media-ball-slot-empty[b-s1ftp20f5u] {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

.media-ball-settings-btn[b-s1ftp20f5u] {
    width: 100%;
    padding: 10px;
    background: var(--accent, #4a4a4a);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.media-ball-settings-btn:active[b-s1ftp20f5u] {
    opacity: 0.75;
}

/* ===== 색상 설정 ===== */

.color-group-header[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.color-group-label[b-s1ftp20f5u] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #888);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 그림색 N/6 배지 */
.color-count-badge[b-s1ftp20f5u] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    background: var(--setting-page-bg, #f0f0f0);
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

/* 색상 개수 +/- 버튼 그룹 */
.color-count-controls[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 아이콘 버튼 (균일 정사각형) */
.icon-btn[b-s1ftp20f5u] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    line-height: 1;
}

.icon-btn-add[b-s1ftp20f5u] {
    background: var(--accent, #4a4a4a);
    color: #fff;
    box-shadow: 0 1px 3px rgba(74, 74, 74, 0.3);
}

.icon-btn-add:hover:not(:disabled)[b-s1ftp20f5u] {
    background: var(--accent-dark, #3a3a3a);
}

.icon-btn-remove[b-s1ftp20f5u] {
    background: var(--extra-remove-bg, #f0e0e0);
    color: var(--extra-remove, #cc4444);
}

.icon-btn-remove:hover:not(:disabled)[b-s1ftp20f5u] {
    background: #e8d0d0;
}

.icon-btn:disabled[b-s1ftp20f5u] {
    opacity: 0.3;
    cursor: not-allowed;
}

.color-card[b-s1ftp20f5u] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.color-row[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 색상 번호 배지 */
.color-index[b-s1ftp20f5u] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--preset-border, #e8e8e8);
    color: var(--text-secondary, #888);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-picker-wrap[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.color-picker[b-s1ftp20f5u] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--preset-border, #e0e0e0);
    border-radius: 10px;
    padding: 2px;
    cursor: pointer;
    background: var(--card-bg, #fff);
    flex-shrink: 0;
}

.color-picker[b-s1ftp20f5u]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker[b-s1ftp20f5u]::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-hex[b-s1ftp20f5u] {
    font-size: 12px;
    font-family: monospace;
    color: var(--text-secondary, #888);
    min-width: 64px;
}

/* ─── 이미지 선택 그리드 ────────────────────────────────────────────────
 * auto-fill + minmax(88px, 1fr)로 반응형 그리드. 선택된 카드는 accent 색상 테두리+배경.
 * 영향: RenderProfile.razor의 ToggleImageSelection(), svg-card-selected 클래스. */

.svg-folder-group[b-s1ftp20f5u] {
    margin-bottom: 14px;
}

.svg-folder-group:last-child[b-s1ftp20f5u] {
    margin-bottom: 0;
}

.svg-folder-header[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color, #ececec);
}

/* 폴더 왼쪽 (chevron + 이름) */
.folder-left[b-s1ftp20f5u] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.svg-folder-label[b-s1ftp20f5u] {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #333);
}

/* 폴더 펼치기 chevron 버튼 */
.folder-toggle-btn[b-s1ftp20f5u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--text-secondary, #aaa);
    border-radius: 4px;
    transition: color 0.2s, transform 0.25s;
    flex-shrink: 0;
}

.folder-toggle-btn.expanded[b-s1ftp20f5u] {
    transform: rotate(180deg);
    color: var(--accent, #4a4a4a);
}

.folder-toggle-btn:hover[b-s1ftp20f5u] {
    color: var(--accent, #4a4a4a);
    background: var(--accent-light, #f0f0f0);
}

/* 전체선택 레이블 (pill 스타일) */
.folder-select-label[b-s1ftp20f5u] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #aaa);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.folder-select-label input[type="checkbox"][b-s1ftp20f5u] {
    width: 13px;
    height: 13px;
    cursor: pointer;
    accent-color: var(--accent, #4a4a4a);
    flex-shrink: 0;
}

.folder-select-label.all-selected[b-s1ftp20f5u] {
    border-color: var(--accent, #4a4a4a);
    background: var(--accent, #4a4a4a);
    color: #fff;
}

.folder-select-label.partial[b-s1ftp20f5u] {
    border-color: var(--accent, #4a4a4a);
    color: var(--accent, #4a4a4a);
}

/* SVG 그리드 */
.svg-grid[b-s1ftp20f5u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.svg-card[b-s1ftp20f5u] {
    --render-image-card-outline-width: 1.5px;
    position: relative;
    background: var(--svg-card-bg, #fafafa);
    border: var(--render-image-card-outline-width) solid var(--svg-card-border, #e0e0e0);
    border-radius: 12px;
    padding: 7px;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    gap: 4px;
    transition: background-color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
    aspect-ratio: 1;
}

.svg-card:hover[b-s1ftp20f5u] {
    border-color: var(--accent, #4a4a4a);
    transform: scale(1.03);
}

.svg-card-selected[b-s1ftp20f5u] {
    border-color: var(--accent, #4a4a4a) !important;
    background: var(--accent-light, #f0f0f0) !important;
    box-shadow: 0 0 0 var(--render-image-card-outline-width) var(--accent, #4a4a4a);
}

.svg-card:focus-visible[b-s1ftp20f5u] {
    outline: 2px solid var(--accent, #4a4a4a);
    outline-offset: 3px;
}

.svg-check[b-s1ftp20f5u] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--accent, #4a4a4a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.svg-card-content[b-s1ftp20f5u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    /* 배경색은 inline style(GetBgColor(0))로 주입 — 미리보기 색상 순환에 영향받지 않는 고정값 */
}

.svg-card-content[b-s1ftp20f5u]  svg {
    width: 80%;
    height: 80%;
    /* fill/stroke 색상은 부모 svg-card-content의 inline style(GetDrawColorStyle(0))에서 상속 */
}

.media-slot-picker-content .album-mediaslot-img[b-s1ftp20f5u] {
    position: static;
}

.svg-card-caption[b-s1ftp20f5u] {
    font-size: 10px;
    color: var(--text-secondary, #aaa);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    line-height: 1.2;
}

/* ===== 2열 반응형 레이아웃 ===== */

.two-col[b-s1ftp20f5u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.col-preview[b-s1ftp20f5u],
.col-settings[b-s1ftp20f5u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 700px) {
    .two-col[b-s1ftp20f5u] {
        flex-direction: row;
        align-items: flex-start;
    }

    .col-preview[b-s1ftp20f5u] {
        flex: 0 0 46%;
        max-width: 46%;
        position: sticky;
        top: 16px;
        aspect-ratio: 3 / 4;
        /* 자연 위치(스티키 미발동)일 때도 버튼이 뷰포트 안에 들어오도록 제한.
           헤더(56px) + sub-content 패딩(16px) + 프리셋 섹션(~112px) + 간격(16px) ≈ 200px */
        max-height: calc(100vh - 220px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--card-bg, #ffffff);
        border-radius: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        padding: 12px;
    }

    .col-preview .section[b-s1ftp20f5u] {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .col-preview .album-carousel[b-s1ftp20f5u] {
        /* (100vh - 344px) = max-height(100vh-220px) - 내부 오버헤드(패딩24+타이틀26+인디케이터19+버튼55=124px) */
        --album-card-width: clamp(118px, min(21vw, calc((100vh - 344px) / 1.16)), 300px);
        flex: 1;
        height: auto;
        min-height: 0;
    }

    /* 캐러셀 외 고정 요소는 축소 금지 — 버튼이 overflow: hidden에 잘리지 않도록 보장 */
    .col-preview .section-title[b-s1ftp20f5u],
    .col-preview .album-indicator[b-s1ftp20f5u],
    .col-preview .start-render-container[b-s1ftp20f5u] {
        flex-shrink: 0;
    }

    .col-settings[b-s1ftp20f5u] {
        flex: 1;
        min-width: 0;
    }
}

/* ─── 앨범자켓 캐러셀 ──────────────────────────────────────────────────
 * 액티브 카드 중앙 고정, 양옆 카드는 크기·투명도로 원근감 표현.
 * 터치 스와이프로 currentIndex 변경 시 CSS transition으로 애니메이션.
 * 영향: RenderProfile.razor의 OnAlbumTouchStart/End, GetAlbumPosClass(). */

.album-carousel[b-s1ftp20f5u] {
    --album-card-width: clamp(118px, 24vw, 176px);
    --album-card-height: calc(var(--album-card-width) * 1.16);
    --album-step-1: calc(var(--album-card-width) * 0.68);
    --album-step-2: calc(var(--album-card-width) * 1.12);
    --album-step-3: calc(var(--album-card-width) * 1.44);
    --album-step-4: calc(var(--album-card-width) * 1.82);
    position: relative;
    height: clamp(180px, calc(var(--album-card-height) + 60px), 300px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: pan-y;
    margin-bottom: 6px;
}

.album-jacket[b-s1ftp20f5u] {
    position: absolute;
    width: var(--album-card-width);
    height: var(--album-card-height);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
                opacity 0.22s ease,
                box-shadow 0.22s ease;
    will-change: transform, opacity;
}

/* ── 위치별 카드 스타일 ── */

.album-center[b-s1ftp20f5u] {
    transform: translateX(0) scale(1);
    z-index: 5;
}

.album-right-1[b-s1ftp20f5u] {
    transform: translateX(var(--album-step-1)) scale(0.76);
    z-index: 4;
}

.album-left-1[b-s1ftp20f5u] {
    transform: translateX(calc(var(--album-step-1) * -1)) scale(0.76);
    z-index: 4;
}

.album-right-2[b-s1ftp20f5u] {
    transform: translateX(var(--album-step-2)) scale(0.60);
    z-index: 3;
}

.album-left-2[b-s1ftp20f5u] {
    transform: translateX(calc(var(--album-step-2) * -1)) scale(0.60);
    z-index: 3;
}

.album-right-3[b-s1ftp20f5u] {
    transform: translateX(var(--album-step-3)) scale(0.46);
    z-index: 2;
}

.album-left-3[b-s1ftp20f5u] {
    transform: translateX(calc(var(--album-step-3) * -1)) scale(0.46);
    z-index: 2;
}

/* ±4: DOM에 유지하되 화면 밖에 숨김 — CSS transition 연속성 보장 */
.album-far-right[b-s1ftp20f5u] {
    transform: translateX(var(--album-step-4)) scale(0.32);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.album-far-left[b-s1ftp20f5u] {
    transform: translateX(calc(var(--album-step-4) * -1)) scale(0.32);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.album-mediaslot-img[b-s1ftp20f5u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    inset: 0;
}

.album-svg-wrap[b-s1ftp20f5u] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 14px 6px;
}

.album-svg-wrap[b-s1ftp20f5u]  svg {
    width: 76%;
    height: 76%;
    fill: var(--draw-color-0, #000);
    color: var(--draw-color-0, #000);
}

/* 페이지 인디케이터 */
.album-indicator[b-s1ftp20f5u] {
    text-align: center;
    margin-bottom: 4px;
}

.album-indicator-text[b-s1ftp20f5u] {
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    font-weight: 600;
    letter-spacing: 0.5px;
}
/* _content/FocusBooksFrontShare/Components/Shared/ConfirmModal.razor.rz.scp.css */
/* ConfirmModal.razor.css - 공용 확인 모달 스타일 */

/* sub-dialog 기반 위에 버튼 색상만 추가 정의 */

.confirm-modal-cancel[b-0g5q6en3v7] {
    background: #f5f5f5;
    color: #555;
    border: 1px solid #ddd;
}

.confirm-modal-ok[b-0g5q6en3v7] {
    background: #4a4a4a;
    color: #fff;
}

.confirm-modal-ok.danger[b-0g5q6en3v7] {
    background: #e53935;
    color: #fff;
}

.confirm-modal-dialog .sub-dialog-btn[b-0g5q6en3v7] {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 360px) {
    .confirm-modal-dialog .sub-dialog-btns[b-0g5q6en3v7] {
        flex-direction: column;
    }

    .confirm-modal-dialog .sub-dialog-btn[b-0g5q6en3v7] {
        box-sizing: border-box;
        width: 100%;
    }
}
/* _content/FocusBooksFrontShare/Components/Shared/CouponIssueModal.razor.rz.scp.css */
/*
기능: 쿠폰 발급 모달 전용 스타일.
영향: MediaSlot에서 분리된 발급 팝업이 CSS isolation 안에서도 기존 UI를 유지한다.
참조: CouponIssueModal.razor, MediaSlot.razor.css
*/

.slot-coupon-issue-modal[b-da8zwl7whd] {
    display: flex;
    flex-direction: column;
    width: min(92vw, 420px);
    max-height: min(86vh, 720px);
    padding: 18px;
    overflow-y: auto;
}

.slot-coupon-modal-header[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.slot-coupon-modal-title[b-da8zwl7whd] {
    margin: 0;
    text-align: left;
}

/* 제목 오른쪽 ? 버튼: 눌러야 안내 영역이 펼쳐진다. */
.slot-coupon-help-toggle[b-da8zwl7whd] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #a5d6a7;
    border-radius: 50%;
    background: #e8f5e9;
    color: var(--coupon-modal-accent);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.slot-coupon-help-toggle.paid[b-da8zwl7whd] {
    border-color: #ffe082;
    background: #fff8e1;
}

.slot-coupon-modal-title.issue[b-da8zwl7whd] {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--coupon-modal-accent);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 850;
}

/* 무료/유료 강조색 단일 정의. 등록 모달과 같은 값을 쓴다. */
.slot-coupon-accent-header[b-da8zwl7whd] {
    --coupon-modal-accent: #2e7d32;
    align-items: center;
}

.slot-coupon-accent-header.paid[b-da8zwl7whd] {
    --coupon-modal-accent: #b26a00;
}

.coupon-issue-summary[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    background: #f8fafc;
}

.issue-badge[b-da8zwl7whd] {
    flex-shrink: 0;
    padding: 4px 10px;
}

.issue-badge.disabled[b-da8zwl7whd] {
    color: #bbb;
    border-color: #eee;
}

.coupon-issue-rule[b-da8zwl7whd] {
    min-width: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.35;
    word-break: keep-all;
}

.coupon-issue-rules[b-da8zwl7whd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.coupon-issue-benefit[b-da8zwl7whd] {
    color: #16833a;
    font-weight: 800;
}

.coupon-paid-refund-warning[b-da8zwl7whd] {
    margin-bottom: 8px;
    padding: 10px 12px;
    border: 1px solid #f5b8b8;
    border-radius: 12px;
    background: #fff1f1;
    color: #a61b1b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.45;
    word-break: keep-all;
}

.slot-coupon-issue-primary[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);
}

.slot-coupon-issue-primary.free[b-da8zwl7whd] { background: linear-gradient(135deg, #22c55e, #15803d); }
.slot-coupon-issue-primary.paid[b-da8zwl7whd] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.slot-coupon-issue-primary:disabled[b-da8zwl7whd] { background: #cbd5e1; color: #64748b; cursor: default; box-shadow: none; }
.slot-coupon-issue-primary.free:not(:disabled):active[b-da8zwl7whd] { background: #15803d; }
.slot-coupon-issue-primary.paid:not(:disabled):active[b-da8zwl7whd] { background: #d97706; }

.slot-coupon-help-grid[b-da8zwl7whd] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 0 0 8px;
}

/* 무료는 초록 계열, 유료는 앰버 계열로 만들기 종류를 구분한다. */
.slot-coupon-help-card[b-da8zwl7whd] {
    padding: 11px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.slot-coupon-help-card.paid[b-da8zwl7whd] {
    border-color: #fde68a;
    background: #fffbeb;
}

.slot-coupon-help-card p[b-da8zwl7whd] {
    margin: 0 0 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.4;
    word-break: keep-all;
}

.slot-coupon-help-card p:last-child[b-da8zwl7whd] { margin-bottom: 0; }

/* 토글+목록 묶음. 내부에는 gap 을 두지 않아 목록이 토글에 그대로 붙는다. */
.issued-coupon-section[b-da8zwl7whd] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.issued-coupon-toggle[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #efefef;
    border-radius: 8px;
    background: #f9f9f9;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.issued-coupon-toggle > span:first-child[b-da8zwl7whd] { flex: 1; }
.issued-coupon-toggle:active[b-da8zwl7whd] { background: #efefef; }

.chevron[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    color: #aaa;
    transition: transform 0.2s;
}

.chevron.open[b-da8zwl7whd] { transform: rotate(180deg); }

/* 목록이 길어져도 모달 높이를 밀지 않도록 자체 스크롤 영역으로 둔다. */
.issued-coupon-list[b-da8zwl7whd] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 168px;
    margin: -1px 0 0;
    border: 1px solid #f0f0f0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
    background: #f0f0f0;
}

/* 강조색 변수는 헤더 스코프라 여기선 닿지 않는다. 무료·유료 공통 중립색을 쓴다. */
.issued-coupon-list:focus-visible[b-da8zwl7whd] {
    outline: 2px solid #475569;
    outline-offset: -2px;
}

.issued-coupon-toggle:has(+ .issued-coupon-list)[b-da8zwl7whd] {
    border-radius: 8px 8px 0 0;
}

.issued-coupon-empty[b-da8zwl7whd],
.issued-coupon-item[b-da8zwl7whd] {
    background: #fff;
    padding: 10px 12px;
}

.issued-coupon-empty[b-da8zwl7whd] {
    color: #aaa;
    font-size: 12px;
    text-align: center;
}

.issued-coupon-item[b-da8zwl7whd] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.coupon-code[b-da8zwl7whd] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: #333;
    font-size: 12px;
    font-family: monospace;
    font-weight: 500;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.not-registered[b-da8zwl7whd] {
    color: #aaa;
    font-size: 12px;
    white-space: nowrap;
}

.coupon-copy-btn[b-da8zwl7whd] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 7px;
    background: #fff;
    color: #999;
    cursor: pointer;
}

.coupon-copy-btn:active[b-da8zwl7whd] { background: #f5f5f5; color: #444; }
.coupon-copy-btn.copied[b-da8zwl7whd] { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }

.slot-coupon-feedback[b-da8zwl7whd] {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    word-break: keep-all;
}

.slot-coupon-feedback.error[b-da8zwl7whd] {
    border: 1px solid #ffcdd2;
    background: #ffebee;
    color: #c62828;
}

.slot-coupon-feedback.success[b-da8zwl7whd] {
    border: 1px solid #a5d6a7;
    background: #e8f5e9;
    color: #2e7d32;
}

.slot-coupon-cancel[b-da8zwl7whd] {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background-color: #555;
    color: #ccc;
    font-size: 15px;
}

.slot-coupon-cancel:not(:disabled):active[b-da8zwl7whd] { background-color: #666; }
/* _content/FocusBooksFrontShare/Components/Shared/CouponRegisterModal.razor.rz.scp.css */
/*
기능: 쿠폰 등록 모달 전용 스타일.
영향: MediaSlot에서 분리된 등록 팝업이 CSS isolation 안에서도 기존 카드형 UI를 유지한다.
참조: CouponRegisterModal.razor, MediaSlot.razor.css
*/

.slot-coupon-register-modal[b-em74dzr08h] {
    width: min(92vw, 420px);
    max-height: min(86vh, 720px);
    padding: 18px;
    overflow-y: auto;
}

.slot-coupon-modal-header[b-em74dzr08h] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
}

.slot-coupon-modal-title[b-em74dzr08h] {
    margin: 0;
    text-align: left;
}

/* 제목 오른쪽 ? 버튼: 눌러야 안내 영역이 펼쳐진다. */
.slot-coupon-help-toggle[b-em74dzr08h] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid #a5d6a7;
    border-radius: 50%;
    background: #e8f5e9;
    color: var(--coupon-modal-accent);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.slot-coupon-help-toggle.paid[b-em74dzr08h] {
    border-color: #ffe082;
    background: #fff8e1;
}

.slot-coupon-modal-title.register[b-em74dzr08h] {
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--coupon-modal-accent);
    font-size: 20px;
    line-height: 1.15;
    font-weight: 850;
}

/* 무료/유료 강조색 단일 정의. 제목과 ? 버튼이 이 값을 상속한다. */
.slot-coupon-accent-header[b-em74dzr08h] {
    --coupon-modal-accent: #2e7d32;
    align-items: center;
}

.slot-coupon-accent-header.paid[b-em74dzr08h] {
    --coupon-modal-accent: #b26a00;
}

.slot-coupon-code-row[b-em74dzr08h] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #edf0f3;
    border-radius: 16px;
    background: #f8fafc;
}

.slot-coupon-code-input[b-em74dzr08h] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #1a1a1a;
    font-size: 14px;
    font-family: inherit;
    outline: none;
}

.slot-coupon-code-input[b-em74dzr08h]::placeholder { color: #aaa; }
.slot-coupon-code-input:focus[b-em74dzr08h] { border-color: #9ca3af; background: #fff; }

.slot-coupon-register-btn[b-em74dzr08h] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.slot-coupon-register-btn:disabled[b-em74dzr08h] { background: #cbd5e1; color: #64748b; cursor: default; }
.slot-coupon-register-btn:not(:disabled):active[b-em74dzr08h] { background: #1d4ed8; }

.slot-coupon-flow-note[b-em74dzr08h] {
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.slot-coupon-flow-note.paid[b-em74dzr08h] {
    border-color: #fed7aa;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.slot-coupon-flow-note p[b-em74dzr08h] {
    margin: 0;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
    word-break: keep-all;
}

/* 토글+목록 묶음. 내부에는 gap 을 두지 않아 목록이 토글에 그대로 붙는다. */
.registered-coupon-section[b-em74dzr08h] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.registered-coupon-toggle[b-em74dzr08h] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #efefef;
    border-radius: 8px;
    background: #f9f9f9;
    color: #444;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.registered-coupon-toggle > span:first-child[b-em74dzr08h] { flex: 1; }
.registered-coupon-toggle:active[b-em74dzr08h] { background: #efefef; }

.chevron[b-em74dzr08h] {
    display: flex;
    align-items: center;
    color: #aaa;
    transition: transform 0.2s;
}

.chevron.open[b-em74dzr08h] { transform: rotate(180deg); }

/* 목록이 길어져도 모달 높이를 밀지 않도록 자체 스크롤 영역으로 둔다. */
.registered-coupon-list[b-em74dzr08h] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 168px;
    margin: -1px 0 0;
    border: 1px solid #f0f0f0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow-y: auto;
    background: #f0f0f0;
}

/* 강조색 변수는 헤더 스코프라 여기선 닿지 않는다. 무료·유료 공통 중립색을 쓴다. */
.registered-coupon-list:focus-visible[b-em74dzr08h] {
    outline: 2px solid #475569;
    outline-offset: -2px;
}

.registered-coupon-toggle:has(+ .registered-coupon-list)[b-em74dzr08h] {
    border-radius: 8px 8px 0 0;
}

.registered-coupon-empty[b-em74dzr08h],
.registered-coupon-item[b-em74dzr08h] {
    background: #fff;
    padding: 10px 12px;
}

.registered-coupon-empty[b-em74dzr08h] {
    color: #aaa;
    font-size: 12px;
    text-align: center;
}

.registered-coupon-item[b-em74dzr08h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.coupon-code[b-em74dzr08h] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    color: #333;
    font-size: 12px;
    font-family: monospace;
    font-weight: 650;
    letter-spacing: 0.05em;
    white-space: nowrap;
    text-overflow: clip;
}

.registered-coupon-meta[b-em74dzr08h] {
    flex: 0 0 auto;
    max-width: 48%;
    overflow: hidden;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ad-coupon-preview[b-em74dzr08h] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #f8f9fa;
}

.ad-coupon-row[b-em74dzr08h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 2px;
    border-bottom: 1px dashed #ececec;
}

.ad-coupon-row:last-child[b-em74dzr08h] { border-bottom: none; }

.ad-coupon-label[b-em74dzr08h] {
    color: #888;
    font-size: 12px;
    font-weight: 600;
}

.ad-coupon-value[b-em74dzr08h] {
    color: #222;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.ad-coupon-value.coupon-code[b-em74dzr08h] { flex: initial; }

.type-badge.paid[b-em74dzr08h] {
    border: 1px solid #ffe082;
    background: #fff8e1;
    color: #f57f17;
}

.type-badge.free[b-em74dzr08h] {
    border: 1px solid #a5d6a7;
    background: #e8f5e9;
    color: #2e7d32;
}

.slot-coupon-ad-notice[b-em74dzr08h] {
    margin: 6px 2px 0;
    color: #4b5563;
    font-size: 11px;
    line-height: 1.4;
    word-break: keep-all;
}

.slot-coupon-ad-error[b-em74dzr08h] {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ffe0b2;
    background: #fff3e0;
    color: #ef6c00;
    font-size: 12px;
    text-align: center;
}

.slot-coupon-ad-loading[b-em74dzr08h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px 0;
    color: #666;
    font-size: 13px;
}

.registration-retry-btn[b-em74dzr08h] {
    border: none;
    border-radius: 12px;
    background-color: #2980b9;
    color: #fff;
    font-weight: 600;
}

.registration-retry-btn:not(:disabled):active[b-em74dzr08h] { background-color: #2471a3; }

.fallback-register-btn[b-em74dzr08h] {
    border: none;
    border-radius: 12px;
    background-color: #666;
    color: #f0f0f0;
    font-weight: 500;
}

.slot-coupon-feedback[b-em74dzr08h] {
    margin-top: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    word-break: keep-all;
}

.slot-coupon-feedback.register-feedback[b-em74dzr08h] {
    margin: 6px 0 0;
}

.slot-coupon-feedback.error[b-em74dzr08h] {
    border: 1px solid #ffcdd2;
    background: #ffebee;
    color: #c62828;
}

.slot-coupon-feedback.success[b-em74dzr08h] {
    border: 1px solid #a5d6a7;
    background: #e8f5e9;
    color: #2e7d32;
}

.slot-coupon-cancel[b-em74dzr08h] {
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    background-color: #555;
    color: #ccc;
    font-size: 15px;
}

.slot-coupon-cancel:not(:disabled):active[b-em74dzr08h] { background-color: #666; }
/* _content/FocusBooksFrontShare/Components/Shared/FirstUseGuide.razor.rz.scp.css */
/*
기능: 최초 사용 도움말의 차단형 순차 안내 카드 레이아웃을 제공한다.
영향: Render와 RenderProfile 위에서 공통으로 표시되며, 작은 화면에서도 동작한다.
참조: FirstUseGuide.razor
*/

.first-use-guide-backdrop[b-6umhylvwxf] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(20px, var(--safe-area-inset-top, 0px)) 20px max(20px, var(--safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.56);
}

.first-use-guide-dialog[b-6umhylvwxf] {
    width: min(100%, 360px);
    max-height: min(520px, calc(100dvh - 40px));
    overflow-y: auto;
    padding: 24px;
    border-radius: 20px;
    background: #fff;
    color: #272727;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    outline: none;
}

.first-use-guide-progress[b-6umhylvwxf] {
    margin: 0 0 10px;
    color: #767676;
    font-size: 12px;
    font-weight: 700;
}

.first-use-guide-dialog h2[b-6umhylvwxf] {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
}

.first-use-guide-description[b-6umhylvwxf] {
    margin: 12px 0 22px;
    color: #5a5a5a;
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-line;
}

.first-use-guide-live[b-6umhylvwxf] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.first-use-guide-actions[b-6umhylvwxf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.first-use-guide-actions button[b-6umhylvwxf] {
    min-height: 40px;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 700;
}

.first-use-guide-secondary[b-6umhylvwxf],
.first-use-guide-skip[b-6umhylvwxf] {
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #5a5a5a;
}

.first-use-guide-skip[b-6umhylvwxf] {
    margin-left: auto;
}

.first-use-guide-primary[b-6umhylvwxf] {
    border: 1px solid var(--accent, #4a4a4a);
    background: var(--accent, #4a4a4a);
    color: #fff;
}

.first-use-guide-actions button:focus-visible[b-6umhylvwxf] {
    outline: 3px solid rgba(57, 132, 255, 0.7);
    outline-offset: 2px;
}

@media (max-width: 360px) {
    .first-use-guide-backdrop[b-6umhylvwxf] {
        padding: 12px;
    }

    .first-use-guide-dialog[b-6umhylvwxf] {
        padding: 20px;
    }
}
/* _content/FocusBooksFrontShare/Components/Shared/LoginPanel.razor.rz.scp.css */
/* LoginPanel.razor.css - Web/Client 공통 로그인 UI */

.login-page[b-uzajjauj7y] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--safe-area-inset-top, 0px) + 24px) 24px calc(var(--safe-area-inset-bottom, 0px) + 20px);
    background-color: #fafafa;
    box-sizing: border-box;
    overflow-y: auto;
}

.login-header[b-uzajjauj7y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
    padding-bottom: 8px;
}

.app-logo[b-uzajjauj7y] {
    width: 96px;
    height: 96px;
    margin-bottom: 4px;
}

.logo-svg[b-uzajjauj7y] {
    width: 100%;
    height: 100%;
}

.logo-circle[b-uzajjauj7y] {
    fill: #1a1a1a;
}

.logo-text[b-uzajjauj7y] {
    fill: #fff;
    font-size: 22px;
    font-weight: 700;
    font-family: inherit;
}

.login-title[b-uzajjauj7y] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
}

.login-buttons[b-uzajjauj7y] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    flex: 2;
    justify-content: center;
}

.platform-btn[b-uzajjauj7y] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    width: 100%;
    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.platform-btn:active[b-uzajjauj7y] {
    opacity: 0.8;
    transform: scale(0.98);
}

.platform-icon[b-uzajjauj7y] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.platform-btn.google[b-uzajjauj7y] {
    background-color: #fff;
    color: #3c4043;
    border: 1px solid #dadce0;
}

.platform-btn.kakao[b-uzajjauj7y] {
    background-color: #fee500;
    color: #3c1e1e;
}

.platform-btn.naver[b-uzajjauj7y] {
    background-color: #03c75a;
    color: #fff;
}

.platform-btn.line[b-uzajjauj7y] {
    background-color: #06c755;
    color: #fff;
}

.platform-btn.facebook[b-uzajjauj7y] {
    background-color: #1877f2;
    color: #fff;
}

.platform-btn.mock-btn[b-uzajjauj7y] {
    background-color: #f3f4f6;
    color: #6b7280;
    border: 1px dashed #d1d5db;
    font-size: 13px;
    font-weight: 500;
}

.login-divider[b-uzajjauj7y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0;
    color: #bbb;
    font-size: 12px;
}

.login-divider[b-uzajjauj7y]::before,
.login-divider[b-uzajjauj7y]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.email-form[b-uzajjauj7y] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.email-input[b-uzajjauj7y] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #f9fafb;
    outline: none;
    box-sizing: border-box;
}

.email-input:focus[b-uzajjauj7y] {
    border-color: #6366f1;
    background: #fff;
}

.email-login-btn[b-uzajjauj7y] {
    width: 100%;
    padding: 10px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 2px;
}

.email-login-btn:disabled[b-uzajjauj7y] {
    background: #c7d2fe;
    cursor: default;
}

.email-login-btn:not(:disabled):active[b-uzajjauj7y] {
    background: #4f46e5;
}

/* border-bottom은 form-header-row에서 관리, 여기서는 flex 레이아웃만 정의 */
.email-mode-tabs[b-uzajjauj7y] {
    display: flex;
    flex: 1;
}

.email-mode-tab[b-uzajjauj7y] {
    flex: 1;
    padding: 6px 0;
    background: none;
    border: none;
    font-size: 14px;
    color: #9ca3af;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.email-mode-tab.active[b-uzajjauj7y] {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}

.error-msg[b-uzajjauj7y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
    font-size: 13px;
}

.loading-state[b-uzajjauj7y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
}

.spinner[b-uzajjauj7y] {
    width: 40px;
    height: 40px;
    border: 3px solid #e0e0e0;
    border-top-color: #1a1a1a;
    border-radius: 50%;
    animation: spin-b-uzajjauj7y 0.8s linear infinite;
}

@keyframes spin-b-uzajjauj7y {
    to {
        transform: rotate(360deg);
    }
}

.loading-text[b-uzajjauj7y] {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.login-footer[b-uzajjauj7y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
}

.login-lab-link[b-uzajjauj7y] {
    border: 1px solid rgba(99, 102, 241, 0.28);
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.login-lab-link:active[b-uzajjauj7y] {
    opacity: 0.75;
}

/* 언어 선택기(좌 50%)와 로그인/가입 탭(우 50%)을 한 행에 배치하는 컨테이너 */
.form-header-row[b-uzajjauj7y] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2px;
}

.login-lang[b-uzajjauj7y] {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #e5e7eb;
}

.lang-select[b-uzajjauj7y] {
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 13px;
    color: #3c4043;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    appearance: auto;
    text-align: center;
}

.lang-select:focus[b-uzajjauj7y] {
    color: #6366f1;
}

.form-header-row .email-mode-tabs[b-uzajjauj7y] {
    width: 50%;
}

.login-notice[b-uzajjauj7y] {
    font-size: 12px;
    color: #999;
    margin: 0;
    text-align: center;
}

.login-terms[b-uzajjauj7y] {
    font-size: 11px;
    color: #bbb;
    margin: 0;
    text-align: center;
}

/* 링크는 항목 단위로만 줄바꿈한다. 좁은 폭에서 링크 이름이 중간에 끊기지 않게 한다. */
.login-terms-links[b-uzajjauj7y] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 14px;
    margin-top: 6px;
    font-size: 11px;
}

.terms-link[b-uzajjauj7y] {
    border: none;
    background: transparent;
    color: #38bdf8;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}
/* _content/FocusBooksFrontShare/Components/Shared/LongPressHelp.razor.rz.scp.css */
.long-press-help-entry[b-i54dh4eli3] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid #dce7f5;
    border-radius: 12px;
    background: #f4f8ff;
    color: #275b91;
    font-size: 0.84rem;
    font-weight: 750;
    text-align: left;
}

.long-press-help-entry-icon[b-i54dh4eli3] {
    font-size: 1.15rem;
}

.long-press-help-backdrop[b-i54dh4eli3] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(16px, var(--safe-area-inset-top, 0px))
        max(16px, var(--safe-area-inset-right, 0px))
        max(16px, var(--safe-area-inset-bottom, 0px))
        max(16px, var(--safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.62);
}

.long-press-help-dialog[b-i54dh4eli3] {
    width: min(100%, 440px);
    max-height: calc(100dvh - max(32px, var(--safe-area-inset-top, 0px) + var(--safe-area-inset-bottom, 0px)));
    overflow-y: auto;
    padding: 20px;
    border-radius: 20px;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
    outline: none;
}

.long-press-help-header[b-i54dh4eli3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.long-press-help-header h2[b-i54dh4eli3] {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.35;
}

.long-press-help-close-icon[b-i54dh4eli3] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #666;
    font-size: 1.65rem;
}

.long-press-help-content[b-i54dh4eli3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.long-press-help-content p[b-i54dh4eli3] {
    margin: 0;
    color: #5c6570;
    font-size: 0.86rem;
    line-height: 1.6;
}

.long-press-help-content img[b-i54dh4eli3] {
    display: block;
    width: min(100%, 320px);
    max-height: 52dvh;
    margin: 0 auto;
    border: 1px solid #dde2e8;
    border-radius: 14px;
    object-fit: contain;
    background: #101010;
}

.long-press-help-close[b-i54dh4eli3] {
    width: 100%;
    min-height: 44px;
    margin-top: 18px;
    padding: 10px 14px;
    border: none;
    border-radius: 12px;
    background: #1a1a1a;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 750;
}

.long-press-help-entry:focus-visible[b-i54dh4eli3],
.long-press-help-close-icon:focus-visible[b-i54dh4eli3],
.long-press-help-close:focus-visible[b-i54dh4eli3] {
    outline: 3px solid rgba(57, 132, 255, 0.72);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .long-press-help-entry[b-i54dh4eli3],
    .long-press-help-dialog[b-i54dh4eli3],
    .long-press-help-close[b-i54dh4eli3] {
        transition: none;
    }
}
/* _content/FocusBooksFrontShare/Components/Shared/MediaSlotSectionCard.razor.rz.scp.css */
/*
기능: MediaSlotSectionCard 타입별 슬롯 카드 스타일.
영향: CSS isolation 하에서 자식 컴포넌트 내부 슬롯 카드와 슬롯 아이템 표시를 유지한다.
참조: MediaSlotSectionCard.razor, MediaSlot.razor.css
*/

.slot-guide-link[b-znwp4p0bsj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    border: 1px solid #dbe3f0;
    border-radius: 999px;
    background: #fff;
    color: #4668d9;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.slot-guide-link:active[b-znwp4p0bsj] { background: #f1f5ff; }

.slot-type-card[b-znwp4p0bsj] {
    --slot-accent: #64748b;
    --slot-accent-soft: #f8fafc;
    position: relative;
    overflow: hidden;
    border-color: #e7e7e7;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.slot-type-card.slot-card-highlight[b-znwp4p0bsj] {
    z-index: 1;
    animation: slot-card-gold-glow-b-znwp4p0bsj 2.2s ease-in-out infinite;
}

.slot-type-header[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
}

.slot-type-info[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slot-type-icon[b-znwp4p0bsj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--slot-accent-soft);
    color: var(--slot-accent);
}

.paid-card[b-znwp4p0bsj]        { --slot-accent: #4668d9; --slot-accent-soft: #f1f5ff; order: 10; }
.paid-coupon-card[b-znwp4p0bsj] { --slot-accent: #c77700; --slot-accent-soft: #fff8eb; order: 30; }
.coupon-card[b-znwp4p0bsj]      { --slot-accent: #0f9f6e; --slot-accent-soft: #eefcf6; order: 40; }

.slot-type-icon svg[b-znwp4p0bsj] {
    width: 20px;
    height: 20px;
}

.slot-type-details[b-znwp4p0bsj] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.slot-type-name[b-znwp4p0bsj] {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.slot-type-count[b-znwp4p0bsj] {
    font-size: 12px;
    color: #999;
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

.slot-type-actions[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slot-add-action-btn[b-znwp4p0bsj] {
    padding: 7px 16px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: #1a1a1a;
    color: #fff;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slot-add-action-btn:not(:disabled)[b-znwp4p0bsj] {
    background: linear-gradient(135deg, #f7c948 0%, #d99a00 100%);
    color: #2f2300;
    animation: btn-gold-pulse-b-znwp4p0bsj 1.8s ease-in-out infinite;
}
.slot-add-action-btn:disabled[b-znwp4p0bsj] {
    opacity: 0.35;
    cursor: default;
    animation: none;
}
.slot-add-action-btn:not(:disabled):active[b-znwp4p0bsj] {
    background: #c98500;
    animation: none;
}
.slot-add-action-btn:focus-visible[b-znwp4p0bsj] {
    outline: 3px solid #1a1a1a;
    outline-offset: 3px;
}

@keyframes btn-gold-pulse-b-znwp4p0bsj {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 154, 0, 0); }
    50%      { box-shadow: 0 0 14px 3px rgba(217, 154, 0, 0.45); }
}

.slot-add-action-btn.pulse-highlight:not(:disabled)[b-znwp4p0bsj] {
    animation: btn-highlight-attention-b-znwp4p0bsj 1.6s ease-in-out infinite;
}
@keyframes btn-highlight-attention-b-znwp4p0bsj {
    0%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 8px 1px rgba(217, 154, 0, 0.36);
        transform: scale(1);
    }
    50% {
        filter: brightness(1.12) saturate(1.08);
        box-shadow:
            0 0 0 2px rgba(255, 247, 210, 0.9),
            0 0 16px 4px rgba(217, 154, 0, 0.58);
        transform: scale(1.06);
    }
}

@keyframes slot-card-gold-glow-b-znwp4p0bsj {
    0%, 100% {
        background-color: #fffdf7;
        border-color: rgba(217, 154, 0, 0.46);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            inset 0 0 0 1px rgba(217, 154, 0, 0.22),
            inset 0 0 18px rgba(247, 201, 72, 0.1);
    }
    50% {
        background-color: #fff9e7;
        border-color: rgba(217, 154, 0, 0.78);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            inset 0 0 0 2px rgba(217, 154, 0, 0.46),
            inset 0 0 32px rgba(247, 201, 72, 0.24);
    }
}

@media (prefers-reduced-motion: reduce) {
    .slot-add-action-btn:not(:disabled)[b-znwp4p0bsj] {
        animation: none;
    }

    .slot-type-card.slot-card-highlight[b-znwp4p0bsj] {
        animation: none;
        background-color: #fff9e7;
        border-color: rgba(217, 154, 0, 0.78);
        box-shadow:
            0 1px 2px rgba(15, 23, 42, 0.04),
            inset 0 0 0 2px rgba(217, 154, 0, 0.46),
            inset 0 0 32px rgba(247, 201, 72, 0.24);
    }

    .slot-add-action-btn.pulse-highlight:not(:disabled)[b-znwp4p0bsj] {
        animation: none;
        box-shadow:
            0 0 0 2px rgba(255, 247, 210, 0.9),
            0 0 16px 4px rgba(217, 154, 0, 0.58);
    }
}

.slot-purchase-panel[b-znwp4p0bsj] {
    padding: 0 16px 14px;
}

.slot-purchase-action-row[b-znwp4p0bsj] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.slot-purchase-action-btn[b-znwp4p0bsj] {
    flex: 2 1 220px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(113, 139, 255, 0.38);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: linear-gradient(135deg, #5b7cff 0%, #4668d9 48%, #263f9d 100%);
    color: #fff;
    box-shadow: 0 10px 24px rgba(70, 104, 217, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
}
.slot-purchase-action-btn:disabled[b-znwp4p0bsj] { opacity: 0.35; cursor: default; }
.slot-purchase-action-btn:not(:disabled):active[b-znwp4p0bsj] {
    background: linear-gradient(135deg, #4d70f0 0%, #3d5dc7 48%, #21378b 100%);
    box-shadow: 0 5px 14px rgba(70, 104, 217, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.slot-card-help-link[b-znwp4p0bsj] {
    flex: 1 1 120px;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    white-space: normal;
    text-align: center;
}

.slot-card-help-link.paid[b-znwp4p0bsj],
.slot-card-help-link.paid-slot[b-znwp4p0bsj] {
    color: #b26a00;
    border-color: #ffe1aa;
    background: #fffaf0;
}

.slot-card-help-link.paid-slot[b-znwp4p0bsj] {
    color: #4668d9;
    border-color: #dbe4ff;
    background: #f7f9ff;
}

.slot-coupon-register-panel[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 16px 12px;
}

.slot-coupon-action-row[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.slot-coupon-goto-btn[b-znwp4p0bsj] {
    flex: 1 1 120px;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #a5d6a7;
    background: #e8f5e9;
    color: #2e7d32;
    cursor: pointer;
    margin-left: auto;
    white-space: normal;
}
.slot-coupon-goto-btn:active[b-znwp4p0bsj] { background: #c8e6c9; }

.slot-coupon-issue-btn[b-znwp4p0bsj] {
    flex: 1 1 120px;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid #8bd49a;
    background: #2f9e44;
    color: #fff;
    cursor: pointer;
    white-space: normal;
}
.slot-coupon-issue-btn:active[b-znwp4p0bsj] { background: #257d36; }

.paid-coupon-card .slot-coupon-goto-btn[b-znwp4p0bsj] {
    border-color: #ffe082;
    background: #fff8e1;
    color: #b26a00;
}
.paid-coupon-card .slot-coupon-goto-btn:active[b-znwp4p0bsj] { background: #ffecb3; }
.slot-coupon-issue-btn.paid[b-znwp4p0bsj] {
    border-color: #ffcc80;
    background: #fb8c00;
}
.slot-coupon-issue-btn.paid:active[b-znwp4p0bsj] { background: #ef6c00; }

.slot-inner-list[b-znwp4p0bsj] {
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

.mediaslot-item[b-znwp4p0bsj] {
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    border-top: 1px solid #f0f0f0;
}
.mediaslot-item:first-child[b-znwp4p0bsj] { border-top: none; }

.mediaslot-item.slot-added-highlight[b-znwp4p0bsj] {
    animation: slot-added-gold-highlight-b-znwp4p0bsj 1.8s ease-out both;
}

@keyframes slot-added-gold-highlight-b-znwp4p0bsj {
    0% {
        background: #fff7d6;
        box-shadow: inset 0 0 0 2px rgba(217, 154, 0, 0.55), 0 0 0 rgba(217, 154, 0, 0);
    }
    45% {
        background: #fff3bf;
        box-shadow: inset 0 0 0 2px rgba(217, 154, 0, 0.38), 0 0 18px rgba(217, 154, 0, 0.32);
    }
    100% {
        background: #fff;
        box-shadow: inset 0 0 0 0 rgba(217, 154, 0, 0), 0 0 0 rgba(217, 154, 0, 0);
    }
}

.mediaslot-item[b-znwp4p0bsj]::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--slot-accent, #cbd5e1);
    transform: translateY(-50%);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px color-mix(in srgb, var(--slot-accent, #cbd5e1) 20%, transparent);
}

.mediaslot-body[b-znwp4p0bsj] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 30px;
    cursor: pointer;
}
.mediaslot-body:active[b-znwp4p0bsj] { background: #f8fafc; }

.mediaslot-avatar[b-znwp4p0bsj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f0f0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-img[b-znwp4p0bsj] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-znwp4p0bsj] {
    font-size: 22px;
    color: #ccc;
    user-select: none;
}

.avatar-loading[b-znwp4p0bsj] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f4f5;
}

.avatar-loading-spinner[b-znwp4p0bsj] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(113, 113, 122, 0.22);
    border-top-color: #52525b;
    border-radius: 50%;
    animation: media-slot-avatar-spin-b-znwp4p0bsj 0.8s linear infinite;
}

@keyframes media-slot-avatar-spin-b-znwp4p0bsj {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .avatar-loading-spinner[b-znwp4p0bsj] { animation: none; }
}

.mediaslot-info[b-znwp4p0bsj] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mediaslot-item.slot-item-green[b-znwp4p0bsj] { --slot-accent: #0f9f6e; }
.mediaslot-item.slot-item-amber[b-znwp4p0bsj] { --slot-accent: #c77700; }
.mediaslot-item.slot-item-blue[b-znwp4p0bsj]  { --slot-accent: #4668d9; }

.slot-name-text[b-znwp4p0bsj] {
    font-size: 13px;
    font-weight: 600;
    color: #202020;
}

.slot-status[b-znwp4p0bsj] {
    align-self: flex-start;
    width: fit-content;
    padding: 2px 7px;
    border-radius: 999px;
    background: #f4f4f5;
    font-size: 12px;
    color: #71717a;
}

.slot-menu-btn[b-znwp4p0bsj] {
    background: none;
    border: none;
    padding: 12px;
    color: #bbb;
    cursor: pointer;
    flex-shrink: 0;
}
.slot-menu-btn:active[b-znwp4p0bsj] { color: #555; }

.slot-actions[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    width: 100%;
    box-sizing: border-box;
    animation: slot-actions-open-b-znwp4p0bsj 0.22s ease-out both;
    overflow: hidden;
}

@keyframes slot-actions-open-b-znwp4p0bsj {
    from { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
    to   { max-height: 80px; opacity: 1; padding-top: 10px; padding-bottom: 10px; }
}

.slot-action-btn[b-znwp4p0bsj] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
}

.reset-btn[b-znwp4p0bsj] {
    background: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.reset-btn:active[b-znwp4p0bsj] { background: #ffcdd2; }
/* _content/FocusBooksFrontShare/Components/Shared/NotificationModal.razor.rz.scp.css */
.notification-backdrop[b-aghic6n85f] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(3px);
}

.notification-modal[b-aghic6n85f] {
    width: min(92vw, 440px);
    max-height: min(86vh, 680px);
    overflow-y: auto;
    padding: 24px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: color-mix(in srgb, var(--card-bg, #fff) 96%, white 4%);
    color: var(--text-primary, #1f2937);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.34);
}

.notification-progress[b-aghic6n85f] {
    margin-bottom: 12px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.8rem;
    text-align: right;
}

.notification-image[b-aghic6n85f] {
    width: 100%;
    max-height: 260px;
    margin-bottom: 18px;
    object-fit: contain;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.04);
}

.notification-modal h2[b-aghic6n85f] {
    margin: 0 0 10px;
    font-size: 1.35rem;
    line-height: 1.3;
}

.notification-body[b-aghic6n85f] {
    margin: 0 0 18px;
    white-space: pre-wrap;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
}

.notification-dismiss-check[b-aghic6n85f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    color: var(--text-secondary, #4b5563);
    font-size: 0.92rem;
}

.notification-dismiss-check input[b-aghic6n85f] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #5b8def);
}

.notification-close[b-aghic6n85f] {
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--accent, #5b8def);
    color: white;
    font-weight: 700;
}

@media (max-width: 520px) {
    .notification-backdrop[b-aghic6n85f] {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .notification-modal[b-aghic6n85f] {
        width: 100%;
        border-radius: 22px 22px 16px 16px;
    }
}
/* _content/FocusBooksFrontShare/Components/Shared/ServiceNoticeGate.razor.rz.scp.css */
.service-notice-loading[b-97uiwwyjr3] {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    color: #f8fafc;
    background: #1a1a1a;
    font-size: 1rem;
}

.service-notice-backdrop[b-97uiwwyjr3] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, 0.78);
}

.service-notice-modal[b-97uiwwyjr3] {
    width: min(520px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    border-radius: 8px;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
    padding: 28px;
}

.service-notice-modal h1[b-97uiwwyjr3] {
    margin: 0 0 14px;
    font-size: 1.35rem;
    line-height: 1.3;
    font-weight: 800;
}

.service-notice-modal p[b-97uiwwyjr3] {
    margin: 0;
    white-space: pre-wrap;
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 520px) {
    .service-notice-backdrop[b-97uiwwyjr3] {
        align-items: end;
        padding: 16px;
    }

    .service-notice-modal[b-97uiwwyjr3] {
        padding: 22px;
    }
}