.fcj-wrap { isolation: isolate !important;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
--fcj-radius: .9rem;
--fcj-radius-sm: .55rem;
--fcj-radius-lg: .8rem;
--fcj-primary: #0b64c3;
--fcj-primary-600: #0a55a5;
--fcj-primary-700: #093f7a;
--fcj-accent: #1d4ed8;
--fcj-accent-600: #1e40af;
--fcj-bg: #f6f8fb;
--fcj-surface: #ffffff;
--fcj-border: #e4e7ee;
--fcj-text: #0f172a;
--fcj-muted: #64748b;
--fcj-shadow: 0 8px 20px rgba(11, 100, 195, .10), 0 1px 3px rgba(0, 0, 0, .05);
--fcj-focus-color: #60a5fa;
--fcj-title-size: clamp(1.1rem, 1.6vw, 1.35rem);
--fcj-meta-size: 1.3rem;
--fcj-chip-size: 1.1rem;
--fcj-salary-size: clamp(1.05rem, 2vw, 1.2rem); *,
*::before,
*::after {
box-sizing: border-box !important;
}
a {
color: inherit !important;
text-decoration: none !important;
}
img {
max-width: 100% !important;
display: block !important;
}
p,
h1,
h2,
h3,
h4 {
margin: 0 !important;
} .fcj-root {
display: block !important;
max-width: 980px !important;
margin: 0 auto !important;
padding: .25rem !important;
} .fcj-header {
display: flex !important;
align-items: center !important;
gap: .6rem !important;
background: linear-gradient(135deg, var(--fcj-primary) 0%, var(--fcj-accent) 100%) !important;
color: #fff !important;
border-radius: var(--fcj-radius-lg) !important;
padding: .7rem 1rem !important;
margin: .3rem 0 1rem !important;
box-shadow: 0 8px 24px rgba(11, 100, 195, .25) !important;
.ttl {
font-weight: 800 !important;
letter-spacing: .3px !important;
font-size: 1.2em !important;
}
} .fcj-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
} .fcj-card {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
background: var(--fcj-surface) !important;
color: var(--fcj-text) !important;
border: 1px solid var(--fcj-border) !important;
border-radius: var(--fcj-radius) !important;
padding: 1.2rem !important;
box-shadow: var(--fcj-shadow) !important;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
font-family: var(--body-font-family);
&:hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 34px rgba(11, 100, 195, .18) !important;
border-color: rgba(11, 100, 195, .35) !important;
}
&:focus-visible {
outline: 2px solid var(--fcj-focus-color) !important;
outline-offset: 2px !important;
}
.fcj-main {
min-width: 0 !important;
flex: 1 !important;
}
.fcj-title {
font-size: 1.75rem !important;
font-weight: 900 !important;
line-height: 1.35 !important;
color: var(--fcj-primary-700) !important;
letter-spacing: .2px !important;
border: 0 !important;
padding: 0 !important;
&:hover {
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
}
.fcj-meta {
display: flex !important;
flex-wrap: wrap !important;
gap: .6rem 1.2rem !important;
margin-top: .55rem !important;
color: var(--fcj-muted) !important;
font-size: var(--fcj-meta-size) !important;
.dot {
width: .6rem !important;
height: .6rem !important;
border-radius: 50% !important;
display: inline-block !important;
background: #9ab6ff !important;
margin-right: .35rem !important;
}
}
.fcj-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: .5rem !important;
margin-top: .65rem !important;
.fcj-tag {
font-size: var(--fcj-chip-size) !important;
font-weight: 700 !important;
background: #eef4ff !important;
color: #163c8a !important;
border: 1px solid #cfe0ff !important;
border-radius: 999px !important;
padding: .34rem .72rem !important;
line-height: 1 !important;
white-space: nowrap !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
} .fcj-aside {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: .75rem 1rem !important;
flex-wrap: wrap !important;
width: 100% !important;
margin-top: .25rem !important;
.fcj-salary {
display: inline-flex !important;
align-items: center !important;
min-height: 2.5rem !important;
padding: .4rem .6rem !important;
font-size: var(--fcj-salary-size) !important;
font-weight: 900 !important;
letter-spacing: .25px !important;
color: #0b1220 !important;
background: #f2f7ff !important;
border: 1px solid #cfe0ff !important;
border-radius: .5rem !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
}
.fcj-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, var(--fcj-accent) 0%, var(--fcj-accent-600) 100%) !important;
color: #fff !important;
border-radius: var(--fcj-radius-sm) !important;
padding: .7rem 1.25rem !important;
font-size: 0.9em !important;
font-weight: 900 !important;
letter-spacing: .2px !important;
min-width: 9rem !important;
text-align: center !important;
line-height: 1 !important;
&::after {
content: "  ›" !important;
transform: translateY(-1px) translateX(4px) !important;
}
}
}
} .fcj-footer {
display: flex !important;
justify-content: center !important;
margin-top: 1.2rem !important;
.fcj-more {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: linear-gradient(180deg, var(--fcj-primary) 0%, var(--fcj-primary-600) 100%) !important;
color: #fff !important;
font-weight: 900 !important;
border-radius: .7rem !important;
padding: .75rem 1.2rem !important;
min-width: 10rem !important;
box-shadow: 0 12px 28px rgba(11, 100, 195, .28) !important;
&:hover {
filter: brightness(1.05) !important;
transform: translateY(-1px) !important;
}
&:focus-visible {
outline: 2px solid var(--fcj-focus-color) !important;
outline-offset: 2px !important;
}
}
} .fcj-empty,
.fcj-error {
padding: 1rem !important;
background: #fff7ed !important;
border: 1px solid #fed7aa !important;
color: #9a3412 !important;
border-radius: .7rem !important;
font-size: 1rem !important;
} .fcj-loading {
opacity: .75 !important;
} .fcj-card,
.fcj-more,
.fcj-btn,
.fcj-title,
.fcj-tag {
text-decoration: none !important;
} @media print {
.fcj-card {
box-shadow: none !important;
}
.fcj-btn,
.fcj-more {
display: none !important;
}
} .fcj-root.fcj--sidebar {
max-width: 330px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
.fcj-header {
padding: .55rem .75rem !important;
margin-bottom: .6rem !important;
border-radius: .6rem !important;
}
.fcj-list {
display: block !important;
} .fcj-card {
padding: .9rem !important;
border-radius: .7rem !important;
gap: .6rem !important;
.fcj-title {
font-size: 1.32rem !important;
line-height: 1.35 !important;
border: 0 !important;
&::before,
&::after {
background-color: transparent !important;
}
}
.fcj-meta {
font-size: .92rem !important;
gap: .45rem .6rem !important;
}
.fcj-tags {
gap: .35rem !important;
margin-top: .45rem !important;
.fcj-tag {
font-size: .78rem !important;
padding: .22rem .5rem !important;
}
} .fcj-aside {
flex-direction: column !important;
align-items: stretch !important;
gap: .6rem !important;
margin-top: .5rem !important;
.fcj-salary {
align-self: flex-start !important;
min-height: 2.2rem !important;
padding: .36rem .55rem !important;
margin-bottom: .2rem !important;
}
.fcj-btn {
display: block !important;
width: 100% !important; text-align: center !important;
padding: 1.1rem 1rem !important;
min-height: 2.4rem !important;
font-size: 0.8em !important;
border-radius: .6rem !important;
}
}
} .fcj-footer {
margin-top: .7rem !important;
}
.fcj-more {
padding: .55rem .75rem !important;
font-size: .95rem !important;
min-width: 9rem !important;
}
}
} @media (prefers-color-scheme: dark) {
.fcj-wrap {
--fcj-bg: #0c1220;
--fcj-surface: #0f172a;
--fcj-border: #22304b;
--fcj-text: #e5e7eb;
--fcj-muted: #9aa7bb;
--fcj-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
}