@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* ── VoiceBox Stark Editorial Theme for Work-Status ── */

:root {
    --primary: #0A0A0A;       /* Stark Black */
    --accent: #EF4444;        /* Editorial Red Accent */
    --bg-page: #FAFAFA;       /* Flat Light Background */
    --surface: #FAFAFA;       /* Card Backgrounds */
    --surface-raised: #E5E5E5;/* Hover states */
    
    --text-primary: #0A0A0A;
    --text-secondary: #525252;
    --text-muted: #A3A3A3;
    
    --border-strong: #0A0A0A;
    --border-medium: #D4D4D4;
    --border-subtle: #E5E5E5;
    
    --success: #16A34A;
    --warning: #CA8A04;
    --error: #EF4444;
    
    /* Match main homepage fonts */
    --font-heading: 'Pretendard', 'Noto Sans KR', sans-serif;
    --font-body: 'Pretendard', 'Noto Sans KR', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important; /* Force sharp, square edges across ALL elements */
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    line-height: 1.6;
}

/* ── Typography Guidelines ── */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.overline {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--accent); /* Red highlight Overline */
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ── Container Layout ── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--primary); /* Strong editorial baseline */
    padding-bottom: 1.5rem;
    margin-bottom: 3rem;
}

.logo-text {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--primary);
    cursor: pointer;
    line-height: 1;
}

.logo-text:hover {
    color: var(--accent);
}

.company-badge {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 6px 14px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 12px;
}

.admin-badge {
    background: var(--accent);
    color: #FFF;
    border: 2px solid var(--accent);
    padding: 6px 14px;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.08em;
    margin-right: 12px;
}

/* ── VoiceBox Custom Cards ── */
.card {
    background-color: var(--surface);
    border: 2px solid var(--border-strong); /* Stark bold borders */
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: none; /* No soft shadows - 100% Flat magazine design */
    transition: border-color 0.2s ease;
}

.card:hover {
    border-color: var(--accent); /* Red accent on card focus/hover */
}

/* ── Buttons (Sharp Editorial Style) ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 2px solid var(--primary);
    outline: none;
    transition: all 0.2s ease;
    gap: 8px;
}

.btn-primary {
    background-color: var(--primary);
    color: #FAFAFA;
}

.btn-primary:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: #FAFAFA;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.btn-block {
    width: 100%;
}

/* ── Login Form ── */
.login-card {
    max-width: 460px;
    margin: 4rem auto;
}

.login-header h2 {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 2rem;
}

.login-form .form-group {
    margin-bottom: 1.5rem;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}

.login-form input {
    width: 100%;
    height: 44px;
    padding: 8px 14px;
    background-color: var(--surface);
    border: 2px solid var(--border-medium);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.login-form input:focus {
    border-color: var(--primary);
}

.error-message {
    background-color: #FEF2F2;
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 10px;
    font-size: 13px;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* ── Dashboard Layout ── */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stats-card h3, .contract-card h3, .list-card h3, .admin-controls-card h3, .admin-list-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ── Circular Progress / Flat Editorial Gauge ── */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}

.circle-gauge {
    position: relative;
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.circle-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.gauge-bg {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 16px;
}

.gauge-fill {
    fill: none;
    stroke: var(--accent); /* Solid accent red gauge indicator */
    stroke-width: 16px;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.gauge-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.gauge-number {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--text-primary);
    line-height: 1;
}

.gauge-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-top: 4px;
    display: block;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-grow: 1;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.info-item .label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.info-item .val {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--text-primary);
}

/* ── Status Chips ── */
.status-chip {
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 2px solid var(--primary);
    display: inline-block;
}

.status-chip.success {
    background-color: #F0FDF4;
    color: var(--success);
    border-color: var(--success);
}

.status-chip.warning {
    background-color: #FEFCE8;
    color: var(--warning);
    border-color: var(--warning);
}

.status-chip.error {
    background-color: #FEF2F2;
    color: var(--error);
    border-color: var(--error);
}

.contract-body {
    padding: 1rem 0 2rem 0;
}

.status-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.contract-footer {
    border-top: 2px solid var(--border-subtle);
    padding-top: 1.5rem;
}

.extension-wrap h4 {
    font-size: 13px;
    margin-bottom: 4px;
}

.extension-wrap p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ── Editorial Data Tables ── */
.table-container {
    overflow-x: auto;
    margin-top: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th, .data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-medium);
}
 
.data-table th {
    font-size: 13px; /* 12px에서 13px로 확대 */
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 3px solid var(--primary); /* Strong table header separator */
}
 
.data-table td {
    font-size: 15px; /* 14px에서 15px로 확대 */
    color: var(--text-primary);
}
 
.data-table tbody tr:hover {
    background-color: var(--surface-raised);
}
 
.date-col {
    color: var(--text-secondary);
    font-size: 13.5px; /* 12px에서 13.5px로 확대 */
}

.title-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
}

.title-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.btn-move {
    background-color: var(--primary);
    color: #FAFAFA;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--primary);
    display: inline-block;
}

.btn-move:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.empty-state {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-muted);
    font-weight: 600;
}

/* ── Admin Management Layout ── */
.quick-add-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.grid-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.quick-add-form input {
    height: 44px;
    padding: 8px 14px;
    background-color: var(--surface);
    border: 2px solid var(--border-medium);
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.quick-add-form input:focus {
    border-color: var(--primary);
}

.admin-company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.admin-comp-card {
    border: 2px solid var(--border-strong);
    background-color: var(--surface);
    padding: 1.5rem;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.admin-comp-card:hover {
    border-color: var(--accent);
}

.admin-comp-card.selected {
    border-color: #2563eb !important; /* Royal Blue selection indicator */
    background-color: #f0f6ff !important; /* Light ice blue selection background */
}

.admin-comp-card .card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.admin-comp-card h4 {
    font-size: 1.1rem;
    margin-bottom: 2px;
}

.admin-comp-card .naver-id-lbl {
    font-size: 13.5px;
    color: var(--text-secondary);
    font-family: monospace;
}

.btn-delete-inline {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.btn-delete-inline:hover {
    color: var(--accent);
}

.flat-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--border-subtle);
    margin: 8px 0;
}

.flat-bar-fill {
    height: 100%;
    background-color: var(--primary);
}

.admin-comp-card:hover .flat-bar-fill {
    background-color: var(--accent);
}

.comp-stats-lbl {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
}

/* ── Toast Alert ── */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: var(--primary);
    color: #FAFAFA;
    padding: 14px 20px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--primary);
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast.success {
    border-color: var(--success);
    background-color: var(--success);
}

.toast.error {
    border-color: var(--error);
    background-color: var(--error);
}

/* ── Media Queries ── */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 1.5rem 1rem;
    }
    
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .grid-inputs {
        grid-template-columns: 1fr;
    }

    /* 모바일 카드 패딩 미세조정 */
    .card {
        padding: 1.5rem 1rem;
    }
    
    /* 게이지 및 통계 카드 모바일 대응 */
    .progress-container {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .circle-gauge {
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    /* 모바일 테이블: 가로 스크롤을 원천 제거하고 화면폭(100%)에 맞게 쏙 피팅 */
    .table-container {
        overflow-x: hidden !important; /* 스크롤바 제거 */
        border: 1px solid var(--border-medium);
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .data-table {
        min-width: 100% !important;
        width: 100% !important;
        table-layout: fixed; /* 고정 열너비 매핑 강제 */
    }
    
    /* 각 컬럼별 모바일 가로폭 최적 비율 고정 할당 (합산 100%) */
    /* 관리자용 (5개 컬럼): 발행일자(22%), 포스팅제목(36%), 코멘트(18%), 관리(16%), 확인(8%) */
    #adminSection .data-table th:nth-child(1), #adminLogsTableBody td:nth-child(1) { width: 22% !important; text-align: center; }
    #adminSection .data-table th:nth-child(2), #adminLogsTableBody td:nth-child(2) { width: 36% !important; }
    #adminSection .data-table th:nth-child(3), #adminLogsTableBody td:nth-child(3) { width: 18% !important; text-align: center; }
    #adminSection .data-table th:nth-child(4), #adminLogsTableBody td:nth-child(4) { width: 16% !important; text-align: center; }
    #adminSection .data-table th:nth-child(5), #adminLogsTableBody td:nth-child(5) { width: 8% !important; text-align: center; }

    /* 광고주용 (3개 컬럼): 발행일자(23%), 포스팅제목(53%), 코멘트(24%) */
    #dashboardSection .data-table th:nth-child(1), #logsTableBody td:nth-child(1) { width: 23% !important; text-align: center; }
    #dashboardSection .data-table th:nth-child(2), #logsTableBody td:nth-child(2) { width: 53% !important; }
    #dashboardSection .data-table th:nth-child(3), #logsTableBody td:nth-child(3) { width: 24% !important; text-align: center; }

    .data-table th, .data-table td {
        padding: 10px 4px !important; /* 극단적 여백 제거 완화 */
        font-size: 12.5px !important; /* 11px에서 12.5px로 키워 글씨 깨짐 방지 */
        letter-spacing: -0.5px;
    }
    
    /* 발행일자 열: 연도를 시각적으로 흐리게 표기하도록 유도하되 모바일 전용 폰트 유지 */
    .date-col {
        font-size: 11.5px !important; /* 10px에서 11.5px로 키움 */
        line-height: 1.2;
        word-break: keep-all !important;
        white-space: nowrap !important;
        text-align: center;
        padding-right: 6px !important; /* 포스팅제목과의 간격 확보 */
    }
    
    /* 포스팅 제목 열: 문자(char) 단위로도 유연하게 깨져서 수평 공간을 알차게 사용 */
    .title-cell, .data-table td:nth-child(2) {
        white-space: normal !important;
        word-break: break-all !important; 
        line-height: 1.35 !important;
        padding-left: 6px !important; /* 날짜와의 물리적 간격 확보 */
        padding-right: 6px !important; /* 우측 컬럼과의 간격 확보 */
    }
    
    .title-link {
        font-size: 12.5px !important;
        font-weight: 700;
    }

    /* 링크 컬럼: 텍스트는 숨기거나 최소화하고 모바일 맞춤형 마이크로 버튼화 */
    .btn-move {
        padding: 4px 3px !important;
        font-size: 10px !important;
        display: inline-block;
        white-space: nowrap !important;
        text-align: center;
        letter-spacing: -1px;
    }

    /* 코멘트 컬럼: 보기 버튼 겹침 방지 및 수직 정렬 */
    .comment-cell {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 6px 2px !important;
    }

    .comment-cell button {
        padding: 4px 0 !important;
        font-size: 11px !important;
        font-weight: 800;
        width: 90% !important;
        min-width: 40px !important;
        max-width: 46px !important;
        margin: 2px auto !important;
        display: block !important;
        text-align: center;
        height: auto !important;
        line-height: 1.1;
        border: 2px solid #0A0A0A !important;
        border-radius: 0px !important;
        letter-spacing: -0.5px;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* 관리 컬럼: 수정/삭제 버튼을 위아래로 쌓아올려 수평 공간 점유 최소화 */
    .control-cell {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
        padding: 6px 2px !important;
    }
    
    .control-cell button {
        padding: 4px 0 !important;
        font-size: 11px !important; /* 버튼 폰트도 9px에서 11px로 가독성 개선 */
        font-weight: 800;
        width: 90% !important;
        min-width: 40px !important; /* 글자 세로 쪼개짐 방지 핵심 최소폭 */
        max-width: 46px !important;
        margin: 2px auto !important;
        display: block !important;
        text-align: center;
        height: auto !important;
        line-height: 1.1;
        border: 1px solid var(--primary) !important;
        letter-spacing: -0.5px;
        white-space: nowrap !important; /* 단어 쪼개짐 원천 차단 */
        box-sizing: border-box !important;
    }

    /* 확인 체크박스 */
    .check-cell button {
        font-size: 13px !important;
        padding: 0 !important;
    }

    /* 모바일 계정 정보 설정 패널 최적화 */
    #companyAccountEditor {
        width: 100% !important;
        min-width: 100% !important;
        margin-top: 8px;
    }
    
    #companyAccountEditor div {
        display: grid !important;
        grid-template-columns: 1fr 1fr auto !important;
        gap: 6px !important;
    }
    
    #companyAccountEditor input {
        width: 100% !important;
        height: 32px !important;
    }

    /* 신규 포스팅 직접 등록 패널 모바일 대응 */
    #adminAddLogPanel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    #adminAddLogPanel input, #adminAddLogPanel button {
        width: 100% !important;
        flex: none !important;
    }

    /* 모바일 1:1 문의 테이블 영역 가로스크롤 확보 */
    #adminQnaPanel .table-container {
        overflow-x: auto;
    }
    
    #adminQnaPanel .data-table {
        min-width: 600px;
    }

    /* 필터 및 정렬 바 모바일 대응 */
    .filter-sort-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
    }
    
    .filter-group, .sort-group {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

@keyframes blinker {
    50% { opacity: 0.2; }
}

/* ── Mosaic Mode ── */
body.mosaic-active .mosaic-company,
body.mosaic-active #dashboardCompanyName,
body.mosaic-active #selectedCompanyName,
body.mosaic-active #headerCompanyName,
body.mosaic-active .naver-id-lbl,
body.mosaic-active .title-link,
body.mosaic-active td:nth-child(2) span,
body.mosaic-active td:nth-child(2) a,
body.mosaic-active #companyFilterSelect,
body.mosaic-active #dashboardCompanySelect {
    filter: blur(6px) !important;
    user-select: none;
    pointer-events: none;
}