/* =========================================================
   board-ui.css - 게시판 공통 UI 통합 스타일
   ========================================================= */

/* ===== 1. Reset-ish & Tokens ===== */
/* board-ui.css 파일의 맨 윗부분 */

:root {
  --bg: #f2f2f2;        /* PC 전체 회색 배경 (원본 #ffffff → #f2f2f2). jobstyle.css 의 body 와 통일 */
  --card: #ffffff;      /* 카드/박스 내부는 흰색 유지 (회색 배경 위에 떠 있는 카드 표현용) */
  --ink: #111;
  --muted: #666;
  --line: #eaeaea;
  --line-strong: #e0e0e0;
  
  /* [수정] 파란색(#5b7cff) -> 검은색(#111)으로 변경 */
  --brand: #111;        
  --brand-ink: #000;    /* 호버 시 더 진한 색 */
  
  --accent: #f5f7ff;
  --success: #0f7a3e;
  --warn: #8a6d1d;
  --radius: 14px;
  --shadow: 0 4px 16px rgba(0,0,0,.05);
  --gap: 16px;
  --space: 16px;

}
*{box-sizing:border-box}
/* [수정] body font-family / background 는 jobstyle.css 에 맡김 (중복 정의 충돌 방지)
   color 와 margin/padding 만 보존 */
html,body{margin:0;padding:0;color:var(--ink);}

/* ===== 2. Typography ===== */
.h1{font-size:28px;font-weight:800;margin:8px 0 14px;text-align:center}
.h2{font-size:18px;font-weight:800;margin:0 0 10px}
.p-muted{color:var(--muted);font-size:13px;margin:6px 0}
.text-center{text-align:center}
.bold{font-weight:700}

/* ===== 3. Components (Chips, Buttons, Badges) ===== */
/* Chips (카테고리/필터) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:13px;color:#333;cursor:pointer;text-decoration:none;
  transition: all 0.2s;
}
.chip.active{border-color:#111; background:#111; color:#fff; font-weight:700}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btns.inline{display:flex; gap:8px; justify-content:center; align-items:center;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;
  color:#111;font-size:14px;text-decoration:none;cursor:pointer;
  height:36px;
}
.btn:hover{border-color:#111}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn.ghost{background:#fff;border-color:var(--line)}
.btn.min{padding:7px 10px;font-size:13px;height:30px;}
.btn.sm{height:34px; line-height:34px; padding:0 10px; font-size:13px; border-radius:8px;}

/* Badges (상태표시) */
.badge{
  display:inline-block; font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid transparent; line-height:1; white-space:nowrap;
}
.badge.approved{background:#e8fff1;color:var(--success);border-color:#bde9cd}
.badge.pending{background:#fff8e6;color:var(--warn);border-color:#f0deac}
.badge.rejected{background:#fff0f0; color:#b80000; border-color:#ffc9c9;}
.badge.hold{background:#fff8e5; color:#8a5a00; border-color:#fde8b6;}

/* ===== 4. Grid & Cards ===== */
.page-wrap{max-width:1100px;margin:0 auto;padding:16px;}
.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  margin-bottom: 28px;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;
}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.card-title{font-weight:800;margin:2px 0 0;font-size:16px;line-height:1.35}
.card-title a{text-decoration:none;color:inherit}
.thumb{display:block;overflow:hidden;border-radius:10px;margin:4px 0}
.thumb img{display:block;width:100%;height:auto}

/* Card Summary & Details */
.card-summary { font-size:14px; margin-bottom:8px; }
.card-toggle {
  width:100%; padding:6px 0; border:none; background:none;
  color:#666; font-size:13px; cursor:pointer;
}
.card-detail { display:none; margin-top:10px; }
.card-detail .info { margin-bottom:6px; font-size:14px; display:flex; gap:8px; align-items:baseline; }
.card-detail .info .label{min-width:40px;color:#777;font-size:12px}
.js-card { cursor: pointer; transition: box-shadow .2s, transform .2s; }
.js-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.12); transform: translateY(-3px); }
.js-card .card-detail.is-open{ display:block !important; } /* 강제 열림 */

/* Checkbox in card */
.card-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#666}
.card-chk input[type=checkbox]{width:16px;height:16px}


/* ===== 5. [중요] 글자 아이템 & 아이콘 스타일 (통합됨) ===== */

/* (1) 반짝임 효과 애니메이션 */
@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0.5; color: red; }
  100% { opacity: 1; }
}
.blink-effect {
    animation: blink-animation 1s infinite;
}

/* (2) 텍스트 아이콘 배지 (가능, 환영 등) */
.txt-icon-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 4px;
    margin-right: 4px;
    color: #fff;
    background-color: #333; /* 기본색 */
    vertical-align: middle;
}

/* (3) 이미지 아이콘 크기 (31x16) */
.img-icon-item {
    width: 31px;
    height: 16px;
    vertical-align: middle;
    margin-right: 4px;
    display: inline-block;
}


/* ===== 6. Layout Utilities & Search ===== */
.actions-top,.actions-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}
.actions-bottom { margin-top: 36px; padding-top: 16px; border-top: 0px solid #eaeaea; }
.search-box{display:flex;align-items:stretch;gap:6px}
.search-box .input{
  height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;min-width:220px
}
.mt-12{margin-top:12px}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}




/* ===== 8. Pay Modal ===== */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:1000; }
.modal{ position:fixed; inset:0; display:none; z-index:1001; align-items:center; justify-content:center; padding:16px; }
.modal.open, .modal-backdrop.open{ display:flex; }
.modal-card{ width:100%; max-width:560px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.modal-title{ font-size:18px; font-weight:800; margin:0; }
.modal-close{ border:none; background:transparent; font-size:20px; line-height:1; cursor:pointer; padding:6px; }
.modal-body{ display:grid; gap:12px; }
.plan{
  display:grid; grid-template-columns: 1fr 140px auto; align-items:center; gap:14px;
  padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:#fff;
}
.plan .meta{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.plan .name{ font-weight:800; font-size:15px; }
.plan .desc{ font-size:13px; color:var(--muted); }
.plan .price{ justify-self:center; font-weight:800; font-size:16px; white-space:nowrap; }
.plan [data-choose]{ justify-self:end; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }


/* ===== 9. Admin List (.adm-jobs) ===== */
.page-wrap.adm-jobs{ max-width: 1400px; margin: 0 auto; }
.adm-jobs, .adm-jobs *{ writing-mode: horizontal-tb !important; text-orientation: mixed !important; }
.adm-jobs .table{ width: 100%; border-collapse: collapse; table-layout: auto; }
.adm-jobs .table thead th{ background:#f7f7f7; font-weight:800; }
.adm-jobs .table th, .adm-jobs .table td{
  padding:16px 14px; border-top:1px solid #eee; vertical-align: top;
  word-break: keep-all !important; overflow-wrap: anywhere; line-height: 1.5;
}
.adm-jobs .table td:nth-child(2) .bold{ display:block; font-weight:800; margin-bottom:4px; }
.adm-jobs .table td:nth-child(2) .p-muted{ display:block; color:#7a7a7a; font-size:12px; }
/* 컬럼 너비 */
.adm-jobs th:nth-child(1){ width:68px; }
.adm-jobs th:nth-child(3){ width:12%; }
.adm-jobs th:nth-child(4){ width:320px; }
.adm-jobs th:nth-child(5){ width:230px; }
.adm-jobs th:nth-child(6){ width:260px; }
/* 입력 및 버튼 */
.adm-jobs input[type="date"]{ width:150px; height:34px; padding:0 10px; border:1.2px solid #e6e6e6; border-radius:10px; }
.adm-jobs .row-inline{ display:flex; align-items:center; gap:8px; }
.adm-jobs .row-inline button[type="submit"]{
  display:inline-flex !important; height:32px !important; padding:0 14px !important; min-width:56px !important;
  border-radius:10px !important; background:#111 !important; color:#fff !important; border:1.2px solid #111 !important;
}
.adm-jobs .btns{ display:flex !important; flex-wrap:wrap !important; gap:8px 10px !important; align-items:center !important; margin-top:4px; }
.adm-jobs .btn{ background:#fff !important; color:#111 !important; border:1px solid #e5e5e5 !important; border-radius:10px !important; font-weight:600 !important; }
.adm-jobs .btn:hover{ background:#f7f7f7 !important; border-color:#dcdcdc !important; }
.adm-jobs .btn.primary{ background:#111 !important; border-color:#111 !important; color:#fff !important; }