/* =========================================
   CSS 변수 (디자인 토큰) — 색상/간격 일괄 관리
   ========================================= */
:root {
    --color-primary:   #7c93d8;   /* 부드러운 파스텔 블루 */
    --color-primary-dk: #5f78c9;  /* hover 시 더 진함 */
    --color-active:    #7c93d8;
    --color-bg:        #f7f8fc;   /* 아주 밝은 배경 */
    --color-surface:   #ffffff;
    --color-border:    #e7ebf4;
    --color-text:      #233247;
    --color-text-muted:#6b7488;
    --color-danger:    #d98b7a;
    --radius-sm:       10px;
    --radius-md:       16px;
    --shadow-sm:       0 4px 12px rgba(116,132,175,.10);
    --shadow-md:       0 12px 30px rgba(116,132,175,.14);
    --transition:      .22s ease;
}

body {
    font-family: "Nanum Gothic", "Apple SD Gothic Neo", sans-serif;
    background: linear-gradient(180deg, #f9fafe 0%, #f4f6fb 100%);
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================
   연도 내비게이션 (#tyear)
   ========================================= */
#tyear {
    font-weight: 700;
    font-size: 24px;
    color: var(--color-text);
    width: 100%;
    margin: 24px 0 14px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    letter-spacing: -0.3px;
    box-sizing: border-box;
}

/* 연도 이동 화살표 링크 */
#tyear a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
#tyear a:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* 연도에 붙는 토글 버튼 그룹 */
.tyear-toggle-group {
    /* 낙단 에 못 미캘줘서 오른쪽 끝에 밀어라 배치 */
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}


/* =========================================
   월 탭 메뉴 (#tbox)
   ========================================= */
#tbox {
    min-width: 900px;
    margin-bottom: 20px;
}
#tbox ul {
    list-style-type: none;
    margin: 0;
    padding: 6px;
    overflow: hidden;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    box-shadow: var(--shadow-sm);
}

#tbox li {
    flex: 1;
    min-width: 70px;
}

#tbox li a {
    display: block;
    color: var(--color-text-muted);
    text-align: center;
    padding: 9px 12px;
    text-decoration: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}

#tbox li a:hover:not(.active) {
    background: var(--color-bg);
    color: var(--color-text);
}

#tbox .active {
    background: linear-gradient(135deg, var(--color-primary) 0%, #9ab0ea 100%);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(124,147,216,.24);
}

/* =========================================
   근태 페이지 공통 레이아웃
   ========================================= */
.attendance-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    margin: 18px 0 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fbfcff 100%);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.attendance-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attendance-summary span {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    background: #f8faff;
    color: var(--color-text-muted);
    font-size: 12px;
    border: 1px solid #edf2fb;
}

.attendance-search form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.attendance-search .kselect {
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

.attendance-calendar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 8px;
    background: transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.attendance-calendar th {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 700;
    padding: 10px 8px 12px;
    text-align: center;
    letter-spacing: -0.2px;
}

.attendance-calendar td {
    background: var(--color-surface);
    vertical-align: top;
}

.attendance-calendar-title {
    background: #ffffff !important;
    padding: 14px 16px;
}

.attendance-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.attendance-title-text {
    font-weight: 700;
    font-size: 15px;
    color: var(--color-text);
}

.attendance-title-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn_b01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn_b01:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.btn_b01.small {
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 999px;
}

.attendance-day-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}

.attendance-cell {
    padding: 10px;
    min-height: 180px;
    width: 14.28%;
    min-width: 0;
    border: 1px solid #ebf0f8;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.attendance-cell:hover {
    background: #fcfdff;
    border-color: #d9e4f8;
    transform: translateY(-1px);
}

.attendance-cell.is-today {
    background: linear-gradient(180deg, #fdfdff 0%, #f5f9ff 100%);
    box-shadow: 0 8px 20px rgba(124,147,216,.12);
}

.attendance-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    background: #f5f7fd;
    color: var(--color-text);
    font-weight: 700;
    margin-right: 6px;
    border: 1px solid #edf2fb;
}

.attendance-day-badge.is-today {
    background: linear-gradient(135deg, var(--color-primary) 0%, #a6b9ee 100%);
    color: #fff;
    border-color: transparent;
}

.attendance-day-badge.is-sunday,
.attendance-day-badge.is-holiday {
    color: #c97c6d;
    background: #fff8f6;
}

.attendance-day-badge.is-saturday {
    color: #6a7fbd;
    background: #f6f8ff;
}

.attendance-holiday-badge {
    display: inline-block;
    max-width: 6ch;
    margin-left: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f7f4ed;
    color: #9b7b42;
    font-size: 10px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
    transition: max-width 0.2s ease;
}

.attendance-holiday-badge:hover {
    max-width: 100px;
    overflow: visible;
    white-space: normal;
    z-index: 2;
}

.attendance-cell table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.attendance-cell table tr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}

.attendance-cell table td {
    border: none;
    padding: 0;
    background: transparent;
}

.attendance-cell .p321,
.attendance-cell .p322 {
    width: auto;
    text-align: left;
    border: none;
    padding: 0;
    display: inline-block;
}

.attendance-cell select,
.attendance-cell input[type="text"],
.attendance-cell input[type="number"] {
    width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.attendance-cell .yuhyung_box,
.attendance-cell .yuhyung_box_red {
    border: 1px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    width: 100%;
    padding: 5px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.attendance-cell .yuhyung_box_red {
    color: var(--color-danger);
}

/* =========================================
   데이터 테이블 (.tg)
   ========================================= */
.tg {
    border-collapse: collapse;
    border-spacing: 0;
    float: left;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.tg th {
    font-size: 12px;
    font-weight: 600;
    padding: 9px 6px;
    overflow: hidden;
    word-break: normal;
    color: var(--color-text);
    background: #f0f3ff;  /* 연한 인디고 배경 */
    letter-spacing: -0.2px;
}

.tg-td0{text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td30{width:30px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td40{width:40px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td49{width:44.5px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td50{width:50px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td60{width:60px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td62{width:62px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td50-b{width:50px;text-align:center;border-bottom:1px solid #bcbcbc;background:#494c55 !important;color:#fff !important}
.tg-td80{width:80px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td80-b{width:80px;text-align:center;border-bottom:1px solid #bcbcbc;background:#494c55 !important;color:#fff !important}
.tg-td100{width:100px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td200-b{width:200px;text-align:center;border-bottom:1px solid #bcbcbc;background:#494c55 !important;color:#fff !important}
.tg-td65-b{width:65px;text-align:right;border-bottom:1px solid #bcbcbc;background:#e05b0b !important;color:#fff !important}
.tg-td100-b{width:100px;text-align:center;border-bottom:1px solid #bcbcbc;background:#494c55 !important;color:#fff !important}
.tg-td110-b{width:110px;text-align:center;border-bottom:1px solid #bcbcbc;background:#494c55 !important;color:#fff !important}
.tg-td120{width:120px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-td100{width:104px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-bottom {border-bottom:1px solid #bcbcbc;background:#f3f3f3 !important}

.tg-th0{text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th0-b{text-align:center;border-bottom:1px solid #bcbcbc;background:#ebfee6 !important}
.tg-th30{width:30px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th40{width:40px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th49{width:44.5px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th50{width:50px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th60{width:60px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th62{width:62px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th80{width:80px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th200{width:200px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th65{width:65px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th100{width:100px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th110{width:110px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th120{width:120px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th200{width:200px;text-align:center;border-bottom:1px solid #bcbcbc}
.tg-th300{width:300px;text-align:center;border-bottom:1px solid #bcbcbc}

.tg td {
    font-size: 12px;
    padding: 5px 4px;
    overflow: hidden;
    word-break: normal;
    color: var(--color-text);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
/* 짝수 행 줄무늬 — 가독성 향상 */
.tg tr:nth-child(even) td { background: #fafbff; }

.white        { background: var(--color-surface) !important; }
.border-right { border-right:  1px solid var(--color-border) !important; }
.border-left  { border-left:   1px solid var(--color-border) !important; }
.cursorPointer{ cursor: pointer; }
.alignRight   { text-align: right; }

/* =========================================
   공통 버튼 (.kbutton)
   ========================================= */
.kbutton {
    display: inline-block;
    padding: 9px 20px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 8px rgba(79,110,247,.25);
    vertical-align: middle;
    letter-spacing: -0.2px;
}
.kbutton:hover {
    background: var(--color-primary-dk);
    box-shadow: 0 4px 14px rgba(79,110,247,.35);
    transform: translateY(-1px);
}
.kbutton:active {
    background: var(--color-primary-dk);
    transform: translateY(0);
    box-shadow: none;
}

.kselect {
	width: 200px; /* ���ϴ� �ʺ����� */
	padding: .8em .5em; /* �������� ���� ���� */
	border: 1px solid #999;
	border-radius: 0px; /* iOS �ձٸ𼭸� ���� */
	-webkit-appearance: none; /* ����Ƽ�� ���� ���߱� */
	-moz-appearance: none; appearance: none;
}

/* 테이블 내부 소형 버튼 */
.tdbutton {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition);
}
.tdbutton:hover { background: var(--color-primary-dk); }

.nae1{font-size:14px;font-weight:bold;color:#ffffff}
.nae2{font-size:14px;font-weight:bold;color:#f9fd8c}

.t_32{border-bottom:1px solid #ffffff;}
.p321{width:70px;height:20px;text-align:center;border-bottom:1px solid #efefef}

a.btn_name {margin-right:10px;width:80px;text-align:center;display:inline-block;padding:7px;border:1px solid #d9ded9;background:#f2f5f9;color:#000;text-decoration:none;vertical-align:middle;margin-bottom:10px;}

a.btn_nameSH {margin-right:10px;width:115px;text-align:center;display:inline-block;padding:7px;border:1px solid #d9ded9;background:#f2f5f9;color:#000;text-decoration:none;vertical-align:middle;margin-bottom:10px;}

a.btn_nameSH2 {margin-right:10px;width:180px;text-align:left;display:inline-block;padding:7px;border:1px solid #d9ded9;background:#f2f5f9;color:#000;text-decoration:none;vertical-align:middle;margin-bottom:10px;}

.yuhyung_box{border:1px solid #ffffff;color:#888888;}
.yuhyung_box_red{border:1px solid #ffffff;color:#ff0000;}

.Ilseungb {color:#ffffff;font-size:9px;padding:1px;background:#5b72f8}
.Ilseung {width:10px;background:url('/img/dotdot1.png') no-repeat left center;}
.Ilmi {color:#ffffff;font-size:9px;padding:1px;background:#fa864d}
.Ilsik {color:#ffffff;font-size:9px;padding:1px;background:#b134c4}

.Fdiv {
	text-align:center;
	float:left;
	margin-right:1px;
}
.Fdiv ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.Fdiv li {
    padding: 5px 0px 5px 5px;
	height: 20px;
    margin-bottom: 5px;
    border-bottom: 1px solid #efefef;
    font-size: 13px;
	width: 200px;
}
.Fdiv li:first-child {
	padding-top:10px;
	color:#ffffff;
	background:#454545;
}
.Fdiv li:last-child {
	font-weight: bold;
	font-size:14px;
	background: #e9e9e9;
}
.su01{
	font-weight:bold;font-size:15px;padding:10px;width:200px;margin:0 auto;text-align:center;
}
.sutext{
	font-weight:normal;font-size:14px;padding:10px;width:300px;text-align:left;border:1px solid #e3e3e3;
}
.sutextIs{
	font-weight:normal;font-size:14px;padding:10px;width:300px;text-align:left;border:1px solid #e3e3e3;background:#e3e3e3;;
}

.cut_title_blue{padding:2px;background:#3d3b78;color:#ffffff;font-size:10px;margin-right:2px;}
.cut_title_red{padding:2px;background:#e34f3f;color:#ffffff;font-size:10px;margin-right:2px;}

.Audition_Title {font-weight:lighter; font-size:25px; width:90%; text-align:center;margin:0 auto;padding:30px;}
.Audition_Btn { background:#ff9700; font-size:18px; width:95%;padding:30px 15px; margin:0 auto; text-align:center;color:#ffffff;}
.Audition_Btn a{ color:#ffffff; text-decoration:none;}

.folder {background:url('/img/folders.png') ;width:100px;height:100px;float:left;font-size:12px;margin-right:10px;}
.folder p{padding-top:40px;text-align:center;}
.folder p a{text-decoration:none;color:#000000}
.fWrap {width:1200px; margin:0 auto;}

.AboardTop{width:100%;text-align:center;}
.AboardBtn0{float:left;padding:2%;font-weight:bold;background:#9c28af;margin:2%;width:42%;font-size:13px;text-align:center}
.AboardBtn1{float:left;padding:2%;font-weight:bold;background:#8bc24a;margin:2%;width:42%;font-size:13px;text-align:center}
.AboardBtn2{float:left;padding:2%;font-weight:bold;background:#4caf52;margin:2%;width:42%;font-size:13px;text-align:center}
.AboardBtn3{float:left;padding:2%;font-weight:bold;background:#cccccc;margin:2%;width:42%;font-size:13px;text-align:center}
.AboardBtn4{float:left;padding:2%;font-weight:bold;background:#ff9700;margin:2%;width:42%;font-size:13px;text-align:center}
.AboardBtn5{float:left;padding:2%;font-weight:bold;background:#2196f3;margin:2%;width:42%;font-size:13px;text-align:center}

.AboardBtn0 a{color:#ffffff;text-decoration:none;}
.AboardBtn1 a{color:#ffffff;text-decoration:none;}
.AboardBtn2 a{color:#ffffff;text-decoration:none;}
.AboardBtn3 a{color:#ffffff;text-decoration:none;}
.AboardBtn4 a{color:#ffffff;text-decoration:none;}
.AboardBtn5 a{color:#ffffff;text-decoration:none;}

.CTitle{width:100%;text-align:center;font-size:30px !important;margin-top:30px;text-decoration:underline}
.CTitle1{width:100%;text-align:center;font-size:26px !important;margin-top:30px;text-decoration:none}
.CTitle2{width:100%;text-align:center;font-size:20px !important;text-decoration:none}
.yuhyung_a {width:400px;margin:0 auto;padding:15px;background:#c14f17;color:#ffffff;font-size:14px;text-align:center;}


table.type02 {
	font-size:12px;
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    line-height: 1.1;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
table.type02 th {
    padding: 4px;
    font-weight: bold;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #eee;
	display: table-cell;
	vertical-align: middle;
	text-align:center;
}
table.type02 td {
    padding: 4px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	display: table-cell;
	vertical-align: middle;
}
.Bunryu{width:92%;padding:2%;border:1px solid #efefef;font-size:12px;margin:0 auto}

.border1 {border:1px solid #efefef;}

.approvalTable {

}
.approvalTable td {
	border:1px solid #efefef;
	width:19%;
	width:200px;
	height:80px;
	font-size:12px;
	text-align:center;
}
.menuName {height:50px;background:#353b47;color:#ffffff;text-align:center;font-size:20px;font-weight:bold;padding-top:18px;}

.mainMenu{
	padding: 0;
}
.mainMenu li{
	padding-right:15px;
	display: inline-block;
}

.leftMenu{height:100%;}

.leftMenu ul{
	font-size:13px;
	font-weight:bold;
	color:#222222;
	text-indent:-30px;
	padding:0;
	line-height:30px;
	border-bottom:1px solid #e6e6e6;
}

.leftMenu li{
	text-indent:0px;
	font-weight:normal;
	padding: 0 0 0 40px;
	background:#efefef;
}

.leftMenu li:first-child{
	margin-top:10px;
}


.leftMenu li:hover{
	background:#e1e1e1

}

.leftMenu li a{
	text-decoration:none;
	color:#222222;

}

.ulFirst {
	padding: 0 0 0 40px;
}
.documentNum{
	font-weight:bold;color:#af383c;
}
.aTitle{
	font-weight:bold;
	font-size:23px;
	color:#222222;
	margin-bottom:30px;
	padding-bottom:5px;
	border-bottom:1px solid #efefef;
}
.titleSub{position:relative;padding:10px;font-weight:bold;font-size:11px;text-align:center;background:#383f47;color:#ffffff;width:15%;margin-bottom:40px;}

.mtitle{width:100%;height:40px;text-align:center;background:#383f47;color:#ffffff;font-size:18px;padding-top:22px;}


.checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } .checks input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .checks input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } .checks input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } .checks input[type="radio"]:checked + label:before { background: #E9ECEE; border-color: #adb8c0; } .checks input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 1px; left: 5px; width: 13px; height: 13px; background: #99a1a7; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }
.boxBasic{padding:10px;border:1px solid #efefef;}

.basicInput {
	padding:5px;
	border:1px solid #a6a6a6;
	width:95%;
	}
.basicButton {
	padding:5px;
	border:1px solid #a6a6a6;
	}
.subTitle{font-size:10px;color:#ff5e29}

.cate{padding:10px 0 10px 0;margin-bottom:10px;}
.cate a{padding:10px;border:1px solid #efefef;text-decoration:none;cursor:pointer;}


#load {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    display: block;
    opacity: 0.8;
    background: white;
    z-index: 99;
    text-align: center;
}

#load > img {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
}

/* =========================================
   유틸리티 클래스
   ========================================= */
.clear-fix { clear: both; }

/* 페이지 메인 콘텐츠 래퍼 */
.content-wrap {
    width: 100%;
    padding: 0 20px 20px;
    box-sizing: border-box;
}



/* 토글 버튼 기본 스타일 — 연도 바 옆에 소형으로 배치 */
.btn-toggle {
    padding: 6px 14px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), box-shadow var(--transition);
    user-select: none;
    box-shadow: var(--shadow-sm);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* 활성화된(현재 선택) 토글 버튼 */
.btn-toggle--active,
.btn-toggle:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 2px 10px rgba(79,110,247,.28);
}