/* =====================================================================
   (component.css Á¤¸®º») + À̹ÌÁö ÄÄÆ÷³ÍÆ®¿¡ ÇÊ¿äÇÑ ÃÖ¼Ò È®Àå
===================================================================== */
:root{
	--key-color:#2C5BF6;
	/* --fs-14-16:clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 840)), 16px); */
}

/* =====================================================================
Button (guide sample)
===================================================================== */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	/* min-width:206px; */
	height:42px;
	padding:0 14px;
	border-radius:6px;
	font-size:14px;
	font-weight:700;
	line-height:1;
	letter-spacing:-0.2px;
	cursor:pointer;
	box-sizing:border-box;
}

/* A - Primary */
.btn-a{
	background:var(--key-color);
	border:1px solid var(--key-color);
	color:#fff;
}

/* B - Dark */
.btn-b{
	background:#222;
	border:1px solid #222;
	color:#fff;
}

/* C - Line */
.btn-c{
	background:#fff;
	border:1px solid #DBDEE5;
	color:#222;
}

/* D - Plain */
.btn-d{
	background:#9AA3B2;
	border:1px solid #9AA3B2;
	color:#fff;
}

/* D - Sub (outline darker, smaller ´À³¦) */
.btn-sub{
	min-width:80px;
	height:30px;
	padding:0 14px;
	background:#fff;
	border:1px solid #5C6168;
	color:#333;
	border-radius:6px;
	font-size: 13px;
}

/* hover/active (°¡À̵å¿ë ÃÖ¼Ò) */
.btn:hover{filter:brightness(0.98);}
.btn:active{transform:translateY(1px);}


/* Large */
.btn-lg {width: 100%; max-width: 500px; height: 60px; font-weight: 600; font-size: 18px;}
/* Medium */
.btn-md {min-width:121px; height: 46px; padding: 0 20px; font-weight: 600; font-size: 16px;}
/* Small */
.btn-sm {min-width: 88px; height: 28px; padding: 0 8px; font-weight: 500; line-height: 1.4;}
/* SSmall */
.btn-xs {min-width: 58px; height: 19px !important; padding: 0 8px; border-radius: 1px; font-size: 11px; line-height: 1.4;}

/* MO */
@media (max-width:767px){
	.btn{ /*min-width:159px;*/ height:38px;border-radius: 4px;}
	.btn-sub{min-width:64px; height:26px;border-radius: 4px;}
	/* Å©±â */
	.btn-lg {max-width: 328px; height: 54px; font-size: 16px;}
	.btn-md {min-width:112px; height: 40px; font-size: 14px;}
	.btn-sm {min-width: 83px; height: 26px; font-size: 13px;}
	.btn-xs {min-width: auto;}
}



/* =====================================================================
Tab (A~E) - PC/TA À¯»ç, MO¿¡¼­¸¸ slider(°¡·Î ½ºÅ©·Ñ)
===================================================================== */
.tab{width:100%;}
.tab .tab-slider{width:100%;}
.tab .tab-list{display:flex; align-items:center; width:100%;}

/* °øÅë ¹öÆ° */
.tab .tab-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:40px;
	padding:0 18px;
	font-size:13px;
	font-weight:600;
	line-height:1;
	white-space:nowrap;
	cursor:pointer;
	box-sizing:border-box;
	border:0;
	background:transparent;
	color:#666;
}

/* =========================
Tab A (block)
- ¹è°æ: ¿¬È¸»ö
- È°¼º: ÆĶõ ¹è°æ + Èò ±ÛÀÚ
========================= */
.tab-a .tab-list{background:#EFEFEF; border-radius:0; padding:0;}
.tab-a .tab-btn{flex:1 1 auto; border-right:1px solid rgba(0,0,0,0.04);}
.tab-a .tab-btn:last-child{border-right:0;}
.tab-a .tab-btn.is-on{background:var(--key-color); color:#fff;}

/* =========================
Tab B (round pills)
========================= */
.tab-b .tab-list{gap:10px;}
.tab-b .tab-btn{
	height:30px;
	border-radius:999px;
	border:1px solid #E6E8ED;
	background:#F7F8FA;
	color:#666;
}
.tab-b .tab-btn.is-on{border-color:var(--key-color); background:#fff; color:var(--key-color);}

/* =========================
Tab C (top bordered tab)
- È°¼º ÅÇÀÌ À§·Î ¶° º¸À̴ ŸÀÔ
========================= */
.tab-c .tab-list{border-bottom:1px solid #DDE1E8;}
.tab-c .tab-btn{
	min-width:160px;
	height:40px;
	background:#F2F3F6;
	border:1px solid #DDE1E8;
	border-bottom:0;
	color:#666;
}
.tab-c .tab-btn + .tab-btn{margin-left:8px;}
.tab-c .tab-btn.is-on{
	background:#fff;
	border-color:#BFD0FF;
	color:var(--key-color);
}

/* =========================
Tab D (boxed segmented)
- Àüü ¶óÀÎÀÌ ÀÖ°í, È°¼º¸¸ ´ÙÅ© ¹è°æ
========================= */
.tab-d .tab-list{border:1px solid #E6E8ED; border-radius:4px; overflow:hidden;}
.tab-d .tab-btn{flex:1 1 auto; height:36px; border-right:1px solid #E6E8ED; color:#666; background:#fff;}
.tab-d .tab-btn:last-child{border-right:0;}
.tab-d .tab-btn.is-on{background:#222; color:#fff; font-weight:700;}

/* =========================
Tab E (underline)
========================= */
.tab-e .tab-list{gap:34px; border-bottom:1px solid #E6E8ED; padding:0 2px;}
.tab-e .tab-btn{height:36px; padding:0 2px; color:#888;}
.tab-e .tab-btn.is-on{color:#111; font-weight:700; position:relative;}
.tab-e .tab-btn.is-on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#111;}

/* =========================
Tab Full A (block)
- ¹è°æ: ¿¬È¸»ö
- È°¼º: ÆĶõ ¹è°æ + Èò ±ÛÀÚ
========================= */
.tab-full-a .tab-slider {background: #EDEDED;}
.tab-full-a .tab-list{max-width: 1024px; margin: 0 auto; border-radius:0; padding:0;}
.tab-full-a .tab-btn{flex:1 1 auto; height: 60px; border-right:1px solid #DBDBDB; font-weight: 700; font-size: 18px; color: #B1B1B1;}
.tab-full-a .tab-btn:last-child{border-right:0;}
.tab-full-a .tab-btn.is-on{background:var(--key-color); color:#fff;}

/* =====================================================================
MO slider (<=767)
- PC/TA´Â ±×´ë·Î
- MO¿¡¼­¸¸ °¡·Î ½ºÅ©·Ñ + ½º³À
===================================================================== */
@media (max-width:767px){
	.tab .tab-slider{
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scroll-snap-type:x mandatory;
	}
	.tab .tab-slider::-webkit-scrollbar{display:none;}
	.tab .tab-list{width:max-content;}
	.tab .tab-btn{scroll-snap-align:start;}

	.tab .tab-slider{cursor:grab;}
	.tab .tab-slider.is-dragging{cursor:grabbing;}


	/* À¯Çüº° MO º¸Á¤ */
	.tab-a .tab-btn{flex:0 0 auto; min-width:96px; height:36px; padding:0 12px;}
	.tab-b .tab-btn{height:28px; padding:0 12px;}
	.tab-c .tab-btn{min-width:120px; height:36px;}
	.tab-d .tab-btn{flex:0 0 auto; min-width:64px; height:32px; padding:0 10px;}
	.tab-e .tab-list{gap:22px;}
}




/* =====================================================================
Select box / drop box
===================================================================== */
.custom-dropdown{position:relative; display:inline-block;/*width:100%;*/}
.custom-dropdown.select-wrap::after{content:none;}
.custom-dropdown .select-btn{
	/*width:100%;*/ height:42px; padding:0 18px; border-radius:6px; border:1px solid #DBDEE5; gap:10px; font-size:14px;
	background:#FFF; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
	margin-right:0
}
.custom-dropdown .select-text{flex:1; min-width:0; text-align:left;}
.custom-dropdown .select-arrow{margin-top:-5px;width:10px; height:10px; border-right:2px solid #222; border-bottom:2px solid #222; transform:rotate(45deg); flex:0 0 auto;}
.custom-dropdown.open .select-btn{border-color:var(--key-color);}
.custom-dropdown.open .select-arrow{transform:rotate(-135deg); margin-top:5px;}
/* Selected */
.custom-dropdown.is-selected .select-btn{border-color:var(--key-color);}
.custom-dropdown.is-selected .select-arrow{transform:rotate(-135deg); margin-top:5px;}
.custom-dropdown .select-list{
	position:absolute; left:0; top:calc(100%);
	width:100%; background:#fff;
	border:1px solid var(--key-color);
	border-radius:6px;
	padding:6px 0; margin:0; list-style:none;
	display:none; z-index:9;
}
.custom-dropdown.open .select-list{display:block;}
.custom-dropdown .option{padding:10px 14px; font-size:14px; color:#222; cursor:pointer;}
.custom-dropdown .option:hover{background:#F1F3F8;}
/* Disabled */
.custom-dropdown.is-disabled .select-btn{background:#F5F5F5; color:#888; cursor:default; pointer-events:none;}
.custom-dropdown.is-disabled .select-arrow{border-color:#888;}
.custom-dropdown.is-scroll .select-list{max-height:190px; overflow:auto;}
/* MO */
@media (max-width:767px){
	.custom-dropdown .select-btn{
		height:38px; padding:0 12px; border-radius:4px;
	}
}

/* =========================
Select A 
- Å׵θ® ¾øÀ½
- select-list ³ôÀÌ ´Ù¸§
- ³ôÀÌ ÁöÁ¤, ½ºÅ©·Ñ¹Ù Ä¿½ºÅÒ µðÀÚÀÎ
========================= */
.select-a .select-btn {display: flex; gap: 4px; align-items: center; height: auto; padding: 0; border: none; font-size: 14px; color: #555; line-height: 1; letter-spacing: -0.025em;}
.select-a .select-btn:after {content:''; display: block; width: 20px; margin-top: 1px; aspect-ratio: 1/1; background-position: center; background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.230169 0.209376C0.528748 -0.0777189 1.00353 -0.0684095 1.29063 0.230169L5 4.16792L8.70938 0.230169C8.99647 -0.0684094 9.47125 -0.0777189 9.76983 0.209376C10.0684 0.496471 10.0777 0.971254 9.79063 1.26983L5.54063 5.76983C5.39922 5.91689 5.20401 6 5 6C4.79599 6 4.60078 5.91689 4.45938 5.76983L0.209376 1.26983C-0.0777189 0.971254 -0.0684095 0.496471 0.230169 0.209376Z' fill='%23777777'/%3E%3C/svg%3E%0A");
}
.select-a.open .select-btn:after {transform: rotateZ(180deg)}
/* =====================================================================
Select box / drop box
===================================================================== */
.select-a .select-list{
	top:calc(100% + 7px);
	width:160px; max-height: 315px; 
	border:1px solid var(--key-color);
	z-index:9999; overflow-y: auto;
	font-weight: 400;
}

/* Scrollbar */
.select-a .select-list::-webkit-scrollbar { width: 12px;}
.select-a .select-list::-webkit-scrollbar-track{ }
.select-a .select-list::-webkit-scrollbar-thumb {border: 4px solid #fff; border-radius: 99px; height: 75px; background: #DBDBDB;}
.select-a .option{display: flex; align-items: center; padding:0 18px; height: 45px; color:#333;}
/* ¸ð¹ÙÀÏ ÀÌÇÏ (767px ÀÌÇÏ) */
@media (max-width:767px){
	.select-a .select-btn{font-size: 13px;}
	.select-a .select-list {height: 280px;}
	.select-a .option {height: 36px;}
}

/* =====================================================================
Input box
===================================================================== */
.input-basic{width:100%; min-height:42px; padding:0 18px; border:1px solid #DBDEE5; border-radius:6px; font-size:14px; background:#fff;color:#333;}
.input-basic::placeholder{color:#7E7E7E;}
.input-basic:disabled{background:#F5F5F5; color:#7E7E7E;}
.input-basic:focus{outline:none;}
.is-active .input-basic, .input-basic:focus{border-color:var(--key-color);}

.input-float{width:100%; min-height:42px; border:1px solid #DBDEE5; border-radius:6px; background:#fff; padding:4px 18px 0; box-sizing:border-box;}
.input-float .float-label{display:block; font-size:12px; color:#7E7E7E; line-height:1.2;}
.input-float input{width:100%; border:0; padding:0; font-size:14px; line-height:1.2; background:transparent;}
.input-float input:focus{outline:none;}
.input-float:focus-within{border-color:var(--key-color);}
@media (max-width:767px){
	.input-basic{min-height:38px; padding:0 12px; border-radius:4px;}	
}

/* =====================================================================
Link List
===================================================================== */
.field-link{
	width:100%; min-height:42px; padding:10px 18px; border:1px solid #DBDEE5;
	border-radius:6px; gap:10px;
	background:#fff; text-align:left; display:flex; align-items:center; justify-content:space-between; 
}
.field-link .txt{display:block; font-size:14px;line-height:1.2;}
.field-link .arr{width:10px; height:10px; border-right:2px solid #222; border-bottom:2px solid #222; transform:rotate(-45deg); flex:0 0 auto;}
@media (max-width:767px){
	.field-link{
		min-height:38px; padding:8px 12px; border-radius:4px; 
	}
}

/* =====================================================================
section05 - checkbox / radio / chip (À̹ÌÁö »ùÇà ¹Ú½º ½ºÅ¸ÀÏ)
===================================================================== */
/* =====================================================================
Checkbox
- default : 22px
- small   : 18px (.is-sm)
===================================================================== */

.chk-row{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	user-select:none;
}

.chk-row input{
	position:absolute;
	opacity:0;
	pointer-events:none;
}

/* ? 񃧯 22px */
.chk-ui{
	width:22px;
	height:22px;
	border:1px solid #CFD5DC;
	border-radius:4px;
	background:#fff;
	display:inline-block;
	position:relative;
	box-sizing:border-box;
}

/* ? small ¹öÀü */
.chk-row.is-sm .chk-ui{
	width:18px;
	height:18px;
	border-radius:3px;
}

/* checked */
.chk-row input:checked + .chk-ui{
	background:var(--key-color);
	border-color:var(--key-color);
}

/* üũ ¸ð¾ç (22 ±âÁØ) */
.chk-row input:checked + .chk-ui::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:7px;
	height:12px;
	border:2px solid #fff;
	border-top:0;
	border-left:0;
	transform:translate(-50%,-55%) rotate(45deg);
	box-sizing:border-box;
}

/* small üũ ¸¶Å© */
.chk-row.is-sm input:checked + .chk-ui::after{
	width:6px;
	height:10px;
}

/* ÅؽºÆ® */
.chk-txt{
	color:#111;
	font-size:14px;
	font-weight:500;
	line-height:150%;
}

/* disabled */
.chk-row.is-disabled{
	cursor:default;
}

.chk-row.is-disabled .chk-ui{
	background:#F5F5F5;
	border-color:#D7D7D7;
}

.chk-row.is-disabled input:checked + .chk-ui{
	background:#C9D3FF;
	border-color:#C9D3FF;
}

.chk-row.is-disabled .chk-txt{
	color:#9A9A9A;
}
/* -------------------------
Radio (22px donut style)
- off: gray ring + white hole
- on : blue ring + white hole
------------------------- */
#section05 .rdo-row{display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none;}
#section05 .rdo-row input{position:absolute; opacity:0; pointer-events:none;}

/* ? ¸µ(µµ³Ó) */
#section05 .rdo-ui{
	width:22px;
	height:22px;
	border-radius:50%;
	background:#CFD5DC;         /* OFF ¸µ »ö */
	display:inline-block;
	position:relative;
	box-sizing:border-box;
	flex:0 0 auto;
}

/* ? °¡¿îµ¥ '±¸¸Û' */
#section05 .rdo-ui::after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:10px;                 /* ±¸¸Û Å©±â(22 ±âÁØ) */
	height:10px;
	border-radius:50%;
	background:#fff;            /* hole */
	transform:translate(-50%,-50%);
}

/* ON */
#section05 .rdo-row input:checked + .rdo-ui{background:var(--key-color);}

/* ÅؽºÆ® */
#section05 .rdo-txt{color:#111; font-size:14px; font-weight:500; line-height:150%;}

/* focus */
#section05 .rdo-row input:focus-visible + .rdo-ui{box-shadow:0 0 0 3px rgba(44,91,246,0.18);}

/* disabled */
#section05 .rdo-row.is-disabled{cursor:default;}
#section05 .rdo-row.is-disabled .rdo-ui{background:#D7D7D7;}
#section05 .rdo-row.is-disabled .rdo-txt{color:#9A9A9A;}

/* disabled + checked */
#section05 .rdo-row.is-disabled input:checked + .rdo-ui{background:#C9D3FF;}

/* =====================================================================
tag badge (ÀûÁß?)
===================================================================== */
.tag-badge{display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:-0.2px;}
.tag-badge.is-hit{background:#FFE9EA; color:#E5252B;}

/* =====================================================================
chip
===================================================================== */
.chip-set{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.chip{height:28px; padding:0 10px; border-radius:6px; border:1px solid #DBDEE5; background:#fff; color:#666; font-size:13px; font-weight:600; line-height:1; letter-spacing:-0.2px;}
.chip.is-on{border-color:var(--key-color); color:var(--key-color); background:#F3F6FF;}
.chip.is-disabled{background:#F5F5F5; border-color:#E4E4E4; color:#B0B0B0; cursor:default;}
.chip.is-on.is-disabled{background:#F5F7FF; border-color:#D6DDFF; color:#A6B2FF;}