/* =================================================================
   1. 폰트 및 애니메이션 라이브러리
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* =================================================================
      2. 전역 설정 (비율 조정의 핵심)
      ================================================================= */
:root {
    /* 🎨 브랜드 컬러 */
    --primary-color: #635bff;
    --primary-hover: #5851d8;
    --secondary-color: #0a2540;
    --bg-color: #f7f9fc;
    --surface-color: #ffffff;

    --text-main: #1e293b;
    --text-sub: #64748b;
    --border-radius: 8px;
}
/* 🚀 [추가됨] 포커스 링 제거 (접근성 유지하면서 시각적 박스만 끄기) */
:focus {
    outline: none;
}

/* 단, 키보드 사용자(Tab키)를 위해 진짜 입력창은 살려둠 */
button:focus-visible, 
a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
html {
    /* ✅ [핵심] 16px -> 13px로 변경 */
    /* 이렇게 하면 모든 UI(버튼, 패딩, 글자)가 약 80% 크기로 축소됩니다. */
    /* zoom 속성 없이도 자연스럽게 작아집니다. */
    font-size: 13.5px;

    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important; /* 가로 스크롤 절대 금지 */
    /* 가로 스크롤 방지 */
}

/* [2026-08-11] 일본어 UI 는 서체를 갈아끼운다.
   Noto Sans KR 에는 가나(히라가나·가타카나) 글리프가 아예 없어서, 일본어를 고르면 가나가
   방문자 기기 폰트로 떨어지고 공유 한자는 한국 자형으로 그려졌다 — 8/6 에 한글 때문에
   고쳤던 "기기마다 모양이 다름" 문제가 일본어에만 그대로 남아 있었다.
   훅이 `lang` 이 아니라 `data-ui-lang` 인 이유는 TranslationService 주석 참고.
   한국어·나머지 언어의 자형은 건드리지 않는다(이 규칙은 ja 에서만 걸린다). */
html[data-ui-lang="ja"] body,
html[data-ui-lang="ja"] .kyc-container,
html[data-ui-lang="ja"] .cs-title {
    font-family: 'Inter', 'Noto Sans JP', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    font-family: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);

    /* 1rem = 13px이 됨 */
    font-size: 1rem;

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

/* =================================================================
      3. 폼 요소 크기 재조정 (중요!)
      ================================================================= */
/* 이전에 42px로 고정했던 걸 rem으로 바꿔야 비율에 맞게 줄어듭니다 */
.form-control,
.btn,
.input-group-text {
    height: 3.2rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}
.btn-sm {
    height: auto;
    min-height: auto;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}
/* 링크 및 버튼 공통 */
a {
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.btn-primary-global {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
}

/* =================================================================
   [Axowl Components] 전역 설정(13px)을 기반으로 한 컴포넌트 스타일
   ================================================================= */

/* 1. 라벨: 작고, 굵고, 대문자 스타일 */
.auth-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    /* Slate-500 */
    margin-bottom: 0.5rem;
    display: block;
}

/* 2. 입력창 & 애드온 공통 */
.auth-input,
.auth-addon {
    height: 48px;
    font-size: 0.95rem;
    border: 1px solid #cbd5e1;
    background-color: #fff;
    color: #0f172a;
    transition: all 0.2s ease;
}

/* 포커스 상태 */
.auth-input:focus {
    border-color: var(--ah-link);
    /* Indigo */
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
    z-index: 5;
    /* 겹친 요소 위로 */
}
/* Bootstrap form-control/form-select 포커스 → 인디고로 통일 */
.form-control:focus,
.form-select:focus {
    border-color: var(--ah-link);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}
/* 3. KYB Verify 버튼 (Input 안에 붙는 버튼) */
.btn-verify {
    height: 48px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    color: #475569;
    transition: all 0.2s;
}

.btn-verify:hover:not(:disabled) {
    background-color: #eef2ff;
    color: var(--ah-link);
    border-color: #c7d2fe;
    z-index: 5;
}

/* 4. 메인 액션 버튼 */
.auth-btn {
    height: 48px;
    width: 100%;
    background-color: var(--ah-link);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.auth-btn:hover:not(:disabled) {
    background-color: #4338ca;
}

.auth-btn:disabled {
    background-color: #cbd5e1;
    cursor: not-allowed;
}

/* 5. [중요] Input Group 연결 부위 처리 (깨짐 방지) */
.input-group.auth-group .auth-input {
    border-right: none;
}

.input-group.auth-group .auth-addon,
.input-group.auth-group .btn-verify {
    border-left: 1px solid #cbd5e1;
    margin-left: -1px;
    /* 겹치게 해서 2줄 방지 */
}

/* 6. [중요] Disabled 상태 (완벽한 회색 처리) */
/* 그룹 전체에 .disabled-mode가 붙으면 내부 요소 전부 회색화 */
.input-group.disabled-mode .auth-input,
.input-group.disabled-mode .btn-verify,
.auth-input:disabled {
    background-color: #f1f5f9 !important;
    /* 배경 회색 */
    color: #94a3b8 !important;
    /* 글자 흐림 */
    border-color: #e2e8f0 !important;
    /* 테두리 연하게 */
    cursor: not-allowed;
}
.kyc-container {
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Inter', 'Noto Sans KR', 'Noto Sans JP', -apple-system, sans-serif;
    color: #1e293b;
}
/* =================================================================
   Success / Verification 공통 스타일
   ================================================================= */
.success-icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: transparent;
    color: #0f172a;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.success-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.success-desc {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.email-highlight {
    color: #1e293b;
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding: 0 4px;
}
/* ─── RegisterRepresentativeModal ─── */
.rep-modal-card {
    max-width: 560px;
}
.email-highlight::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background-color: rgba(99, 91, 255, 0.1);
    z-index: -1;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-card {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.rep-modal-card {
    max-width: 480px;
}
/* =================================================================
   MainLayout — 전역 레이아웃 스타일
   ================================================================= */

   .app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* [2026-08-08 responsive] 모바일 브라우저의 주소창 수축/확장 때문에 100vh 는 실제
       보이는 영역보다 크다 — 하단이 주소창 뒤에 깔려 스크롤 끝이 잘린다. dvh 를
       아는 브라우저는 동적 뷰포트로 덮어쓴다(모르면 위 100vh 유지). */
    height: 100dvh;
    width: 100%;
    overflow: hidden;
    background-color: #f8fafc;
}

.top-bar-primary {
    height: 60px;
    min-height: 60px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    z-index: 200;
}

.brand-logo-text {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0f172a;
    text-decoration: none;
    letter-spacing: -1.5px;
    line-height: 1;
    display: inline-block;
}

.top-bar-secondary {
    height: 44px;
    min-height: 44px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    gap: 1.5rem;
    z-index: 150;
    /* [2026-08-08 responsive] 탭이 8개까지 서는 줄 — 좁은 화면(iPad 세로·폰)에서는
       줄바꿈 대신 가로 스크롤. 스크롤바는 44px 고정 높이를 깨뜨리므로 숨긴다. */
    overflow-x: auto;
    scrollbar-width: none;
}

.top-bar-secondary::-webkit-scrollbar { display: none; }

.category-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-bottom-color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.category-link.active {
    color: #0f172a;
    font-weight: 700;
    border-bottom: 2px solid #0f172a;
}

.main-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.sidebar {
    width: 240px;
    min-width: 240px;
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 0.75rem;
}

.sidebar-title {
    font-size: 0.78rem;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    padding: 0 1rem 1.25rem;
    letter-spacing: 0.02em;
}

.sidebar-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1rem 0.4rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 1rem;
    font-size: 0.875rem;
    color: #1e293b;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background-color 0.15s, color 0.15s;
}

.sidebar-link:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.sidebar-link.active {
    /* [2026-07-09] full navy fill 은 시선 과다 → 검정 볼드 글자 + 옅은 받침(base) 만. */
    background-color: #f1f5f9;
    color: #0f172a;
    font-weight: 700;
}

/* 사이드바 링크 아이콘 — 확장 모드에선 라벨 왼쪽. */
.sidebar-link .si {
    font-size: 1.05rem;
    width: 1.25rem;
    flex-shrink: 0;
    margin-right: 0.6rem;
    text-align: center;
}

/* [2026-07-03] 사이드바를 아이콘 레일로 접는다 — 240px 이 본문을 잡아먹던 것.
   조건: ①좁은 화면(≤1024px, 데스크탑 창 축소 포함) OR ②터치 태블릿(pointer:coarse)+≤1366px.
   iPad 는 가로(1180/1366)라 width 만으론 못 잡아 coarse-pointer 로 orientation 무관 커버.
   마우스 노트북(1280+)은 fine pointer 라 제외 → 풀 텍스트 유지. hover=title 툴팁. */
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
    .sidebar {
        width: 60px;
        min-width: 60px;
        padding: 1.5rem 0.4rem;
        align-items: stretch;
    }
    .sidebar-title,
    .sidebar-section-title { display: none; }

    .sidebar-link {
        justify-content: center;
        padding: 0.6rem 0;
    }
    .sidebar-link .si { margin-right: 0; }
    .sidebar-link .sidebar-label { display: none; }
    .sidebar-link .si-badge { margin-right: 0; }
}

/* 데스크톱/태블릿에선 모바일 드로어 부품이 보이지 않는다 — ≤640px 블록에서 켠다. */
.sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 640px) {
    .sidebar-backdrop { display: block; }
}

.content-area {
    flex: 1;
    overflow-y: auto;
    padding: 3.5rem 2rem;
    background-color: #f8fafc;
    display: flex;
    justify-content: center;
}

.content-container {
    width: 100%;
    max-width: 1040px; /* 2026-04-17: 880 → 1040 (전체 테이블/카드 폭 확장) */
    /* [2026-07-26] 페이지 하단 여백 — .content-area 의 padding-bottom 은 overflow 스크롤
       컨테이너라 내용이 넘치면 씹혀서 마지막 테이블/카드가 창 바닥에 딱 붙었다.
       스크롤되는 자식 쪽에 여백을 줘야 모든 탭에서 바닥 숨통이 유지된다. */
    padding-bottom: 5rem;
}

/* [2026-07-28] Console(작업실)만 폭 제한을 푼다.
   나머지 화면은 1040px 로 묶어야 읽기 좋지만, 대화 + 프리뷰가 나란히 서는 화면은
   좁으면 못 쓴다. 페이지가 스스로 결정하도록 :has() 로 건다 — 레이아웃이 라우트를
   알아야 하는 결합을 만들지 않기 위해서다. */
.content-area:has(.ac-shell) { padding: 1rem 1.25rem; }
.content-container:has(.ac-shell) { max-width: none; padding-bottom: 0; }

/* ═══════ Seal-first Dashboard Gate (5/23 P0) ═══════
   Org Master Seal 미등록 시 dashboard 내부 작업 차단 — full-screen overlay. */
.seal-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.seal-gate-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 540px;
    width: 100%;
    padding: 2.5rem 2.5rem 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.seal-gate-icon {
    font-size: 3rem;
    color: #f59e0b;
    margin-bottom: 1rem;
    line-height: 1;
}

.seal-gate-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.75rem;
}

.seal-gate-org {
    font-size: 1rem;
    color: #334155;
    margin-bottom: 1rem;
}

.seal-gate-body {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.seal-gate-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.seal-gate-btn {
    padding: 0.625rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
}

.seal-gate-btn-secondary {
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
}

.seal-gate-foot {
    font-size: 0.78rem;
    color: #94a3b8;
    margin: 0;
}
.seal-gate-foot a {
    color: #6366f1;
    text-decoration: none;
}
.seal-gate-foot a:hover { text-decoration: underline; }

.aws-divider {
    width: 1px;
    height: 14px;
    background-color: #e2e8f0;
    margin: 0 12px;
}

/* ═══════ 모바일·태블릿 대응 ═══════
   [2026-08-08 responsive] 단계: ≤1024(사이드바 아이콘 레일 — 위 기존 규칙) →
   ≤900(테이블 가로 스크롤) → ≤768(iPad 세로·큰 폰) → ≤640(폰) → ≤400(Galaxy Fold 커버).
   페이지별 테이블 클래스가 제각각(member-table·bm-table·ai-table…)이라 클래스가 아닌
   요소 셀렉터로 콘텐츠 영역 전체에 건다. */

@media (max-width: 900px) {
    /* 테이블은 세로로 안 접는다 — 열이 많은 감사/청구 테이블을 접으면 오히려 못 읽는다.
       display:block 은 table 을 스크롤 컨테이너로 만드는 표준 트릭(GitHub 마크다운과 동일). */
    .content-container table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .content-container img,
    .content-container svg,
    .content-container canvas {
        max-width: 100%;
        height: auto;
    }
}

/* ── 인라인 스타일 그리드 오버라이드 ──
   상당수 화면이 style="display:grid;grid-template-columns:repeat(3,1fr)" 식의 인라인
   그리드로 카드를 배치한다. 인라인은 media query 로 못 이기므로 !important 로 접는다.
   `auto 1fr`(아이콘+텍스트 행)·auto-fit(이미 반응형)은 건드리지 않도록 값 패턴을 명시. */
@media (max-width: 900px) {
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    /* [2026-08-08 Sonny] 카드 그리드는 폰에서 1개씩이 아니라 **2개씩** — 한 줄 하나는
       스크롤만 길어진다. repeat(2)·"1fr 1fr" 는 원래 2열이라 손대지 않는다. */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* 본문 분할 컬럼(1.5fr/1.6fr 짝)은 카드가 아니라 좌우 배치 — 폰에선 세로로. */
    [style*="grid-template-columns: 1.5fr"],
    [style*="grid-template-columns:1.5fr"],
    [style*="grid-template-columns: 1.6fr"],
    [style*="grid-template-columns:1.6fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* Bootstrap 그리드 카드(col-md-3/4)는 768px 미만에서 100% 로 떨어져 한 줄에 하나씩
   서던 것 → 폰에서도 2개씩. col-md-6(폼 필드 반폭 등)은 그대로 세로 스택. */
@media (max-width: 767.98px) {
    .content-container .col-md-3,
    .content-container .col-md-4 { width: 50%; }
}

@media (max-width: 768px) {
    .top-bar-primary { padding: 0 1rem; }
    .top-bar-secondary { padding: 0 1rem; gap: 1.1rem; }

    .content-area { padding: 1.75rem 1.25rem; }
}

@media (max-width: 640px) {
    /* 12px 은 본문(0.875rem)을 10.5px 로 떨어뜨려 폰에서 읽기 힘들었다 → 14px. */
    html { font-size: 14px; }

    .top-bar-primary { padding: 0 0.75rem; }
    .brand-logo-text { font-size: 1.35rem; }
    .aws-divider { margin: 0 8px; }

    /* 상단바에서 조직 경로 부가 정보는 접는다 — 폰에서는 알림·프로필이 우선. */
    .tb-org-label,
    .tb-org-parent { display: none; }

    .top-bar-secondary { padding: 0 0.75rem; gap: 1rem; }

    /* [2026-08-08 Sonny] 폰에서는 레일(60px)마저 본문을 잡아먹는다 — 사이드바를 화면에서
       빼고, 탭줄 오른쪽 햄버거로 여는 **드로어**로 바꾼다. 드로어는 아이콘 레일이 아니라
       풀 메뉴이므로 ≤1024 레일 규칙(라벨 숨김·중앙정렬)을 여기서 되돌린다. */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(78vw, 300px);
        min-width: 0;
        padding: 1.5rem 0.75rem;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1100;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
        overflow-y: auto;
        align-items: stretch;
    }

    .sidebar.open { transform: translateX(0); }

    .sidebar .sidebar-title,
    .sidebar .sidebar-section-title { display: block; }

    .sidebar .sidebar-link {
        justify-content: flex-start;
        padding: 0.6rem 1rem;
    }
    .sidebar .sidebar-link .si { margin-right: 0.6rem; }
    .sidebar .sidebar-link .sidebar-label { display: inline; }
    .sidebar .sidebar-link .si-badge { margin-right: 0.5rem; }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 1090;
    }

    /* 탭줄이 가로 스크롤이어도 햄버거는 오른쪽에 붙박이(sticky). */
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        right: 0;
        margin-left: auto;
        flex-shrink: 0;
        height: 100%;
        border: none;
        background: #ffffff;
        color: #0f172a;
        font-size: 1.4rem;
        padding: 0 0.15rem 0 0.6rem;
        cursor: pointer;
    }

    .content-area { padding: 1.25rem 0.75rem; }
    .content-container { padding-bottom: 3.5rem; }

    .seal-gate-card { padding: 1.75rem 1.25rem 1.5rem; }
}

/* Galaxy Z Fold 커버 화면(≈344px) 등 초협폭 — 일반 폰(390px+)은 위 640 티어까지만 */
@media (max-width: 374px) {
    html { font-size: 13px; }

    .tb-plan-badge,
    .tb-region-badge { display: none; }

    .content-area { padding: 1rem 0.6rem; }
}
/* ════════════════════════════════════════════════════
   Print — Audit Record Modal 만 출력되도록.
   Blazor scoped CSS 로는 body-level selector 가 동작 안 해서 global 에 둠.
   `body.ah-print-active` 가 붙은 상태에서만 print mode 적용 (오탐 방지).
════════════════════════════════════════════════════ */
@media print {
    body.ah-print-active * { visibility: hidden !important; }
    body.ah-print-active .ah-overlay,
    body.ah-print-active .ah-overlay * { visibility: visible !important; }
    body.ah-print-active .ah-overlay {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: auto !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        display: block !important;
    }
    body.ah-print-active .ah-a4 {
        width: 100% !important; max-width: 100% !important;
        max-height: none !important; min-height: 0 !important;
        box-shadow: none !important; border: none !important;
        border-radius: 0 !important; overflow: visible !important;
        margin: 0 !important;
    }
    body.ah-print-active .ah-a4-close,
    body.ah-print-active .ah-a4-footer-actions,
    body.ah-print-active .ah-a4-live-clock { display: none !important; }
    @page { margin: 14mm; size: A4; }
}

/* ==================================================================
   Profile Modal — file input
   InputFile 자식 컴포넌트의 input 에는 scoped CSS 가 안 적용돼서 global 로 정의.
   .form-control 기본 padding 으로 인한 button 아래 빈 공간 제거.
   ================================================================== */
.profile-file-input.form-control,
input[type="file"].profile-file-input {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 0.82rem !important;
    line-height: 34px !important;
    display: flex !important;
    align-items: center !important;
}
.profile-file-input::file-selector-button {
    height: 34px !important;
    padding: 0 12px !important;
    margin: 0 8px 0 0 !important;
    font-size: 0.78rem !important;
    border: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    cursor: pointer !important;
    line-height: 34px !important;
    border-radius: 6px 0 0 6px !important;
}
.profile-file-input::file-selector-button:hover { background: #eef2ff !important; }

/* ── Mega-menu badges (Product / Community / Business dropdown) ──────────────
   Global rule — Blazor scoped CSS 가 child component 까지 attribute 전파 안 해서
   각 dropdown component 자체 scoped CSS 로 하면 다른 component 에서 매칭 안 됨.
   여기 global 로 두면 모든 dropdown 의 .product-{basic|addon|soon}-badge 가 한 룰. */
.product-addon-badge,
.product-basic-badge,
.product-soon-badge {
    display:        inline-block;
    font-size:      0.6rem;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        2px 6px;
    border-radius:  3px;
    line-height:    1.2;
    border:         1px solid transparent;
}
.product-basic-badge { background: #18181b;     color: #ffffff; border-color: #18181b; }   /* 핵심: 솔리드 검정 */
.product-addon-badge { background: #ffffff;     color: #18181b; border-color: #18181b; }   /* 옵션: 화이트 + 검정 outline */
.product-soon-badge  { background: transparent; color: #9ca3af; border-color: #d1d5db; }   /* 미출시: 얇은 회색 outline */

/* ── Coming-soon placeholder pages (Qna / Blog / Careers / Partnership) ── */
.cs-root {
    min-height: calc(100vh - 72px);
    padding: 5rem 1.5rem 6rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.cs-card {
    max-width: 720px;
    width: 100%;
    text-align: center;
    padding: 4rem 2.5rem;
}
.cs-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6366f1;
    margin-bottom: 1rem;
}
.cs-title {
    font-family: Inter, 'Noto Sans KR', 'Noto Sans JP', system-ui, sans-serif;
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: #18181b;
    margin: 0 0 1.25rem;
}
.cs-lede {
    font-size: 1.05rem;
    color: #3f3f46;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.cs-meta {
    font-size: 0.92rem;
    color: #6b7280;
    line-height: 1.7;
    margin: 0 auto 2.5rem;
    max-width: 560px;
}
.cs-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 600;
}
.cs-link:hover { text-decoration: underline; }
.cs-actions {
    display: inline-flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.cs-btn--primary {
    background: #18181b;
    color: #ffffff;
}
.cs-btn--primary:hover { background: #27272a; color: #ffffff; }
.cs-btn--ghost {
    background: #ffffff;
    color: #18181b;
    border-color: #e5e7eb;
}
.cs-btn--ghost:hover { background: #f4f4f5; }

/* =========================================================
   Confetti — JS-injected, must live in GLOBAL css (Blazor
   scoped-CSS doesn't apply to dynamically-inserted elements).
   ========================================================= */
.axowl-confetti-piece {
    position:       absolute;
    top:            -16px;
    width:          10px;
    height:         14px;
    pointer-events: none;
    z-index:        5;
    border-radius:  1px;
    animation:      axowl-confetti-fall 3.2s cubic-bezier(0.18, 0.55, 0.45, 1) forwards;
    will-change:    transform, opacity;
    box-shadow:     0 1px 3px rgba(0, 0, 0, 0.12);
}

@keyframes axowl-confetti-fall {
    0% {
        transform: translate3d(0, -20px, 0) rotate(0);
        opacity:   1;
    }
    100% {
        transform: translate3d(var(--sway, 0), 95vh, 0) rotate(var(--rot, 720deg));
        opacity:   0;
    }
}

/* prefers-reduced-motion: skip the show */
@media (prefers-reduced-motion: reduce) {
    .axowl-confetti-piece { display: none; }
}