/* ====================================================
   그누보드5 전자책(PDF Viewer) 게시판 스킨 - style.css
   설치 경로: /skin/board/ebook/
   ==================================================== */

/* ── 공통 토큰 ── */
:root {
  --ink:        #1a1614;
  --ink-soft:   #5a524e;
  --ink-mute:   #9a9290;
  --paper:      #faf8f5;
  --paper-warm: #f2ede6;
  --gold:       #b8892a;
  --gold-lt:    #e8d5a0;
  --red:        #9b2335;
  --border:     #ddd5c8;
  --blue:       #1d5fa6;
  --green:      #1d7a4a;
  --radius:     6px;
  --shadow:     0 2px 10px rgba(26,22,20,.10);
  --serif:      'Noto Serif KR', Georgia, '맑은 고딕', serif;
  --sans:       'Noto Sans KR', '맑은 고딕', sans-serif;
}

/* ── 목록 (list.skin.php) ── */
#bo_list { font-family: var(--sans); }

.eb-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0 1rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: .5rem;
}
.eb-list-head h2 {
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.eb-list-head h2 span { color: var(--gold); font-size: 1.5rem; }

/* 검색·분류 바 */
.eb-search-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}
.eb-search-bar select,
.eb-search-bar input[type=text] {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem .65rem;
  font-size: .85rem;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
}
.eb-search-bar button {
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .4rem .9rem;
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s;
}
.eb-search-bar button:hover { background: var(--gold); }

/* 분류 탭 */
.eb-category-tabs {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.eb-category-tabs a {
  padding: .3rem .85rem;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: .8rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all .15s;
}
.eb-category-tabs a:hover,
.eb-category-tabs a.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}

/* 테이블 */
.eb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.eb-table thead th {
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .65rem .75rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.eb-table thead th a { color: inherit; text-decoration: none; }
.eb-table thead th a:hover { color: var(--gold); }

.eb-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.eb-table tbody tr:hover { background: rgba(184,137,42,.06); }
.eb-table tbody tr.eb-notice { background: rgba(155,35,53,.04); }
.eb-table tbody tr.eb-notice td.td_subject a { font-weight: 700; }

.eb-table td {
  padding: .65rem .75rem;
  color: var(--ink);
  vertical-align: middle;
}
.eb-table td.td_num { color: var(--ink-mute); font-size: .82rem; text-align: center; width: 52px; }
.eb-table td.td_subject a { color: var(--ink); text-decoration: none; }
.eb-table td.td_subject a:hover { color: var(--gold); }
.eb-table td.td_name { color: var(--ink-soft); font-size: .83rem; text-align: center; white-space: nowrap; }
.eb-table td.td_date { color: var(--ink-mute); font-size: .8rem; text-align: center; white-space: nowrap; }
.eb-table td.td_hit  { color: var(--ink-mute); font-size: .8rem; text-align: center; white-space: nowrap; }
.eb-table td.td_good { color: var(--blue);     font-size: .8rem; text-align: center; white-space: nowrap; }

/* 아이콘 배지들 */
.eb-badge {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .3rem;
  vertical-align: middle;
}
.eb-badge-new    { background: var(--red);   color: #fff; }
.eb-badge-hot    { background: var(--gold);  color: #fff; }
.eb-badge-file   { background: var(--blue);  color: #fff; }
.eb-badge-notice { background: var(--ink);   color: #fff; }
.eb-badge-secret { background: var(--ink-mute); color: #fff; }

.eb-comment-cnt {
  color: var(--red);
  font-size: .78rem;
  font-weight: 700;
  margin-left: .25rem;
}

/* 하단 페이지·버튼 영역 */
.eb-list-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 .5rem;
  flex-wrap: wrap;
  gap: .75rem;
}
.eb-pagination { display: flex; gap: .3rem; flex-wrap: wrap; }
.eb-pagination a,
.eb-pagination strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .82rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all .15s;
}
.eb-pagination strong {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  font-weight: 700;
}
.eb-pagination a:hover { background: var(--paper-warm); color: var(--gold); }

/* 글쓰기 버튼 */
.eb-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1.1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .18s;
  font-family: var(--sans);
}
.eb-btn-primary  { background: var(--gold);  color: #fff; }
.eb-btn-primary:hover  { background: var(--red); color: #fff; }
.eb-btn-secondary { background: var(--paper-warm); color: var(--ink); border: 1px solid var(--border); }
.eb-btn-secondary:hover { background: var(--border); }
.eb-btn-danger    { background: var(--red); color: #fff; }
.eb-btn-danger:hover { background: #7a1a28; }
.eb-btn-sm { padding: .3rem .75rem; font-size: .8rem; }


/* ── 뷰 (view.skin.php) ── */
#bo_v { font-family: var(--sans); max-width: 100%; }

.eb-view-head {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1rem;
  margin-bottom: 0;
}
.eb-view-head .ca-name {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 3px;
  margin-bottom: .5rem;
}
.eb-view-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: .75rem;
}
.eb-view-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .82rem;
  color: var(--ink-soft);
  align-items: center;
}
.eb-view-meta span { display: flex; align-items: center; gap: .3rem; }
.eb-view-meta strong { color: var(--ink); font-weight: 600; }

/* 본문 */
.eb-view-content {
  padding: 1.75rem 0;
  line-height: 1.85;
  color: var(--ink);
  font-size: .95rem;
  border-bottom: 1px solid var(--border);
  word-break: break-word;
  overflow-wrap: break-word;
}
.eb-view-content img { max-width: 100%; height: auto; border-radius: var(--radius); }

/* 서명 */
.eb-signature {
  margin-top: 1.5rem;
  padding: .75rem 1rem;
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .82rem;
  color: var(--ink-soft);
}

/* 추천·비추천 */
.eb-vote-wrap {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.eb-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.5rem;
  border-radius: 99px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .18s;
  border: 2px solid transparent;
}
.eb-vote-btn.good    { border-color: var(--blue);  color: var(--blue); }
.eb-vote-btn.good:hover    { background: var(--blue);  color: #fff; }
.eb-vote-btn.nogood  { border-color: var(--red);   color: var(--red); }
.eb-vote-btn.nogood:hover  { background: var(--red);   color: #fff; }

/* 첨부파일 */
.eb-attach {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.eb-attach h3 {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.eb-attach ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.eb-attach li a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  color: var(--blue);
  text-decoration: none;
  padding: .3rem 0;
}
.eb-attach li a:hover { text-decoration: underline; }

/* 관련링크 */
.eb-links { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.eb-links h3 { font-size: .85rem; font-weight: 700; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5rem; }
.eb-links ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.eb-links a { font-size: .85rem; color: var(--blue); text-decoration: none; }
.eb-links a:hover { text-decoration: underline; }

/* 이전·다음글 */
.eb-adjacent {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.25rem 0;
}
.eb-adjacent-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .6rem 1rem;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
  background: var(--paper-warm);
  transition: background .12s;
}
.eb-adjacent-item:last-child { border-bottom: none; }
.eb-adjacent-item:hover { background: rgba(184,137,42,.1); }
.eb-adjacent-label { color: var(--ink-mute); width: 100px; flex-shrink: 0; font-size: .78rem; }
.eb-adjacent-title { flex: 1; color: var(--ink); text-decoration: none; }
.eb-adjacent-title:hover { color: var(--gold); }

/* 뷰 하단 버튼 */
.eb-view-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  flex-wrap: wrap;
  gap: .5rem;
}
.eb-btn-group { display: flex; gap: .4rem; flex-wrap: wrap; }


/* ── 댓글 (view_comment.skin.php) ── */
#bo_vc { font-family: var(--sans); margin-top: 2rem; }

.eb-vc-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: .65rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1rem;
}
.eb-vc-title span { color: var(--gold); }

/* 댓글 아이템 */
.eb-cmt-item {
  display: flex;
  gap: .85rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.eb-cmt-item.is-reply { margin-left: 2.5rem; background: var(--paper-warm); padding: .85rem 1rem; border-radius: var(--radius); }

.eb-cmt-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--red));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}
.eb-cmt-avatar img { width: 100%; height: 100%; object-fit: cover; }

.eb-cmt-body { flex: 1; min-width: 0; }
.eb-cmt-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.eb-cmt-name { font-weight: 700; font-size: .88rem; color: var(--ink); }
.eb-cmt-date { font-size: .78rem; color: var(--ink-mute); }
.eb-cmt-ip   { font-size: .75rem; color: var(--ink-mute); }
.eb-cmt-secret { font-size: .75rem; color: var(--red); }

.eb-cmt-text {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.7;
  word-break: break-word;
}
.eb-cmt-actions {
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
}
.eb-cmt-actions a {
  font-size: .75rem;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color .15s;
}
.eb-cmt-actions a:hover { color: var(--gold); }

/* 댓글 작성 폼 */
.eb-cmt-form {
  background: var(--paper-warm);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.eb-cmt-form h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .85rem;
}
.eb-cmt-form-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.eb-cmt-form input[type=text],
.eb-cmt-form input[type=password],
.eb-cmt-form textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .88rem;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
  transition: border-color .15s;
  width: 100%;
}
.eb-cmt-form input[type=text]:focus,
.eb-cmt-form input[type=password]:focus,
.eb-cmt-form textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.eb-cmt-form textarea {
  min-height: 90px;
  resize: vertical;
}
.eb-cmt-form-opts {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .75rem;
  font-size: .82rem;
  color: var(--ink-soft);
}
.eb-cmt-form-opts label { display: flex; align-items: center; gap: .3rem; cursor: pointer; }
.eb-cmt-form-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}


/* ── 글쓰기 (write.skin.php) ── */
#bo_wr { font-family: var(--sans); }

.eb-write-title {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1.25rem;
}

.eb-write-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.eb-write-table tr { border-bottom: 1px solid var(--border); }
.eb-write-table th {
  background: var(--paper-warm);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .83rem;
  padding: .7rem 1rem;
  width: 110px;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
}
.eb-write-table td { padding: .7rem .75rem; vertical-align: middle; }
.eb-write-table input[type=text],
.eb-write-table input[type=password],
.eb-write-table input[type=email],
.eb-write-table select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  font-size: .88rem;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
  transition: border-color .15s;
}
.eb-write-table input:focus,
.eb-write-table select:focus { outline: none; border-color: var(--gold); }
.eb-write-table input[type=text].frm_input { width: 100%; max-width: 480px; }
.eb-write-table input[name=wr_subject] { width: 100%; max-width: 640px; }

/* 에디터 영역 래퍼 */
.eb-editor-wrap { width: 100%; }

/* 파일 업로드 */
.eb-file-row { display: flex; flex-direction: column; gap: .5rem; }
.eb-file-item { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.eb-file-item .del-check { cursor: pointer; }

/* 옵션 체크박스 */
.eb-write-opts { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .85rem; color: var(--ink-soft); }
.eb-write-opts label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }

.eb-write-foot {
  display: flex;
  justify-content: center;
  gap: .6rem;
  padding: 1.25rem 0;
  flex-wrap: wrap;
}


/* ── 반응형 미디어 쿼리 (Responsive Grid System) ── */
@media (max-width: 768px) {
  /* 1. 목록 (List) 모바일 블록화 개편 */
  .eb-table thead { display: none; } /* 헤더 생략 */
  .eb-table, .eb-table tbody { display: block; width: 100%; }
  .eb-table tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: .85rem .5rem;
    border-bottom: 1px solid var(--border);
  }
  .eb-table td {
    display: block;
    padding: 0;
    border: none;
    text-align: left;
  }
  /* 체크박스를 첫 줄 좌측에 번호와 나란히 수평 정렬 */
  .eb-table td.td_chk {
    display: inline-block !important;
    width: auto !important;
    margin-right: .55rem !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    padding-top: 1px !important;
  }
  .eb-table td.td_chk input[type=checkbox] {
    margin: 0 !important;
    vertical-align: middle;
  }
  .eb-table td.td_num {
    display: inline-block !important;
    width: auto !important;
    margin-right: .35rem !important;
    font-size: .88rem !important;
    font-weight: 700;
    color: var(--gold);
    vertical-align: top !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    padding-top: 2px !important; /* 2px 미세 하향 조정을 통한 칼싱크 실현 */
  }
  .eb-table td.td_num::after {
    content: ".";
  }
  .eb-table td.td_subject {
    display: inline-block !important;
    width: calc(100% - 45px) !important;
    vertical-align: top !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
    margin-bottom: .4rem;
    padding-right: 0;
  }
  .eb-table td.td_subject a {
    font-size: .95rem;
    font-weight: 500;
  }
  /* 메타 정보 td들은 모두 두 번째 줄에서 한 줄로 나란히 흐르게 설정 */
  .eb-table td.td_name,
  .eb-table td.td_date,
  .eb-table td.td_hit,
  .eb-table td.td_good {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    font-size: .75rem;
    color: var(--ink-mute);
    margin-top: .15rem;
    margin-right: .6rem;
  }
  .eb-table td.td_name::after { content: "  |"; margin-left: .4rem; }
  .eb-table td.td_date::after { content: "  |"; margin-left: .4rem; }
  .eb-table td.td_hit::before { content: "조회 "; }
  .eb-table td.td_good::before { content: "👍 "; }

  /* 검색바 모바일 100% 피팅 */
  .eb-search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: .4rem;
    padding: .75rem .5rem;
  }
  .eb-search-bar select,
  .eb-search-bar input[type=text],
  .eb-search-bar button {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* 2. 글 보기 (View) 반응형 개편 */
  .eb-view-title { font-size: 1.2rem; }
  .eb-view-meta { gap: .4rem .8rem; font-size: .78rem; }
  .eb-adjacent-item { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .65rem .85rem; }
  .eb-adjacent-label { width: 100%; font-weight: 600; }
  .eb-adjacent-title { font-size: .82rem; }
  .eb-btn-group { width: 100%; justify-content: space-between; }
  .eb-btn-group a, .eb-btn-group button { flex: 1; text-align: center; justify-content: center; }

  /* 3. 글 쓰기 (Write) 모바일 카드 폼 개편 */
  .eb-write-table, 
  .eb-write-table tbody, 
  .eb-write-table tr, 
  .eb-write-table th, 
  .eb-write-table td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .eb-write-table tr {
    border-bottom: 1px solid var(--border);
    padding: .6rem 0;
  }
  .eb-write-table th {
    background: transparent;
    padding: .2rem .25rem .4rem;
    font-weight: 700;
    font-size: .83rem;
    color: var(--gold);
    text-align: left;
  }
  .eb-write-table td {
    padding: .2rem .25rem;
  }
  .eb-write-table input[type=text].frm_input,
  .eb-write-table input[name=wr_subject],
  .eb-write-table input[type=password],
  .eb-write-table input[type=email],
  .eb-write-table select {
    width: 100% !important;
    max-width: none !important;
  }
  .eb-write-opts {
    flex-direction: column;
    gap: .4rem;
  }
  .eb-file-item {
    flex-wrap: wrap;
    gap: .25rem;
  }
}

@media (max-width: 480px) {
  /* 초소형 모바일 화면 최적화 */
  .eb-table td.td_name { display: none !important; }
}