/* =====================================================================
(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;}
/* =========================
Tab Full B (round)
========================= */
.tab-full-b .tab-slider{padding:12px 0; overflow-x: auto; background:#F8F8F8; scrollbar-width: none; -ms-overflow-style: none;}
.tab-full-b .tab-list{max-width:1200px; margin:0 auto; gap:12px;}
.tab-full-b .tab-btn{flex:1 0 190px; height:45px; padding:0 16px; border:1px solid #E6E6E6; border-radius:999px; color:#777; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-0.025em;}
.tab-full-b .tab-btn:nth-last-child(n+7),
.tab-full-b .tab-btn:nth-last-child(n+7) ~ .tab-btn {flex:1 0 0;}
.tab-full-b .tab-btn.is-on{border-color:#2C5BF6; background:#FFF; color:#2C5BF6; font-weight:600;}
.tab-full-b .tab-btn:first-child {margin-left: 16px;}
.tab-full-b .tab-btn:last-child {margin-right: 16px;}
/* =========================
UI Tab A (underline)
========================= */
.tab-ui-a{display:flex; align-items:center; gap:24px; max-width:1200px; margin:0 auto; }
.tab-ui-a .tab-slider{flex:1 0 auto; min-width:0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;}
.tab-ui-a .tab-list{width:100%;}
.tab-ui-a .swiper-slide.tab-btn{flex:0 0 188px; width:188px; height:52px; padding:0 20px; border-bottom:1px solid #DBDEE5; background:#FFF; color:#555; font-size:16px; font-weight:500; line-height:1.5; letter-spacing:-0.02em;}
.tab-ui-a .tab-btn.is-on{border-bottom:3px solid #333; color:#333; font-weight:700;}
.tab-ui-a .tab-arrow{flex:0 0 12px; width:12px; height:21px; padding:0; border:0; background-color:transparent; background-position:center; background-repeat:no-repeat; background-size:12px 21px; cursor:pointer;}
.tab-ui-a .tab-arrow-prev{background-image: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.5L1 10.5L10 19.5' stroke='%238B95A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
.tab-ui-a .tab-arrow-next{background-image: url("data:image/svg+xml,%3Csvg width='12' height='21' viewBox='0 0 12 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 1.5L11 10.5L2 19.5' stroke='%238B95A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
/* =========================
UI Tab B (compact)
========================= */
.tab-ui-b .tab-list{width:100%; max-width:1200px; height:48px; margin:0 auto; border:1px solid #DBDEE5; border-radius:6px; overflow:hidden; background:#FFF;}
.tab-ui-b .tab-btn{flex:1 1 0; height:100%; padding:0 20px; border-right:1px solid #DBDEE5; color:#333; font-size:16px; font-weight:500; line-height:1.5; letter-spacing:-0.02em;}
.tab-ui-b .tab-btn:last-child{border-right:0;}
.tab-ui-b .tab-btn.is-on{background:#333; color:#FFF; font-weight:700;}
/* =========================
UI Tab C (segmented)
========================= */
.tab-ui-c .tab-list{width:100%; max-width:1200px; margin:0 auto; gap:12px; border-bottom:1px solid #2C5BF6;}
.tab-ui-c .tab-btn{flex:1 1 0; height:49px; padding:0; border-bottom:1px solid #2C5BF6; border-radius:6px 6px 0 0; background:#F5F6F7; color:#777; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-0.025em;}
.tab-ui-c .tab-btn.is-on{border:1px solid #2C5BF6; border-bottom-color:#FFF; background:#FFF; color:#2C5BF6; font-weight:700;}
/* =========================
UI Tab D (underline / equal)
- 균등 분할 밑줄 탭 (MO에서도 가로 스크롤 없이 한 줄 균등 분할)
- 활성: 파란 3px 밑줄 + 파란 글자 (밑줄은 inset box-shadow → 활성 전환 시 높이 변화 없음)
========================= */
.tab-ui-d .tab-list{width:100%;}
.tab-ui-d .tab-btn{flex:1 1 0; min-width:0; height:56px; padding:16px; box-shadow:inset 0 -1px 0 #DBDEE5; color:#555; font-size:16px; font-weight:500; line-height:24px; letter-spacing:-0.16px;}
.tab-ui-d .tab-btn.is-on{box-shadow:inset 0 -3px 0 #2C5BF6; color:#2C5BF6; font-weight:700;}
@media (max-width:1199px){
.tab-full-b .tab-btn {flex-basis: 190px !important;}
}
/* =====================================================================
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;}
.tab-full-b .tab-slider{padding:12px 16px; scroll-padding: 16px;}
.tab-full-b .tab-list{gap:12px;}
.tab-full-b .tab-btn{flex:0 0 auto; height:40px; padding:0 18px; font-size:14px; line-height:1.4; letter-spacing:-0.025em;}
.tab-full-b .tab-btn:first-child {margin: 0;}
.tab-ui-a{display:block;}
.tab-ui-a .tab-arrow{display:none;}
.tab-ui-a .tab-list{width:384px;}
.tab-ui-a .swiper-slide.tab-btn{flex-basis:64px; width:64px; min-width:64px; height:41px; padding:0 20px; font-size:14px; letter-spacing:-0.02em;}
.tab-ui-b .tab-list{width:480px; height:42px;}
.tab-ui-b .tab-btn{flex:0 0 80px; min-width:80px; height:100%; padding:0 20px; font-size:14px; letter-spacing:-0.02em;}
.tab-ui-c .tab-slider{overflow:visible;}
.tab-ui-c .tab-list{width:100%; gap:4px;}
.tab-ui-c .tab-btn{flex:1 1 0; min-width:0; height:40px; padding:0 4px; font-size:14px; line-height:1.4; letter-spacing:-0.025em;}
.tab-ui-d .tab-slider{overflow:visible; cursor:auto;}
.tab-ui-d .tab-list{width:100%;}
.tab-ui-d .tab-btn{height:42px; padding:12px 16px; font-size:14px; line-height:18px; letter-spacing:-0.28px;}
}
@media (min-width:768px) and (max-width:1024px){
.tab-ui-a{display:block; overflow:hidden;}
.tab-ui-a .tab-arrow{display:none;}
.tab-ui-a .tab-slider{overflow:visible;}
.tab-ui-a .tab-list{width:828px;}
.tab-ui-a .swiper-slide.tab-btn{flex-basis:138px; width:138px; min-width:138px;}
}
/* =====================================================================
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:1px solid #333; border-bottom:1px solid #333; 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%; max-height: 315px; overflow-y: auto;
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; white-space: nowrap;}
.custom-dropdown .option:hover{background:#F1F3F8;}
/* Disabled */
.custom-dropdown.is-disabled .select-btn{background:#F5F5F5; color:#888; cursor:default; pointer-events:none;border: 1px solid #DBDEE5;}
.custom-dropdown.is-disabled .select-arrow{border-color:#888;}
.custom-dropdown.is-scroll .select-list{max-height:190px; overflow:auto;}
/* Scrollbar */
.custom-dropdown .select-list::-webkit-scrollbar { width: 12px;}
.custom-dropdown .select-list::-webkit-scrollbar-track{ }
.custom-dropdown .select-list::-webkit-scrollbar-thumb {border: 4px solid #fff; border-radius: 99px; height: 75px; background: #DBDBDB;}
/* 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 .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;}
}
/* =====================================================================
학교 검색
===================================================================== */
.school-row {display:flex;flex-wrap:wrap;width:100%;--school-search-gap:8px;--school-search-button-width:120px;}
.school-row *{box-sizing: border-box !important;}
:where(.school-row) {column-gap:var(--school-search-gap);} /* 기본값 */
.school-row .school-box {flex:1;position:relative;min-width:0;width:100%;}
.school-row .search-select {display:none;position:static;width:calc(100% + var(--school-search-button-width) + var(--school-search-gap));max-height:225px;margin-top:1px;overflow-y:auto;border:1px solid #2C5BF6;border-radius:6px;background:#fff;}
.school-row .school-box.is-open .search-select {display: block;}
.school-row .school-box .search-select::-webkit-scrollbar { width: 12px;}
.school-row .school-box .search-select::-webkit-scrollbar-thumb {border: 4px solid #fff; border-radius: 99px; height: 75px; background: #DBDBDB;}
.school-row .school-box .input-sch {min-height: var(--cm-search-btn, 42px);}
.school-row .search-select li a {display: block; padding: 12px 18px; font-size: 14px;}
.school-row .search-select li a.is-empty {cursor: inherit;}
.school-row .search-select li a:hover {background: #f1f3f8; text-decoration: none;}
.school-row .search-select li a span {color: #777;}
.school-row .cm-search-btn{display:flex;flex:0 0 var(--school-search-button-width);align-items:center;justify-content:center;width:var(--school-search-button-width); height: var(--cm-search-btn, 42px); border-radius: 6px; background: #9AA3B2; font-size: 15px; color: #fff;}
.school-row .cm-search-btn:hover {text-decoration: none;}
.school-note {width: 100%;}
.school-note em {display: block; margin-top: 8px; font-size: 12px; color: #2c5bf6; font-style: normal;}
.school-note em.alert {color: #ED2024;}
@media (max-width:767px){
.school-row {--school-search-button-width:89px;}
}
/* =====================================================================
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;}
/* =====================================================================
mypage component
===================================================================== */
/* Tab */
.mypage-tab{width:100%;margin-top:24px;}
.mypage-tab__list{display:flex;width:100%;padding:0;}
.mypage-tab__btn{position:relative;flex:1 1 0;height:52px;padding:0 20px;border:0;border-bottom:1px solid #dbdee5;background:#fff;color:#555;font-family:inherit;font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-0.32px;text-align:center;cursor:pointer;}
.mypage-tab__btn.is-on{border-bottom:3px solid #2C5BF6;color:#2C5BF6;font-weight:700;}
@media (max-width:1023px) {
.mypage-tab{margin-top:0;}
}
@media (max-width:767px) {
.mypage-tab__btn{height:37px;padding:8px 20px;font-size:14px;letter-spacing:-0.28px;}
}
/* 셀렉트 박스 */
.mypage-wrap .select-wrap.custom-select{position:relative;/*width:288.6666px;*/height:31px;}
.mypage-wrap .select-wrap.custom-select .select-btn{width:100%;height:31px;padding:0 36px 0 14px;border:1px solid #DBDEE5;border-radius:4px;background:#fff url("data:image/svg+xml;utf8,") no-repeat right 14px center / 12px 8px;color:#333;font-size:13px;text-align:left;}
.mypage-wrap .select-wrap.custom-select.is-open .select-btn{border-color:#2C5BF6;background-image:url("data:image/svg+xml;utf8,");}
.mypage-wrap .select-wrap.custom-select.open .select-btn{border-color:#2C5BF6;background-image:url("data:image/svg+xml;utf8,");}
.mypage-wrap .select-wrap.custom-select .select-list{ display:none;position:absolute;left:0;top:calc(100% + 4px);z-index:20;width:100%;max-height:198px;margin:0;padding:0;border:1px solid #dbdee5;border-radius:4px;;background:#fff;overflow-y:auto;list-style:none;}
.mypage-wrap .select-wrap.custom-select.is-open .select-list{display:block;}
.mypage-wrap .select-wrap.custom-select.open .select-list{display:block;}
.mypage-wrap .select-wrap.custom-select .select-list button{display:block;width:100%;height:39px;padding:0 14px;border:0;background:#fff;color:#333;font-size:13px;text-align:left;}
.mypage-wrap .select-wrap.custom-select .select-list button:hover{background:#F1F3F8;}
@media (max-width:1023px) {
.mypage-wrap .select-wrap,
.mypage-wrap .search-wrap .period,
.mypage-wrap .search-wrap .search-btn,
.mypage-wrap .search-wrap .date{width:100%;min-width:0;}
.mypage-wrap .select-wrap.custom-select{width:100%;min-width:0;}
}
@media (max-width:767px){
.mypage-wrap .select-wrap{grid-column:1 / -1;width:100%;height:30px;}
.mypage-wrap .select-wrap.custom-select{grid-column:1 / -1;width:100%;height:30px;}
.mypage-wrap .select-wrap.custom-select .select-btn{height:30px;}
.mypage-wrap .select-wrap.custom-select .select-list{top:30px;}
}
/* 리스트 개수 */
.mypage-wrap .list-count{padding-bottom:12px;color:#333;font-size:15px;font-weight:500;line-height:1;letter-spacing:-0.375px;white-space:nowrap;}
.mypage-wrap .list-count span{display:inline;color:#2c5bf6;font-weight:500;}
@media (max-width:1023px) {
.mypage-wrap .list-count{height:40px;padding:10px 14px;border-bottom:1px solid #e4e4e4;font-size:15px;letter-spacing:-0.15px;}
}
@media (max-width:767px) {
.mypage-wrap .list-count{font-size:14px;letter-spacing:-0.14px;}
}
/* 리스트 없을 경우 */
.mypage-wrap .list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:225px;padding:80px 16px;border:1px solid #dbdee5;border-radius:8px;background:#fff;text-align:center;}
.mypage-wrap .list-empty img{display:block;width:40px;height:35px;}
.mypage-wrap .list-empty p{width:100%;color:#333;font-size:16px;font-weight:400;line-height:1.4;letter-spacing:-0.16px;}
@media (min-width:768px) and (max-width:1023px) {
.mypage-wrap .list-empty{min-height:145px;margin:16px 24px 0;padding:40px 16px;border:0;border-bottom:1px solid #EBEBEB;border-radius:0;}
}
@media (max-width:767px) {
.mypage-wrap .list-empty{min-height:144px;padding:40px 16px;border-width:0 0 1px;border-color:#ebebeb;border-radius:0;}
.mypage-wrap .list-empty p{font-size:14px;line-height:1.5;letter-spacing:-0.14px;}
}
/* 버튼::더보기 */
.mypage-wrap .btn-more{display:flex;align-items:center;justify-content:center;gap:4px;flex:0 0 auto;width:120px;height:36px;margin:24px auto 0;border:1px solid #dbdbdb;border-radius:6px;background:#fff;color:#555;font-size:15px;font-weight:500;line-height:1.1;letter-spacing:-0.375px;text-align:center;appearance:none;}
.mypage-wrap .btn-more:after{content:"";display:block;flex:0 0 auto;width:7px;height:7px;margin:-4px 6px 0 4px;border-right:1.5px solid #555;border-bottom:1.5px solid #555;transform:rotate(45deg);}
.mypage-wrap .btn-more:hover,
.mypage-wrap .btn-more:active{filter:none;transform:none;}
@media (min-width:768px) and (max-width:1023px) {
.mypage-wrap .btn-more{margin-top:16px;}
}
@media (max-width:767px) {
.mypage-wrap .btn-more{width:104px;height:32px;margin-top:16px;font-size:13px;letter-spacing:-0.325px;}
}