/* ===== JF Notice Board — frontend styles ===== */

.notice-board{
	--jfnb-header-bg:#BF5F24;
	--jfnb-header-text:#fff;
	--jfnb-tabs-bg:#fffbe7;
	--jfnb-tabs-line:#faf0bd;
	--jfnb-tab-text:#000;
	--jfnb-tab-active-bg:#BF5F24;
	--jfnb-tab-active-text:#fff;
	--jfnb-tab-font-size:16px;
	--jfnb-tab-font-weight:600;
	--jfnb-btn-font-size:14px;
	--jfnb-btn-font-weight:700;

	width:100%;
	max-width:1100px;
	margin:50px auto;
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	font-family:inherit;
	box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.notice-board .notice-header{
	background:var(--jfnb-header-bg);
	padding:15px;
	text-align:center;
	color:var(--jfnb-header-text);
}
.notice-board .notice-header h2{
	margin:0;
	font-size:18px;
	font-weight:700;
}

.notice-board .tabs{
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:15px;
	padding:5px;
	border-bottom:2px solid var(--jfnb-tabs-line);
	background:var(--jfnb-tabs-bg);
	margin-bottom:20px;
	box-shadow:0 8px 10px rgba(0,0,0,.05);
	overflow-x:auto;
	flex-wrap:nowrap;
	scrollbar-width:none;
}
.notice-board .tabs::-webkit-scrollbar{ display:none; }

.notice-board .tab{
	flex:0 0 auto;
	white-space:nowrap;
	padding:10px 20px !important;
	border:none;
	background:#fff;
	border-bottom:2px solid var(--jfnb-tabs-line);
	border-radius:40px;
	font-size:var(--jfnb-tab-font-size);
	cursor:pointer;
	color:var(--jfnb-tab-text);
	transition:.3s;
	font-weight:var(--jfnb-tab-font-weight);
}
.notice-board .tab:hover,
.notice-board .tab.active{
	background:var(--jfnb-tab-active-bg);
	color:var(--jfnb-tab-active-text);
	padding:10px 24px !important;
}

.notice-board .tab-content{
	display:none;
	padding:10px;
	min-height:520px;
	max-height:520px;
	overflow-y:auto;
}
.notice-board .tab-content.active{ display:block; }

.notice-board .tab-content::-webkit-scrollbar{ width:3px; }
.notice-board .tab-content::-webkit-scrollbar-thumb{ background:#BF5F24; border-radius:30px; }
.notice-board .tab-content{ scrollbar-width:thin; scrollbar-color:#BF5F24 transparent; }

/* ---- PDF cards ("All" tab) ---- */

.notice-board .pdf-card{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:20px;
	padding:10px !important;
	margin-bottom:15px;
	background:#fff;
	border:1px solid #ececec;
	border-radius:12px;
	box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.notice-board .pdf-left{ display:flex; align-items:flex-start; gap:15px; flex:1; }
.notice-board .pdf-icon{ width:34px; height:34px; flex-shrink:0; }
.notice-board .pdf-content{ flex:1; }
.notice-board .pdf-content h4{ margin:0; padding:0; font-size:16px; font-weight:500; line-height:1.4; }
.notice-board .pdf-content h4 a{ color:#222; text-decoration:none; transition:.3s; }
.notice-board .pdf-content h4 a:hover{ color:#3155d6; }
.notice-board .pdf-right{ display:flex; align-items:center; }
.notice-board .pdf-btn{
	width:42px; height:42px;
	display:flex; align-items:center; justify-content:center;
	background:#FCF7F6;
	border-radius:50%;
	text-decoration:none;
	transition:.3s;
}
.notice-board .pdf-btn:hover{ background:#F5ECEB; transform:translateY(-2px); }

/* ---- Result / Admit-card cards ---- */

.notice-board .result-card{
	background:#fff;
	border:1px solid #ececec;
	border-radius:12px;
	box-shadow:0 2px 8px rgba(0,0,0,.05);
	padding:10px;
	margin-bottom:20px;
	transition:all .4s cubic-bezier(.4,0,.2,1);
	opacity:0;
	animation:jfFadeInUp .8s ease-out forwards;
}
.notice-board .card-top{ display:flex; justify-content:space-between; align-items:center; }
.notice-board .live{ color:#e00000; font-size:13px; font-weight:700; }
.notice-board .icon-btn{
	width:40px; height:40px;
	display:flex; align-items:center; justify-content:center;
	background:#FCF7F6;
	border:1px solid #EEDDD8;
	border-radius:50%;
	text-decoration:none;
	transition:.3s;
}
.notice-board .icon-btn img{ width:20px; height:20px; }
.notice-board .icon-btn:hover{ transform:translateY(-2px) rotate(10deg); box-shadow:0 8px 18px rgba(0,0,0,.08); }
.notice-board .result-title{ margin:0; padding:0; font-size:17px; font-weight:500; line-height:1.4; color:#222; }
.notice-board .result-link{
	display:inline-flex; align-items:center; gap:12px;
	color:#BF5F24; font-size:var(--jfnb-btn-font-size); font-weight:var(--jfnb-btn-font-weight);
	padding-top:20px;
	text-decoration:none;
}
.notice-board .arrow{
	width:30px; height:30px;
	background:#faf0bd; color:#BF5F24;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	font-size:15px;
}

@keyframes jfFadeInUp{
	from{ opacity:0; transform:translateY(40px); }
	to{ opacity:1; transform:translateY(0); }
}

/* ---- Recruitment: ticket-style job cards ---- */

.jf-jobcards{
	--jf-maroon:#BF5F24;
	--jf-maroon-deep:#5c1620;
	--jf-gold:#c08a2e;
	--jf-gold-soft:#fbf1de;
	--jf-ink:#211a17;
	--jf-muted:#7a6f68;
	--jf-paper:#fffdf8;
	--jf-bg:#efe9df;
	--jf-line:#e2d8c8;
	--jf-green:#1f6b3a;
	--jf-red:#a3221f;
	--jf-telegram:#229ed9;
	--jf-telegram-deep:#1c86ba;
	--jf-font-display:inherit;
	--jf-font-mono:inherit;
	--jf-font-body:inherit;
	width:100%;
	max-width:1100px;
	margin:0 auto;
	font-family:inherit;
}
.jf-jobcards *{ box-sizing:border-box; }

.jf-jobcards .jf-card{
	position:relative;
	display:flex;
	background:var(--jf-paper);
	border-radius:14px;
	box-shadow:0 3px 8px rgba(90,20,20,.08), 0 16px 34px rgba(90,20,20,.12);
	overflow:hidden;
}
.jf-jobcards .jf-card + .jf-card{ margin-top:22px; }

.jf-jobcards .jf-stub{
	flex:none;
	width:76px;
	background:linear-gradient(160deg,var(--jf-maroon),var(--jf-maroon-deep));
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:16px 8px;
	position:relative;
}
.jf-jobcards .jf-seal{
	width:44px; height:44px;
	border-radius:50%;
	background:var(--jf-paper);
	border:2px dashed var(--jf-gold);
	display:flex; align-items:center; justify-content:center;
	padding:3px; flex:none;
}
.jf-jobcards .jf-seal img{ width:100%; height:100%; object-fit:contain; border-radius:50%; }
.jf-jobcards .jf-stub-label{
	writing-mode:vertical-rl;
	text-orientation:mixed;
	transform:rotate(180deg);
	font-family:var(--jf-font-mono);
	font-size:.62rem;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--jf-gold-soft);
	opacity:.85;
}

.jf-jobcards .jf-perf{
	flex:none; width:0; position:relative;
	border-left:2px dashed rgba(122,31,43,.25);
}
.jf-jobcards .jf-perf::before,
.jf-jobcards .jf-perf::after{
	content:""; position:absolute; left:-8px;
	width:16px; height:16px; border-radius:50%;
	background:var(--jf-bg);
}
.jf-jobcards .jf-perf::before{ top:-8px; }
.jf-jobcards .jf-perf::after{ bottom:-8px; }

.jf-jobcards .jf-body{
	flex:1; min-width:0;
	padding:16px 18px 18px;
	display:flex; flex-direction:column; gap:12px;
}

.jf-jobcards .jf-ref-line{
	display:flex; justify-content:space-between; align-items:center;
	font-family:var(--jf-font-mono);
	font-size:.68rem;
	color:var(--jf-muted);
	letter-spacing:.03em;
}
.jf-jobcards .jf-ref-line .jf-new-tag{ color:var(--jf-red); font-weight:700; letter-spacing:.08em; }

.jf-jobcards .jf-title{
	font-family:var(--jf-font-display);
	font-size:clamp(1rem,2.6vw,1.22rem);
	font-weight:700;
	color:var(--jf-ink);
	line-height:1.38;
	margin:0;
}

.jf-jobcards .jf-detail-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px 16px;
	padding-top:4px;
	border-top:1px dashed var(--jf-line);
}
.jf-jobcards .jf-detail-item{ display:flex; flex-direction:column; gap:2px; }
.jf-jobcards .jf-detail-label{
	font-family:var(--jf-font-mono);
	font-size:.62rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--jf-muted);
}
.jf-jobcards .jf-detail-value{ font-family:var(--jf-font-body); font-size:.9rem; font-weight:700; color:var(--jf-ink); }
.jf-jobcards .jf-detail-value.jf-green{ color:var(--jf-green); }
.jf-jobcards .jf-detail-value.jf-red{ color:var(--jf-red); }

.jf-jobcards .jf-actions{ display:flex; gap:10px; margin-top:4px; }

.jf-jobcards .jf-btn{
	flex:1;
	text-align:center;
	text-decoration:none;
	font-family:var(--jf-font-body);
	font-weight:var(--jfnb-btn-font-weight,700);
	font-size:var(--jfnb-btn-font-size,.85rem);
	padding:11px 14px;
	border-radius:9px;
	transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.jf-jobcards .jf-btn-apply{ background:var(--jf-maroon); color:#fff !important; box-shadow:0 4px 12px rgba(122,31,43,.28); }
.jf-jobcards .jf-btn-apply:hover{ background:var(--jf-maroon-deep); transform:translateY(-2px); }
.jf-jobcards .jf-btn-notify{ background:var(--jf-gold-soft); color:var(--jf-gold) !important; border:1px solid #eddcb3; }
.jf-jobcards .jf-btn-notify:hover{ background:#f6e9c8; transform:translateY(-2px); }

.jf-jobcards .jf-btn-telegram{
	flex:none; width:42px; height:42px;
	border-radius:50%;
	background:var(--jf-telegram);
	color:#fff !important;
	box-shadow:0 4px 12px rgba(34,158,217,.28);
	padding:0;
}
.jf-jobcards .jf-btn-telegram:hover{ background:var(--jf-telegram-deep); transform:translateY(-2px); }
.jf-jobcards .jf-btn-telegram svg{ width:19px; height:19px; }
.jf-jobcards .jf-btn svg{ width:14px; height:14px; flex:none; }

.jf-jobcards .jf-ad-slot{
	margin:22px 0;
	padding:10px;
	background:var(--jf-paper);
	border:1px dashed var(--jf-line);
	border-radius:10px;
	text-align:center;
	min-height:90px;
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.jf-jobcards .jf-ad-slot-label{
	font-family:var(--jf-font-mono);
	font-size:.6rem;
	letter-spacing:.1em;
	text-transform:uppercase;
	color:var(--jf-muted);
}

/* ===== Responsive ===== */

@media(max-width:768px){
	.notice-board{ margin:20px auto; }
	.notice-board .notice-header h2{ font-size:20px; }
	.notice-board .tab{ padding:12px 18px !important; }
	.notice-board .pdf-card{ padding:15px; gap:12px; }
	.notice-board .pdf-content h4{ font-size:16px; }
	.notice-board .pdf-icon{ width:28px; height:28px; }
	.notice-board .pdf-btn{ width:36px; height:36px; }
	.notice-board .result-title{ font-size:18px; }
	.notice-board .result-link{ font-size:var(--jfnb-btn-font-size,17px); }
	.notice-board .arrow{ width:30px; height:30px; font-size:15px; }
	.notice-board .icon-btn{ width:30px; height:30px; }
	.notice-board .icon-btn img{ width:16px; height:16px; }
}

@media(max-width:480px){
	.notice-board .notice-header{ padding:15px; }
	.notice-board .notice-header h2{ font-size:20px; }
	.notice-board .tabs{ padding:10px; gap:10px; }
	.notice-board .tab{ font-size:14px; padding:10px 16px !important; }
}

@media(max-width:560px){
	.jf-jobcards .jf-card{ flex-direction:column; }
	.jf-jobcards .jf-stub{ width:100%; flex-direction:row; justify-content:flex-start; padding:12px 16px; }
	.jf-jobcards .jf-stub-label{ writing-mode:horizontal-tb; transform:none; }
	.jf-jobcards .jf-perf{ width:100%; height:0; border-left:none; border-top:2px dashed rgba(122,31,43,.25); }
	.jf-jobcards .jf-perf::before,
	.jf-jobcards .jf-perf::after{ left:auto; top:-8px; }
	.jf-jobcards .jf-perf::before{ left:-8px; }
	.jf-jobcards .jf-perf::after{ left:auto; right:-8px; bottom:auto; }
}

@media(max-width:400px){
	.jf-jobcards .jf-detail-grid{ grid-template-columns:1fr 1fr; }
	.jf-jobcards .jf-actions{ flex-direction:column; }
	.jf-jobcards .jf-btn-telegram{ width:100%; height:44px; border-radius:9px; }
}

@media(min-width:560px){
	.jf-jobcards .jf-detail-grid{ grid-template-columns:repeat(4,1fr); }
}