:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --line: #e4e9f0;
  --line-strong: #d6dde8;
  --text: #172033;
  --muted: #687386;
  --brand: #1f4f8a;
  --brand-strong: #173d6b;
  --brand-soft: #edf4ff;
  --accent: #2c7a67;
  --accent-soft: #eaf7f3;
  --warn: #b56b12;
  --warn-soft: #fff7e8;
  --danger: #a84141;
  --shadow: 0 12px 35px rgba(27, 48, 78, 0.08);
  --sidebar: 276px;
  --header: 74px;
  --radius: 14px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;
  line-height: 1.62;
  letter-spacing: -0.012em;
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header);
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 1580px;
  height: 100%;
  margin: 0 auto;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 282px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 19px;
  border-radius: 11px; background: linear-gradient(145deg, var(--brand), #3777bb);
  box-shadow: 0 6px 16px rgba(31,79,138,.2);
}
.brand strong { display: block; font-size: 17px; letter-spacing: -.03em; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 11.5px; }
.top-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.top-nav a {
  padding: 25px 15px 23px;
  font-size: 14px;
  font-weight: 650;
  color: #3e4858;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.top-nav a:hover, .top-nav a.active { color: var(--brand); border-bottom-color: var(--brand); }
.ai-link { color: var(--brand) !important; }
.spark { color: #6f56c5; margin-right: 4px; }
.search-trigger {
  border: 1px solid var(--line-strong); background: var(--surface-2); color: #445064;
  border-radius: 10px; padding: 9px 11px; display: flex; align-items: center; gap: 7px;
  cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 13px;
}
.search-trigger:hover { border-color: #b8c5d5; background: #fff; }
kbd { border: 1px solid #d7dde6; background: white; border-radius: 5px; padding: 1px 5px; font-size: 10px; color: #778091; }
.search-icon { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 50%; display: inline-block; position: relative; opacity:.78; }
.search-icon::after { content:""; position:absolute; width:6px; height:2px; background:currentColor; right:-5px; bottom:-2px; transform:rotate(45deg); border-radius:2px; }

.app-shell { max-width: 1580px; margin: 0 auto; display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: calc(100vh - var(--header)); }
.sidebar {
  position: sticky; top: var(--header); align-self: start; height: calc(100vh - var(--header));
  padding: 24px 18px 28px 22px; overflow: auto; border-right: 1px solid var(--line); background: #f8fafc;
}
.side-title { font-weight: 800; color: #21314a; font-size: 16px; margin: 0 8px 14px; }
.side-nav { display: flex; flex-direction: column; gap: 5px; }
.nav-group { border-radius: 10px; overflow: hidden; }
.nav-group > button {
  width: 100%; border: 0; background: transparent; display: flex; align-items:center; justify-content:space-between;
  padding: 10px 10px; font-weight: 720; color:#33415a; text-align:left; cursor:pointer; border-radius:9px;
}
.nav-group > button:hover { background:#eef3f8; }
.nav-group.open > button { color:var(--brand); background:var(--brand-soft); }
.chevron { font-size: 12px; transition:.18s ease; color:#8992a2; }
.nav-group.open .chevron { transform: rotate(90deg); }
.nav-children { display:none; padding: 5px 0 6px 11px; }
.nav-group.open > .nav-children { display:block; }
.nav-link, .nav-child-toggle {
  width:100%; display:block; border:0; background:transparent; padding:7px 10px 7px 14px; text-align:left;
  font-size:13px; color:#566276; border-radius:8px; cursor:pointer; position:relative;
}
.nav-link::before, .nav-child-toggle::before { content:""; position:absolute; left:4px; top:15px; width:3px; height:3px; border-radius:50%; background:#9ba5b3; }
.nav-link:hover, .nav-link.active, .nav-child-toggle:hover { background:#edf2f7; color:var(--brand); }
.nav-link.active { font-weight:700; }
.nav-sub { padding-left: 12px; display: none; }
.nav-sub.open { display:block; }
.nav-child-toggle { display:flex; align-items:center; justify-content:space-between; }
.nav-child-toggle .mini-chev { font-size:10px; }
.side-note { margin:24px 5px 0; padding:13px 14px; background:#fff; border:1px solid var(--line); border-radius:10px; color:#6b7484; font-size:11.5px; }
.side-note strong { display:block; color:#49566a; margin-bottom:3px; font-size:12px; }
.side-note p { margin:0; }

.main-content { padding: 30px 42px 72px; min-width:0; }
.content-wrap { max-width: 1120px; margin: 0 auto; }
.breadcrumb { font-size:12px; color:#7b8594; display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:17px; }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb .sep { color:#b2bac5; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.page-kicker { font-size:12px; font-weight:750; color:var(--brand); margin-bottom:5px; }
h1 { margin:0; font-size:31px; letter-spacing:-.04em; line-height:1.3; }
.page-desc { margin:8px 0 0; color:var(--muted); font-size:14px; }
.updated { font-size:11.5px; color:#8791a0; white-space:nowrap; margin-top:7px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 10px rgba(44,62,86,.03); }
.section-card { padding:25px 27px; margin-top:18px; }
.section-title { margin:0 0 15px; font-size:18px; letter-spacing:-.025em; }
.section-sub { margin:-8px 0 18px; color:var(--muted); font-size:13px; }

.hero {
  background: linear-gradient(125deg,#173e6d 0%,#255d9a 58%,#2f739d 100%); color:#fff;
  border-radius:18px; padding:40px 42px; box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.hero::after { content:""; position:absolute; width:320px;height:320px;border:70px solid rgba(255,255,255,.07);border-radius:50%;right:-90px;top:-130px; }
.hero .eyebrow { font-size:13px; font-weight:700; opacity:.78; }
.hero h1 { font-size:35px; max-width:700px; margin-top:6px; }
.hero p { max-width:660px; margin:13px 0 23px; color:rgba(255,255,255,.82); font-size:14px; }
.hero-actions { display:flex; gap:9px; position:relative; z-index:2; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; padding:10px 14px; font-weight:700; font-size:13px; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:#fff; color:var(--brand-strong); }
.btn-secondary { border-color:rgba(255,255,255,.35); color:#fff; background:rgba(255,255,255,.08); }
.btn-dark { background:var(--brand); color:#fff; }
.btn-outline { background:#fff; color:#42506a; border-color:var(--line-strong); }


.home-hero p { margin-bottom: 0; }
.notice-board-home { margin-top:18px; overflow:hidden; }
.notice-board-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px 12px; border-bottom:1px solid var(--line); }
.notice-board-head h2 { margin:0; font-size:16px; letter-spacing:-.025em; }
.notice-board-head a { color:var(--muted); font-size:12px; font-weight:650; }
.notice-board-head a:hover { color:var(--brand); }
.notice-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 20px; }
.notice-row:hover { background:#fbfcfe; }
.notice-row strong { font-size:13px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice-row time { color:var(--muted); font-size:11.5px; }
.notice-label { display:inline-flex; padding:3px 7px; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-size:10px; font-weight:800; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.guide-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; transition:.15s; }
.guide-card:hover { border-color:#bdcbdc; box-shadow:0 6px 18px rgba(29,56,92,.06); transform:translateY(-1px); }
.guide-card .quick-icon { margin:0; }
.guide-card strong { display:block; font-size:14px; }
.guide-card span { display:block; margin-top:2px; color:var(--muted); font-size:11.5px; }
.guide-card b { color:#9aa8b8; font-size:20px; font-weight:500; }

.quick-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:11px; margin-top:18px; }
.quick-card { padding:17px 14px; border:1px solid var(--line); background:#fff; border-radius:12px; transition:.15s; }
.quick-card:hover { transform:translateY(-2px); border-color:#bdcbdc; box-shadow:0 7px 20px rgba(29,56,92,.07); }
.quick-icon { width:35px;height:35px;border-radius:9px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);font-weight:800;margin-bottom:11px; }
.quick-card strong { display:block; font-size:14px; }
.quick-card span { display:block; color:var(--muted); font-size:11.5px; margin-top:2px; }

.steps { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:12px; }
.step-card { min-height:192px; padding:18px 16px 16px; position:relative; background:#fff; border:1px solid var(--line); border-radius:12px; }
.step-card:not(:last-child)::after { content:"›"; position:absolute; right:-10px; top:78px; z-index:3; width:19px;height:30px;display:grid;place-items:center;color:#8da0b7;font-size:25px;background:var(--bg); }
.step-no { display:inline-grid; place-items:center; width:30px;height:30px;border-radius:8px;background:var(--brand-soft);color:var(--brand);font-size:11px;font-weight:800;margin-bottom:11px; }
.step-card h3 { margin:0 0 9px; font-size:15px; }
.step-card p { margin:0; color:#657084; font-size:12.5px; }
.step-card .key { font-weight:800; color:var(--brand-strong); background:#eef4fb; padding:0 3px; border-radius:3px; }
.step-card.clickable { cursor:pointer; transition:.15s; }
.step-card.clickable:hover { border-color:#aebfd2; box-shadow:0 6px 18px rgba(35,64,101,.08); transform:translateY(-2px); }

.exception-box { margin-top:20px; border:1px solid #e3c996; background:linear-gradient(180deg,#fffaf0,#fffdf8); border-radius:14px; overflow:hidden; }
.exception-head { padding:13px 18px; border-bottom:1px solid #ead7b0; display:flex; align-items:center; gap:9px; color:#805111; font-weight:800; font-size:14px; }
.exception-badge { font-size:10px; padding:3px 7px; border-radius:999px; background:#ffe5b0; color:#78470a; }
.exception-body { padding:22px 23px 18px; }
.exception-flow { display:grid; grid-template-columns:1fr 42px 1fr 42px 1.15fr; align-items:center; gap:7px; }
.exception-node { background:#fff; border:1px solid #ead7b0; border-radius:11px; padding:16px 15px; text-align:center; min-height:93px; display:grid; place-items:center; font-size:13px; color:#514d47; }
.exception-node strong { color:#7a4b0d; }
.exception-arrow { text-align:center; color:#b07c2f; font-size:23px; }
.legal-source { margin-top:15px; padding-top:13px; border-top:1px dashed #dfc897; color:#7b6b55; font-size:11.5px; }
.legal-source strong { color:#5e4c34; }

.process-list { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.process-item { border:1px solid var(--line); border-radius:11px; background:#fff; padding:17px 16px; }
.process-item .label { color:var(--brand); font-weight:800; font-size:11px; margin-bottom:5px; }
.process-item strong { font-size:14px; }
.process-item p { margin:5px 0 0; font-size:12px; color:var(--muted); }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.info-box { padding:20px 20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.info-box h3 { margin:0 0 12px; font-size:15px; }
.clean-list { margin:0; padding-left:18px; color:#515d70; font-size:13px; }
.clean-list li { margin:6px 0; }
.highlight { color:var(--brand-strong); font-weight:800; }
.notice { margin-top:13px; padding:12px 14px; border-radius:9px; background:var(--brand-soft); color:#415876; font-size:12px; }
.notice.warn { background:var(--warn-soft); color:#76501e; }
.tag-list { display:flex; flex-wrap:wrap; gap:8px; }
.tag { display:inline-flex; padding:7px 10px; background:#f3f6f9; border:1px solid var(--line); border-radius:8px; font-size:12px; color:#4f5a6d; }

.module-list { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.home-guide-section { margin-top:18px; }
.home-guide-section .quick-grid { margin-top:0; }
.home-shortcuts { grid-template-columns:repeat(4,1fr); }
.module-card { padding:20px; }
.module-card .mod-icon { width:38px;height:38px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:850;margin-bottom:12px; }
.module-card h3 { margin:0 0 5px; font-size:15px; }
.module-card p { margin:0; color:var(--muted); font-size:12.5px; }

.empty-state { padding:56px 30px; text-align:center; border:1px dashed #cbd4df; background:#fafbfd; border-radius:14px; }
.empty-state .empty-icon { width:50px;height:50px;border-radius:15px;background:#edf2f7;color:#78869a;display:grid;place-items:center;margin:0 auto 14px;font-weight:800; }
.empty-state h3 { margin:0 0 6px; }
.empty-state p { margin:0; color:var(--muted); font-size:13px; }

.list-table { width:100%; border-collapse:collapse; font-size:13px; }
.list-table th { background:#f5f7fa; color:#556174; text-align:left; padding:11px 12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11.5px; }
.list-table td { padding:13px 12px; border-bottom:1px solid var(--line); }
.list-table tr:hover td { background:#fbfcfe; }
.badge { display:inline-block; padding:3px 7px; border-radius:999px; background:#eef3f8; color:#55647a; font-size:10.5px; }

.tool-card { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px; }
.tool-meta h3 { margin:0 0 5px; font-size:17px; }
.tool-meta p { margin:0; color:var(--muted); font-size:12.5px; }
.tool-actions { display:flex; gap:8px; }

.ai-panel { background:linear-gradient(125deg,#f6f3ff,#eff7ff); border:1px solid #dcd6f5; border-radius:16px; padding:30px; }
.ai-orb { width:48px;height:48px;border-radius:14px;background:linear-gradient(140deg,#6853b5,#3d79b7);color:#fff;display:grid;place-items:center;font-size:22px;margin-bottom:15px; }
.ai-panel h2 { margin:0 0 8px; font-size:23px; }
.ai-panel p { margin:0 0 18px; color:#5f6780; max-width:740px; font-size:13.5px; }
.source-pills { display:flex; flex-wrap:wrap; gap:7px; margin:15px 0 21px; }
.source-pills span { padding:6px 9px; background:rgba(255,255,255,.75); border:1px solid #d9dced; border-radius:999px; font-size:11px; color:#555f75; }

.site-footer { max-width:1580px; margin:0 auto; min-height:78px; padding:21px 32px; border-top:1px solid var(--line); color:#8490a0; display:flex; align-items:center; justify-content:space-between; font-size:11.5px; background:#f8fafc; }
.site-footer strong { color:#687487; margin-right:10px; }

.search-modal { position:fixed; inset:0; z-index:100; display:none; }
.search-modal.open { display:block; }
.search-backdrop { position:absolute; inset:0; background:rgba(18,28,42,.38); backdrop-filter:blur(2px); }
.search-panel { position:relative; width:min(760px, calc(100% - 40px)); margin:82px auto 0; background:#fff; border-radius:16px; box-shadow:0 25px 80px rgba(13,25,42,.25); overflow:hidden; }
.search-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 10px; }
.search-head h2 { margin:0; font-size:17px; }
.icon-btn { border:0;background:transparent;font-size:24px;color:#8390a0;cursor:pointer; }
.search-input-wrap { margin:0 19px 14px; border:1px solid #bdc9d8; border-radius:11px; display:flex; align-items:center; gap:11px; padding:0 13px; color:#728096; }
.search-input-wrap input { width:100%; border:0; outline:0; padding:13px 0; font-size:14px; color:var(--text); }
.search-results { max-height:500px; overflow:auto; border-top:1px solid var(--line); padding:10px; }
.search-item { display:block; padding:12px 13px; border-radius:9px; }
.search-item:hover { background:#f3f6fa; }
.search-item strong { display:block; font-size:13.5px; }
.search-item span { display:block; margin-top:2px; color:var(--muted); font-size:11.5px; }
.search-empty { padding:35px 20px; text-align:center; color:var(--muted); }
.search-empty strong { display:block; color:#566174; margin-bottom:4px; }

@media (max-width: 1240px) {
  :root { --sidebar: 250px; }
  .top-nav a { padding-left:10px; padding-right:10px; font-size:13px; }
  .brand { min-width:240px; }
  .brand small { display:none; }
  .steps { grid-template-columns:repeat(3,1fr); }
  .step-card:not(:last-child)::after { display:none; }
  .quick-grid { grid-template-columns:repeat(3,1fr); }
  .home-shortcuts { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px) {
  .top-nav { display:none; }
  .header-inner { padding:0 14px; }
  .search-trigger span:not(.search-icon) { display:none; }
  .app-shell { display:block; }
  .sidebar { display:none; }
  .main-content { padding:24px 18px 55px; }
  .info-grid, .module-list, .process-list { grid-template-columns:1fr; }
  .home-shortcuts { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
  .exception-flow { grid-template-columns:1fr; }
  .exception-arrow { transform:rotate(90deg); }
  .quick-grid, .guide-grid { grid-template-columns:1fr 1fr; }
  .notice-row { grid-template-columns:auto minmax(0,1fr); }
  .notice-row time { display:none; }
}

/* v4: 채용 관련 원문 연결 및 채용공고 상세 */
.section-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:2px; }
.section-title-row .section-title { margin-bottom:4px; }
.section-title-row .section-sub { margin-bottom:0; }
.source-link { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; padding:9px 12px; border:1px solid #cbd7e5; border-radius:9px; background:#fff; color:var(--brand-strong); font-size:11.5px; font-weight:750; transition:.15s; }
.source-link:hover { border-color:#9fb4cc; background:#f6f9fc; box-shadow:0 4px 12px rgba(29,56,92,.06); }
.source-link.compact { margin-top:12px; padding:7px 10px; }
.legal-reference-card { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 18px; border:1px solid var(--line); border-radius:11px; background:#fbfcfe; }
.legal-reference-card strong { display:block; margin-top:5px; font-size:13.5px; }
.legal-reference-label { color:var(--brand); font-size:10.5px; font-weight:800; }
.process-list-3 { grid-template-columns:repeat(3,1fr); }
.check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-top:14px; }
.check-item { display:flex; align-items:flex-start; gap:11px; min-height:52px; padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.check-item > span { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:8px; background:var(--brand-soft); color:var(--brand); font-size:10px; font-weight:850; }
.check-item strong { padding-top:3px; font-size:12.5px; font-weight:650; line-height:1.5; }
.path-text { display:inline-block; margin-top:4px; color:#5d6f86; font-weight:750; }
.duration-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:12px; }
.duration-card { padding:17px 16px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.duration-card.primary { border-color:#b8c9dc; background:#f7faff; }
.duration-card > span { display:block; min-height:32px; color:#69778b; font-size:11px; font-weight:700; }
.duration-card strong { display:block; margin:2px 0 6px; color:var(--brand-strong); font-size:21px; letter-spacing:-.4px; }
.duration-card p { margin:0; color:var(--muted); font-size:11.5px; }
.notice-exception-box { margin-top:14px; }
.exception-lead { margin:0 0 14px; color:#665b4d; font-size:12.5px; }
.exemption-list { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.exemption-item { display:flex; gap:11px; align-items:flex-start; padding:14px 15px; border:1px solid #ead7b0; border-radius:10px; background:#fff; color:#514d47; font-size:12.5px; line-height:1.55; }
.exemption-no { display:grid; place-items:center; flex:0 0 26px; height:26px; border-radius:999px; background:#fff1d3; color:#8b5a14; font-weight:850; font-size:10.5px; }
.exemption-item strong { color:#7a4b0d; }
.exception-note { display:inline-block; margin-top:3px; color:#8b6d42; font-size:11.5px; font-weight:700; }
.plain-copy { margin:0; color:#596578; font-size:13px; line-height:1.7; }
.legal-inline { color:#596578; font-size:13px; line-height:1.65; }

@media (max-width: 1100px) {
  .duration-grid { grid-template-columns:1fr 1fr; }
  .check-grid, .exemption-list { grid-template-columns:1fr; }
  .section-title-row { display:block; }
  .section-title-row .source-link { margin-top:12px; }
}
@media (max-width: 900px) {
  .process-list-3, .duration-grid { grid-template-columns:1fr; }
  .legal-reference-card { align-items:flex-start; flex-direction:column; }
}

/* v5 hiring detail pages */
.rule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.rule-card{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fff}
.rule-card h3{font-size:15px;margin:0 0 9px;color:var(--text)}
.rule-card p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}
.rule-card strong{color:var(--text)}
.prohibit-list{display:grid;gap:10px;margin-top:14px}
.prohibit-item{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border:1px solid #f0d8d8;background:#fffafa;border-radius:13px;line-height:1.65;font-size:14px}
.prohibit-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#f9e3e3;color:#b63b3b;font-weight:800;flex:0 0 auto}
.timeline-box{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:10px;margin-top:16px}
.timeline-node{border:1px solid var(--line);border-radius:16px;background:#fff;padding:16px}
.timeline-node span{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}.timeline-node strong{font-size:15px}.timeline-arrow{align-self:center;color:#8b98a9;font-size:22px}
.person-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.person-card{border:1px solid var(--line);border-radius:16px;padding:17px;background:#fff}.person-card h3{margin:0 0 10px;font-size:16px}.person-card ul{margin:0;padding-left:18px;line-height:1.75;font-size:14px;color:var(--muted)}
.callout-strong{border:1px solid #cfd9ef;background:#f7f9ff;border-radius:16px;padding:17px 18px;margin-top:14px;line-height:1.75}.callout-strong strong{color:#1d3f77}
.count-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.count-card{border:1px solid var(--line);border-radius:15px;padding:17px;text-align:center;background:#fff}.count-card span{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}.count-card strong{font-size:22px;color:var(--navy)}
.contract-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}.contract-card{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff}.contract-card h3{margin:0 0 12px;font-size:16px}.contract-card ol{margin:0;padding-left:20px;line-height:1.8;font-size:14px;color:var(--muted)}
.principle-box{border:1px solid #d6dde7;border-radius:16px;overflow:hidden;margin-top:14px}.principle-head{padding:13px 16px;background:#f5f7fa;font-weight:800}.principle-body{padding:16px;line-height:1.75;font-size:14px;color:var(--muted)}
@media(max-width:980px){.rule-grid,.count-grid{grid-template-columns:1fr}.person-grid,.contract-grid{grid-template-columns:1fr}.timeline-box{grid-template-columns:1fr}.timeline-arrow{transform:rotate(90deg);justify-self:center}}


/* v6 기본근속연수관리 */
.career-use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.career-use-card{position:relative;border:1px solid var(--line);border-radius:15px;background:#fff;padding:17px 18px 16px 56px;min-height:92px}
.career-use-no{position:absolute;left:16px;top:17px;width:29px;height:29px;border-radius:9px;background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:850;display:grid;place-items:center}
.career-use-card strong{display:block;font-size:15px;margin-bottom:5px}
.career-use-card p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.career-month-note{margin-top:14px}
.nais-path{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:15px 17px;border:1px solid #d8e1eb;background:#f8fafc;border-radius:12px;color:#596b80;font-size:13px}
.nais-path span{padding:7px 10px;border-radius:8px;background:#fff;border:1px solid #e0e6ed}
.nais-path b{color:#91a0b2;font-size:17px}
.nais-path strong{padding:7px 10px;border-radius:8px;background:var(--brand-soft);color:var(--brand-strong);border:1px solid #c9d7e7}
.career-screen-guide{overflow:hidden}
.shot-block{margin-top:17px}
.shot-caption{display:flex;align-items:center;gap:9px;margin-bottom:8px;color:#253b57}
.shot-caption span{padding:5px 8px;border-radius:7px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:800}
.shot-caption strong{font-size:13px}
.shot-wrap{position:relative;border:1px solid #cbd8e7;border-radius:12px;overflow:visible;background:#fff;box-shadow:0 5px 16px rgba(40,65,95,.06)}
.shot-wrap img{display:block;width:100%;height:auto;border-radius:11px}
.shot-pin{position:absolute;display:flex;align-items:center;gap:6px;z-index:4;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 4px rgba(20,60,120,.14))}
.shot-pin span{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#1f67d6;color:#fff;border:2px solid #fff;font-size:12px;font-weight:900}
.shot-pin em{font-style:normal;white-space:nowrap;background:#fff;color:#174d9a;border:1px solid #2d75df;border-radius:7px;padding:5px 8px;font-size:11px;font-weight:850;box-shadow:0 2px 5px rgba(18,65,130,.08)}
.pin-1{left:95.1%;top:21%}.pin-2{left:90.4%;top:51%}.pin-7{left:95.4%;top:51%}
.pin-3{left:48.5%;top:30%}.pin-4{left:78.4%;top:30%}.pin-5{left:58.5%;top:55%}.pin-6{left:48.5%;top:78%}
.screen-flow-arrow{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0;color:#5e748f;font-size:11.5px}
.screen-flow-arrow span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eef5ff;color:#2b6fd3;font-size:18px}
.career-step-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:16px}
.career-step-list div{display:flex;align-items:center;gap:7px;padding:10px 9px;border:1px solid var(--line);border-radius:9px;background:#fafbfd;min-width:0}
.career-step-list span{display:grid;place-items:center;flex:0 0 23px;height:23px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:850}
.career-step-list strong{font-size:10.5px;line-height:1.3}
@media(max-width:1100px){.career-step-list{grid-template-columns:repeat(4,1fr)}.shot-pin em{font-size:10px;padding:4px 6px}.career-use-grid{grid-template-columns:1fr}}
@media(max-width:900px){.career-step-list{grid-template-columns:1fr 1fr}.shot-pin em{display:none}}


/* v7 기본근속연수관리 화면 결합 */
.career-screen-composite{margin-top:16px;border:1px solid #cbd8e7;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 5px 16px rgba(40,65,95,.06)}
.career-screen-composite img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}
.career-screen-composite img+img{border-top:0}
.career-step-list-safe{margin-top:14px}
.career-step-help{margin:9px 1px 0;color:var(--muted);font-size:11.5px;line-height:1.55}

/* v8 기본근속연수관리: 페이지 분리 및 화면 번호 */
.career-page-tabs{display:flex;justify-content:flex-start;gap:8px;margin:-2px 0 18px;padding:0}
.career-page-tab{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#607087;font-weight:850;cursor:pointer;transition:.15s ease}
.career-page-tab:hover{border-color:#adc5e7;color:var(--brand)}
.career-page-tab.active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 4px 10px rgba(38,103,197,.16)}
.career-subpage{display:none}.career-subpage.active{display:block}
.career-page-placeholder{display:flex;align-items:flex-start;gap:16px;min-height:150px}
.career-placeholder-no{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);font-weight:900;flex:0 0 auto}

.career-screen-guide{overflow:visible}
.career-screen-composite{overflow:visible}
.career-shot{position:relative;background:#fff}
.career-shot img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}
.career-shot-bottom{border-top:0}
.screen-number{position:absolute;z-index:5;display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#1769d2;color:#fff;border:2px solid #fff;font-size:10px;font-weight:900;box-shadow:0 2px 7px rgba(28,71,132,.22);pointer-events:none}
/* 위 화면: 숫자는 메뉴를 덮지 않도록 오른쪽 가장자리 또는 빈 공간에 배치 */
.num-1{right:-11px;top:25%}.num-1:after{content:"";position:absolute;right:19px;top:9px;width:24px;height:1px;background:#1769d2}
.num-2{right:-11px;top:49%}.num-2:after{content:"";position:absolute;right:19px;top:9px;width:72px;height:1px;background:#1769d2}
.num-7{right:-11px;top:62%}.num-7:after{content:"";position:absolute;right:19px;top:-20px;width:1px;height:29px;background:#1769d2}
/* 아래 화면: 상·하단 경계에 걸쳐 배치해 입력칸 자체를 가리지 않음 */
.num-3{left:43%;top:-11px}.num-3:after{content:"";position:absolute;left:9px;top:19px;width:1px;height:20px;background:#1769d2}
.num-4{left:75%;top:-11px}.num-4:after{content:"";position:absolute;left:9px;top:19px;width:1px;height:20px;background:#1769d2}
.num-5{left:54%;bottom:-11px}.num-5:after{content:"";position:absolute;left:9px;bottom:19px;width:1px;height:20px;background:#1769d2}
.num-6{left:43%;bottom:-11px}.num-6:after{content:"";position:absolute;left:9px;bottom:19px;width:1px;height:20px;background:#1769d2}
@media(max-width:900px){.screen-number{width:20px;height:20px;font-size:9px}.num-1,.num-2,.num-7{right:-8px}}

/* v9 기본근속연수관리 보완 */
/* 1페이지: 2(추가)와 7(저장)을 서로 떨어뜨려 구분 */
.num-2{right:auto;left:90.5%;top:58%;}
.num-2:after{content:"";position:absolute;left:9px;bottom:19px;width:1px;height:27px;background:#1769d2}
.num-7{right:auto;left:96.2%;top:58%;}
.num-7:after{content:"";position:absolute;left:9px;bottom:19px;width:1px;height:27px;background:#1769d2}
.career-step-list .career-step-key{border-color:#b8cdf0;background:#f4f8ff}
.career-step-list strong small{display:block;margin-top:3px;font-size:9px;color:#1d63bf;font-weight:800}
.career-key-note{display:flex;align-items:flex-start;gap:11px;margin-top:13px;padding:14px 15px;border:1px solid #bcd1ee;background:#f5f9ff;border-radius:11px}
.career-key-note>span{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#1769d2;color:#fff;font-size:11px;font-weight:900}
.career-key-note strong{display:block;color:#153f78;font-size:13px;margin:1px 0 4px}.career-key-note p{margin:0;color:#61748c;font-size:11.5px;line-height:1.55}

/* 2페이지: 숫자는 스크린샷 바깥 여백에 배치하고 선으로만 지시 */
.career-shot-frame{position:relative;margin-top:15px;padding:24px 34px;border:1px solid #cbd8e7;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(40,65,95,.05);overflow:visible}
.career-shot-frame img{display:block;width:100%;height:auto;border:0;margin:0}
.p2-number{position:absolute;z-index:5;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#1769d2;color:#fff;border:2px solid #fff;font-size:10.5px;font-weight:900;box-shadow:0 2px 7px rgba(28,71,132,.22);pointer-events:none}
.p2-search-frame .p2-num-1{left:43.5%;top:5px}.p2-search-frame .p2-num-1:after{content:"";position:absolute;left:10px;top:21px;width:1px;height:28px;background:#1769d2}
.p2-search-frame .p2-num-2{right:5px;top:56%}.p2-search-frame .p2-num-2:after{content:"";position:absolute;right:21px;top:10px;width:30px;height:1px;background:#1769d2}
.p2-detail-frame{padding-top:28px;padding-bottom:28px}
.p2-detail-frame .p2-num-3{left:5px;top:23%}.p2-detail-frame .p2-num-3:after{content:"";position:absolute;left:21px;top:10px;width:38px;height:1px;background:#1769d2}
.p2-detail-frame .p2-num-4{left:5px;top:49%}.p2-detail-frame .p2-num-4:after{content:"";position:absolute;left:21px;top:10px;width:38px;height:1px;background:#1769d2}
.p2-detail-frame .p2-num-5{left:5px;top:76%}.p2-detail-frame .p2-num-5:after{content:"";position:absolute;left:21px;top:10px;width:38px;height:1px;background:#1769d2}
.p2-detail-frame .p2-num-6{left:45.5%;top:4px}.p2-detail-frame .p2-num-6:after{content:"";position:absolute;left:10px;top:21px;width:1px;height:58px;background:#1769d2}
.p2-detail-frame .p2-num-7{left:45.5%;bottom:3px}.p2-detail-frame .p2-num-7:after{content:"";position:absolute;left:10px;bottom:21px;width:1px;height:38px;background:#1769d2}
.career-two-step-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.career-explain-card,.career-detail-row{display:flex;align-items:flex-start;gap:11px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:13px 14px}
.career-explain-card>span,.career-detail-row>span,.tenure-reference-head>span{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:10.5px;font-weight:900}
.career-explain-card strong,.career-detail-row strong{display:block;font-size:13px;margin-bottom:4px}.career-explain-card p,.career-detail-row p{margin:0;color:var(--muted);font-size:11.5px;line-height:1.6}
.career-detail-guide{display:grid;gap:9px;margin-top:14px}
.career-detail-important{border-color:#bfd1ec;background:#f6f9ff}.career-detail-important>span{background:#1769d2;color:#fff}.career-detail-important strong{color:#174f9b}
.career-detail-critical{border-color:#efc7c7;background:#fff7f7}.career-detail-critical>span{background:#c83d3d;color:#fff}.career-detail-critical strong{color:#a42929}.career-detail-critical p strong{color:#b02d2d}
.tenure-reference-head{display:flex;align-items:flex-start;gap:11px}.tenure-reference-head .section-title{margin-bottom:4px}
.tenure-reference-shot{padding-top:16px;padding-bottom:16px}
.tenure-highlight{position:absolute;right:12%;bottom:7px;width:28%;height:30px;border:2px solid #1769d2;border-radius:7px;box-shadow:0 0 0 3px rgba(23,105,210,.08);pointer-events:none}
.career-tenure-rule{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:13px;padding:12px 14px;border:1px solid #d6e1ef;border-radius:10px;background:#f8fbff;font-size:12px}
.career-tenure-rule>strong{color:#27496e}.career-tenure-rule span{font-weight:800}.career-tenure-rule em{font-style:normal;color:#8a96a7;font-weight:600}.career-tenure-rule b{color:#7d8fa6;font-size:16px}.career-tenure-rule .answer{color:#1769d2;background:#fff;border:1px solid #bed1ed;border-radius:8px;padding:7px 10px}
@media(max-width:1000px){.career-two-step-grid{grid-template-columns:1fr}.p2-number{width:22px;height:22px;font-size:9px}.career-shot-frame{padding-left:28px;padding-right:28px}.tenure-highlight{right:10%;width:32%}}