Commit @38949eb03f2870a805950e4dbb5e5c57631d2868

yanghyo 09-29

box-list추가

@38949eb03f2870a805950e4dbb5e5c57631d2868

151b2d3

38949eb

html/onSejong/index.html

--- html/onSejong/index.html

+++ html/onSejong/index.html

...	...	@@ -453,7 +453,7 @@
453	453	<li>[뷰어]공동문서편집
454	454	<ul>
455	455	<li class="before">공동문서편집</li>
456		- <li class="working">[팝업]그룹설정,manager/class/pop_groupSet.html</li>
	456	+ <li>[팝업]그룹설정,manager/class/pop_groupSet.html</li>
457	457	<li class="before">[팝업]글쓰기</li>
458	458	</ul>
459	459	</li>

151b2d3

38949eb

html/onSejong/manager/class/pop_groupSet.html

--- html/onSejong/manager/class/pop_groupSet.html

+++ html/onSejong/manager/class/pop_groupSet.html


             <h1>그룹설정</h1>
         </div>
         <div class="pop-body">
-            <fieldset>
-                <legend>설정 설정</legend>
-                <div class="">
-                    <div class="">
-                        <input type="text" placeholder="1 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
+            <ul class="bullet-none">
+                <li>
+                    <div class="flex-box">
+                        <input type="text" placeholder="1 그룹" title="그룹명을 입력하세요." class="flex1">
                         <button type="button" class="btn sm circle danger ico-delete">삭제</button>
                     </div>
-                    <div class="margin-top-sm">
-                        <input type="text" placeholder="2 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
+                </li>
+                <li>
+                    <div class="flex-box">
+                        <input type="text" placeholder="1 그룹" title="그룹명을 입력하세요." class="flex1">
                         <button type="button" class="btn sm circle danger ico-delete">삭제</button>
                     </div>
-                    <div class="margin-top-sm">
-                        <input type="text" placeholder="3 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
-                        <button type="button" class="btn sm circle danger ico-delete">삭제</button>
-                    </div>
-                    <div class="margin-top-sm">
-                        <input type="text" placeholder="4 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
-                        <button type="button" class="btn sm circle danger ico-delete">삭제</button>
-                    </div>
-                </div>
-                <button type="button" class="btn primary ico-plus margin-top-md">그룹 추가</button>
-            </fieldset>
+                </li>
+            </ul>
+            <button type="button" class="btn primary ico-plus margin-top-md">그룹 추가</button>
         </div>
         <div class="pop-footer">
             <div class="pop-btn-cont">

151b2d3

38949eb

resources/front/site/SITE_00000/css/common/component/_list.scss

--- resources/front/site/SITE_00000/css/common/component/_list.scss

+++ resources/front/site/SITE_00000/css/common/component/_list.scss

...	...	@@ -845,6 +845,45 @@
845	845	}
846	846
847	847	}
	848	+.box-list {
	849	+ display: grid;
	850	+ grid-template-columns: repeat(3, 1fr);
	851	+ gap:$spacing-2xlg;
	852	+ >li:has(.lnk-full),
	853	+ > li > a:not(.lnk-full) {
	854	+ display: flex;
	855	+ padding: $spacing-lg;
	856	+ flex-direction: column;
	857	+ gap: $spacing-md;
	858	+ height:100%;
	859	+ border-radius: $spacing-xlg;
	860	+ box-shadow: $shadow-md;
	861	+ transform: scale(1);
	862	+ border:.1rem solid transparent;
	863	+ transition: transform .2s;
	864	+ &:hover {
	865	+ box-shadow: $shadow-md;
	866	+ transform: scale(1.05);
	867	+ border:.1rem solid $spot;
	868	+ h3 {
	869	+ color:$spot;
	870	+ }
	871	+ }
	872	+ }
	873	+ h3 {
	874	+ @include typo('tit-md');
	875	+ @include ellipsis(2);
	876	+ }
	877	+ .txt-area {
	878	+ @include ellipsis(3);
	879	+ max-height:4.2em;
	880	+ }
	881	+}
	882	+@include responsive(tabletSm) {
	883	+ .box-list {
	884	+ grid-template-columns: repeat(2, 1fr);
	885	+ }
	886	+}
848	887	@include responsive(mobile) {
849	888	.checkradio-custom-row-area:has(.item-type-checkradio) {
850	889	display: none;
...	...	@@ -980,4 +1019,13 @@
980	1019	justify-content: flex-start;
981	1020	}
982	1021	}
	1022	+ .box-list {
	1023	+ grid-template-columns: initial;
	1024	+ gap:$spacing-xsm;
	1025	+ a {
	1026	+ padding:$spacing-lg $spacing-md;
	1027	+ gap:$spacing-xsm;
	1028	+ border-radius: $radius-md;
	1029	+ }
	1030	+ }
983	1031	} (파일 끝에 줄바꿈 문자 없음)

151b2d3

38949eb

resources/front/site/SITE_00000/css/custom/page/_hwa.scss

--- resources/front/site/SITE_00000/css/custom/page/_hwa.scss

+++ resources/front/site/SITE_00000/css/custom/page/_hwa.scss


-// /* sub */
-// .aside-area {
-// 	$asideW: 12rem;
-//     position: sticky;
-//     top: calc(var(--header-height) + 2rem);
-//     right:0;
-//     z-index:0;
-//     height:0;
-//     display: flex;
-//     width: calc(100% + $asideW + 4rem);
-//     justify-content: flex-end;
-//     z-index: 3;
-// 	@at-root .CONTENTS-WRAPPER:has(.aside-area) {
-// 		position: relative;
-// 		// z-index: 0;
-// 	}
-// 	.aside-list {
-// 		margin-left:$asideW;
-// 		width: $asideW;
-// 		background-color: $color-background-brand-secondary;
-// 		position: relative;
-// 	}
-// 	.export-area.is-active {
-// 		.popup-export {
-// 			display: grid;
-// 		}
-// 		.btn-export-toggle {
-// 			box-shadow: 1rem 1rem 3rem rgba(#0087FF, 0.3);
-// 		}
-// 	}
-// 	.popup-export {
-// 		$exportGap: 2.4rem;
-// 		//display: grid;
-// 		display: none;
-// 		grid-template-rows:6.4rem auto 6.4rem;
-// 		top:0;
-// 		left:-2rem;
-// 		transform: translateX(-100%);
-// 		position: absolute;
-// 		background-color: $color-background-default-primary;
-// 		border: $stroke-secondary;
-// 		border-radius: $radius-md;
-// 		width: 40rem;
-// 		height: 64rem;
-// 		max-height: calc(100vh - (var(--header-height) + 4rem));
-// 		box-shadow: $shadow-sm;
-// 		@keyframes export {
-// 			0% {
-// 				opacity: .5;
-// 				margin-left: 10%;
-// 			}
-// 			100% {
-// 				opacity: 1;
-// 				margin-left: 0;
-// 			}
-// 		}
-// 		animation: export .5s forwards;
-// 		.pop-header {
-// 			padding:0 $exportGap;
-// 			h1 {
-// 				display: flex;
-// 				align-items: center;
-// 				height:100%;
-// 				@include typo('tit-md');
-// 			}
-// 		}
-// 		.pop-body {
-// 			grid-template-rows: auto;
-// 			overflow-y: auto;
-// 			padding:0 $exportGap $exportGap;
-// 		}
-// 		.pop-footer {
-// 			display: flex;
-// 			button {
-// 				display: flex;
-// 				height:100%;
-// 				justify-content: center;
-// 				align-items: center;
-// 				flex:1;
-// 				background-color: $color-background-brand-secondary-inverse;
-// 				color:$color-white;
-// 				font-weight: 700;
-// 				border-radius: 0 0 $radius-md $radius-md;
-// 				font-size: var(--fs-lg);
-// 				&:hover {
-// 					background-color: $color-background-brand-secondary-inverse;
-// 				}
-// 				strong {
-// 					color: $color-font-brand-accent;
-// 				}
-// 				&:disabled {
-// 					cursor: default;
-// 					background-color: $color-font-default-tertiary;
-// 					opacity: 1;
-// 					pointer-events: none;
-// 				}
-// 			}
-// 		}
-// 	}
-// 	.export-list {
-// 		display: grid;
-// 		gap: $spacing-2xsm;
-// 		li {
-// 			display: flex;
-// 			position: relative;
-// 			border: $stroke-secondary;
-// 			border-radius: $radius-sm;
-// 			padding:.8rem 1.6rem;
-// 			min-height:8rem;
-// 			align-items: center;
-// 			min-width: 0;
-// 			gap:$spacing-xsm;
-// 			&:hover {
-// 				border-color: $color-stroke-default-secondary;
-// 				box-shadow: $shadow-sm;
-// 				.export-fnc {
-// 					display: block;
-// 				}
-// 			}
-// 		}
-// 		.txt-area {
-// 			display: flex;
-// 			flex-direction: column;
-// 			gap:$spacing-xsm;
-// 			overflow: hidden;
-// 			flex:1;
-// 			.editor-cont {
-// 				@include ellipsis(1);
-// 				@include editor-cont;
-// 			}
-// 		}
-// 		.img-area {
-// 			width: 9rem;			
-// 			figure {
-// 				display:block;
-// 				@include img-size;
-// 				border-radius: $radius-xsm;
-// 				border: $stroke-secondary;
-// 				background-color: $color-background-default-tertiary;
-// 				overflow: hidden;
-// 				img {
-// 					object-fit: cover;
-// 					width: 100%;
-// 					height:100%;
-// 				}
-// 			}
-// 		}
-// 		.export-fnc {
-// 			display: none;
-// 			position: absolute;
-// 			right:-1.6rem;
-// 			top:50%;
-// 			transform: translateY(-50%);
-// 			z-index: 2;
-// 		}
-// 	}
-// 	.btn-export-toggle {
-// 		display:flex;
-// 		flex-direction: column;
-// 		justify-content: center;
-// 		align-items: center;
-// 		gap:$spacing-xsm;
-// 		width: $asideW;
-// 		height: $asideW;
-// 		background-color: $color-background-brand-primary-inverse;
-// 		border-radius: $radius-lg;
-// 		color:$color-white;
-// 		font-size:var(--fs-lg);
-// 		font-weight: 700;
-// 		&:before {
-// 			content:" ";
-// 			width: 4rem;
-// 			height:4rem;
-// 			background: url($url-img + 'common/ico-img/ico-img-folders.svg');
-// 			background-size: contain;
-// 		}
-// 		&:hover {
-// 			box-shadow: 1rem 1rem 3rem rgba(#0087FF, 0.3);
-// 		}
-// 	}  
-// }
-// .copy-area {
-// 	display: flex;
-// 	flex-direction: column;
-// 	flex-wrap: wrap;
-// 	gap: 0.4rem;
-// 	box-sizing: border-box;
-
-// 	&:has(.img-area) {
-// 		width:12rem;
-// 	}
-// 	.img-area {
-// 		img {
-// 			display: block;
-// 			max-width: 100%;
-// 		}
-// 	}
-// 	.txt-area {
-// 		@include typo('label-sm');
-// 	}
-// 	@at-root .checkradio input:disabled ~ label .copy-area {
-// 		.img-area {
-// 			opacity: .2;
-// 		}
-// 	}
-// }
-
-// .class-write-nav {
-// 	display: grid;
-// 	grid-template-columns: repeat(4, 1fr);
-// 	gap:$spacing-xsm;
-// 	> li {
-// 		position: relative;
-		
-// 		input {
-// 			width: 100%;
-// 			padding-right:8rem;
-// 			padding-left: 1.6rem;
-// 			cursor: pointer;
-// 		}
-// 		.nav-fnc {
-// 			position: absolute;
-// 			right:1.6rem;
-// 			top:50%;
-// 			transform: translateY(-50%);
-// 			display: flex;
-// 			gap: $spacing-xsm;
-// 		}
-// 		&.is-active {
-// 			input {
-// 				background-color: $spot;
-// 				color:$color-white;
-// 				&::placeholder {
-// 					color: $color-font-default-tertiary;
-// 				}
-// 			}
-// 			.ico-edit {
-// 				&::before {
-// 					background-image: url(pathIcon(map-get($icons, 'ico-edit'), $color-white));
-// 				}
-// 			}
-// 			.ico-delete {
-// 				&::before {
-// 					background-image: url(pathIcon(map-get($icons, 'ico-delete'), $color-white));
-// 				}
-// 			}
-// 		}
-// 	}
-// }
-// .class-write-result {
-// 	$sgap:2.4rem;
-// 	&::after {
-// 		content: " ";
-// 		display:block;
-// 		margin:$spacing-lg auto 0;
-// 		width: 4rem;
-// 		height: 4rem;
-// 		background:url($url-img + 'common/ico-img/ico-img-arrow-blue.svg') center center / cover no-repeat;
-// 	}
-// 	&.is-close {
-// 	&::after {
-// 		display: none;
-// 	}
-// 	}
-// 	.tabs-nav-lg {
-// 		margin-bottom: -0.2rem;
-// 	}
-// 	.search-cont-area {
-// 		> *:last-child {
-// 			border-radius: 0 0 $radius-md $radius-md;
-// 		}
-// 	}
-// 	.search-cont,
-// 	.search-etc {
-// 		border:0.2rem solid $spot;
-// 	}
-// 	.tabs-normal {
-// 		.search-cont {
-// 			display: none;
-// 		}
-// 	}
-// 	.search-cont {
-// 		display: flex;
-// 		flex-direction: column;
-// 		height: 84rem;
-// 		overflow:hidden;
-// 		padding:$sgap;
-// 		&.is-active {
-// 			display: flex;
-// 		}
-// 		.cont-header,
-// 		.cont-footer {
-// 			flex:none;
-// 			> * {
-// 				margin:0;
-// 			}
-// 		}
-// 		.cont-header {
-// 			padding-bottom: $sgap;
-// 		}
-// 		.cont-body {
-// 			position: relative;
-// 			flex:1;
-// 			overflow-y: auto;
-// 		}
-// 		.cont-footer {
-// 			padding-top: $sgap;
-// 		}
-// 	}
-
-// 	.search-etc {
-// 		border-top: none;
-// 		display: grid;
-// 		grid-template-columns: 16rem auto;
-// 		overflow: hidden;
-// 		align-items: stretch;
-// 		> *  {
-// 			padding:$sgap;
-// 		}
-// 		> cite {
-// 			display: flex;
-// 			align-items: center;
-// 			background-color: $color-background-info-primary;
-// 			@include typo('tit-sm');
-// 		}
-// 	}	
-// }
-// .popup-guide-classwrite {
-// 	position: absolute;
-// 	top: 0;
-// 	left: 0;
-// 	right: 0;
-// 	bottom: 0;
-// 	background-color: rgba($color-black, 0.8);
-// 	backdrop-filter: saturate(200%) blur(2rem);
-// 	border-radius: $radius-md;
-// 	z-index: 3;
-// 	.ico-close {
-// 		position: absolute;
-// 		top: 1.6rem;
-// 		right: 1.6rem;
-// 		left: auto;
-// 	}
-// 	.pop-body {
-// 		img {
-// 			display: block;
-// 			width: 100%;
-// 		}
-// 	}
-// 	.pop-fnc {
-// 		position: absolute;
-// 		bottom: 2rem;
-// 		left: 2rem;
-// 	}
-// 	&.is-active {
-// 		.pop-fnc {
-// 			display: none;
-// 		}
-// 	}
-// 	.checkradio input[type=checkbox] ~ label {
-// 		color: $color-font-default-quaternary;
-// 	}
-// 	.checkradio input[type=checkbox]:checked ~ label {
-// 		color: $color-white;
-// 	}
-// 	.checkradio input[type=checkbox] ~ label:before,
-// 	.checkradio input[type=radio] ~ label:before {
-// 		border-color: $color-font-default-tertiary;
-// 		background: none;
-// 	}
-// 	.checkradio input[type=checkbox]:checked ~ label:before,
-// 	.checkradio input[type=checkbox]:checked ~ label:after {
-// 		border-color: $color-white;
-// 	}
-// }
-
-// /* AI문항: 성취코드 */
-// .achievecode {
-// 	display: flex;
-// 	flex-direction: column;
-// 	gap: 0.8rem;
-// 	max-height: 60rem;
-// 	overflow-y: auto;
-// 	.tit-area {
-// 		margin-bottom: 0.8rem;
-// 	}
-// 	> * {
-// 		margin: 0;
-// 	}
-// 	.btn-cont {
-// 		margin: 1.6rem 0 0;
-// 	}
-// 	.bg-border-box {
-// 		flex:none;
-// 	}
-// 	.box-body {
-// 		overflow: hidden;
-// 		flex:none;
-// 	}
-// }
-// .achievecode-list {
-// 	display: flex;
-// 	gap: $spacing-xsm;
-// 	overflow-x: auto;
-// 	> li {
-// 		flex: 1;
-// 		padding: 1.6rem;
-// 		border:  $stroke-secondary;
-// 		border-radius: $radius-sm;
-// 		background-color: $color-background-default-primary;
-// 		overflow: hidden;
-// 		min-width: 24rem;
-// 		box-sizing: border-box;
-// 		&.is-active {
-// 			border-width: 0.1rem;
-// 			border-color: #a0a0a0;
-// 			// background-color: rgba($spot, 0.03);
-// 		}
-// 	}
-// 	p {
-// 		display: block;
-// 		font-size: 1.5rem;
-// 		margin-bottom: $spacing-xsm;
-// 	}
-// 	.checkradio {
-// 		overflow: hidden;
-// 		.txt-area {
-// 			display: flex;
-// 			gap: $spacing-2xsm;
-// 		}
-// 		strong {
-// 			display: flex;
-// 			align-items: center;
-// 			justify-content: center;
-// 			width: 4rem;
-// 			flex-basis: 4rem;
-// 			margin-top: -1.6rem;
-// 			margin-bottom: -1.6rem;
-// 			margin-left: -1.6rem;
-// 			align-self: stretch;
-// 		}
-// 		span {
-// 			flex: 1;
-// 		}
-// 		.font-color-red {
-// 			background-color: rgba($color-red50, 0.05);
-// 		}
-// 		.font-color-blue {
-// 			background-color: rgba($color-blue50, 0.05);
-// 		}
-// 		.font-color-green {
-// 			background-color: rgba($color-green50, 0.05);
-// 		}
-// 	}
-// }
-// .achievecode-add-area {
-// 	display: flex;
-// 	flex-direction: column;
-// 	max-height: 70rem;
-// 	flex-wrap: nowrap;
-// 	gap: 0.8rem;
-// 	.top-area {
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap: 0.8rem;
-// 	}
-// }
-// .achievecode-add-item {
-// 	$padding: 2.4rem;
-// 	display: flex;
-// 	flex: none;
-// 	gap: 2.4rem;
-// 	background-color: $color-background-default-primary;
-// 	border:  $stroke-secondary;
-// 	border-radius: $radius-md;
-// 	padding: $padding;
-// 	overflow: hidden;
-// 	box-sizing: border-box;
-// 	.info-list {
-// 		flex: 1;
-// 		margin-bottom: 0;
-// 	}
-// 	.btn-full-h {
-// 		align-self: stretch;
-// 		background-color: $color-background-default-secondary;
-// 		margin: -$padding;
-// 		box-sizing: border-box;
-// 		flex-basis: 8rem;
-// 		width: 8rem;
-// 		border-left: $stroke-secondary;
-// 	}
-// }
-// .contents-sch-area {
-// 	display: flex;
-// 	flex-direction: column;
-// 	gap: 1.6rem;
-// 	margin: 0 0 1.2rem !important;
-
-// 	.contents-sch-top-area {
-// 		display: flex;
-// 		gap: 1.6rem;
-// 		height: 48rem;
-// 		box-sizing: border-box;
-// 		overflow: hidden;
-// 	}
-// 	.contents-sch-etc-area {
-// 		display: flex;
-// 		flex-direction: column;
-// 		flex-basis: 32rem;
-// 		height: 100%;
-// 		box-sizing: border-box;
-// 		.tit-area {
-// 			flex: none;
-// 			margin-bottom: 1.6rem;
-// 		}
-// 		.sch-etc-cont {
-// 			flex: 1;
-// 			overflow-y: auto;
-// 		}
-// 	}
-// 	.contents-sch {
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap: 0.8rem;
-// 		flex: 1;
-// 		margin: 0;
-// 		overflow: hidden;
-// 	}
-// 	.sch-result-cont {
-// 		// flex:1;
-// 		// max-height: 41.2rem;
-// 		overflow-y: auto;
-// 		overflow-x: hidden;
-// 	}
-// }
-// .contents-add-area {
-// 	min-height: 40rem;
-// 	height: 40rem;
-// 	overflow-y: auto;
-// }
-
-// // inform
-// @keyframes inform-on {
-// 	0% {
-// 		border: 0.1rem solid $color-stroke-default-tertiary;
-// 	}
-// 	100% {
-// 		border: 0.1rem solid $color-stroke-brand-primary;
-// 	}
-// }
-
-// .inform-list {
-//     li {
-//         position: relative;
-//         display: flex;
-//         align-items: center;
-//         gap: 2.4rem;
-//         padding: 2.4rem;
-//         border:  $stroke-secondary;
-//         border-radius: $radius-md;
-//         background: $color-background-default-secondary;
-//         .img-area {
-//             i {
-//                 display: block;
-//                 width: 3.2rem;
-//                 height: 3.2rem;
-//                 background-size: cover;
-//                 background-repeat: no-repeat;
-//                 background-position: 0 0;
-//             }
-//             .ico-confirm {
-//                 background-image: url($url-img + 'common/common/img_confirm.svg');
-//             }
-//             .ico-warning {
-//                 background-image: url($url-img + 'common/common/img_warning.svg');
-//             }
-//         }
-//         .txt-area {
-//             word-break: keep-all;
-//             .profile-area {
-//                 gap: 0.8rem;
-//                 margin-bottom: 0.4rem;
-//                 .img-area {
-//                     width: 2.4rem;
-//                     height: 2.4rem;
-//                 }
-//                 .txt-area {
-//                     cite {
-//                         font-size: 1.2rem;
-//                     }
-//                 }
-//             }
-//             h3 {
-//                 font-size: 1.6rem;
-//                 font-weight: 400;
-//             }
-//             p {
-//                 color: $color-font-default-tertiary;
-//                 margin-top: 0.2rem;
-//             }
-//             span {
-//                 display: block;
-//                 font-size: 1.2rem;
-//                 color: $color-font-default-tertiary;
-//                 margin-top: 0.6rem;
-//             }
-//         }
-//         &.on {
-//             background: $color-white;
-//             animation: inform-on 0.5s 2 ease-out;
-//         }
-//         &.on::after {
-//             content: "";
-//             position: absolute;
-//             top: 1.6rem;
-//             right: 1.6rem;
-//             display: block;
-//             background-color: $color-background-brand-secondary-inverse;
-//             width: 0.4rem;
-//             height: 0.4rem;
-//             border-radius: $radius-md;
-//         }
-//         & ~ li {
-//             margin-top: 0.8rem;
-//         }
-//     }
-// }
-// .test-write-area {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 1.6rem;
-//     > .tit-area,
-//     .sch-box {
-//         margin-bottom: 0;
-//     }
-//     .sch-box {
-//         flex-basis: 30rem;
-//     }
-//     .test-cont {
-//         display: flex;
-//         > .l-area,
-//         > .r-area {
-//             flex: 1;
-// 			min-width: 0;
-//         }
-//         > .c-area {
-//             display: flex;
-//             flex-direction: column;
-//             justify-content: center;
-//             align-items: center;
-//             flex-basis: 5.6rem;
-//             gap: 0.8rem;
-//         }
-// 		.scroll-area {
-// 			display: flex;
-// 			flex-direction: column;
-// 			height:100%;
-// 			flex: 1;
-//     		overflow: hidden;
-// 			.scroll {
-// 				flex:1;
-// 				overflow-y: auto;
-// 			}
-// 		}
-//         .bg-border-box {
-//             height: 64rem;
-//             overflow: hidden;
-//             .box-body {
-// 				display: flex;
-// 				flex-direction: column;
-//                 flex: 1;
-// 				overflow: hidden;
-//             }
-// 			.tabs-cont {
-// 				height:100%;
-// 				overflow: hidden;
-// 			}
-//             .box-footer{
-// 				display: flex;
-// 				align-items: center;
-// 				gap:$spacing-xsm;
-// 				justify-content: flex-end;
-//             }
-// 			.total-txt {
-// 				font-size: 1.6rem;
-// 			}
-//         }
-//         .tabs-cont {
-//             .fnc-area,
-//             .tit-area {
-//                 margin-bottom: 0.8rem;
-//             }
-//         }
-//     }
-// }
-// .quiz-add-list {
-
-// }
-// .test-achievecode-add-area {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 0.8rem;
-//     .top-area {
-//         display: flex;
-//         flex-direction: column;
-//         gap: 0.8rem;
-//     }
-// }
-// .folder-list {
-//     display: grid;
-//     grid-template-columns: repeat(3, 1fr);
-//     gap: 1.6rem;
-// 	font-size: 1.6rem;
-//     li {
-//         position: relative;
-//         display: flex;
-//         padding: 1.6rem;
-//         align-items: center;
-//         border:  $stroke-secondary;
-//         height: 16rem;
-//         box-sizing: border-box;
-//         border-radius: $radius-md;
-//         background-color: $color-background-default-primary;
-//         gap: 1.6rem;
-//         &:hover {
-//             .folder-fnc-r { 
-//                 display: block;
-//             }
-//         }
-//         &.default {
-//             // background-color:rgba($color: $color-primary50, $alpha: .03);
-//         }
-//     }
-//     &.col1 {
-//         grid-template-columns: repeat(1, 1fr);
-//     }
-// 	&.col4 {
-//         grid-template-columns: repeat(4, 1fr);
-//     }
-// 	&.sm {
-// 		li {
-// 			height:12rem;
-// 		}
-// 	}
-//     .num {
-//         flex: none;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         width: 5.6rem;
-//         height: 5.6rem;
-//         background-color: $color-background-brand-primary;
-//         font-size: 2.4rem;
-//         font-weight: 700;
-//         color: $spot;
-//         border-radius: $radius-md;
-//     }
-//     p {
-//         font-weight: 700;
-// 		color: $color-font-default-primary;
-//     }
-//     .folder-fnc-l,
-//     .folder-fnc-r {
-//         position: absolute;
-//         top: 0.8rem;
-//         z-index: 1;
-//     }
-//     .folder-fnc-l {
-//         left: 0.8rem;
-//     }
-//     .folder-fnc-r {
-//         display: block;
-//         right: 0.8rem;
-//     }
-//     .add {
-//         border-style: dashed;
-//         border-width: 0.2rem;
-//         flex-direction: column;
-//         justify-content: center;
-//         font-size: 1.4rem;
-//         color: $color-font-default-tertiary;
-// 		gap: $spacing-xsm;
-//         &::before {
-//             content: " ";
-//             @include ico($size-icon-md, plus);
-// 			background-color: $color-font-default-tertiary;
-//         }
-//     }
-//     .etc-fnc-area {
-//         li {
-//             padding: initial;
-//             height: auto;
-//             border-radius: initial;
-//             border: initial;
-//         }
-//     }
-// }
-// .folder-block-list {
-//     @extend .folder-list;
-// 	display: flex;
-// 	flex-direction: column; 
-// 	// grid-template-columns:none;
-// 	// grid-template-rows:min-content;
-//     gap: 0.8rem;
-//     > li {
-// 		// height: initial;
-// 		height:8rem;
-//     }
-//     .num {
-//         flex: none;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         width: 4rem;
-//         height: 4rem;
-//         background-color: $color-background-brand-primary;
-//         font-size: 1.6rem;
-//         font-weight: 700;
-//         color: $spot;
-//         border-radius: $radius-sm;
-//     }
-// 	p {
-// 		@include ellipsis(2);
-// 	}
-// }
-
-// .star {
-//     position: relative;
-//     display: inline-block;
-//     width: 8rem;
-//     height: 1.6rem;
-//     background: url($url-img + 'common/common/btn_star.svg') top left repeat-x;
-//     background-size: auto 3.2rem;
-//     vertical-align: middle;
-//     span {
-//         position: absolute;
-//         top: 0;
-//         left: 0;
-//         bottom: 0;
-//         text-indent: -99999px;
-//         background: url($url-img + 'common/common/btn_star.svg') 0 -1.6rem repeat-x;
-//         background-size: auto 3.2rem;
-//     }
-// }
-// .star-check {
-//     button {
-//         $size: 3.2rem;
-//         width: $size;
-//         height: $size;
-//         background: url($url-img + 'common/common/btn_star.svg') no-repeat;
-//         background-size: auto 6.4rem;
-//         background-position: top left;
-//         background-repeat: no-repeat;
-//         overflow: hidden;
-//         &.is-active,
-//         &.is-hover {
-//             background-position: 0 -3.2rem;
-//         }
-//     }
-// }
-// .star-check-list {
-//     display: flex;
-//     flex-direction: column;
-//     gap: 0.8rem;
-//     li {
-//         display: flex;
-//         flex-direction: column;
-//         gap: 0.8rem;
-//         background-color: $color-background-default-secondary;
-//         border-radius: $radius-md;
-//         padding: 1.6rem 2.4rem;
-//         text-align: left;
-//     }
-//     .txt-area {
-//         p {
-//             font-size: 1.5rem;
-//         }
-//     }
-//     .star-check {
-//         text-align: center;
-//     }
-// }
-// .step-list {
-//     li {
-//         visibility: hidden;
-//         // filter: blur(0.5rem);
-//         // opacity: 0.8;
-//         // .star-check {
-//         // 	position: relative;
-//         // 	&::after {
-//         // 		content: " ";
-//         // 		position: absolute;
-//         // 		top: 0;
-//         // 		left: 0;
-//         // 		right: 0;
-//         // 		bottom: 0;
-//         // 		background-color: transparent;
-//         // 	}
-//         // }
-//         &.is-active {
-//             visibility: visible;
-//             animation: opacity 1s forwards;
-//             // opacity: 1;
-//             // filter: blur(0);
-//             // .star-check {
-//             // 	&::after {
-//             // 		display: none;
-//             // 	}
-//             // }
-//         }
-//     }
-// }
-// .step-end {
-//     display: none;
-//     animation: opacityUp 0.5s forwards;
-// }
-// .mark-area {
-// 	display: flex;
-// 	gap: $spacing-lg;
-	
-// 	.sticky-cont {
-// 		position: relative;
-// 		box-sizing: border-box;
-// 		width: 24rem;
-// 		flex: none;
-// 		// .sticky {
-// 		// 	position: sticky;
-// 		// 	top: calc(var(--gnb-fnc-height) + 2rem);
-// 		// }
-// 	}
-//     .sticky {
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: space-between;
-//         background-color: $color-background-default-tertiary;
-//         border-radius: $radius-md;
-//         border:  $stroke-secondary;
-//         padding: 2.4rem 1.6rem;
-//         height: calc(100vh - (var(--header-height) + 4.8rem));
-//         gap: 1.6rem;
-// 		top: calc(var(--header-height) + 2.4rem);
-//     }
-//     // .scroll-y {
-//     // 	flex: 1;
-//     // 	overflow-y: auto;
-//     // }
-//     .btn-flex-cont {
-//         margin: 0;
-//     }
-// }
-// .img-sch-area {
-//     .sch-area {
-//         position: sticky;
-//         display: flex;
-//         gap: 0.8rem;
-//         top: -2rem;
-//         z-index: 2;
-//         background-color: $color-background-default-secondary;
-//         padding: 2rem;
-//         border: $stroke-secondary;
-//         border-radius: $radius-md;
-//         overflow: hidden;
-//         .sch {
-//             flex: 1;
-//         }
-//     }	
-//     .img-sch-result {
-//         padding: 4.8rem;
-//         background-color: $color-background-default-secondary;
-//         border-radius: $radius-md;
-//     }
-//     .img-sch-list {
-//         $gap: 1.6rem;
-//         display: flex;
-//         flex-wrap: wrap;
-//         gap: $spacing-md;
-
-//         li {
-//             position: relative;
-//             width: calc((100% - $gap * 5 ) / 6);
-//             &:hover {
-//                 z-index: 1;
-//                 figure {
-//                     transform: scale(1.8);
-//                 }
-//             }	
-//         }
-//         figure {
-//             position: relative;
-//             height: 0;
-//             padding-top: 100%;
-//             background-color: $color-background-default-secondary;
-//             border:  $stroke-secondary;
-//             border-radius: $radius-md;
-//             img {
-//                 object-fit: cover;
-//                 position: absolute;
-//                 display: block;
-//                 top: 50%;
-//                 left: 50%;
-//                 transform: translate(-50%, -50%);
-//                 max-width: 100%;
-//                 max-height: 100%;
-//             }
-//         }
-//     }
-// }
-
-// /* .test-list */
-// .test-list {
-//     display: flex;
-//     flex-wrap: wrap;
-// 	gap: $spacing-md;
-//     li {
-//         flex-basis: calc((100% - 0.8rem) / 2);
-//         display: flex;
-//         flex-direction: column;
-//         gap: 2.4rem;
-//         justify-content: center;
-//         .cont {
-//             display: flex;
-//             align-items: center;
-//             gap: 2.4rem;
-//         }
-//         position: relative;
-//         padding: 2.4rem 3.2rem;
-//         box-sizing: border-box;
-//         border-radius: 0.8rem;
-//         border: $stroke-secondary;
-//         min-width: 0;
-//         .btn-flex-cont {
-//             margin: 0;
-//         }
-//         .txt-area {
-//             flex: 1;
-//             .label-area {
-//                 margin-bottom: 1.2rem;
-//             }
-//             h3 {
-//                 font-size: 1.8rem;
-//                 font-weight: 500;
-//                 word-break: keep-all;
-//                 @include ellipsis(2, 1.25);
-//             }
-//             small {
-//                 display: block;
-//                 font-size: 1.2rem;
-//                 margin-top: 0.4rem;
-//             }
-//             .profile-area {
-//                 margin-top: 1.6rem;
-//                 gap: 0.8rem;
-//                 .img-area {
-//                     width: 2.4rem;
-//                     height: 2.4rem;
-//                 }
-//                 .txt-area {
-//                     cite {
-//                         font-size: 1.2rem;
-//                         color: $color-font-default-tertiary;
-//                     }
-//                 }
-//             }
-//         }
-//         .score {
-//             color: $color-font-default-tertiary;
-//             background-color: $color-background-default-secondary;
-//             width: 10rem;
-//             height: 10rem;
-//             line-height: 10rem;
-//             text-align: center;
-//             border-radius: 1.6rem;
-//             em {
-//                 font-size: 2.4rem;
-//                 font-weight: 700;
-//                 color: $color-font-default-tertiary;
-//             }
-//         }
-//     }
-// 	&.col3 {
-//         li {
-//             flex-basis: calc((100% - ($spacing-md * 2)) / 3);
-//         }
-//     }
-// 	.etc-fnc-area {
-//         position: absolute;
-//         right: $spacing-md;
-//         top: $spacing-md;
-//         li {
-//             padding: initial;
-//             border-radius: initial;
-//             border: initial;
-//         }
-//     }
-// }
-
-// .q-option-list {
-// 	display: flex;
-// 	flex-direction: column;
-// 	gap:$spacing-xsm;
-// }
-
-// /* .summary */
-// dl.summary {
-//     display: flex;
-//     background-color: $color-background-default-secondary;
-//     padding: 1.6rem 2.4rem;
-//     border-radius: $radius-md;
-//     margin-bottom: 1.6rem;
-// 	word-break: keep-all;
-// 	align-items: center;
-//     dt {
-//         font-weight: 700;
-//         margin-right: 1.6rem;
-//     }
-//     dd {
-//         margin-right: 4rem;
-// 		display: flex;
-// 		align-items: center;
-// 		gap: $spacing-2xsm;
-// 		&:last-child {
-// 			margin-right: 0;
-// 		}
-//     }
-// }
-
-// .test-add-list {
-// 	display: flex;
-// 	flex-direction: column;
-// 	gap:$spacing-xsm;
-// 	> li {
-// 		position: relative;
-// 		display: flex;
-// 		flex-direction: column;
-// 		align-items: flex-start;
-// 		justify-content: flex-start;
-// 		gap: $spacing-md;
-// 		margin-bottom: 0;
-// 		background-color: #fff;
-// 		border: $stroke-secondary;
-// 		padding: 1.6rem;
-// 		border-radius: $radius-sm;
-		
-// 		.item {
-// 			position: relative;
-// 			display: flex;
-// 			gap: $spacing-2xsm $spacing-xsm;
-// 			align-items: center;
-// 			margin-bottom: 0;
-// 			background-color: #fff;
-// 			width: 100%;
-// 			& ~ .item  {
-// 				border-top:$stroke-secondary;
-// 				padding-top:1.6rem;
-// 			}
-// 		}
-// 		.txt-area {
-// 			display: flex;
-// 			flex-direction: column;
-// 			gap:$spacing-xsm;
-// 			flex:1;
-// 		}
-// 		.editor-cont {
-// 			@include editor-cont;
-// 		}
-// 		.box-fnc {
-// 			display: flex;
-// 			gap:$spacing-xsm;
-// 			align-items: center;
-// 		}
-// 		&:has(.add-fnc) {
-// 			display: flex;
-// 			flex-direction: column;
-// 			padding-right:8rem;
-// 			.add-fnc {
-// 				position: absolute;
-// 				display: flex;
-// 				flex-direction: column;
-// 				align-items: center;
-// 				gap: $spacing-2xsm;
-// 				width:8rem;
-// 				right:0;
-// 				top:50%;
-// 				transform: translateY(-50%);
-// 			}
-// 		}
-// 		&:has(> .checkradio) {
-// 			padding-left:40px;
-// 			& > .checkradio {
-// 				position: absolute;
-// 				top:50%;
-// 				left:1.2rem;
-// 				transform: translateY(-50%);
-// 			}
-// 		}	
-// 		&:has(.ico-move) {
-// 			padding-left:32px;
-// 		}
-// 	}
-// 	.ico-move {
-// 		position: absolute;
-// 		left:0;
-// 		top:50%;
-// 		transform: translateY(-50%);
-// 	}
-// 	.ico-sm-close {
-// 		position: absolute;
-// 		right:-0.8rem;
-// 		top:-0.8rem;
-// 	}
-// 	.txt-none {
-// 		border: none;
-// 		background-color: transparent;
-// 		height: 100%;
-// 		align-items: center;
-//     	justify-content: center;
-// 	}
-// }
-
-// .basicquiz-stu-list {
-// 	display:grid;
-// 	gap:$spacing-xsm;
-// 	> li {
-// 		@extend .border-box;
-// 		margin-bottom: 0;
-// 		display:flex;
-// 		align-items: flex-start;
-// 	}
-// 	.cont-area {
-// 		flex:1;
-// 	}
-// 	.info-area {
-// 		display:flex;
-// 		justify-content: space-between;
-// 	}
-// 	.stu-info-list {
-// 		display:grid;
-// 		gap:$spacing-xsm;
-// 		&:has(li) {
-// 			margin-top: $spacing-md;
-// 		}
-// 		&:first-child {
-// 			margin-top:0;
-// 		}
-// 		li {
-// 			display: flex;
-// 			gap: $spacing-md;
-// 			padding:1.6rem 2.4rem;
-// 			min-height: 6.4rem;
-// 			background: $color-background-default-secondary;
-// 			border-radius: $radius-md;
-// 			align-items: center;
-// 			&.active {
-// 				background-color: $color-background-info-primary;
-// 				border: 4px solid $color-primary30;
-// 				color: $color-primary50;
-// 				cite {
-// 					color: $color-primary50;
-// 				}
-// 			}
-// 		}
-// 		.txt-area {
-// 			flex:1;
-// 			.label {
-// 				min-width: 5.6rem;
-// 			}
-// 			strong,
-// 			small {
-// 				display: block;
-// 			}
-// 		}
-// 		cite {
-// 			flex:none;
-// 			width:80px;
-// 			@include typo('tit-xsm');
-// 		}
-// 		.info {
-// 			display: flex;
-// 			flex-wrap: wrap;
-// 			align-items: center;
-// 			gap:$spacing-md;
-// 		}
-// 		.stu-fnc {
-// 			display: flex;
-// 			align-items: center;
-// 			gap:$spacing-xsm;
-// 		}
-// 	}
-// }
-// .num-input-list {
-// 	display: grid;
-// 	gap:$spacing-xsm;
-// 	grid-template-columns: repeat(5, 1fr);
-// 	li {
-// 		position:relative;
-// 		.num {
-// 			position:absolute;
-// 			width: 4.8rem;
-// 			height: 4.8rem;
-// 			line-height:4.8rem;
-// 			display: flex;
-// 			align-items: center;
-// 			justify-content: center;
-// 			left:0;
-// 			top:0;
-// 			bottom:0;
-// 			background-color: $color-background-default-tertiary;
-// 			@include typo('tit-xsm');
-// 			text-align:center;
-// 			border-radius: $radius-sm 0 0 $radius-sm;
-// 			z-index: -1;
-// 		}
-// 		input {
-// 			width: 100%;
-// 			min-width: 0;
-// 			padding-left:4.8em;
-// 			text-align: center;
-// 			background-color: transparent;
-// 		}
-// 	}
-// }
-// .num-list {
-// 	border: $stroke-secondary;
-// 	border-radius: $radius-sm;
-// 	overflow:hidden;
-// 	display: grid;
-// 	grid-auto-flow: column;
-//     grid-template-rows: repeat(10, minmax(48px, auto));
-// 	margin:0;
-// 	padding:0;
-// 	li {
-// 		position:relative;
-// 		display: grid;
-// 		grid-template-columns: repeat(2, 1fr);
-// 		align-items: center;
-// 		border-bottom: $stroke-secondary;
-// 		border-right:$stroke-secondary;
-// 		&:nth-child(10n) {
-// 			border-bottom:none;
-// 		}
-// 		> * {
-// 			flex:1;
-// 		}
-// 		.num {
-// 			display: flex;
-// 			align-items: center;
-// 			justify-content: center;
-// 			background-color: $color-background-default-tertiary;
-// 			@include typo('tit-xsm');
-// 			text-align:center;
-// 			height:100%;			
-// 		}
-// 		.txt-area {
-// 			display: flex;
-// 			align-items: center;
-// 			justify-content: center;
-// 			padding:8px;
-// 		}
-// 	}
-// }
-
-// .row {
-// 	margin-bottom: $spacing-section-sm;
-// 	display: grid;
-// 	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-// 	gap:$spacing-sm;
-// 	> .section {
-// 		margin-bottom: 0;
-// 	}
-// 	.border-box {
-// 		height: 100%;
-// 	}
-// 	.col2 {
-// 		grid-column: span 2;
-// 	}
-// }
-
-// .box-img-list{
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//     flex-wrap: wrap;
-//     gap: $spacing-md $spacing-xsm;
-//     li {
-//         flex-basis: 240px;
-//         a {
-//             display: flex;
-//             flex-direction: column;
-//             align-items: center;
-//             justify-content: center;
-//             gap: $spacing-md;
-//             border-radius: $radius-md;
-//             border: $stroke-secondary;
-//             min-height: 28rem;
-//             padding: $spacing-lg;
-//             box-sizing: border-box;
-//             &:hover {
-//                 border: 2px solid $color-primary50;
-//                 box-shadow: $shadow-md;
-//                 transition: all .1s;
-//                 cite {
-//                     color: $color-primary50;
-//                 }
-//             }
-//             cite {
-//                 font-size: 1.8rem;
-//                 font-weight: 500;
-//             }
-//         }
-//     }
-// }
-
-// .group-list {
-//     text-align: left;
-//     li {
-//         padding-bottom: $spacing-md;
-//         margin-bottom: $spacing-md;
-//         border-bottom: $stroke-secondary;
-//         &:last-child {
-//             padding-bottom: 0;
-//             margin-bottom: 0;
-//             border-bottom: none;
-//         }
-//         .label-area {
-//             margin-bottom: $spacing-xsm;
-//         }
-//         .info-quiz {
-//             font-weight: 500;
-//             font-size: $size-font-md;
-//         }
-//         .editor-cont {
-//             margin-top: $spacing-2xsm;
-//             font-size: $size-font-md;
-//             & > i {
-//                 margin-right: $spacing-2xsm;
-//             }
-// 			br {
-// 				display: none;
-// 			}
-//         }
-//     }
-// }
-
-// .group-list-test {
-//     li {
-//         display: flex;
-//         align-items: center;
-//         min-height: 40px;
-//         box-sizing: content-box;
-//         &> * {
-//             flex: 1;
-//         }
-//         & ~ li {
-//             padding-top: $spacing-md;
-//             margin-top: $spacing-md;
-//             border-top: $stroke-secondary;
-//         }
-//         .txt-area {
-//             display: flex;
-//             align-items: center;
-//             gap: $spacing-2xsm;
-//             flex-basis: 42%;
-//             text-align: left;
-//             font-size: $size-font-md;
-//             .editor-cont {
-//                 @include ellipsis(2);
-//             }
-//         }
-//     }
-// }
-
-// .search-keyword-area {
-// 	background-color: $color-background-default-secondary;
-// 	padding: 3.2rem 4rem;
-// 	border-radius: $radius-md;
-// 	margin-bottom: 4rem;
-// 	cite {
-// 		font-size: $size-font-md;
-// 		font-weight: 700;
-// 		color: $color-font-default-tertiary;
-// 		display: block;
-// 		margin-bottom: 0.8rem;
-// 	}
-// 	ul {
-// 		display: flex;
-// 		flex-wrap: wrap;
-// 		gap: $spacing-2xsm;
-// 	}
-// 	li {
-// 		a {
-// 			display: block;
-// 			padding: 0.8rem 1.2rem;
-// 			background-color: $color-background-default-primary;
-// 			border-radius: 2rem;
-// 			border: $stroke-secondary;
-// 			&:hover {
-// 				background-color: $color-background-default-tertiary;
-// 			}
-// 		}
-// 	}
-// }
-
-// .basicquiz-score-area {
-// 	&.is-disabled {
-// 		background-color: $color-background-default-secondary;
-// 		padding:2.4rem;
-// 		border-radius: $radius-md;
-// 		margin-bottom: $spacing-md;
-// 		.tit-area {
-// 			margin-bottom: 0;
-// 		}
-// 		.write-type {
-// 			display: none;
-// 		}
-// 		& + .basicquiz-score-area:not(.is-disabled) {
-// 			margin-top:8rem;
-// 		}
-// 	}
-// 	.score-list {
-// 		display: grid;
-// 		grid-template-columns: repeat(5, 1fr);
-// 		gap:$spacing-xsm;
-// 		overflow: hidden;
-// 		li {
-// 			display: flex;
-// 			gap:$spacing-xsm;
-// 			align-items: center;
-// 			position: relative;
-// 			// background-color: $color-background-default-secondary;
-// 			border: $stroke-secondary;
-// 			border-radius: $radius-sm;
-// 			padding:1.6rem;
-// 			min-height: 16.4rem;
-// 			&.add-area {
-// 				display: flex;
-// 				flex-direction: column;
-// 				align-items: center;
-// 				justify-content: center;
-// 				border:.2rem dashed $color-stroke-default-tertiary;
-// 			}
-// 		}
-// 		cite {
-// 			@include typo('tit-xsm');
-// 			display: block;
-// 			margin-bottom: $spacing-xsm;
-// 		}
-// 		fieldset {
-// 			display: grid;
-// 			gap:$spacing-xsm;
-// 			label {
-// 				position: relative;
-// 				display: flex;
-// 				overflow: hidden;
-// 				align-items: center;
-// 				gap: $spacing-2xsm;
-// 				span {
-// 					position: absolute;
-// 					display: flex;
-// 					align-items: center;
-// 					top:0.2rem;
-// 					left:0.2rem;
-// 					bottom:0.2rem;
-// 					flex:none;
-// 					width: 6.2rem;
-// 					font-size: var(--fs-sm);
-// 					font-weight: 700;
-// 					color: $color-font-default-tertiary;
-// 					background-color: $color-background-default-secondary;
-// 					border-radius: $radius-sm 0 0 $radius-sm;
-// 					padding-left:0.8rem;
-// 				}
-// 			}	
-// 			input {
-// 				min-width: 0;
-// 			}
-// 			input[type=number] {
-// 				width: 100%;
-// 				min-width: 0;		
-// 				padding-left:6.4rem + 1.6rem;
-// 				text-align: center;
-// 			}
-// 		}
-// 		& + .score-list {
-// 			margin-top:$spacing-xsm;
-// 		}
-// 	}
-// }
-
-// .storage-add-area {
-// 	display: grid;
-// 	gap:$spacing-xsm;
-// 	.btn-storage {
-// 		display:inline-flex;
-// 	}
-// 	.storage-add {
-// 		display: none;
-// 		gap: $spacing-xsm;
-// 		justify-content: center;
-// 		flex-wrap: wrap;
-// 		input{ 
-// 			width: 100%;
-// 		}
-// 	}
-// 	&.is-active {
-// 		.btn-storage {
-// 			display:none;
-// 		}
-// 		.storage-add {
-// 			display:flex;
-// 		}
-// 	}
-// }
-
-// .reference-list {
-// 	display: grid;
-// 	gap: $spacing-xsm;
-// 	grid-template-columns: repeat(2, 1fr);
-// 	li {
-// 		position: relative;
-// 		display: flex;
-// 		align-items: center;
-// 		gap:$spacing-sm;
-// 		background-color: $color-background-default-primary;
-// 		border: 1px solid $color-stroke-default-quaternary;
-// 		padding: $spacing-sm;
-// 		border-radius: $radius-sm;
-// 		&:hover {
-// 			font-weight: $size-font-weight-xlg;
-// 			color: $color-font-default-secondary
-// 		}
-// 		.img-weboffice-area {
-// 			img {
-// 				display: block;
-// 			}
-// 		}
-// 	}
-// 	.img-area {
-// 		@include img-size;
-// 		width: 16rem;
-// 		aspect-ratio: 16/9;
-// 		flex:none;
-// 	}
-// 	.img-weboffice-area {
-// 		width: 7.2rem;
-// 		padding: $spacing-xsm;
-// 		background-color: $color-background-default-primary;
-// 		border: $stroke-secondary;
-// 	}
-// 	.txt-area {
-// 		flex:1;
-// 		.txt {
-// 			margin-top:$spacing-xsm;
-// 			@include ellipsis(2);
-// 		}
-// 	}
-// }
-
-// .border-list {
-// 	border:$stroke-secondary;
-// 	border-radius: $radius-md;
-// 	background-color: $color-background-default-primary;
-// 	> li {
-// 	  @extend %flexArea;
-// 	  border-bottom: $stroke-secondary;
-// 	  padding: $spacing-md $spacing-lg;
-//       flex-wrap: wrap;
-// 	  &:last-of-type {
-// 		border-bottom: none;
-// 	  }
-// 	  .num {
-// 		flex:none;
-// 	  }
-//       .l-area {
-//         flex:1;
-//       }
-//       .item-tit {
-//         font-weight: $size-font-weight-md;
-//       }
-// 	}
-// } 
-
-// // 나의 보관함
-// .mystorage {
-// 	.row {
-// 		margin-bottom: $spacing-section-md;
-// 	}
-// }
-// .mystorage-header {
-// 	display: grid;
-// 	grid-template-columns: 16rem 1fr;
-// 	border:$stroke-secondary;
-// 	border-radius: $radius-md;
-// 	overflow-y: hidden;
-// 	overflow-x: auto;
-// 	margin-bottom: $spacing-3xlg;
-// 	.my-info {
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap:$spacing-sm;
-// 		padding:$spacing-lg $spacing-sm;
-// 		background-color:$color-background-brand-primary-inverse;
-// 		.profile {
-// 			position: relative;
-// 			.profile-tit {
-// 				color: $color-font-default-primary-inverse;
-// 			}
-// 		}
-// 		.btn-group {
-// 			.btn {
-// 				background: $color-background-default-primary;
-// 				border-radius: 2em;
-// 			}
-// 		}
-// 	}
-// 	.contents-info{
-// 		min-width: 88rem;
-// 		display: grid;
-// 		grid-template-columns: 75% repeat(auto-fit, minmax(0, 1fr));
-// 		> li {
-// 			height:0;
-// 			> strong {
-// 				display: flex;
-// 				justify-content: center;
-// 				align-items: center;
-// 				height: 3.6rem;
-// 				padding: 0 $spacing-md;
-// 				border-bottom: $stroke-secondary;
-// 				background: $color-background-default-secondary;
-// 				@include typo('tit-xsm');
-// 				color: $color-font-default-tertiary;
-// 			}
-// 			> ul {
-// 				display: grid;
-// 				grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-// 				height:100%;
-// 			}
-// 		}
-// 		.item {
-// 			border-left: $stroke-secondary;
-// 			padding:$spacing-md $spacing-xsm;
-// 			display: grid;
-// 			gap:$spacing-md;
-// 			align-items: end;
-// 			height:100%;
-// 			figure {
-// 				display: flex;
-// 				flex-direction: column;
-// 				align-items: center;
-// 				justify-content: center;
-// 				gap:$spacing-xsm;
-// 				text-align: center;
-// 				figcaption {
-// 					@include typo('tit-xsm');
-// 				}
-// 				img {
-// 					display: block;
-// 					width:4.8rem;
-// 				}
-// 			}
-// 			.txt-list {
-// 				display: grid;
-// 				border-radius: $radius-sm;
-// 				background: $color-background-brand-primary;
-// 				padding:$spacing-2xsm $spacing-xsm;
-// 				li {
-// 					display: flex;
-// 					justify-content: space-between;
-// 					border-top:$stroke-secondary;
-// 					padding:$spacing-xsm $spacing-xsm;
-// 					&:first-of-type {
-// 						border-top: none;
-// 					}
-// 					em {
-// 						@include typo ('label-md','strong');
-// 					}
-// 				}
-// 				strong {
-// 					font-weight: $size-font-weight-md;
-// 				}
-// 			}
-// 		}
-
-// 	}
-// }
-// .mystorage-best {
-// 	ul {
-// 		display: grid;
-// 		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-// 		height:100%;
-// 		gap:$spacing-sm;
-// 		> li {
-// 			position: relative;
-// 			display: flex;
-// 			flex-direction: column;
-// 			gap:$spacing-sm;
-// 			align-items: center;
-// 			justify-content: center;
-// 			border-radius: $radius-md;
-// 			border: $stroke-secondary;
-// 			background: $color-background-default-secondary;
-// 			padding:$spacing-lg;
-// 		}
-// 		.label-img {
-// 			width: 4rem;
-// 			img {
-// 				width: 100%;
-// 			}
-// 		}
-// 	}
-// }
-
-// .user-info-area {
-// 	display: flex;
-// 	align-items: center;
-// 	margin-top: calc(var(--body-top-spacing) * -1);
-// 	margin-bottom: var(--body-top-spacing);
-// 	padding:$spacing-lg 0;
-// 	min-height: 16rem;
-// 	background: url($url-img + "custom/class/visual.png") center/cover $color-background-brand-primary-inverse;
-// 	color: $color-font-default-primary-inverse;
-// 	overflow: hidden;
-
-// 	.wrap {
-// 		width: 100%;
-// 		display: flex;
-// 		align-items: center;
-// 		gap: $spacing-md;
-// 	}
-
-// 	.info-area {
-// 		flex: 1;
-// 		display: flex;
-// 		align-items: center;
-// 		gap: $spacing-md;
-
-// 		.profile-area {
-// 			img {
-// 				width: 8rem;
-// 				height: 8rem;
-// 			}
-// 		}
-
-// 		.txt-area {
-// 			h3 {
-// 				@include typo('tit-lg');
-// 			}
-
-// 			.info-inline-list {
-// 				li {
-// 					color: $color-font-default-secondary-inverse;
-// 				}
-// 			}
-// 		}
-// 	}
-// }
-
-// .emotion-tbl-area {
-// 	overflow-x: auto;
-// 	th,
-// 	td {
-// 		word-break: break-all;
-// 	}
-// 	.emotion-tbl {
-// 		th {
-// 			color: $color-font-default-tertiary;
-// 			background-color: $color-background-default-secondary;
-// 		} 
-// 		thead {
-// 			th {
-// 				border-bottom: none;
-// 				padding:$spacing-md $spacing-sm;
-// 				&:first-of-type {
-// 					border-radius: $radius-sm 0 0 0;
-// 				}
-// 				&:last-of-type {
-// 					border-radius: 0 $radius-sm $radius-sm 0;
-// 				}
-// 			}
-// 		}
-// 		tbody {
-// 			th,
-// 			td {
-// 				border-bottom: $stroke-secondary;
-// 				border-left: $stroke-secondary;
-// 				&:first-of-type {
-// 					border-left: none;
-// 				}
-// 			}
-// 		}
-// 		td {
-// 			height:10rem;
-// 			padding: $spacing-sm $spacing-2xsm;
-// 		}
-// 		img {
-// 			max-width:4.8rem;
-// 			width: 100%;
-// 			margin: 0 auto;
-// 		}
-// 	}
-// }
-// .emotion-check-area {
-// 	background: $color-background-default-secondary;
-// 	border-radius: $radius-lg;
-// 	border:$stroke-secondary;
-// 	overflow: hidden;
-// 	header {
-// 		display: flex;
-// 		flex-direction: column;
-// 		align-items: center;
-// 		justify-content: center;
-// 		gap:$spacing-2xsm;
-// 		padding:$spacing-md;
-// 		border-bottom: $stroke-secondary;
-// 		background: $color-background-default-primary;
-// 		strong {
-// 			@include typo('tit-label');
-// 		}
-// 		h3 {
-// 			@include typo('tit-lg');
-// 		}
-// 		p {
-// 			color: $color-font-default-secondary;
-// 		}
-// 	}
-// 	.emotion-check {
-// 		padding:$spacing-2xlg $spacing-lg;
-// 		ul {
-// 			display: grid;
-// 			grid-template-columns: repeat(5, 1fr);
-// 			gap:$spacing-xsm;
-// 			label {
-// 				display: flex;
-// 				flex-direction: column;
-// 				align-items: center;
-// 				justify-content: center;
-// 				border-radius: $radius-md;
-// 				border: $stroke-secondary;
-// 				background: $color-background-default-primary;
-// 				padding: $spacing-lg $spacing-xsm;
-// 				gap:$spacing-2xsm;
-// 				cursor: pointer;
-// 				&:has(input:checked) {
-// 					border:none;
-// 					outline: $size-stroke-sm solid $color-stroke-brand-primary;
-// 				}
-// 				img {
-// 					width: 8rem;
-// 					aspect-ratio: 1;
-// 				}
-// 				strong {
-// 					@include typo('body-lg');
-// 					color: $color-font-default-secondary;
-// 				}
-// 			}
-// 			.emotion-none {
-// 				grid-column: 1 / -1;
-				
-// 				label {
-// 					flex-direction: row;
-// 					img {
-// 						width: 2.4rem;	
-// 					}
-// 				}
-// 			}
-// 		}
-// 	}	
-// }
-// .calendar-tbl {
-// 	.emotion {
-// 		display: flex;
-// 		flex-direction: column;
-// 		align-items: center;
-// 		gap:$spacing-2xsm;
-// 		img {
-// 			width: 4.8rem;
-// 			aspect-ratio: 1;	
-// 		}
-// 		figcaption {
-// 			@include typo('body-sm');
-// 		}
-// 	}	
-// }
-// .survey-q-list {
-//     > li {
-//         padding: $spacing-lg 0;
-//         border-bottom: $stroke-secondary;
-//         display: flex;
-//         flex-direction: column;
-//         // grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-//         gap:$spacing-lg;
-//         align-items: center;
-// 		&:first-of-type {
-// 			padding-top: 0;
-// 		}
-//     }
-//     .q-area {
-//         display: flex;
-//         align-items: center;
-//         gap: $spacing-md;
-//         width: 100%;
-//     }
-//     .a-area {
-//         width: 100%;
-//     }
-//     span {
-//         color: $color-font-default-secondary;
-//         @include typo('body-md');
-//     }
-//     .q-tit {
-//         @include typo('tit-md');
-//     }
-//     .a-legend {
-//         display: flex;
-//         justify-content: space-between;
-//         margin-top: $spacing-xsm;
-//     }
-//     .a-cont {
-//         display: flex;
-//         flex-direction: row;
-//     	justify-content: space-between;
-//         gap: $spacing-xsm;
-//         word-break: keep-all;
-//         text-align: center;
-//         &:has(.a-des) {
-//             padding-top:4.8rem;
-//         }    
-//         label {
-//             display: flex;
-//             flex-direction: column;
-//             align-items: center;
-//             gap: $spacing-xsm;
-//             cursor: pointer;
-    
-//             i {
-//                 position: relative;
-//                 display: flex;
-//                 align-items: center;
-//                 justify-content: center;
-//                 width: 4.8rem;
-//                 height: 4.8rem;
-//                 border-radius: $radius-full;
-//                 background-color:  $color-icon-brand-primary-inverse;
-    
-//                 &::before {
-//                     content: " ";
-//                     display: block;
-//                     width: 0;
-//                     aspect-ratio: 1;
-//                     border-radius: $radius-full;
-//                     background-color: $color-icon-brand-primary;
-//                     transition: all 0.2s;
-//                 }
-//             }
-    
-//             input:checked ~ i {
-//                 border: $size-stroke-xsm solid $color-icon-brand-primary;
-    
-//                 &::before {
-//                     width: 60%;
-//                 }
-//             }
-//         }
-//         %level1 {
-//             i {
-//                 background-color: $color-icon-success-primary-inverse; 
-//             }
-//             input:checked ~ i {
-//                 border-color: $color-icon-success-primary;
-//                 &::before {
-//                     background-color: $color-icon-success-primary;
-//                 }
-//             }
-//         }
-//         %level2 {
-//             i {
-//                 background-color: $color-icon-info-primary-inverse;
-//             }
-//             input:checked ~ i {
-//                 border-color: $color-icon-info-primary;
-//                 &::before {
-//                     background-color: $color-icon-info-primary;
-//                 }
-//             }
-//         }
-//         %level3 {
-//             i {
-//                 background-color: $color-icon-danger-primary-inverse; 
-//             }
-//             input:checked ~ i {
-//                 border-color: $color-icon-danger-primary;
-//                 &::before {
-//                     background-color: $color-icon-danger-primary;
-//                 }
-//             }
-//         }
-// 		@for $i from 1 through 3 {
-// 			.level#{$i} {
-// 				@extend %level#{$i};
-// 			}
-// 		}
-//         //  // li가 1개일 때
-//         // label:first-child:nth-last-child(1) {
-//         //     @extend %level1;
-//         // }
-
-//         // // li가 2개일 때
-//         // label:first-child:nth-last-child(2),
-//         // label:first-child:nth-last-child(2) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(2):nth-child(2),
-//         // label:first-child:nth-last-child(2) ~ label:nth-child(2) {
-//         //     @extend %level2;
-//         // }
-
-//         // // li가 3개일 때
-//         // label:first-child:nth-last-child(3),
-//         // label:first-child:nth-last-child(3) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(3):nth-child(2),
-//         // label:first-child:nth-last-child(3) ~ label:nth-child(2) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(3):nth-child(3),
-//         // label:first-child:nth-last-child(3) ~ label:nth-child(3) {
-//         //     @extend %level3;
-//         // }
-
-//         // // li가 4개일 때
-//         // label:first-child:nth-last-child(4),
-//         // label:first-child:nth-last-child(4) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(4):nth-child(2),
-//         // label:first-child:nth-last-child(4) ~ label:nth-child(2) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(4):nth-child(3),
-//         // label:first-child:nth-last-child(4) ~ label:nth-child(3) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(4):nth-child(4),
-//         // label:first-child:nth-last-child(4) ~ label:nth-child(4) {
-//         //     @extend %level3;
-//         // }
-
-//         // // li가 5개일 때
-//         // label:first-child:nth-last-child(5),
-//         // label:first-child:nth-last-child(5) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(5):nth-child(2),
-//         // label:first-child:nth-last-child(5) ~ label:nth-child(2) {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(5):nth-child(3),
-//         // label:first-child:nth-last-child(5) ~ label:nth-child(3) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(5):nth-child(4),
-//         // label:first-child:nth-last-child(5) ~ label:nth-child(4) {
-//         //     @extend %level3;
-//         // }
-
-//         // label:first-child:nth-last-child(5):nth-child(5),
-//         // label:first-child:nth-last-child(5) ~ label:nth-child(5) {
-//         //     @extend %level3;
-//         // }
-
-//         // // li가 6개일 때
-//         // label:first-child:nth-last-child(6),
-//         // label:first-child:nth-last-child(6) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(6):nth-child(2),
-//         // label:first-child:nth-last-child(6) ~ label:nth-child(2) {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(6):nth-child(3),
-//         // label:first-child:nth-last-child(6) ~ label:nth-child(3) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(6):nth-child(4),
-//         // label:first-child:nth-last-child(6) ~ label:nth-child(4) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(6):nth-child(5),
-//         // label:first-child:nth-last-child(6) ~ label:nth-child(5) {
-//         //     @extend %level3;
-//         // }
-
-//         // label:first-child:nth-last-child(6):nth-child(6),
-//         // label:first-child:nth-last-child(6) ~ label:nth-child(6) {
-//         //     @extend %level3;
-//         // }
-
-//         // // li가 7개일 때
-//         // label:first-child:nth-last-child(7),
-//         // label:first-child:nth-last-child(7) ~ label {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(2),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(2) {
-//         //     @extend %level1;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(3),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(3) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(4),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(4) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(5),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(5) {
-//         //     @extend %level2;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(6),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(6) {
-//         //     @extend %level3;
-//         // }
-
-//         // label:first-child:nth-last-child(7):nth-child(7),
-//         // label:first-child:nth-last-child(7) ~ label:nth-child(7) {
-//         //     @extend %level3;
-//         // }
-
-//         .a-des {
-//             position: absolute;
-//             transform: translateY(calc(-100% - $spacing-xsm));
-//             display: flex;
-//             flex-direction: column;
-//             gap:$spacing-2xsm;
-//             @include typo('body-xsm');
-//             max-width: 24rem;
-//             &:after {
-//                 content: " ";
-//                 display: block;
-//                 width: 0;
-//                 height: 0;
-//                 border-style: solid;
-//                 border-right: .6rem solid transparent;
-//                 border-left: .6rem solid transparent;
-//                 border-top: .6rem solid $color-stroke-default-secondary;
-//                 border-bottom: 0;
-//                 margin:0 auto;
-//             }
-//         }
-//     }
-// }
-
-// //초대
-// .invite-area {
-// 	display: flex;
-// 	flex-direction: column;
-// 	gap:$spacing-xlg;
-// 	min-height: 100%;
-// 	justify-content: center;
-// 	padding-top:$spacing-xlg;
-// 	padding-bottom:$spacing-xlg;
-// 	> * {
-// 		margin:0;
-// 	}
-// 	.img-area {
-// 		img {
-// 			display: block;
-// 			max-width: 100%;
-// 			margin:0 auto;
-// 		}
-// 	}
-// 	.txt-area {
-// 		text-align: center;
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap:$spacing-2xsm;
-// 		align-items: center;
-// 		justify-content: center;
-// 		> * {
-// 			margin:0;
-// 		}
-// 	}
-// }
-
-// //ai 맞춤학습
-// .ai-gate-list {
-// 	display: grid;
-// 	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-// 	gap:$spacing-sm;
-// 	a {
-// 		display: block;
-// 		width: 100%;
-// 		height: 100%;
-// 		border:$stroke-secondary;
-// 		padding:$spacing-xlg $spacing-lg;
-// 		border-radius: $radius-md;
-// 		&:hover {
-// 			border-top-width: $size-stroke-md;
-// 			border-top-color: $color-stroke-brand-primary;
-// 		}
-// 	}
-// 	.txt-area {
-// 		position: relative;
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap:$spacing-2xsm;
-// 		h3 {
-// 			@include typo('tit-lg');
-// 		}
-// 		p {
-// 			color: $color-font-default-secondary;
-// 		}
-// 		.btn {
-// 			position: absolute;
-// 			right:0;
-// 			top:1.4rem;
-// 		}
-// 	}
-// 	.img-area {
-// 		margin-top:$spacing-md;
-// 		border-radius: $radius-md;
-// 		overflow: hidden;
-// 		background: $color-background-brand-primary;
-// 		img {
-// 			display: block;
-// 			max-width: 100%;
-// 			margin: 0 auto;
-// 		}
-// 	}
-// 	li:nth-child(2n) {
-// 		a:hover {
-// 			border-top-color: $color-stroke-brand-secondary;
-// 		}
-// 		.img-area{
-// 			background: $color-background-brand-secondary;
-// 		}
-// 	}
-// }
-
-// .ai-result-tag {
-// 	.txt-area {
-// 		display: grid;
-// 		gap:2.4rem;
-// 		grid-template-columns: 12rem 1fr;
-// 		align-items: center;
-// 	}
-// 	strong {
-// 		display: flex;
-// 		align-items: center;
-// 		justify-content: center;
-// 		width: 12rem;
-// 		aspect-ratio: 1;
-// 		@include typo('tit-lg');
-// 		border-radius: $radius-md;
-// 		padding:$spacing-md;
-// 		text-align: center;
-// 		&.success {
-// 			background-color: $color-background-success-primary;
-// 			color:$color-font-success-primary;
-// 		}
-// 		&.warning {
-// 			background-color: $color-background-warning-primary;
-// 			color:$color-font-warning-primary;
-// 		}
-// 	}
-// }
-// .ai-result-info {
-// 	padding:$spacing-xlg 32rem $spacing-xlg $spacing-xlg;
-// 	border-radius: $radius-md;
-// 	background: url($url-img + 'custom/sub/img_ai_result_info_bg.png') right no-repeat;
-// 	background-color:$color-background-brand-primary;
-// 	background-size: contain;
-// 	.txt-area {
-// 		display:grid;
-// 		gap:$spacing-md;
-// 	}
-// 	.txt {
-// 		@include typo('body-lg');
-// 		color: $color-font-brand-primary;
-// 	}
-// 	.border-box {
-// 		border: none;
-// 	}
-// 	.bullet { 
-// 		background-color: $color-background-default-primary
-// 		;
-// 	}
-// }
-// .ai-result-tutor {
-// 	position: relative;
-// 	display: grid;
-// 	grid-template-columns: 16rem 1fr;
-// 	gap:$spacing-sm;
-// 	align-items: center;
-// 	&::before {
-// 		content: " ";
-// 		position: absolute;
-// 		top:-1.6rem;
-// 		right:4rem;
-// 		width: 10rem;
-// 		aspect-ratio: 100/92;
-// 		background: url($url-img + 'custom/sub/img_ai_info_obj.svg');
-// 		background-size: contain;
-// 		z-index:1;
-// 	}
-// 	.img-area {
-// 		max-width: 100%;
-// 	}
-// 	.txt-area {
-// 		position: relative;
-// 		display: flex;
-// 		padding: $spacing-lg 16rem $spacing-lg $spacing-lg;
-// 		flex-direction: column;
-// 		align-items: flex-start;
-// 		gap: $spacing-xsm;
-// 		border-radius: $radius-lg;
-// 		background: $color-background-default-secondary;
-// 		min-height: 7.6rem;
-// 		&::before {
-// 			content: " ";
-// 			position: absolute;
-// 			left:0;
-// 			top:50%;
-// 			transform: translate(-50%, -100%);
-// 			width: 0;
-// 			height: 0;
-// 			border-style: solid;
-// 			border-top: .6rem solid transparent;
-// 			border-bottom: .6rem solid transparent;
-// 			border-right: 1.6rem solid $color-background-default-secondary;
-// 			border-left: 0;
-// 		}
-// 		h3 {
-// 			@include typo('tit-sm');
-// 			color: $color-font-brand-primary;
-// 		}
-// 	}
-// }
-// .ai-result-sel {
-// 	header {
-// 		border-radius: $radius-md;
-// 		display: flex;
-// 		min-height: 16rem;
-// 		padding: $spacing-xlg $spacing-2xlg;
-// 		flex-direction: column;
-// 		justify-content: center;
-// 		align-items: center;
-// 		text-align: center;
-// 		gap: $spacing-xsm;
-// 		background: linear-gradient(90deg, $color-primary5 0%, $color-accent5 100%);
-// 		animation: ai-result-sel 6s ease infinite alternate-reverse;
-// 		@keyframes ai-result-sel {
-// 			0% {
-// 				filter: hue-rotate(0deg);
-// 			}
-// 			100% {
-// 				filter: hue-rotate(360deg);
-// 			}
-// 		}
-// 		h3 {
-// 			@include typo('tit-lg');
-// 		}
-// 		p {
-// 			color: $color-font-default-secondary;
-// 		}
-// 	}
-// 	.fnc {
-// 		position: relative;
-// 		display: flex;
-// 		justify-content: center;
-// 		align-items: center;
-// 		gap:$spacing-xsm;
-// 		padding-top:8rem;
-// 		%bar-ai-result-sel {
-// 			position: absolute;
-// 			left:50%;
-// 			display: block;
-// 			width: $size-stroke-sm;
-// 			height: 4rem;
-// 			background: $color-stroke-default-tertiary;
-// 		}
-// 		&::before {
-// 			content: "";
-// 			position: absolute;
-// 			left:50%;
-// 			display: block;
-// 			width: $size-stroke-sm;
-// 			height: 4rem;
-// 			background: $color-stroke-default-tertiary;
-// 			top:0;
-// 			transform: translateX(-50%);
-// 			@extend %bar-ai-result-sel;
-// 		}
-// 		button {
-// 			position: relative;
-// 			display: flex;
-// 			width: 36rem;
-// 			height: 8rem;
-// 			padding:0 $spacing-lg;
-// 			justify-content: center;
-// 			align-items: center;
-// 			gap: $spacing-xsm;
-// 			border-radius: 4rem;
-// 			border: $size-stroke-sm solid $color-stroke-brand-primary;
-// 			background: linear-gradient(100deg, $color-primary50 32%, $color-primary40 68%);
-// 			color: $color-font-default-primary-inverse;
-// 			@include typo('label-lg', 'em');
-// 			transition: all .3s;
-// 			&:hover {
-// 				background: linear-gradient(103deg, $color-primary50 32%, $color-primary50 68%);
-// 			}
-// 			&.seconadry {
-// 				border-color:$color-stroke-brand-secondary;
-// 				background: linear-gradient(103deg, $color-secondary50 32%, $color-secondary40 68%);
-// 				&:hover {
-// 					background: linear-gradient(103deg, $color-secondary50 32%, $color-secondary50 68%);
-// 				}
-// 			}
-// 			&::before {
-// 				content: "";
-// 				top:-$size-stroke-sm;
-// 				transform: translate(-50%, -100%);
-// 				@extend %bar-ai-result-sel;
-// 			}
-// 			&::after {
-// 				content: "";
-// 				position: absolute;
-// 				top:calc(-4rem - $size-stroke-sm);
-// 				left:50%;
-// 				height: $size-stroke-sm;
-// 				width:calc(50% + ($spacing-xsm/2));
-// 				background: $color-stroke-default-tertiary;
-// 			}
-// 			&:nth-of-type(2) {
-// 				&::after {
-// 					left: calc(-1 * $spacing-xsm / 2);
-// 				}			
-// 			}
-// 		}
-// 	}
-// }
-// .book-list {
-// 	display: grid;
-// 	grid-template-columns: repeat(5, 1fr);
-// 	gap: $spacing-xlg $spacing-lg;
-
-// 	li {
-// 		display: flex;
-// 		flex-direction: column;
-// 		gap: $spacing-md;
-// 		position: relative;
-
-// 		.item-checkradio {
-// 			position: absolute;
-// 			top: $spacing-md;
-// 			left: $spacing-md;
-// 		}
-
-// 		.img-area {
-// 			figure {
-// 				border-radius: $radius-sm;
-// 				border: 0.1rem solid var(--color-stroke-default-tertiary);
-// 				overflow: hidden;
-// 				width: 100%;
-// 				aspect-ratio: 7 / 9;
-
-// 				img {
-// 					display: block;
-// 					object-fit: cover;
-// 					width: 100%;
-// 					height: 100%;
-// 				}
-// 			}
-// 		}
-
-// 		.txt-area {
-// 			display: flex;
-// 			flex-direction: column;
-// 			align-items: center;
-// 			gap: $spacing-2xsm;
-
-// 			strong {
-// 				@include typo('tit-sm');
-// 			}
-// 		}
-// 	}
-
-// 	&.col2 {
-// 		grid-template-columns: repeat(2, 1fr);
-// 	}
-
-// 	&.col3 {
-// 		grid-template-columns: repeat(3, 1fr);
-// 	}
-// }
-
-// .bookmark-list {
-// 	display: grid;
-// 	grid-template-columns: repeat(4, 1fr);
-// 	gap: $spacing-2xsm;
-
-// 	>li {
-// 		position: relative;
-// 		min-height: 10rem;
-// 		figure {
-// 			display: flex;
-// 			padding: $spacing-md $spacing-xsm;
-// 			flex-direction: column;
-// 			align-items: center;
-// 			gap: $spacing-xsm;
-// 			border-radius: $radius-md;
-
-// 			img {
-// 				display: block;
-// 				width: 3.2rem;
-// 				height: 3.2rem;
-// 			}
-
-// 			figcaption {
-// 				text-align: center;
-// 				color: $color-font-default-secondary;
-// 				word-break: keep-all;
-// 				@include ellipsis(2);
-// 				@include typo('label-sm');
-// 			}
-
-// 			&:hover {
-// 				background-color: $color-background-default-secondary;
-// 			}
-// 		}
-
-// 		.etc-fnc-area {
-// 			position: absolute;
-// 			top: 0;
-// 			right: 0;
-// 			border-radius: 20rem;
-
-// 			&:hover {
-// 				border: $stroke-secondary;
-// 				background-color: $color-background-default-primary;
-// 			}
-// 		}
-// 	}
-// }
-
-// .bookmark-txt-list {
-// 	@include typo('body-sm');
-// 	color: $color-font-default-secondary;
-// 	display: grid;
-// 	grid-template-columns: repeat(2, 1fr);
-// 	border-radius: $radius-sm;
-// 	border: $stroke-secondary;
-// 	overflow: hidden;
-
-// 	li {
-// 		border-bottom: $stroke-secondary;
-
-// 		a {
-// 			display: block;
-// 			text-align: center;
-// 			padding: $spacing-xsm;
-
-// 			&:hover {
-// 				background-color: $color-background-default-secondary;
-// 			}
-// 		}
-
-// 		&:nth-child(odd) {
-// 			border-right: $stroke-secondary;
-// 		}
-
-// 		&:last-child {
-// 			border-right: none;
-// 			border-bottom: none;
-// 		}
-
-// 		&:last-child:nth-child(odd) {
-// 			grid-column: 1 / -1;
-// 		}
-// 	}
-// }
-// .btn-item-add {
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//     align-items: center;
-//     gap: $spacing-sm;
-//     border: $size-stroke-xsm dashed $color-stroke-default-tertiary;
-//     border-radius: $radius-md;
-//     text-align: center;
-//     color: $color-font-default-tertiary;
-//     width: 100%;
-//     height: 100%;
-// }
-
-// @include responsive(tabletSm) {
-// 	.row {
-// 		grid-template-columns:  1fr;
-// 		gap: $spacing-section-sm 0;
-// 	}
-// }
-
-// @include responsive(mobile) {
-// 	.reference-list {
-// 		grid-template-columns: initial;
-
-// 		.img-area {
-// 			max-width: 40%;
-// 			border-radius: $radius-xsm;
-// 		}
-// 	}
-
-// 	.mark-area {
-// 		flex-direction: column;
-
-// 		.sticky-cont {
-// 			width: 100%;
-// 		}
-
-// 		.sticky {
-// 			height: 48rem;
-// 		}
-// 	}
-
-// 	.user-info-area {
-// 		.wrap {
-// 			flex-direction: column;
-// 		}
-// 	}
-
-// 	.emotion-check-area {
-// 		.emotion-check {
-// 			padding: $spacing-md;
-
-// 			ul {
-// 				grid-template-columns: repeat(2, 1fr);
-// 				gap: $spacing-2xsm;
-
-// 				label {
-// 					padding: $spacing-sm $spacing-xsm;
-// 					border-radius: $radius-sm;
-
-// 					img {
-// 						width: 4.8rem;
-// 					}
-// 				}
-
-// 				.emotion-none {
-// 					label img {
-// 						width: 2.4rem;
-// 					}
-// 				}
-// 			}
-// 		}
-// 	}
-
-// 	.ai-gate-list {
-// 		grid-template-columns: initial;
-
-// 		.btn.ico-arrow-right {
-// 			display: none;
-// 		}
-// 	}
-
-// 	.ai-result-tag {
-// 		.txt-area {
-// 			grid-template-columns: initial;
-// 		}
-
-// 		strong {
-// 			width: 100%;
-// 			aspect-ratio: initial;
-// 		}
-// 	}
-
-// 	.ai-result-info {
-// 		padding: $spacing-lg;
-// 		background-image: none;
-// 	}
-
-// 	.ai-result-tutor {
-// 		grid-template-columns: initial;
-
-// 		&::before {
-// 			display: none;
-// 		}
-
-// 		.txt-area {
-// 			padding: $spacing-md;
-// 		}
-// 	}
-
-// 	.ai-result-sel {
-// 		.fnc {
-// 			padding-top: $spacing-lg;
-// 			gap: $spacing-2xsm;
-// 			flex-direction: column;
-
-// 			button {
-// 				width: 100%;
-// 				height: 6.4rem;
-
-// 				&::after,
-// 				&::before {
-// 					content: none;
-// 				}
-// 			}
-// 		}
-// 	}
-
-// 	.border-list>li {
-// 		padding: $spacing-sm $spacing-md;
-// 	}
-
-// 	.calendar-tbl .emotion img {
-// 		width: 3.2rem;
-// 	}
-// }

151b2d3

38949eb

resources/front/site/SITE_00000/css/custom/page/_sub.scss

--- resources/front/site/SITE_00000/css/custom/page/_sub.scss

+++ resources/front/site/SITE_00000/css/custom/page/_sub.scss


 		border: 1px solid $color-stroke-default-quaternary;
 		padding: $spacing-sm;
 		border-radius: $radius-sm;
+		min-width: 0;
 		&:hover {
 			font-weight: $size-font-weight-xlg;
 			color: $color-font-default-secondary

151b2d3

38949eb

resources/front/site/SITE_00000/css/style.css

--- resources/front/site/SITE_00000/css/style.css

+++ resources/front/site/SITE_00000/css/style.css

...	...	@@ -10045,6 +10045,74 @@
10045	10045	filter: grayscale(1);
10046	10046	}
10047	10047
	10048	+.box-list {
	10049	+ display: grid;
	10050	+ grid-template-columns: repeat(3, 1fr);
	10051	+ gap: 4rem;
	10052	+}
	10053	+.box-list > li:has(.lnk-full, .audio-box > button),
	10054	+.box-list > li > a:not(.lnk-full) {
	10055	+ display: -webkit-box;
	10056	+ display: -ms-flexbox;
	10057	+ display: flex;
	10058	+ padding: 2.4rem;
	10059	+ -webkit-box-orient: vertical;
	10060	+ -webkit-box-direction: normal;
	10061	+ -ms-flex-direction: column;
	10062	+ flex-direction: column;
	10063	+ gap: 1.6rem;
	10064	+ height: 100%;
	10065	+ border-radius: 3.2rem;
	10066	+ -webkit-box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
	10067	+ box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
	10068	+ -webkit-transform: scale(1);
	10069	+ transform: scale(1);
	10070	+ border: 0.1rem solid transparent;
	10071	+ -webkit-transition: -webkit-transform 0.2s;
	10072	+ transition: -webkit-transform 0.2s;
	10073	+ transition: transform 0.2s;
	10074	+ transition: transform 0.2s, -webkit-transform 0.2s;
	10075	+}
	10076	+.box-list > li:has(.lnk-full, .audio-box > button):hover,
	10077	+.box-list > li > a:not(.lnk-full):hover {
	10078	+ -webkit-box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
	10079	+ box-shadow: 0rem 0.4rem 1.6rem rgba(17, 17, 17, 0.1);
	10080	+ -webkit-transform: scale(1.05);
	10081	+ transform: scale(1.05);
	10082	+ border: 0.1rem solid var(--color-primary50);
	10083	+}
	10084	+.box-list > li:has(.lnk-full, .audio-box > button):hover h3,
	10085	+.box-list > li > a:not(.lnk-full):hover h3 {
	10086	+ color: var(--color-primary50);
	10087	+}
	10088	+.box-list h3 {
	10089	+ font-size: var(--font-tit-md);
	10090	+ font-weight: var(--size-font-weight-xlg);
	10091	+ line-height: var(--size-font-lineheight-sm);
	10092	+ display: -webkit-box;
	10093	+ overflow: hidden;
	10094	+ line-height: 1.4;
	10095	+ width: 100%;
	10096	+ text-overflow: ellipsis;
	10097	+ -webkit-box-orient: vertical;
	10098	+ -webkit-line-clamp: 2;
	10099	+}
	10100	+.box-list .txt-area {
	10101	+ display: -webkit-box;
	10102	+ overflow: hidden;
	10103	+ line-height: 1.4;
	10104	+ width: 100%;
	10105	+ text-overflow: ellipsis;
	10106	+ -webkit-box-orient: vertical;
	10107	+ -webkit-line-clamp: 3;
	10108	+ max-height: 4.2em;
	10109	+}
	10110	+
	10111	+@media (max-width: 1023px) {
	10112	+ .box-list {
	10113	+ grid-template-columns: repeat(2, 1fr);
	10114	+ }
	10115	+}
10048	10116	@media (max-width: 767px) {
10049	10117	.checkradio-custom-row-area:has(.item-type-checkradio) {
10050	10118	display: none;
...	...	@@ -10278,6 +10346,15 @@
10278	10346	-webkit-box-pack: start;
10279	10347	-ms-flex-pack: start;
10280	10348	justify-content: flex-start;
	10349	+ }
	10350	+ .box-list {
	10351	+ grid-template-columns: initial;
	10352	+ gap: 0.8rem;
	10353	+ }
	10354	+ .box-list a {
	10355	+ padding: 2.4rem 1.6rem;
	10356	+ gap: 0.8rem;
	10357	+ border-radius: 2.4rem;
10281	10358	}
10282	10359	}
10283	10360	:root {
...	...	@@ -27309,6 +27386,7 @@
27309	27386	border: 1px solid var(--color-stroke-default-quaternary);
27310	27387	padding: 1.2rem;
27311	27388	border-radius: 1.2rem;
	27389	+ min-width: 0;
27312	27390	}
27313	27391	.reference-list li:hover {
27314	27392	font-weight: var(--size-font-weight-xlg);

151b2d3

38949eb

resources/front/site/SITE_00000/css/style.css.map

--- resources/front/site/SITE_00000/css/style.css.map

+++ resources/front/site/SITE_00000/css/style.css.map

This diff is too big to display.

151b2d3

38949eb

resources/front/site/SITE_00000/css/style.min.css

--- resources/front/site/SITE_00000/css/style.min.css

+++ resources/front/site/SITE_00000/css/style.min.css

This diff is too big to display.

151b2d3

38949eb

resources/front/site/SITE_00000/css/style.min.css.map

--- resources/front/site/SITE_00000/css/style.min.css.map

+++ resources/front/site/SITE_00000/css/style.min.css.map

This diff is too big to display.

Add a comment

Open 0
Closed 0

List

...	...	@@ -1624,6 +1624,7 @@
1624	1624	border: 1px solid $color-stroke-default-quaternary;
1625	1625	padding: $spacing-sm;
1626	1626	border-radius: $radius-sm;
	1627	+ min-width: 0;
1627	1628	&:hover {
1628	1629	font-weight: $size-font-weight-xlg;
1629	1630	color: $color-font-default-secondary

...	...	@@ -45,28 +45,21 @@
45	45	<h1>그룹설정</h1>
46	46	</div>
47	47	<div class="pop-body">
48		- <fieldset>
49		- <legend>설정 설정</legend>
50		- <div class="">
51		- <div class="">
52		- <input type="text" placeholder="1 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
	48	+ <ul class="bullet-none">
	49	+ <li>
	50	+ <div class="flex-box">
	51	+ <input type="text" placeholder="1 그룹" title="그룹명을 입력하세요." class="flex1">
53	52	<button type="button" class="btn sm circle danger ico-delete">삭제</button>
54	53	</div>
55		- <div class="margin-top-sm">
56		- <input type="text" placeholder="2 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
	54	+ </li>
	55	+ <li>
	56	+ <div class="flex-box">
	57	+ <input type="text" placeholder="1 그룹" title="그룹명을 입력하세요." class="flex1">
57	58	<button type="button" class="btn sm circle danger ico-delete">삭제</button>
58	59	</div>
59		- <div class="margin-top-sm">
60		- <input type="text" placeholder="3 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
61		- <button type="button" class="btn sm circle danger ico-delete">삭제</button>
62		- </div>
63		- <div class="margin-top-sm">
64		- <input type="text" placeholder="4 그룹" title="그룹 이름을 입력하세요." class="percent-width8 margin-right-md">
65		- <button type="button" class="btn sm circle danger ico-delete">삭제</button>
66		- </div>
67		- </div>
68		- <button type="button" class="btn primary ico-plus margin-top-md">그룹 추가</button>
69		- </fieldset>
	60	+ </li>
	61	+ </ul>
	62	+ <button type="button" class="btn primary ico-plus margin-top-md">그룹 추가</button>
70	63	</div>
71	64	<div class="pop-footer">
72	65	<div class="pop-btn-cont">

Delete comment