/* =======================================================
   entry-table.css — 써드볼트 본문 테이블 공용 스타일
   디자인: Soft Card (C) + 포인트 컬러 헤더 강조
   다크모드: body.dark-theme 클래스 기반 변수 재할당
   마크업: <div class="entry-table-wrap"><table class="entry-table">...
======================================================= */

/* ── 라이트 기본값 (하드코딩) ── */
.entry-table-wrap {
    /* 배경 / 카드 */
    --et-bg-card:      #ffffff;
    --et-bg-header:    #08270a; /* ← 헤더 배경색. 이미지 참고하여 조정 필요 */
    --et-bg-hover:     #f7f7fc;

    /* 텍스트 */
    --et-text-header:  #FDFAF1;
    --et-text-main:    #1d1d1f;
    --et-text-sub:     #6e6e73;

    /* 테두리 */
    --et-border:       #e8e8ef;
    --et-border-hd:    #e3d3ae; /* ← 헤더 하단 액센트선 색상. 이미지 참고하여 조정 필요 */

    /* 포인트 */
    --et-accent:       #158119; /* ← 포인트 컬러. 위와 동일하게 맞출 것 */

    /* 형태 */
    --et-radius:       12px;
    --et-shadow:       0 2px 16px rgba(0, 0, 0, .06);
}

/* ── 다크모드 재할당 — 전역 다크모드 변수 추종 ── */
body.dark-theme .entry-table-wrap {
    --et-bg-card:      var(--bg-panel, #1c1c1e);
    --et-bg-header:    var(--bg-soft, #2a2a2e);
    --et-bg-hover:     var(--bg-hover, #222228);
    --et-text-header:  var(--text-main, #e0e0e0);
    --et-text-main:    var(--text-main, #e0e0e0);
    --et-text-sub:     var(--text-muted, #8e8e9a);
    --et-border:       var(--border-main, #2e2e36);
    --et-border-hd:    var(--link-entry, #8be9fd);
    --et-accent:       var(--link-entry, #8be9fd);
    --et-shadow:       0 2px 16px rgba(0, 0, 0, .3);
}

/* ── 래퍼: 카드 컨테이너 + 모바일 가로 스크롤 ── */
.entry-table-wrap {
    width: 100%;
    max-width: 900px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--et-bg-card);
    border-radius: var(--et-radius);
    box-shadow: var(--et-shadow);
    border: 1px solid var(--et-border);
    margin: 1.5em auto;
}

/* ── 테이블 기본 ── */
.entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.55;
    table-layout: fixed;   /* 열 너비 균등 분배 — 내용 길이에 관계없이 잘리지 않음 */
    word-break: keep-all;  /* 한글 단어 단위 줄바꿈 */
    overflow-wrap: break-word;

    /* style.css .entry-content 전역 스타일 오버라이드 */
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
}

/* ── has-label 모드: 첫 열 너비는 내용 기준, 나머지만 균등 ── */
.entry-table--has-label {
    table-layout: auto; /* 첫 열 nowrap + width:1% 로 제어하므로 auto 복원 */
}

/* ── 헤더 ── */
.entry-table thead tr {
    background: var(--et-bg-header);
    border-bottom: 2px solid var(--et-border-hd);
}

.entry-table th {
    color: var(--et-text-header);
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    padding: 14px 20px;
    white-space: nowrap;
}

/* ── 바디 셀 ── */
.entry-table td {
    padding: 13px 20px;
    color: var(--et-text-sub);
    border-bottom: 1px solid var(--et-border);
    vertical-align: middle;
}

/* ── 항목 열 모드: 첫 열이 항목명인 경우 entry-table--has-label 추가 ── */
/* 사용: <table class="entry-table entry-table--has-label"> */
.entry-table--has-label td:first-child,
.entry-table--has-label th:first-child {
    text-align: left;
    width: var(--et-col1-width, 1%); /* 기본: nowrap 기준 자동. 래퍼에 style="--et-col1-width:25%" 로 오버라이드 */
    white-space: nowrap;
}

.entry-table--has-label td:first-child {
    color: var(--et-text-main);
    font-weight: 600;
}

.entry-table--has-label th:first-child {
    color: var(--et-text-header);
    font-weight: 700;
}

/* 마지막 행 하단선 제거 */
.entry-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── 호버 ── */
.entry-table tbody tr {
    transition: background .15s;
}

.entry-table tbody tr:hover td {
    background: var(--et-bg-hover);
}

/* ── 캡션 (선택 사용) ── */
.et-caption {
    font-size: 12px;
    color: var(--et-text-sub);
    text-align: right;
    padding: 8px 20px 0;
    caption-side: bottom;
    opacity: 0.7;
}

/* ── 반응형: 모바일 ── */
@media (max-width: 640px) {
    .entry-table th,
    .entry-table td {
        padding: 10px 14px;
        font-size: 13px;
    }

    .entry-table th {
        font-size: 10px;
        letter-spacing: 1px;
    }
}