/* ─────────────────────────────────────────────
   base.css — CSS Variables, Reset, Typography, Layout
   ───────────────────────────────────────────── */

:root {
    color-scheme: light;     /* 다크모드 강제 적용 방지 — 브라우저 색반전 차단 */
    --main-brand: #ea5400;
    --main-dark: #cc4900;
    --main-light: #ff7b33;
    /* 보조 — 의료 신뢰감을 위한 딥네이비 */
    --navy:       #102b4d;
    --navy-light: #1a3a6d;
    --navy-soft:  #eef2f8;
    --navy-line:  #cfd8e8;
    --accent-color: #333;
    --dark-gray: #1a1a1a;
    --text-gray: #555;
    --bg-light-gray: #f8f9fa;
    --bg-light-orange: #fff5f0;
    /* 모바일 툴바 보정 — JS로 실제 innerHeight 기반 갱신 (fallback 1vh) */
    --vh: 1vh;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body, html {
    height: 100%;
    font-family: 'Asta Sans', 'Pretendard', sans-serif;
    color: #333;
}
h1, h2, h3, h4, h5, h6, .title, .gnb > li > a {
    font-family: 'Pretendard', sans-serif !important;
}

ul, li { list-style: none; }
a { text-decoration: none; color: inherit; }

/* Scroll Base */
.fullpage-container {
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    display: flex;
    flex-direction: column;
}
.fp-wrapper {
    width: 100%;
    height: 100%;
}
.fp-section { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; position: relative; }
.fullpage-container::-webkit-scrollbar { display: none; }

/* Subpage specific layout control */
.subpage-container {
    padding-top: 65px;
}
@media (max-width: 1024px) {
    .subpage-container {
        padding-top: 54px;
    }
}

/* Utility Container — clamp: 1920px 이하 유지, 4K까지 선형 확장 */
.container { width: 100%; max-width: clamp(1100px, calc(200px + 46.875vw), 2000px); margin: 0 auto; padding: 0 40px; position: relative; }
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    /* 좁은 표 — 한국어 단어 단위로 예쁘게 줄바꿈 (음절 중간 끊김 방지) */
    table th, table td {
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
    /* 텍스트 많은 데이터 표 — 행이 세로로 길어지는 문제 해소.
       표 폭 유지 + 가로 스크롤 → 행 높이 컴팩트하게 유지 */
    .nb-table, .compare-table,
    .cert-table, .be-table, .status-table, .menu-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .nb-table th, .nb-table td,
    .compare-table th, .compare-table td,
    .cert-table th, .cert-table td,
    .be-table th, .be-table td,
    .status-table th, .status-table td,
    .menu-table th, .menu-table td {
        white-space: nowrap;
    }
    /* 진료일정 표(요일 그리드) — 스크롤 대신 화면 폭에 꽉 맞춰 균등 배치 */
    .schedule-table, .mini-schedule {
        width: 100% !important;
        table-layout: fixed;
    }
    .schedule-table th, .schedule-table td,
    .mini-schedule th, .mini-schedule td {
        word-break: keep-all;
        overflow-wrap: anywhere;
        padding-left: 2px; padding-right: 2px;
    }
}

/* ── Universal Responsive Table Scroll & Mobile Indicator System ── */
.table-scroll-container,
.table-responsive,
.table-scroll-wrap,
.table-scroll,
.luxury-table-wrap,
.table-responsive-wrapper {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    margin-bottom: 24px;
    background: #ffffff;
}

/* Slim Brand Orange Scrollbar */
.table-scroll-container::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.table-scroll-wrap::-webkit-scrollbar,
.table-scroll::-webkit-scrollbar,
.luxury-table-wrap::-webkit-scrollbar,
.table-responsive-wrapper::-webkit-scrollbar {
    height: 5px;
}
.table-scroll-container::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.table-scroll-wrap::-webkit-scrollbar-track,
.table-scroll::-webkit-scrollbar-track,
.luxury-table-wrap::-webkit-scrollbar-track,
.table-responsive-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.table-scroll-container::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.table-scroll-wrap::-webkit-scrollbar-thumb,
.table-scroll::-webkit-scrollbar-thumb,
.luxury-table-wrap::-webkit-scrollbar-thumb,
.table-responsive-wrapper::-webkit-scrollbar-thumb {
    background: #ea5400;
    border-radius: 4px;
}
.table-scroll-container::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.table-scroll-wrap::-webkit-scrollbar-thumb:hover,
.table-scroll::-webkit-scrollbar-thumb:hover,
.luxury-table-wrap::-webkit-scrollbar-thumb:hover,
.table-responsive-wrapper::-webkit-scrollbar-thumb:hover {
    background: #c2410c;
}

/* Dynamic Right Edge Fade Shadow */
.table-scroll-container.has-right-fade,
.table-responsive.has-right-fade,
.table-scroll-wrap.has-right-fade,
.table-scroll.has-right-fade,
.luxury-table-wrap.has-right-fade {
    box-shadow: inset -16px 0 16px -10px rgba(15, 47, 86, 0.25);
}

/* Mobile Scroll Hint Badge */
.table-mobile-hint {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    color: #ea5400;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.table-mobile-hint .hint-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff5f0;
    border: 1px solid rgba(234, 84, 0, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(234, 84, 0, 0.08);
    animation: pulseHint 2s infinite ease-in-out;
}
@keyframes pulseHint {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@media (max-width: 991px) {
    .table-mobile-hint {
        display: flex;
    }
}

/* 의료진 카드 및 프로필 영역 내부의 불필요한 스크롤 힌트 뱃지 원천 숨김 */
.staff-card-horizontal .table-mobile-hint,
.staff-list .table-mobile-hint,
.doctor-profile-sec .table-mobile-hint,
.profile-info-box .table-mobile-hint,
#dept-doctors-section .table-mobile-hint,
.mini-schedule-wrap .table-mobile-hint {
    display: none !important;
}

/* Minimum Widths for Tables */
.table-scroll-container > table,
.table-responsive > table,
.table-scroll-wrap > table,
.table-scroll > table,
.luxury-table-wrap > table {
    width: 100%;
}

.nb-table { min-width: 780px !important; }
.cert-table { min-width: 560px !important; }
.luxury-price-table { min-width: 760px !important; }
.nursing-compare-table { min-width: 600px !important; }
.status-table { min-width: 540px !important; }
.res-info-table { min-width: 540px !important; }
.board-table, .be-table { min-width: 620px !important; }
.phone-table { min-width: 540px !important; }
.life-custom-table { min-width: 580px !important; }
.standard-content table, .rich-text table { min-width: 560px !important; }

/* ── 슈퍼유저 전용 프리미엄 플로팅 액션 캡슐 (FAB) ── */
.su-floating-fab {
    position: fixed;
    bottom: 26px;
    left: 26px;
    z-index: 999999;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* 메인 알약 캡슐 */
.su-fab-capsule {
    display: inline-flex;
    align-items: center;
    background: #0f2f56;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 40px;
    padding: 3px;
    box-shadow: 0 10px 28px rgba(15, 47, 86, 0.35), 0 2px 8px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(16px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.su-fab-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 47, 86, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: rgba(234, 84, 0, 0.5);
}

.su-fab-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ea5400 0%, #ff6b1a 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.2px;
    transition: all 0.2s ease;
}
.su-fab-main-btn:hover {
    background: linear-gradient(135deg, #d94800 0%, #ea5400 100%);
    color: #ffffff !important;
}
.su-fab-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #ffffff;
}
.su-fab-badge {
    font-size: 0.72rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 7px;
    border-radius: 20px;
    font-family: monospace;
    font-weight: 700;
    color: #fed7aa;
}

.su-fab-more-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin: 0 2px;
}
.su-fab-more-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.su-floating-fab.is-active .su-fab-more-btn {
    background: #ea5400;
    color: #ffffff;
}

/* 스피드 다이얼 팝오버 메뉴 */
.su-fab-popover {
    position: absolute;
    bottom: 54px;
    left: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 12px;
    min-width: 220px;
    box-shadow: 0 16px 40px rgba(15, 47, 86, 0.22), 0 4px 12px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transform-origin: bottom left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.su-floating-fab.is-active .su-fab-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.su-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 10px 8px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 8px;
}
.su-popover-title {
    font-size: 0.76rem;
    font-weight: 800;
    color: #0f2f56;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.su-popover-id {
    font-size: 0.72rem;
    color: #64748b;
    font-family: monospace;
    font-weight: 700;
}
.su-popover-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.su-popover-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155 !important;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
.su-popover-item:hover {
    background: #f8fafc;
    color: #0f2f56 !important;
    transform: translateX(3px);
}
.su-popover-item i {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .su-floating-fab {
        bottom: 18px;
        left: 18px;
    }
}