@charset "utf-8";

.online_insight			{display:flex; align-items:center; flex-direction:column; width:100%; min-height:100vh; padding:0px; margin:40px auto; background:white; border-radius:16px; box-shadow:0 20px 40px rgba(0, 0, 0, 0.1); overflow:hidden;}

.oi_header				{width:100%; background:linear-gradient(135deg, #1e2227 0%, #62717d 100%); padding:60px 30px; text-align:center; color:white;}
.oi_header h1			{font-size:2.5rem; margin-bottom:30px; font-weight:700;}
.oi_header p			{font-size:var(--FS18F); opacity:0.8; line-height:1.6;}

@media (max-width:997px) {
	.oi_header			{padding:30px 20px;}
	.oi_header h1		{font-size:1.8rem;}
	.oi_header p		{font-size:var(--FS16F);}
}

@media (max-width:517px) {
	.oi_header h1		{font-size:1.5rem;}
	.oi_header p		{font-size:var(--FS14F);}
}

.progress-container		{width:100%; padding:40px; border-bottom:1px solid #EEE;}
.progress-info			{display:flex; justify-content:space-between; align-items:center; margin-bottom:15px;}
.progress-text			{font-size:var(--FS18); color:var(--mygray); font-weight:var(--FW600);}
.progress-percentage	{font-size:var(--FS18); color:#edb308; font-weight:var(--FW700);}
.progress-bar			{width:100%; height:12px; background:#F0F0F0; border-radius:6px; overflow:hidden;}
.progress-fill			{height:100%; background:linear-gradient(90deg, #d2e7ff 0%, #b6f2f9 20%, #c8f58d 40%, #f5f6a6 60%, #fba655 80%, #f36163 100%); border-radius:6px; width:25%; transition:width 0.3s ease;}

.oi_content				{display:flex; flex-direction:column; align-items:center; width:100%; max-width:800px;}

.question-container		{display:flex; flex-direction:column; align-items:center; box-sizing:border-box; width:100%; padding:50px 0px;}
.question-number		{color:#888; font-size:1rem; margin-bottom:10px; font-weight:500;}
.question-text			{font-size:1.6rem; color:#333; line-height:1.6; margin-bottom:40px; font-weight:600; text-align:center;}

.scale-labels			{display:flex; justify-content:space-between; width:100%; margin:20px 0; padding:0px;}
.scale-label			{font-size:var(--FS16); color:#888; font-weight:var(--FW700);}

.options-container					{display:flex; width:100%; flex-direction:column; gap:15px;}
.rating-buttons						{display:flex; justify-content:space-between; width:100%; gap:20px; align-items:center;}

.rating-buttons button:nth-child(1),
.rating-buttons button:nth-child(7)	{width:66px;}
.rating-buttons button:nth-child(2),
.rating-buttons button:nth-child(6)	{width:60px;}
.rating-buttons button:nth-child(3),
.rating-buttons button:nth-child(5)	{width:54px;}

.rating-buttons button:nth-child(1) i:before,
.rating-buttons button:nth-child(7) i:before	{font-size:var(--FS24);}
.rating-buttons button:nth-child(2) i:before,
.rating-buttons button:nth-child(6) i:before	{font-size:var(--FS20);}
.rating-buttons button:nth-child(3) i:before,
.rating-buttons button:nth-child(5) i:before	{font-size:var(--FS18);}



.rating-buttons	button i		{position:relative;}
.rating-buttons	button i:before	{content:'\e83f'; font-family:'feather'; font-size:var(--FS14); font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

.rating-btn						{width:50px; aspect-ratio:1 / 1; border:2px solid #e0e0e0; border-radius:6px; background:white; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:0.9rem; color:#666;}
.rating-btn:hover				{background:var(--cyan004); border-color: var(--cyan); transform:scale(1.05); color:#000;}
.rating-btn.selected			{background:var(--cyan); border-color:var(--cyan); color:#FFF;}

.rating-btn.disagree:hover		{background:var(--mygreen003); border-color:var(--mygreen001);}
.rating-btn.disagree.selected	{background:var(--mygreen001); border-color:var(--mygreen001); color:#FFF;}

.rating-btn.agree:hover			{background:var(--blue005); border-color:var(--blue);}
.rating-btn.agree.selected		{background:var(--blue); border-color:var(--blue); color:#FFF;}

.oi_footer				{width:100%; padding:30px; display:flex; gap:10px; justify-content:space-between; border-top:1px solid #EEE;}
.oiBtn					{padding:15px 30px; font-size:1.1rem; font-weight:600; border:none; border-radius:50px; cursor:pointer; transition:all 0.3s ease;}
.oiBtn-pre				{background:#f8f9fa; color:#666; border:2px solid #e9ecef;}
.oiBtn-pre:hover		{background:#e9ecef;}
.oiBtn-next				{background:linear-gradient(135deg, #35bd09 0%, #00acfe 100%); color:white; box-shadow:0 10px 20px rgba(79, 172, 254, 0.3);}
.oiBtn-next:hover		{box-shadow:0 15px 30px rgba(79, 172, 254, 0.4);}
.oiBtn:disabled			{opacity:0.5; cursor:not-allowed; transform:none !important;}


@media (max-width:997px) {
	.progress-container,
	.question-container,
	.oi_footer			{padding:20px;}

	.question-text		{font-size:1.2rem; margin-bottom:30px;}
	.rating-btn			{width:45px; aspect-ratio:1 / 1; font-size:0.8rem;}

	.rating-buttons button:nth-child(1),
	.rating-buttons button:nth-child(7)	{width:51px;}
	.rating-buttons button:nth-child(2),
	.rating-buttons button:nth-child(6)	{width:49px;}
	.rating-buttons button:nth-child(3),
	.rating-buttons button:nth-child(5)	{width:47px; }
}
@media (max-width:517px) {

	.rating-buttons		{gap:6px;}
}