@charset "utf-8";

.recruitStatusWrap				{margin-top:2rem;}
.recruitStatusWrap ul			{border-top:0.1rem solid #222;}
.recruitStatusWrap ul li		{display:grid; grid-template-columns:15rem auto 8rem; gap:2rem 3rem; width:100%; border-bottom:1px solid #e5e5e5; padding:2rem 4rem 2rem 0; background-color:#F6F6F6;}
.recruitStatusWrap ul li:hover .title_inner-text	{transform:translateY(-5px);}
.recruitStatusWrap ul li:hover .description		{color:var(--IDTcolor);}

.recruitStatusWrap ul li.on					{background-color:#FFFFFF;}
.recruitStatusWrap ul li.on .title_inner-text	{display:flex; align-items:center; color:#000; font-weight:var(--FW800); transition:all 0.3s ease;}
.recruitStatusWrap ul li.on .dateArea			{color:#222;}
.recruitStatusWrap ul li.nodata	{display:flex;}

.dateArea				{display:flex; flex-shrink:0; flex-direction:column; align-items:center; justify-content:center; font-size:var(--FS40); letter-spacing:-3px; font-weight:800; color:#ddd; transition:color 0.3s;}
.date_year				{font-size:var(--FS16); font-weight:600; letter-spacing:0px; margin-bottom:0.5rem;}

.recrutContentWrap		{align-self:center; width:100%; min-width:1px;}
.title_inner-text		{display:inline-block; width:100%; overflow:hidden; font-size:var(--FS18F); font-weight:var(--FW600F); word-wrap:normal; white-space:nowrap; text-overflow:ellipsis; transition:transform 0.4s ease-in-out, color 0.4s ease-in-out; will-change:transform, color;}
.title					{display:flex; align-items:center;}
.description			{width:100%; overflow:hidden; margin-top:1.2rem; font-size:var(--FS15); color:#999; word-wrap:normal; white-space:nowrap; text-overflow:ellipsis; transition:color 0.4s ease-in-out; will-change:color;}

.recruitBtnArea			{display:flex; align-items:center; justify-content:center; font-size:var(--FS14); font-weight:600; color:#aaa; transition:color 0.3s;}
.recruit_progress						{display:flex; align-items:center; width:fit-content; height:fit-content; font-size:var(--FS15); color:#FFF; border-radius:100rem; padding:0.6rem 0.8rem;}
.recruit_progress[data-label="면접"]		{background-color: var(--green); color:var(--white);}
.recruit_progress[data-label="지원서작성"]	{background-color:var(--green); color:var(--white);}
.recruit_progress[data-label="불합격"]		{background-color:var(--mygray003); color:var(--white);}
.recruit_progress[data-label="최종합격"]	{background:linear-gradient(135deg, #ff6b6b, #ffa500, #ffeb3b, #4caf50, #00bcd4, #2196f3, #9c27b0, #e91e63); background-size:300% 300%; color:var(--white); animation:rainbowMove 4s ease infinite;}

@keyframes rainbowMove {
  0%	{background-position:0% 50%;}
  50%	{background-position:100% 50%;}
  100%	{background-position:0% 50%;}
}

@media (max-width:997px) {
	.recruitStatusWrap ul li	{grid-template-columns:8rem auto 3rem; padding:2rem 4rem 2rem 0;}
	.recruitBtnArea		{justify-content:flex-end;}
}

@media (max-width:767px) {
	.recruitStatusWrap			{margin-top: 2rem;}
	.recruitStatusWrap ul li	{grid-template-columns: auto; padding:1.6rem 1.2rem; gap:0.5rem 0.5rem;}

	.dateArea			{grid-row:2; flex-direction:row; justify-content:flex-start; gap:0; font-size:var(--FS13F); letter-spacing:-0.5px; white-space:nowrap;}
	.date_year			{font-size:var(--FS13F); margin-bottom:0; margin-right:0.2rem;}
	.date_year::after	{content:"."; display:inline-block;}

	.recrutContentWrap	{grid-column: 1/span 2; grid-row:1;}
	.title_inner-text	{font-size:var(--FS14F); font-weight:var(--FW600F);}
	.title				{flex-direction:column; align-items:flex-start;}
	.description		{margin-top:1em; display:-webkit-box; word-wrap:break-word; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.5;}

	.recruit_progress	{justify-content:flex-end;}
}

/* Write Page Guide */
.recruitWriGuide				{margin:10px auto 0px; font-size:var(--FS14); font-weight:var(--FW400); line-height:1.8;}
.recruitWriGuide ul				{margin-bottom:15px;}
.recruitWriGuide li				{display:block; position:relative; padding-left:15px; text-align:left;}
.recruitWriGuide li:before		{content:''; position:absolute; top:8px; left:0px; width:6px; height:6px; background-color:#111; border-radius:2px;}
.recruitWriGuide li strong		{font-weight:var(--FW700); color:#111;}
.recruitWriGuide li ol li		{display:block; position:relative; padding-left:10px; text-align:left;}
.recruitWriGuide li ol li:before{content:''; position:absolute; top:10px; left:0px; width:5px; height:3px; background-color:#888; border-radius:2px;}