:root {
  --ink: #181b20;
  --ink-soft: #5b6472;
  --ink-faint: #94a0ad;
  --line: #e5e8ec;
  --bg: #f4f6f8;
  --card: #ffffff;
  --brand: #0f8a4b;
  --brand-dark: #0b6b3a;
  --brand-light: #e8f7ee;
  --danger: #dc2626;
  --danger-light: #fdecea;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
body { font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", sans-serif; margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
.icon { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex-shrink: 0; }
h1 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }

.error { color: var(--danger); font-size: 13px; background: var(--danger-light); border: 1px solid #f5c6c2; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; }
.success { color: var(--brand-dark); font-size: 13px; background: var(--brand-light); border: 1px solid #bfe6cf; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; }

/* --- 저장/추가/삭제 결과 안내 팝업 (페이지 이동 없이 확인 후 새로고침) --- */
.corp-save-modal { display: none; position: fixed; inset: 0; background: rgba(15, 19, 25, .45); z-index: 9999; align-items: center; justify-content: center; }
.corp-save-modal.is-open { display: flex; }
.corp-save-modal-box { background: #fff; border-radius: var(--radius); padding: 28px 32px; max-width: 360px; width: 90%; box-shadow: var(--shadow-md); text-align: center; border-top: 4px solid var(--brand); }
.corp-save-modal-box.is-error { border-top-color: var(--danger); }
.corp-save-modal-msg { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.corp-save-modal-ok { background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 28px; font-size: 14px; font-weight: 700; cursor: pointer; }
.corp-save-modal-ok:hover { background: var(--brand-dark); }
.corp-save-modal-box.is-error .corp-save-modal-ok { background: var(--danger); }
.corp-save-modal-box.is-error .corp-save-modal-ok:hover { background: #b91c1c; }

/* --- Guest (login) --- */
body.guest { background: radial-gradient(circle at 20% 20%, #eef7f1, transparent 55%), var(--bg); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.guest-wrap { width: 100%; }
.login-box { max-width: 360px; margin: 0 auto; padding: 36px 32px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); text-align: center; }
.login-logo { max-width: 150px; height: auto; margin: 0 auto 20px; display: block; }
.login-box h1 { font-size: 16px; color: var(--ink-soft); font-weight: 600; margin-bottom: 22px; }
.login-box form { text-align: left; }
.login-box label { display: block; margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.login-box input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }
.login-box input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.login-box button { width: 100%; padding: 11px; background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 700; margin-top: 4px; transition: background .15s; }
.login-box button:hover { background: var(--brand-dark); }

/* --- Admin shell (sidebar layout) --- */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }
.admin-sidebar { width: 240px; flex-shrink: 0; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { display: block; padding: 12px 20px 8px; border-bottom: 1px solid var(--line); }
.sidebar-brand img { width: 100%; max-width: 140px; height: auto; display: block; }
.sidebar-nav { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 0; }
.sidebar-nav .nav-group-label { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 5px 10px 2px; }
.sidebar-nav .nav-group-label:first-child { padding-top: 0; }
.sidebar-nav .nav-divider { height: 1px; background: var(--line); margin: 3px 6px; }
.sidebar-nav .nav-link { position: relative; display: flex; align-items: center; gap: 9px; padding: 3.5px 12px; border-radius: 8px; font-size: 13px; line-height: 1.25; font-weight: 500; color: var(--ink-soft); transition: background .12s, color .12s; }
.sidebar-nav .nav-link .icon { color: var(--ink-faint); transition: color .12s; }
.sidebar-nav .nav-link:hover { background: var(--bg); color: var(--ink); }
.sidebar-nav .nav-link:hover .icon { color: var(--ink-soft); }
.sidebar-nav .nav-link.active { background: var(--brand-light); color: var(--brand-dark); font-weight: 700; }
.sidebar-nav .nav-link.active .icon { color: var(--brand-dark); }
.sidebar-nav .nav-link.active::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--brand); }
.sidebar-user { padding: 8px 16px; border-top: 1px solid var(--line); }
.sidebar-user-name { font-size: 13px; font-weight: 700; margin: 0; color: var(--ink); }
.sidebar-user-role { font-size: 11.5px; color: var(--ink-faint); margin: 2px 0 4px; }
.sidebar-user form { margin: 0; }
.sidebar-logout { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: none; border: 1px solid var(--line); color: var(--ink-soft); padding: 5px; border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; transition: background .12s, border-color .12s; }
.sidebar-shortcuts { padding: 4px 12px 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; }
.sidebar-shortcuts .nav-group-label { padding: 2px 10px 2px; }
.sidebar-shortcuts .nav-link .icon { width: 13px; height: 13px; color: var(--ink-faint); }
.sidebar-logout:hover { background: var(--bg); border-color: var(--ink-faint); }
.sidebar-session-timer { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 10px; margin-bottom: 4px; }
.sidebar-session-timer-label { font-size: 11px; color: var(--ink-faint); }
.sidebar-session-timer-value { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.sidebar-session-timer.sidebar-session-timer-warn { border-color: #e57373; background: #fdecea; }
.sidebar-session-timer.sidebar-session-timer-warn .sidebar-session-timer-value { color: #c62828; }

.admin-content { flex: 1; min-width: 0; }
main { max-width: 1160px; margin: 0 auto; padding: 32px 28px; }
/* 미리보기가 딸린 관리 화면 7곳(내 개인페이지 관리/내 메인페이지 관리/광고설정/팝업관리/
   일사이트관리/회사 홈페이지 관리/채용공고 설정) — 1500px 미리보기가 기본 main 폭(1160px)보다도
   넓어 그 자체로도 넘치므로, 이 화면들만 main 폭도 함께 넓힌다. */
main.main-wide { max-width: 2000px; }

/* --- Stat cards --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card-sm { padding: 12px 16px; }
.stat-card .stat-label { font-size: 12px; color: var(--ink-faint); margin: 0; font-weight: 500; }
.stat-card .stat-value { font-size: 24px; font-weight: 800; margin: 6px 0 0; color: var(--ink); letter-spacing: -.01em; }
.stat-card-sm .stat-value { font-size: 17px; }
.stat-card.has-icon { display: flex; align-items: center; gap: 14px; }
.stat-card .stat-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px; background: var(--brand-light); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.stat-card .stat-ic .icon { width: 20px; height: 20px; }
.stat-card .stat-body { min-width: 0; }
/* 대시보드 "내가 등록한 공고/거래처" 위젯 — 목록형(클릭 시 각 관리화면 edit로 이동). */
.dash-panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 12px; }
.dash-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.dash-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dash-panel-head .stat-ic { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-light); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; }
.dash-panel-head .stat-ic .icon { width: 18px; height: 18px; }
.dash-panel-head strong { font-size: 16px; }
.dash-panel-head span { font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.dash-list { display: flex; flex-direction: column; gap: 2px; }
.dash-list-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .12s; }
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row:hover { background: var(--bg); }
.dash-list-logo { width: 130px; height: 40px; border-radius: 7px; object-fit: contain; background: #fff; flex-shrink: 0; border: 1px solid var(--line); }
.dash-list-logo-fallback { display: flex; align-items: center; justify-content: center; background: var(--brand-light); color: var(--brand-dark); font-weight: 800; font-size: 16px; }
.dash-list-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list-date { flex-shrink: 0; font-size: 12px; color: var(--ink-faint); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.status-dot.status-online { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.status-dot.status-offline { background: #d6dae0; }

/* --- Common controls --- */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.btn, button[type="submit"] { display: inline-block; background: var(--brand); color: #fff; border: none; padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 700; transition: background .15s, transform .1s; }
.btn:hover, button[type="submit"]:hover { background: var(--brand-dark); }
.btn:active, button[type="submit"]:active { transform: scale(.98); }
.link-btn { background: none; border: none; color: var(--danger); text-decoration: none; font-weight: 600; cursor: pointer; font-size: 12.5px; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.btn-outline { background: #fff; color: var(--brand); border: 1px solid var(--brand); padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; }
.btn-outline:hover { background: var(--brand-light); }
.danger { background: var(--danger) !important; }
.danger:hover { background: #b91c1c !important; }

.data-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table th, .data-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.data-table th { background: var(--bg); color: var(--ink-soft); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--bg); }
.data-table .empty { text-align: center; color: var(--ink-faint); padding: 40px 16px; font-size: 13px; }
/* 최고관리자 거래처관리에서 담당자(헤드헌터)별로 구간을 나누는 그룹 헤더 행. */
.data-table .table-group-row td { background: var(--bg); color: var(--ink-soft); font-size: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); }

/* --- 채용공고관리 목록: 담당자변경 폼/상태 배지/관리 버튼을 각 셀 안에서 세로·가로 중앙정렬 --- */
.owner-change-form { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 0 auto; width: fit-content; }
.owner-change-form select { width: 92px; }
.owner-change-form button { width: 92px; white-space: nowrap; }
.job-status-cell { text-align: center; }
.job-actions-cell { text-align: center; }
.job-row-actions { display: inline-flex; flex-direction: column; gap: 6px; align-items: center; }
.job-row-actions form { margin: 0; }
.job-row-actions a, .job-row-actions button { white-space: nowrap; }

/* --- Filter bar (list-page search/filter controls) --- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; box-shadow: var(--shadow-sm); }
.filter-bar select, .filter-bar input[type="text"], .filter-bar input[type="search"] { padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; background: #fff; font-family: inherit; }
.filter-bar select:focus, .filter-bar input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.filter-bar input[type="text"], .filter-bar input[type="search"] { min-width: 200px; flex: 1; }
.filter-bar button { display: inline-flex; align-items: center; gap: 6px; }
.filter-bar .filter-reset { color: var(--ink-faint); font-size: 12.5px; }
.filter-bar .filter-reset:hover { color: var(--ink-soft); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #eef2fb; color: #3454a8; }
.badge-blue { background: #eaf1ff; color: #2358d6; }
.badge-gray { background: #f0f1f3; color: var(--ink-soft); }
.badge-green { background: var(--brand-light); color: var(--brand-dark); }
.badge-orange { background: #fef2e6; color: #c26a1c; }

/* --- Forms --- */
.job-form, .company-form, .simple-form { display: flex; flex-direction: column; gap: 16px; max-width: 760px; background: var(--card); padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.job-form label, .company-form label, .simple-form label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.job-form input[type="text"], .job-form input[type="email"], .job-form input[type="number"],
.job-form input[type="date"], .job-form input[type="datetime-local"], .job-form input[type="password"],
.job-form select, .job-form textarea,
.company-form input, .company-form select, .company-form textarea,
.simple-form input, .simple-form select, .simple-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
}
.job-form input:focus, .company-form input:focus, .simple-form input:focus,
.job-form select:focus, .job-form textarea:focus, .simple-form textarea:focus, .simple-form select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light);
}
/* 색상 선택(input type=color) 샘플이 텍스트 인풋용 padding에 눌려 가느다란 선처럼 보이던 것을
   가로 전체폭 x 세로 40px의 뚜렷한 색상 블록으로 표시되도록 별도 지정. */
.job-form input[type="color"], .company-form input[type="color"], .simple-form input[type="color"] {
  display: block; width: 100%; height: 40px; margin-top: 6px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer;
}
/* .company-form/.simple-form의 일반 input 규칙(display:block; width:100%)이 체크박스/라디오까지
   덮어써서 뒤따르는 텍스트가 다음 줄로 밀려나던 문제 — 체크박스는 인라인 크기로 되돌린다. */
.job-form input[type="checkbox"], .company-form input[type="checkbox"], .simple-form input[type="checkbox"],
.job-form input[type="radio"], .company-form input[type="radio"], .simple-form input[type="radio"] {
  display: inline-block; width: auto; margin: 0 0 0 6px; vertical-align: middle;
}
.job-form fieldset, .simple-form fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.job-form legend, .simple-form legend { font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 0 6px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
/* 게시판관리 "접수된 글" — .simple-form(max-width:760px)을 쓰지 않고 main 전체 폭까지
   넓게 펼쳐, 일반적인 게시판(글 목록) 형태로 노출한다. */
.admin-board-list { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.admin-board-item { padding: 20px 24px; border-bottom: 1px solid var(--line); }
.admin-board-item:last-child { border-bottom: none; }
.admin-board-item-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.admin-board-item-writer { font-size: 14px; font-weight: 700; color: var(--ink); }
.admin-board-item-date { font-size: 12px; color: var(--ink-faint); }
.admin-board-item-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.admin-board-item-replied { font-size: 12px; color: var(--ink-faint); margin: 0 0 6px; }
.admin-board-item-actions { display: flex; flex-direction: column; gap: 10px; }
.admin-board-reply-form { display: flex; flex-direction: column; gap: 8px; }
.admin-board-reply-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: inherit; font-size: 13.5px; color: var(--ink); resize: vertical; }
.admin-board-reply-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.admin-board-reply-form button { align-self: flex-end; }
.hint { font-size: 12px; color: var(--ink-faint); margin: 4px 0 0; }
.mono { font-family: "SF Mono", Consolas, monospace; font-size: 12px; }
.job-form .content-type-panel { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); }
.job-form .template-panel { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; background: var(--bg); }
.job-form .template-section { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: #fff; }
.job-form .template-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.job-form .template-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.job-form .template-row input.label-input { width: 140px; margin-top: 0; }
.job-form .template-row textarea.value-input { flex: 1; margin-top: 0; }
.job-form .template-row button { flex-shrink: 0; }

.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.banner-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); }
.banner-card img { width: 100%; border-radius: var(--radius-sm); margin-bottom: 8px; display: block; }
.banner-card p { font-size: 13px; margin: 0 0 8px; }

/* 사진 갤러리 "사진 관리" 미리보기만 축소(기존 .banner-card 공용 규칙은 다른 관리 화면들이
   같이 쓰므로 그대로 두고, 이 화면의 그리드에만 별도 클래스로 트랙 크기를 줄인다). */
.photo-manage-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.photo-manage-grid .banner-card { padding: 6px; }

/* --- 공고 작성(TEMPLATE) 배너 선택 — 배너관리와 동일하게 실제 이미지를 보고 고를 수 있도록 라디오+썸네일 그리드로 표시 --- */
.banner-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }
.banner-pick-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px; cursor: pointer; background: var(--card); transition: border-color .15s, box-shadow .15s;
}
.banner-pick-item:hover { border-color: var(--brand); }
.banner-pick-item.active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.banner-pick-item input[type="radio"] { margin: 0; width: auto; }
.banner-pick-item img { width: 100%; border-radius: 4px; object-fit: cover; display: block; }
.banner-pick-item span { font-size: 12px; color: var(--ink-soft); text-align: center; word-break: break-all; }
.banner-pick-item .banner-pick-none { display: flex; align-items: center; justify-content: center; min-height: 60px; color: var(--ink-faint); }

.theme-swatches { display: flex; gap: 8px; margin-top: 6px; }
.theme-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.theme-swatch.active { border-color: var(--ink); }

.company-form .repeatable-section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.company-form .repeatable-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.company-form .repeatable-header h2 { font-size: 13.5px; margin: 0; }
.company-form .repeatable-hint { font-size: 12px; color: var(--ink-faint); margin: 2px 0 0; }
.company-form .repeatable-row { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; background: var(--bg); }
.company-form .repeatable-row .fields { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.company-form .repeatable-row .fields input, .company-form .repeatable-row .fields textarea { margin-top: 0; background: #fff; }
.company-form .repeatable-row.single .fields { grid-template-columns: 1fr; }
.company-form .repeatable-row.history .fields { grid-template-columns: 100px 1fr; }
.company-form .repeatable-row-collapsed { align-items: center; }
.company-form .repeatable-summary { flex: 1; font-size: 13px; color: var(--ink); font-weight: 600; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
/* 미리보기가 딸린 설정 화면 7곳(내 개인페이지 관리/내 메인페이지 관리/광고설정/팝업관리/
   일사이트관리/회사 홈페이지 관리/채용공고 설정) 전용 — 기본 420px보다 넓게 보이도록 확대하되
   1920px는 너무 넓다는 피드백으로 1500px로 축소(다른 설정 화면의 기본 420px은 그대로 둔다).
   왼쪽 입력폼 컬럼은 480px 밑으로 눌리지 않게 최소폭을 둔다. */
.settings-layout-wide { grid-template-columns: minmax(480px, 1fr) 1500px; }
.settings-group-title { margin: 32px 0 10px; padding-top: 20px; border-top: 2px solid var(--line); font-size: 15px; font-weight: 800; color: var(--ink); }
.settings-layout .simple-form:first-of-type,
.settings-group-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.settings-preview-col { position: sticky; top: 16px; }
.settings-preview-col .preview-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.settings-preview-col .preview-head span { font-size: 12px; color: var(--ink-faint); }
.settings-preview-col .preview-frame-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; height: calc(100vh - 140px); min-height: 400px; box-shadow: var(--shadow-sm); }
.settings-preview-col iframe { width: 100%; height: 100%; border: none; }

@media (max-width: 1100px) {
  .admin-sidebar { position: static; height: auto; width: 100%; }
  .admin-shell { flex-direction: column; }
}
@media (max-width: 2260px) {
  .settings-layout-wide { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .settings-layout { grid-template-columns: 1fr; }
  .settings-preview-col { position: static; }
  .settings-preview-col .preview-frame-wrap { height: 480px; }
}

/* --- 대시보드 "개인링크 관리" 게시판 --- */
.pl-board { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.pl-category { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 20px; box-shadow: var(--shadow-sm); }
.pl-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pl-category-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.pl-category-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.pl-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pl-link-btn {
  display: inline-block; background: var(--brand); color: #fff; padding: 9px 18px; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 700; text-decoration: none; transition: background .15s, transform .1s;
}
.pl-link-btn:hover { background: var(--brand-dark); }
.pl-manage { position: relative; }
.pl-manage summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.pl-manage summary::-webkit-details-marker { display: none; }
.pl-manage summary:hover { color: var(--ink-soft); }
.pl-manage[open] summary { margin-bottom: 8px; }
.pl-manage .pl-inline-form { position: absolute; right: 0; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 12px; display: flex; gap: 6px; align-items: center; }
.pl-manage form + form { margin-top: 8px; }
.pl-link-manage-panel { position: absolute; right: 0; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 12px; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.pl-link-manage-list { display: flex; flex-direction: column; gap: 6px; }
.pl-link-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.pl-link-manage-row .hint { font-size: 12px; }
.pl-link-manage-panel .pl-inline-form { position: static; box-shadow: none; border: none; padding: 8px 0 0; margin-top: 0; border-top: 1px solid var(--line); background: none; }
.pl-add-category { display: inline-block; }
.pl-add-category-btn {
  display: inline-block; list-style: none; cursor: pointer; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px dashed var(--line); color: var(--ink-faint); font-size: 13px; font-weight: 600;
}
.pl-add-category-btn::-webkit-details-marker { display: none; }
.pl-add-category-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.pl-add-category { display: block; margin-top: 2px; }
.pl-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.pl-inline-form input { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; }
.pl-inline-form input[name="title"] { width: 160px; }
.pl-inline-form input[name="url"] { width: 240px; }
.pl-inline-form button { flex-shrink: 0; }

/* --- 문서관리(인재채용의뢰서/청구서/청구내역서) --- */
.doc-tabs { display: flex; gap: 4px; margin: 16px 0 20px; border-bottom: 2px solid var(--line); }
.doc-tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.doc-tab-btn:hover { color: var(--ink-soft); }
.doc-tab-btn.active { color: var(--brand-dark); border-bottom-color: var(--brand); }

/* --- 지원자관리 "모두공개"(후보자로 이동) 동의 확인 팝업 — 네이티브 <dialog> 사용 --- */
.consent-dialog { border: none; border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 24px; max-width: 360px; }
.consent-dialog::backdrop { background: rgba(16, 24, 40, .45); }

/* --- 채용공고관리(공고관리/상용구관리) 탭 — 문서관리와 동일한 스타일 --- */
.job-tabs { display: flex; gap: 4px; margin: 16px 0 20px; border-bottom: 2px solid var(--line); }
.job-tab-btn { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--ink-faint); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.job-tab-btn:hover { color: var(--ink-soft); }
.job-tab-btn.active { color: var(--brand-dark); border-bottom-color: var(--brand); }

.doc-editor-form .settings-group-title { font-size: 13px; margin: 20px 0 8px; }
.doc-editor-fields { display: flex; flex-direction: column; gap: 10px; }
.doc-editor-fields label { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.doc-editor-fields input[type="text"], .doc-editor-fields input[type="date"], .doc-editor-fields select, .doc-editor-fields textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px; font-family: inherit; box-sizing: border-box;
}
.doc-editor-fields textarea { resize: vertical; }
.doc-field-readonly { background: #f0f0f0 !important; color: #666; cursor: not-allowed; }
.doc-import-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.doc-import-row input { flex: 1 1 auto; margin-top: 0 !important; }
.doc-import-row button { flex: 0 0 100px; width: 100px; margin-top: 0; }
.doc-upload-warning { color: #c0392b; font-weight: 700; font-size: 12.5px; margin: 4px 0 0; }
.doc-editor-fields button[type="submit"] { margin-top: 10px; align-self: flex-start; }

.doc-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 900px; gap: 24px; align-items: start; margin-top: 12px; }
.doc-editor-preview { position: sticky; top: 16px; }
.doc-preview-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.doc-preview-toolbar strong { font-size: 13px; }

/* A4(210x297mm) 실제 크기로 그린 뒤 화면에서는 축소 표시(scale) — 인쇄시에는 그대로 실제 크기로 출력된다.
   미리보기가 너무 작다는 피드백으로 기존 0.55배에서 두 배인 1.1배로 확대(왼쪽 폼과 나란히 두기 위해
   .doc-editor-grid 오른쪽 컬럼 폭도 480px→900px로 함께 넓혔다). */
.doc-a4-scale-wrap { width: calc(210mm * 1.1); height: calc(297mm * 1.1); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: #fff; }
/* 기본적으로 한 페이지(A4)에 담기도록 여백/글자크기/행간을 촘촘하게 잡았다 — 필드가 34개까지
   되는 서식(인재채용의뢰서 등)도 보통 수준의 입력값이면 한 장 안에 들어간다. 특정 필드에
   유난히 긴 문구를 넣어 그래도 넘치는 경우는 인쇄 시 브라우저가 자동으로 다음 장으로
   넘겨준다(불가피한 페이지 넘김은 허용, 여기서 강제로 자르지 않는다). */
.doc-a4-page { width: 210mm; min-height: 297mm; padding: 8mm; box-sizing: border-box; background: #fff; color: #111; font-size: 9.5px; line-height: 1.3;
  transform: scale(1.1); transform-origin: top left; }
.doc-a4-title { text-align: center; font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.doc-center { text-align: center; }
.doc-pre-wrap { white-space: pre-wrap; }
.doc-hint-small { font-size: 7.5px; color: #555; margin: 6px 0 0; }

.doc-preview-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.doc-preview-table th, .doc-preview-table td { border: 1px solid #444; padding: 2px 6px; text-align: left; vertical-align: top; }
.doc-preview-table th { width: 32%; background: #f2f2f2; font-weight: 700; }
.doc-preview-table th.doc-section { width: auto; text-align: center; background: #cfe8cf; }
.doc-invoice-fee-table th, .doc-invoice-fee-table td { width: auto; text-align: center; }
.doc-invoice-fee-table tr:nth-child(2) td, .doc-invoice-fee-table tr:nth-child(3) td { text-align: center; vertical-align: middle; }
.doc-invoice-page p { margin: 3px 0; }
.doc-invoice-doc-no { font-weight: 700; overflow: hidden; }
/* 제목(제 목 : ..) 줄과 그 아래 본문 사이 구분선 — 기본 <hr> 스타일에 기대지 않고 명시적으로 그린다. */
.doc-invoice-page hr { border: none; border-top: 1px solid #444; margin: 8px 0; }
/* '----- 아 래 -----' 위아래로 최소 1cm씩 여백을 둔다(v19.21의 10cm는 과했다는 피드백으로 정정). */
.doc-invoice-arae { margin: 1cm 0 !important; }
/* 청구금액 칸(표 안, '청 구 금 액 (부가가치세 포함)' 옆 셀) 자체를 '일금 ..원정 / (₩..)'
   두 줄로 채운다 — 표 밖 별도 문단이 아니라 그 셀 안에 그대로 들어간다(샘플양식처럼). */
.doc-invoice-amount-words { font-weight: 700; line-height: 1.5; }

/* 청구서 상단 레터헤드 — 로고(사이트관리 로고 재사용) + 안내문구 2줄(문서첨부관리에서 설정).
   바탕색 없이 위아래 선만 노출해 달라는 요청으로 배경 제거 + 상하 보더로 대체. */
.doc-invoice-letterhead { text-align: center; margin: 0 0 8px; }
.doc-invoice-logo { height: 40px; margin: 0 auto 4px; display: block; }
.doc-invoice-header-bar { background: none; border-top: 1px solid #2c6e49; border-bottom: 1px solid #2c6e49; padding: 3px 6px; }
.doc-invoice-header-bar p { margin: 1px 0; color: #2c6e49; }
/* '청구인:..'만 이 고정 크기(28px)를 유지 — 문서첨부관리의 글자크기 설정 범위 밖이다. */
.doc-invoice-emphasis { font-weight: 700; font-size: 28px; }
/* '청구인:..' 줄 — .doc-invoice-page를 세로 flex로 만들고 margin-top:auto로 밀어내려
   기본적으로 페이지 하단에 붙게 하되, margin-bottom:2cm로 맨 아래에서 2cm 위로 올린다
   (v19.21의 10cm는 과했다는 피드백으로 정정). 내용이 넘쳐 페이지 하단 여유가 없을 때는
   auto 마진이 자연히 0이 되어 기존처럼 이어붙는다.
   position:relative + z-index:0으로 이 줄 전체를 하나의 스태킹 컨텍스트로 만든다 — 그래야
   음수 z-index를 가진 직인이 '(인)' 뿐 아니라 '사' 등 줄 전체의 일반 텍스트보다도 뒤에서
   그려진다(앵커에만 z-index를 줬을 때는 앵커 밖의 '사' 글자가 가려지는 문제가 있었다). */
.doc-invoice-signer { margin-top: auto !important; margin-bottom: 2cm !important; position: relative; z-index: 0; }
/* '(인)' 앵커는 직인의 좌표 기준점 역할만 한다 — 자체 z-index는 주지 않는다(줬다면 별도
   스태킹 컨텍스트가 생겨 .doc-invoice-signer 레벨의 음수 z-index 처리가 이 앵커 밖의
   텍스트('사' 등)까지는 못 미친다). */
.doc-invoice-seal-anchor { position: relative; display: inline-block; }
.doc-invoice-seal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 80px; width: auto; z-index: -1; }

/* 공문 "내용" — 직접 입력한 HTML(줄바꿈은 <br>, 표는 <table>)을 그대로 렌더링한다.
   admin이 표를 넣어도 테두리 없이 보이지 않도록 기본 테두리/여백만 잡아준다. */
.doc-official-content { min-height: 40mm; }
.doc-official-content table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.doc-official-content th, .doc-official-content td { border: 1px solid #444; padding: 3px 8px; }
.doc-official-content th { background: #f2f2f2; font-weight: 700; }

/* 청구서(헤드헌팅) 글자크기·행간 — 최고관리자가 문서첨부관리 탭에서 4개 그룹(회사정보/내용/
   일자/'상기와 같이..')별로 지정한 값을 CSS 변수로 받는다(뷰의 인라인 style에서 주입).
   '청구인:..'만 이 설정 범위 밖(고정 28px)이다. 이 서식에만 적용(인재채용의뢰서/청구내역서는
   기존 유지). 로고·직인 이미지 크기는 "글자크기" 요청 범위 밖이라 별도로 다룬다. */
.doc-invoice-page {
  position: relative;
  display: flex; flex-direction: column;
  font-size: var(--inv-content-fs); line-height: var(--inv-content-lh);
}
.doc-invoice-page .doc-preview-table { font-size: var(--inv-content-fs); }
.doc-invoice-page .doc-hint-small { font-size: var(--inv-content-fs); line-height: var(--inv-content-lh); }
.doc-invoice-page .doc-invoice-header-bar p { font-size: var(--inv-company-fs); line-height: var(--inv-company-lh); }
.doc-invoice-page .doc-invoice-date { font-size: var(--inv-date-fs); line-height: var(--inv-date-lh); }
.doc-invoice-page .doc-invoice-statement { font-weight: 700; font-size: var(--inv-statement-fs); line-height: var(--inv-statement-lh); }
/* 청구내역 표는 줄마다 위아래 여백이 생기도록 세로 패딩만 1.5배(2px→3px). */
.doc-invoice-fee-table th, .doc-invoice-fee-table td { padding: 3px 6px; }

/* 문서첨부관리 탭 — 청구서 글자크기·행간 설정 그룹(회사정보/내용/일자/'상기와 같이..') 4개를
   가로로 나란히 배치. */
.doc-settings-typo-group { display: flex; align-items: flex-end; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.doc-settings-typo-group strong { flex: 0 0 160px; font-size: 13px; }
.doc-settings-typo-group label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.doc-settings-typo-group input[type="number"] { width: 80px; }

@media (max-width: 1700px) {
  .doc-editor-grid { grid-template-columns: 1fr; }
  .doc-editor-preview { position: static; }
}

@media print {
  body * { visibility: hidden; }
  .doc-print-area, .doc-print-area * { visibility: visible; }
  .doc-print-area { position: absolute; top: 0; left: 0; }
  .doc-a4-scale-wrap { width: auto; height: auto; overflow: visible; border: none; box-shadow: none; }
  .doc-a4-page { transform: none; }
  @page { size: A4; margin: 0; }
}