@charset "utf-8";
@import url("font.css");
@layer basic, common, component, object, layout, contents, responsive, override;

/* 작성자 황희진(grigo0704@naver.com) / 최종작성일 2025-10-15 / 버전 0.2 */



/* override */
.ui-widget { font: var(--font-weight-normal) var(--font-size-11px)/1.6 var(--base-font-family); background: var(--color-wh); }

.ui-widget-content { color: var(--color-bk); }

.ui-widget.ui-widget-content { border: 1px solid var(--component-bd-color); border-radius: var(--component-edge); padding: 8px; box-shadow: 0 2px 4px 0 var(--color-bk-tint20); }

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover { color: var(--color-bk); background: var(--color-primary); }
.ui-menu .ui-menu-item-wrapper { border: 0; border-radius: var(--component-edge); padding: 4px 8px; }
	

@layer responsive {

	/* 태블릿 */
	@media screen and (max-width: 1280px) {
		
		:root { --base-font-size: 20px; }
		
		.onlyPC { display: none !important; }

		.list.card {
					cursor : pointer;
			&:not(.scroll) > :is(ul, ol) > li { width: calc((100% - (var(--vw-16px) * 2)) / 3); }
			&.scroll {
				width: calc(100% + (var(--base-inner-padding) * 2));
				& > :is(ul, ol) {
					flex-wrap: nowrap; overflow: auto hidden; padding: var(--base-inner-padding);
					& > li { min-width: 280px; }
				}
				& > .btn { 
					&.prev { left: 8px; }
					&.next { right: 8px; }
				}
			}
		}
		
		main.home {
			& .section {
				&.board {
					& .item { 
						& .badge { order: 1; }
						& .title { order: 4; width: 100%; }
						& .date { order: 2; }
						& .state { order: 3; margin-left: auto; }
					}
				}
			}
		}
		main.work { 
			& section.section {

				&.minihome {
					& .article {
						&.view {
							/*
							& .head { 
								position: fixed; top: 0; left: -280px; bottom: 0; z-index: 500; height: 100%; background-color: var(--color-wh);
								& .headline { display: flex; }
								& .item { height: 100%; border-radius: 0; }
								&.on { left: 0; box-shadow: var(--box-shadow-max); animation: slip 0.3s ease forwards; }
							}
							& .body { padding-left: 0; }
							*/
						}
						&.certify { 
							& .list.card.scroll { transform: translateX(calc((var(--base-inner-padding) * -1))); }
						}
					}
				}
			}
		}
		
		main.my { 
			& section.section .heading { border-bottom: 1px solid var(--color-secondary-tint05); }
		}
		
		main.etc {
			& > section.section {
				&.intro { 
					& .content {
						&.compose .list.card.scroll { transform: translateX(calc(var(--base-inner-padding) * -1)); }
						&.logos .list.card.scroll {
							transform: translateX(calc(var(--base-inner-padding) * -1));
							& > ul { padding: 0 var(--base-inner-padding); }
						}
					}
				}
			}
		}
		
		/* layout */
		header.header {
			top: 0;
			&::before { display: none; }
			& > .inner > .navs { display: none; }
			
			& .gnb { display: none; }
			&.sitemap { 
				& .gnb { display: flex; }
			}
		}
		article.article {
			&.submenu { 
				flex-direction: column;
				& .head {
					width: 100%;
					& > .title { font-size: var(--font-size-20px); }
				}
			}
			&.view {
				& .body { 
					& .list.card.scroll { 
						transform: translateX(calc(var(--base-inner-padding) * -1)); 
						& > ul { padding: 0 var(--base-inner-padding); }
					}
				}
			}
/*			&.product {
				padding-bottom: calc(80px + clamp(16px, var(--vw-24px), 24px) + var(--vw-40px));
				& .head { width: calc(100% - 320px - var(--base-inner-padding)); }
				& .body { width: 320px; padding-bottom: 0; }
				& .foot { left: var(--vw-40px); right: calc(320px + var(--base-inner-padding) + var(--vw-40px)); width: auto; }
			}*/
		}
		section.section { 
			& .lnb { display: none; }
			& .heading { 
				& .btns > .btn.notxt.menu { display: inline-flex; }
			}
		}
		footer.footer { --width-help : 400px; }
		
	}/*1280px*/
	
	@media screen and (max-width: 960px) {
		
		.logo { 
			&.bi::before { height: 40px; }
			&.ci::before { height: 32px; }
		}
		
		.list.card:not(.scroll) > :is(ul, ol) > li { width: calc((100% - (var(--vw-16px) * 1)) / 2); }
		
		.field > dl > dd.half { width: calc(100% - var(--width-dt)); }
		
		main.work {
			.filter {
				position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; display: none; overflow: auto; height: 100%; border: 0; border-radius: 0; background-color: var(--color-wh); margin-bottom: 0;
				& > .headline { display: flex; }
				& > .field { align-items: flex-start; }
				&.on { display: flex; }
			}
		}
		
		main.etc {
			& > section.section {
				&.intro {
					& .content { 
						&.slogan { 
							& .items {
								flex-wrap: wrap;
								& > .item { 
									flex: none; width: 50%; border-top: 1px solid var(--color-primary-tint20);
									&:nth-of-type(2n + 1) { border-left: 0; }
									&:first-of-type { 
										border-top: 0; 
										& + .item { border-top: 0; }
									}
								}
							}
						}
						&.future {
							background-image: linear-gradient(#EBEBD3 50%, #BFD6CB 50%);
							& img { max-width: 100%; }
							& .btn.arrow::before { transform: rotate(0deg); }
							& > .inner { flex-direction: column; justify-content: center; }
						}
					}
				}
			}
		}
		
		/* layout */
		header.header { --size-btm : 72px; }
		main.main { 
			& > section.section > .heading {
				& > .inner {
					&::before { display: none; }
				}
			}
		}
		section.section {
			& .fixed { 
				position: fixed; top: auto; bottom: 0; left: 0; right: 0; padding: 0; 
				& .item { border-radius: var(--box-edge-min) var(--box-edge-min) 0 0; border-bottom: 0; }
			}
		}
		article.article {
			& .head > .btn.tune { display: inline-flex; }
			&.submenu { 
				& .head > .title { font-size: var(--font-size-18px); }
				& .menulist > li { width: calc(100% / 4); }
			}
                        &.view {
                                & .body > .company {
                                        flex-wrap: wrap;
                                        & .btns { width: 100%; justify-content: flex-end; }
                                }
                        }			
/*			&.product {
				flex-direction: column; padding-bottom: var(--vw-40px);
				& .head { order: 1; width: 100%; }
				& .body { order: 3; width: 100%; }
				& .foot { order: 2; position: static; width: 100%; }
			}*/
		}
		footer.footer { 
			--width-help : 360px; padding-bottom: clamp(80px, var(--vw-160px), 160px);
			& .helpdesk { order: 3; }
			& .foodpolis { order: 4; width: 100%; }
		}
		
	}/*960px*/
	
	@media screen and (max-width: 720px) {
		/* contents */
		main.home {
			& .section {
				&.board {
					& .inner { flex-direction: column; }
					& article.article { width: 100%; padding: clamp(16px, var(--vw-24px), 24px); }
				}
			}
		}
		
		/* layout */
		header.header { --size-btm : 64px; }
		section.section .lnb { top: 64px; }
		main.main { 
			& > section.section > .heading {
				& > .inner {
					&::after { display: none; }
				}
			}
		}
		article.article {
			&.submenu { 
				& .head > .title { font-size: var(--font-size-16px); }
				& .menulist > li { width: calc(100% / 3); }
			}
		}
		footer.footer { 
			--width-help : 100%;
			& .navs { width: 100%; }
		}

        /* grid 관련 */
        :root {
            --gridHeight : 40px;
        }

        .grid table,
        .grid thead,
        .grid tbody,
        .grid th,
        .grid td,
        .grid tr {
            display: block;
        }

        .grid {
            & > table {
                & > tbody > tr > td {
                    height: auto;
                }
            }
        }

        .grid tr:first-child {
            margin-top: 1rem;
        }

        /* 각 행을 카드로 표시 */
        .grid tr {
            border: 1px solid #ddd;
            margin-bottom: 1rem;
            border-radius: 10px;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        .grid thead {
            display: none;
        }

        .grid td {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #eee;
            align-items: center;
        }

        .grid tr:not(:has(th), .empty) td::before {
            content: attr(data-label);
            font-weight: bold;
            color: #333;
            min-width: 100px;
            border-right: 0.1px solid #dbd4d4;
            min-height: var(--gridHeight);

            display: flex;
            align-items: center;
        }

        .grid .empty{
            min-height: var(--gridHeight);
        }

        .grid .input {
            width: 100%;
            padding: 3px 5px;
        }

    }/*720px*/
	
	/* 모바일 */
	@media screen and (max-width: 640px) {
		
		:root { --base-font-size: 18px; }
		
		.logo { 
			&.bi::before { height: 32px; }
			&.ci::before { height: 32px; }
		}
		
		.item { 
			& .image {
				&.thumb { width: 100px; }
			}
		}
		
		.list:not(.scroll,.two) {
            & .item {
                    &:has(.wrap + .state) {
                            & > .state { width: 100%; }
                            &:has(.image.thumb) {
                                    align-items: flex-start;
                                    & > .state { padding-left: calc(100px + 16px); }
                            }
                    }
                    &:has(.wrap + .sumtxt.talk + .state) {
                            & > .state { width: auto; }
                            & > .sumtxt.talk { width: auto; }
                            & > .wrap { width: 100%; }
                    }
            }			
			& > :is(ul, ol) { 
				display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%;
				& > li { 
					&:has( > .btn.bookmark) {
						& > .item { 
							padding-right: calc(var(--component-size) + clamp(8px, var(--vw-16px), 16px)); 
							&:has(.image.thumb) {
								& > .state { width: 100%; justify-content: flex-end; }
								& .image.thumb { align-self: flex-start; }
								& .image.thumb ~ .wrap { width: calc(100% - 100px - 32px); }
							}
						}
					}
				}
			}
			&.card:not(.two) > :is(ul, ol) > li { width: 100%; }
		}
		
		.field > dl {
			border: 1px solid var(--color-secondary-tint10);
			& > dt { 
				width: 100%; height: auto; 
				&:first-child { border-top: 0; }
			}
			& > dd,
			& > dd.half { width: 100%; border-top: 0; }
		}
		
		.filter > .field { justify-content: flex-start; }
       .product {
                flex-direction: column;
                & .imageview { width: 100%; height: auto; }
                & .imagelist {
                        flex-direction: row; width: auto; height: 64px;
                        & > a { width: auto; height: 100%; }
                }
        }
        		
		/* contents */
		main.home {
			& .section {
				&.cscenter {
					& .content { flex-direction: column; }
					& article.helpdesk { border: 0; }
				}
			}
		}
		main.my {
			& section.section {
				& .article {
					&.count {
						& .btns { 
							gap: 0;
							& > .btn { 
								flex: none; width: calc(100% / 3);
								&:nth-of-type(3) ~ .btn { border-top: 1px solid var(--color-secondary-tint05);  }
							}
						}
					}
					&.half { width: 100%; }
				}
			}
		}
		
		main.etc {
			& > section.section {
				&.intro {
					& .content { 
						&.video .headline .title { width: 120px; height: 120px; }
						&.logos .headline > .title br { display: block; }
					}
				}
			}
		}
		
		/* layout */
		header.header { 
			--size-btm : 56px; 
			& .inner > .btns  > .finder .input { width: 180px; }
		}
		section.section {
			& .heading {
				& .item { 
					position: relative; flex-wrap: wrap; 
					& .btns { position: absolute; top: 0; right: 0; }
				}
			}
		}
		main.main { 
			& > section.section > .heading {
				&::after { display: none; }
			}
		}
		article.article {
			&.submenu {
				& .head > .title { font-size: var(--font-size-14px); }
				& .menulist > li { width: calc(100% / 2); }
			}
           &.view {
                    & .body > .company {
                            flex-direction: column; flex-wrap: nowrap;
                            & .item { width: 100%; }
                            & .note { width: 100%; }
                    }
            }			
		}
		footer.footer {
			--width-select : 100%;
			& .helpdesk { width: 100%; }
			& .foodpolis { width: 100%; }
		}
	}/*640px*/
	@media screen and (max-width: 480px) {
		
		fieldset.set {
			&.email {
				width: 100%;
				& > .select { order: 3; }
				& > .input { 
					order: 0; 
					& ~ .input { order: 4; flex: none; width: 100%; }
				}
			}
		}
		
		.list {
			& .item { 
				&:has(.image.thumb) {
					& .text {
						gap: 4px;
						& > span { 
							width: 100%; 
							&::after { display: none; }
						}
					}
				}
			}
		}
		
		.filter > .field {
			& > .set {
				&.keyword { width: 100%; }
				&.period { 
					width: 100%; 
					& .input { width: calc(50% - 8px); }
					&:has(.select) {
						position: relative; padding-top: calc(var(--component-size) + 4px);
						& .select { order: 0; position: absolute; top: 0; left: 0; }
					}
				}
			}
		}
		
		.popup {
			&.banner > article.article .foot { left: 0; transform: none; bottom: 0; max-width: 100%; border-radius: 0; box-shadow: none; }
			&.chatbot { 
				top: 0; left: 0; bottom: 0; right: 0; 
				& > article.article.dialogue { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
			}
		}
		
		
		
	}/*480px*/
	
	/* 기타 */
	@media (pointer:coarse) {

		@layer basic {
			
			::-webkit-scrollbar { width: 0; height: 0; }
			
		}

	}

}/* @responsive */

@layer contents {
	
	/* 홈 */
	main.home {
		& .section {
			padding: var(--base-inner-padding) 0;
			& .heading { 
				flex-direction: column; gap: 0; padding: var(--base-inner-padding) 0; 
				& > .title { font-weight: var(--font-weight-bolder); text-align: center; }
				& > p { color: var(--color-bk-tint60); font-size: var(--font-size-14px); }
			}
			& .content { display: flex; flex-direction: column; align-items: center; }
			& .list { padding: 0; }
			& .btn.plus {
				&::before { transition: all 0.2s; }
				&:hover::before { transform: scale(1.4); }
			}
			
			/* 비주얼 */
			&.visual { 
				background: url("../images/icon/bg_visual.png") center 50%/cover no-repeat;
				& > .inner { display: flex; justify-content: space-between; align-items: stretch; height: 100%; }
				& .slider { 
					flex: auto; align-items: flex-start; 
					& .message {
						flex: auto; display: flex; align-items: center; padding: var(--base-inner-padding) 0;
						& .item { 
							align-items: flex-start;
							& .title { font-weight: var(--font-weight-heavy) !important; letter-spacing: -1px; }
							& .text { color: var(--color-bk-tint60); font-size: var(--font-size-14px); font-weight: var(--font-weight-medium); line-height: 1.8; text-shadow: 0 0 1px var(--color-wh-tint50); text-decoration: underline var(--color-wh-tint50) 20px; text-underline-offset: -16px; text-decoration-skip-ink: none; }
							& .btn { border-radius: 100px; padding: 0 clamp(8px, var(--vw-16px), 16px) 0 clamp(16px, var(--vw-24px), 24px); box-shadow: var(--box-shadow-min); }
						}
					}
					& > .btns { 
						align-items: flex-start; gap: 0; border-radius: var(--component-edge); background-color: var(--color-wh); box-shadow: var(--box-shadow-min); 
						& > .btn.prev { border-radius: var(--component-edge) 0 0 var(--component-edge); border-right: 0; }
						& > .btn.next { border-radius: 0 var(--component-edge) var(--component-edge) 0; border-left-color: var(--color-bk-tint10); }
					}
					
				}
			}
			
			/* 퀵메뉴 */
			&.quick {
				& .btns { width: 100%; gap: clamp(8px, var(--vw-24px), 24px); }
				& .btn { 
					flex-direction: column; height: clamp(100px, calc(var(--vw-80px)*1.5), 120px); aspect-ratio: 1; font-size: var(--font-size-12px); line-height: 1.2; border-radius: 50%; border: 1px solid transparent; background-color: var(--color-primary-tint10); transition: transform 0.3s;
					/*
					flex-direction: column; height: clamp(100px, calc(var(--vw-80px)*1.5), 120px); aspect-ratio: 1; font-size: var(--font-size-12px); line-height: 1.2; border: 1px solid var(--color-bk-tint10); border-radius: 50%; background-color: var(--color-wh); transition: transform 0.3s;
					*/
					&::before { width: 40px; background: url("") center 50%/24px no-repeat; transform: translateY(-4px); }
					&.business::before { background-image: url("../images/icon/ico_quick_business.svg"); }
					&.booking::before { background-image: url("../images/icon/ico_quick_booking.svg"); }
					&.document::before { background-image: url("../images/icon/ico_quick_document.svg"); }
					&.folder::before { background-image: url("../images/icon/ico_quick_folder.svg"); }
					&.graph::before { background-image: url("../images/icon/ico_quick_graph.svg"); }
					&.openapi::before { background-image: url("../images/icon/ico_quick_openapi.svg"); }
					&.question::before { background-image: url("../images/icon/ico_quick_question.svg"); }
					&.download::before { background-image: url("../images/icon/ico_quick_download.svg"); }
					&:hover { border-color: var(--color-primary); box-shadow: var(--box-shadow-max); transform: scale(1.1); }
				}
			}
			
			/* AI추천 */
			&.recommend { 
				background: var(--color-secondary); background-image: linear-gradient(var(--color-wh) 50%, var(--color-secondary) 50%); padding-top: 0;
				& .heading { 
					& > .title,
					& > p { color: var(--color-secondary); }
				}
				& .content { gap: clamp(16px, var(--vw-32px), 32px); }
				& .tabs { 
					width: auto; border-radius: 100px; padding: 0;
					& .tab { border-radius: 100px; }
					& > ul { padding: 4px; }
				}
				& .list { 
					& .item { 
						box-shadow: var(--box-shadow-min), var(--box-shadow-max);
						&:hover { border-color: var(--color-secondary-tint40); }
					}
				}
				& .btns {
					& > .btn.bg { border-radius: 1000px; }
				}
			}
			
			/* 통합검색 */
			&.search {
				& .heading > .title { display: block; text-align: center; font-size: var(--font-size-24px); font-weight: var(--font-weight-light); line-height: 1.6; }
				& .input {
					width: clamp(320px, var(--vw-480px), 30%);; height: auto; 
					& > input { height: 56px; border: 4px solid var(--color-primary); border-radius: 1000px; padding: 0 56px 0 24px; box-shadow: var(--box-shadow-max); }
					& > .btn { top: 8px; right: 8px; bottom: 8px; min-width: auto; height: auto; aspect-ratio: 1; transform: none; border-radius: 50%; background-color: var(--color-primary); }
				}
				& .tags { justify-content: center; padding: var(--base-inner-padding) 0; }
			}
			
			/* 파트너 모집공고 */
			&.recruit {
				position: relative; background-color: var(--color-secondary-tint05); 
				&::before { position: absolute; top: -25%; right: 10%; transform: scale(2); z-index: -1; content: ""; width: 240px; aspect-ratio: 1; border-radius: 50%; border: 32px solid var(--color-secondary-tint03); }
				&::after { position: absolute; bottom: -25%; left: 10%; transform: scale(1.5); z-index: -1; content: ""; width: 240px; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-secondary-tint03); }
				& > .inner {
					&::before { position: absolute; top: 55%; right: 8%; z-index: -1; content: ""; width: 80px; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-secondary-tint03); box-shadow: -1600px 0 0 var(--color-secondary-tint03); }
					&::after { position: absolute; top: 20%; left: 25%; z-index: -1; content: ""; width: 240px; aspect-ratio: 1; border-radius: 50%; border: 32px solid var(--color-secondary-tint03); }
				}
				& .heading { 
					padding: 0;
					& > .title,
					& > p { color: var(--color-secondary); }
				}
				
				& .list { 
					& .item { 
						border-color: var(--color-secondary-tint20); box-shadow: var(--box-shadow-min);
						&:hover { border-color: var(--color-secondary-tint40); }
					}
				}
			}
			
			/* 헬프데스크 */
			&.cscenter {
				& .heading > p { color: var(--color-primary); font-weight: var(--font-weight-bold); letter-spacing: 1px; }
				& .content { flex-direction: row; }
				& article.helpdesk { 
					flex: 1; align-items: center; border-right: 1px solid var(--color-bk-tint10);
					&:nth-of-type(1) { 
						border-left: 1px solid var(--color-bk-tint10); 
						& .head::before { background-image: url("../images/icon/ico_help_01.svg"); }
					}
					&:nth-of-type(2) .head::before { background-image: url("../images/icon/ico_help_02.svg"); }
					&:nth-of-type(3) .head::before { background-image: url("../images/icon/ico_help_03.svg"); } 
					& .linktxt { font-size: var(--font-size-12px); font-weight: var(--font-weight-medium); }
					& .note a { font-weight: var(--font-weight-medium); }
				}
			}
			
			/* 최근게시물 */
			&.board {
				padding-bottom: calc(var(--base-inner-padding)*2);
				& .inner { display: flex; gap: var(--base-inner-padding); }
				& article.article { 
					flex: none; gap: clamp(8px, var(--vw-16px), 16px); width: calc((100% - var(--base-inner-padding))/2); border: 1px solid var(--color-bk-tint05); border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: clamp(16px, var(--vw-24px), 24px); 
					& .head { justify-content: space-between; }
					& .body { overflow: visible; }
				}
			}
		}
	}
	
	
	/* 기업·전문가 */
	main.work { 
		& section.section {
			
			&.minihome {
				& .content {
					&.bottom .btns { width: 100%; }
					&.bg { 
						background-color: var(--color-bk-tint03);
						&.color { background-color: var(--color-secondary-tint05); }
						& + .bottom { background-color: var(--color-bk-tint03); }
					}
				}
				& .article {
					& .head { min-height: var(--component-size); }
					& .list.card { 	cursor:pointer;
						& .item:has(.btn.plus:only-child) { min-height: 120px; }
					}

					&.view {
						& .body {
							display: inline-flex; flex-direction: column; gap: clamp(16px, var(--vw-24px), 32px); overflow: visible; width: 100%; height: auto; 
							& > .list.card {
								padding: 0;
								& .item { 
									flex-wrap: nowrap; overflow: hidden; padding: 0;
									& .image { 
										aspect-ratio: 0; height: 100%; 
										& > img { object-fit: cover; max-height: none; }
										& + .btn { 
											position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;
											&::before { width: 40px; }
										}
									}
									&:has(.image) { border: 0; }
								}
								& > ul > li { flex: 1; }
							}
						}
					}
					
					&.certify { 
						& .list.card {
							& > ul > li { width: calc((100% - (var(--vw-16px) * 2)) / 3); }
						}
						& .item {
							position: relative; border: 0; box-shadow: var(--box-shadow-min); padding-left: calc((var(--vw-24px) * 2) + 56px);
							&::before { position: absolute; left: var(--vw-24px); top: 50%; transform: translateY(-50%); content: ""; display: block; width: 56px; height: 56px; border-radius: 50%; background: var(--color-bk-tint05) url("../images/icon/bg_certify.svg") center 50%/40px no-repeat; }
						}
					}
					
					&.provide {
						& .item .note { border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint03); background-color: var(--color-bk-tint03); padding: var(--vw-16px); }
					}
					
					&.inform {
						& .note { 
							border-left: 4px solid var(--color-bk-tint05); padding-left: clamp(16px, var(--vw-24px), 24px); 
							& > ul > li.btns { justify-content: flex-start; }
						}
					}
				}
			}
			/* 공급업체 */
			&.company { }
			/* 전문가 */
			&.expert { }
			/* 시설·장비 */
			&.facilities { }

		}
	}
	
	
	/* 팝니다/삽니다 */
	main.join { }
	
	
	/* 데이터 활용 */
	main.data { }
	
	
	/* 안내·지원 */
	main.help {
		& section.section {
			/* 공지사항 */
			&.notice { }
			/* 정책지원사업 */
			&.support { }
			/* 신규데이터 신청 */
			&.newdata { }
			/* 자주묻는 질문 */
			&.faq { }
			/* 질문과 답변 */
			&.qna { }
		}
	}
	
	
	/* 마이페이지 */
	main.my {
		& section.section {
			& .heading { 
				background-color: var(--color-secondary-tint05); padding-bottom: var(--base-inner-padding); 
				& .title { 
					color: var(--color-secondary); 
					& > b { font-weight: var(--font-weight-medium); }
				}
			}
			& .lnb { border-top-color: var(--color-secondary-tint05); border-bottom-color: var(--color-secondary-tint05); background-color: var(--color-secondary-tint05); margin: 0; }
			& .content > .inner {
				& > .headline { 
					margin-bottom: clamp(16px, var(--vw-24px), 24px); 
					& .btns { 
						flex: auto; justify-content: flex-end; 
						& > .btn.notxt {
							border-radius: 50%;
							background-color: var(--color-bk-tint05);
						}
					}
				}
				& > .title:is(h3) { 
					height: 40px;  
					& + .note.bg { display: flex; justify-content: space-between; align-items: center; }
				}
			}
			
			& .article {
				&.count {
					& .btns { 
						gap: 0; width: 100%; border-top: 8px solid var(--color-secondary-tint07); border-bottom: 8px solid var(--color-secondary-tint07); 
						& > .btn { 
							flex: 1; flex-direction: column; height: auto; line-height: 1.6; padding: clamp(8px, var(--vw-24px), 24px); 
							& > strong { color: var(--color-primary); font-size: var(--font-size-20px); font-weight: var(--font-weight-bold); }
							& + .btn { border-left: 1px solid var(--color-secondary-tint05);  }
						}
					}
				}
				&.supply {
					& .list {
						padding: 0;
						& > ul > li {
							display: inline-flex; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: clamp(8px, var(--vw-16px), 16px) clamp(8px, var(--vw-24px), 24px); 
							& > .item { 
								flex: auto; flex-wrap: nowrap; border: 0; background: none; padding: 0;
								& .image { 
									flex: none; width: auto; 
									&::before { background-color: var(--color-wh); box-shadow: var(--box-shadow-min); }
								}
								& .wrap { width: auto; gap: 4px 16px; }
								& .title { width: 100%; }
								& .btns { justify-content: flex-start; width: 100%; }
								& .linktxt { 
									font-size: var(--font-size-11px); font-weight: var(--font-weight-bold); line-height: 1; text-underline-offset: 3px; 
									&:hover { color: var(--color-bk-tint80); }
								}
								&:hover { 
									box-shadow: none;
									& .linktxt { color: var(--color-primary); }
								}
							}
							&:has(.btn.primary) { border: 1px solid var(--color-primary-tint20); background-color: var(--color-primary-tint05); }
						}
					}
				}
				&.half { width: calc((100% - var(--base-inner-padding))/2); }
			}
			
			/* 홈 */
			&.home { 
				& .content > .inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(24px, var(--vw-40px), 48px) var(--base-inner-padding); }
			}
			
			/* 정보관리 */
			&.inform { 
				& .article {
					&.edit {
						& .body { padding-top: clamp(24px, var(--vw-40px), 48px); }
						& .field { gap: 16px; }
					}
					&.supply .list { padding-bottom: clamp(32px, var(--vw-40px), 48px); }
				}
			}
			
			/* 데이터 관리 */
			&.data {
				& .article.count { padding: clamp(24px, var(--vw-24px), 32px) 0; }
			}

		}
	}
	
	
	/* 기타 */
	main.etc {
		& > section.section {
			
			/* 통합검색 */
			&.search {
				& .heading {
					background-color: var(--color-secondary-tint05); padding-bottom: var(--base-inner-padding);
					& > .inner { justify-content: center; }
					& .title { width: 100%; justify-content: center; text-align: center; }
				}
				& .input {
					width: clamp(320px, var(--vw-480px), 30%); height: auto;
					& > input { height: 56px; border: 4px solid var(--color-primary); border-radius: 1000px; padding: 0 56px; box-shadow: var(--box-shadow-max); }
					& > .btn { 
						border-radius: 50%; 
						&.find { top: 8px; right: 8px; bottom: 8px; min-width: auto; height: auto; aspect-ratio: 1; transform: none; background-color: var(--color-primary); }
						&.tune { 
							right: auto; left: 8px; 
							&:hover { background-color: var(--color-bk-tint05); }
						}
					}
				}
				& .tags { width: 100%; justify-content: center; }
				& .article { margin-top: var(--base-inner-padding); }
			}
			
			/* 푸드이음 소개 */
			&.intro { 
				& .heading {
					background-color: var(--color-primary-tint05); padding-bottom: var(--base-inner-padding);
					& > .inner { justify-content: center; }
					& .title { width: 100%; justify-content: center; text-align: center; }
				}
				& .content {
					&.slogan { 
						background-color: var(--color-primary-tint05); 
						& .headline { 
							flex-direction: column; justify-content: center; gap: 0; padding-bottom: clamp(16px, var(--vw-24px), 24px);
							& > .title { color: var(--color-primary); font-weight: var(--font-weight-bold); text-align: center; }
							& > p { text-align: center; }
						}
						& .items {
							display: flex; align-items: stretch; width: 100%; border: 1px solid var(--color-primary-tint50); border-radius: var(--box-edge-max); background-color: var(--color-wh-tint30); backdrop-filter: blur(4px); box-shadow: var(--box-shadow-min);
							& > .item { 
								flex: 1; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; border-left: 1px solid var(--color-primary-tint20); padding: clamp(16px, var(--vw-24px), 24px);
								& .title { flex: none; color: var(--color-secondary); }
								&:first-of-type { border-left: 0; }
							}
						}
					}
					&.video {
						& .headline { 
							flex-direction: column; justify-content: center; padding-bottom: clamp(16px, var(--vw-24px), 24px);
							& > .title { width: 160px; height: 160px; justify-content: center; color: var(--color-wh); font-weight: var(--font-weight-bold); line-height: 0; text-align: center; border-radius: 50%; background-color: var(--color-secondary); }
							& > p { color: var(--color-secondary); font-weight: var(--font-weight-medium); text-align: center; }
						}
					}
					&.future {
						background-image: linear-gradient(90deg, #EBEBD3 50%, #BFD6CB 50%);
						& img { max-width: calc((100% - (var(--component-size) + 16px)) / 2); }
						& .btn.arrow { 
							border-radius: 50%; background-color: var(--color-wh); box-shadow: var(--box-shadow-min); z-index: 10; 
							&::before { transform: rotate(-90deg); }
						}
						& > .inner { display: flex; justify-content: space-between; align-items: center; }
					}
					&.compose {
						& .headline { 
							justify-content: center; 
							& > .title { font-weight: var(--font-weight-bold); }
						}
						& .item {
							background-color: var(--color-secondary-tint03);
							& .image.biz::before { background-color: var(--color-wh); }
							& .title { color: var(--color-secondary); }
							& :is(.title, .text) { justify-content: center; width: 100%; text-align: center; }
						}
					}
					&.logos {
						background-color: var(--color-bk-tint03);
						& .headline {
							padding-bottom: clamp(16px, var(--vw-24px), 24px);
							& > .title { 
								color: var(--color-bk-tint60); font-size: var(--font-size-24px); 
								& br { display: none; }
							}
						}
						& .list.card.scroll {
							& > ul > li { width: calc((100% - (var(--vw-16px) * 4)) / 5); min-width: 180px !important; font-size: 0; }
							& .item { 
								height: auto; min-height: 0; overflow: hidden; border-color: var(--color-bk-tint10); padding: 0;
								& img { display: block; }
							}
						}
					}
				}
			}
			&.agree { }
			&.error > .inner { 
				text-align: center; 
				& .infotxt {
					padding: clamp(8px, var(--vw-16px), 16px) 0;
					&::before { position: static; width: 100%; height: 48px; background-position: center 50%; background-size: contain; transform: rotate(180deg); opacity: 0.1; }
					& strong { display: block; padding-bottom: 8px; }
				}
			}
		}
		&:has(.error) {
			display: flex; justify-content: center; align-items: center;
			& > .inner { display: flex; justify-content: center; align-items: center; }
		}
		&:has(.login) {
			display: flex; justify-content: center; align-items: center;
			& > .inner { display: flex; justify-content: center; align-items: center; }
		}
	}
	
	
	
}/* @contents*/

@layer common {
	
	/* BLIND */
	.blind { position: fixed; top: -9999px; left: -9999px; opacity: 0; }

	/* BR */
	.br { flex: none; width: 100% !important; }
	
	/* LOGO */
	.logo { 
		display: inline-flex; align-items: center; font-size: 0;
		&.bi::before { content: ""; display: block; height: 48px; aspect-ratio: 2.25/1; background: url(../images/icon/logo_fbip.png) 0 0/contain no-repeat; }
		&.ci::before { content: ""; display: block; height: 40px; aspect-ratio: 5.42/1; background: url(../images/icon/logo_foodpolis.png) 0 0/contain no-repeat; }
	}
	
	/* MARKER */
	.marker { background-image: linear-gradient(transparent 50%, var(--color-primary-tint30) 50%); }

	
	/* TEXT */
	.infotxt { 
		position: relative; display: inline-block; color: var(--color-bk-tint70); font-size: var(--font-size-12px); line-height: 18px; padding-left: clamp(20px, var(--vw-24px), 24px);
		&::before { position: absolute; top: 0; bottom: 0; left: 0; content: ""; flex: none; display: inline-block; width: clamp(20px, var(--vw-24px), 24px); height: 100%; background: url(../images/icon/ico_info.svg) 0 0/17px no-repeat; opacity: 0.3; }
		&.noico {
			padding-left: 0;
			&::before { display: none; }
		}
	}
	.linktxt { 
		display: inline-flex; flex-wrap: wrap; color: var(--color-bk-tint80); font-size: var(--font-size-12px); line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; 
		& > b { font-weight: var(--font-weight-medium); }
		&:hover { 
			color: var(--color-primary); 
			& > em { color: var(--color-primary); }
		}
	}
	.sumtxt { 
		display: inline-flex; align-items: center; gap: 8px; min-height: 16px; color: var(--color-bk-tint60); font-size: var(--font-size-12px); white-space: nowrap; line-height: 0; text-align: center;
		& > b { color: var(--color-bk); }

		&.talk {

			gap: 0;

			&::before { flex: none; content: ""; display: inline-block; width: 24px; aspect-ratio: 1; background: url("../images/icon/ico_talk.svg") center 50%/16px no-repeat; }

			& > b { font-weight: var(--font-weight-medium); }

		}		
	}
	
	/* HEADLINE */
	.headline { 
		display: flex; flex-wrap: wrap; align-items: center; gap: clamp(4px, var(--vw-8px), 8px); width: 100%; min-height: var(--component-size);
		& > .title { min-height: var(--component-size); }
		& ~ .headline { margin-top: clamp(16px, var(--vw-24px), 24px); } 
	}

	
	/* TAG */
	.tag { 
		display: inline-flex; justify-content: center; align-items: center; gap: 4px; min-height: 18px; color: var(--color-bk-tint60); font-size: var(--font-size-11px); font-weight: var(--font-weight-medium); line-height: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: 2px; background-color: var(--color-bk-tint05); padding: 0 4px;
		&::before { content: "#"; color: var(--color-bk-tint20); }
		&:is(a) {
			min-height: 26px; padding: 0 8px;
			&:hover { color: var(--color-secondary-tint60); background-color: var(--color-secondary-tint10); }
		}
	}
	.tags { 
		display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
		& > .tag { flex: none; }
	}
	
	
	/* BADGE */
	.badge { 
		flex: none; display: inline-flex; justify-content: center; align-items: center; gap: 4px; height: 28px; min-width: 48px; color: var(--color-bk-tint50); font-size: var(--font-size-11px); font-weight: var(--font-weight-medium); line-height: 0; text-align: center; text-shadow: none; white-space: nowrap; border: 1px solid var(--color-bk-tint05); border-radius: 100px; background-color: var(--color-bk-tint05); padding: 0 12px;
		&.min { height: 24px; font-size: var(--font-size-11px); padding: 0 8px; }
		&.max { height: 32px; font-size: var(--font-size-14px); padding: 0 16px; }
		
		&.noti { 
			color: var(--color-wh); background-color: var(--color-secondary); 
			&.red { background-color: orangered; }
		}
		
		&.biz { 
			height: 24px; font-size: var(--font-size-11px); border: 0; padding: 0 8px; 
			&.type0 { color: var(--color-primary); background-color: rgb(from var(--color-primary) r g b / 15%); }
			&.type1 { color: var(--color-secondary); background-color: rgb(from var(--color-secondary) r g b / 10%); }
			&.type2 {
				color: var(--color-bk-tint50); background-color: var(--color-bk-tint05);
				&.oem { color: #ed6c47; background-color: rgb(from #ed6c47 r g b / 10%); }
				&.odm { color: #00a1af; background-color: rgb(from #00a1af r g b / 10%); }
			}
			&.type3 { color: #3a69b6; background-color: rgb(from #3a69b6 r g b / 10%); }
			&.type4 { color: #c57cd5; background-color: rgb(from #c57cd5 r g b / 10%); }
			&.type5 { color: #e0051e; background-color: rgb(from #e0051e r g b / 10%); }
		}
		
		&.certify { height: 20px; min-width: auto; color: var(--color-wh); font-size: var(--font-size-10px); border: 0; border-radius: 4px; background-color: var(--color-bk-tint50); padding: 0 8px; }
		
		&.buy { color: #3a69b6; border: 0; background-color: rgb(from #3a69b6 r g b / 10%); }
		&.sel { color: #ed6c47; border: 0; background-color: rgb(from #ed6c47 r g b / 10%); }
		
		&.x { 
			height: 32px; color: var(--color-bk); border: 0; background: var(--color-bk-tint05) url("../images/icon/ico_close.svg") calc(100% - 10px) 50%/16px no-repeat; padding-right: 32px; 
			&:hover { background-color: var(--color-bk-tint10); cursor: pointer; }
		}

		&:has(.btn.x) {
			gap: 0; border: 0; padding-right: 4px;
			&:is(.min,.max) { padding-right: 4px; }
			& > .btn.x { 
				opacity: 0.5;
				&:hover { opacity: 1; }
			}
			& > .linktxt { font-size: var(--font-size-11px); font-weight: var(--font-weight-medium); }
			& > .sumtxt { 
				gap: 2px; font-size: var(--font-size-10px); font-weight: var(--font-weight-normal); padding-left: 8px; 
				& > b { font-weight: var(--font-weight-normal); }
			}
		}
	}
	.badges { 
		display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px;
		& > .badge { flex: none; }
	}
	
	
	/* NAVS */
	.navs { 
		display: inline-flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, var(--vw-16px), 16px);
		& .nav { 
			display: flex; justify-content: center; align-items: center; height: 100%; min-height: 24px; color: var(--color-bk-tint60); font-size: var(--font-size-12px); font-weight: var(--font-weight-medium); text-align: center; line-height: 0; white-space: nowrap;
			&:hover { color: var(--color-bk); }
			&.min { font-size: var(--font-size-11px); }
			&.max { min-height: 32px; font-size: var(--font-size-13px); }
		}
		& > ul { 
			display: inline-flex; flex-wrap: wrap; align-items: center; gap: clamp(8px, var(--vw-16px), 16px);
			& > li { display: inline-flex; align-items: center; gap: clamp(8px, var(--vw-16px), 16px); }
			&.dot > li { 
				&::after { flex: none; content: ""; display: block; width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-bk-tint20); }
				&:last-of-type::after { display: none; }
			}
			&.dash > li { 
				&::after { flex: none; content: ""; display: block; width: 1px; height: 10px; background-color: var(--color-bk-tint10); }
				&:last-of-type::after { display: none; }
			}
		}
	}
	
	
	/* TABS */
	.tabs { 
		display: inline-block; overflow-y: hidden; overflow-x: auto; width: 100%; font-size: 0; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: clamp(4px, var(--vw-8px), 16px);  
		& .tab { 
			display: flex; justify-content: center; align-items: center; gap: 4px; width: 100%; height: clamp(32px, var(--vw-40px), 48px); color: var(--color-bk-tint60); font-size: var(--font-size-13px); font-weight: var(--font-weight-normal); line-height: 0; white-space: nowrap; border-radius: var(--box-edge-min); padding: 0 clamp(8px, var(--vw-16px), 24px);
			& > b { flex: none; display: inline-block; color: var(--color-primary); font-size: var(--font-size-13px); font-weight: var(--font-weight-medium); line-height: 0; letter-spacing: 0; }
			&:hover { color: var(--color-bk); cursor: pointer; }
			&.on { 
				color: var(--color-wh); font-weight: var(--font-weight-medium); text-shadow: 0 0 2px var(--color-bk-tint50); border: 1px solid var(--color-bk-tint05); background-color: var(--color-primary); box-shadow: var(--shadow-box-min); 
				& > b { color: var(--color-wh); }
			}
		}
		& > ul { 
			display: inline-flex; align-items: stretch; width: 100%; height: 100%;
			& > li { 
				display: inline-flex; align-items: center; 
				
			}
		}
		&.fix { 
			overflow-x: hidden; 
			& .tab.on { color: var(--color-secondary); text-shadow: none; border: 0; background: none; box-shadow: none; }
			& > ul > li {  }
		}
	}
	
	
	/* NOTE */
	.note { 
		display: inline-block;
		& > ul { 
			display: flex; flex-direction: column; align-items: stretch; gap: clamp(4px, var(--vw-8px), 8px);
			& > li { 
				display: block; color: var(--color-bk-tint80); font-size: var(--font-size-13px); font-weight: var(--font-weight-normal); line-height: 1.5; text-align: left; vertical-align: baseline; 
				& > .linktxt { font-size: inherit; line-height: inherit; }
				&.dot {
					position: relative; padding-left: clamp(8px, var(--vw-16px), 16px);
					&::before { position: absolute; top: 7px; left: 0; content: ""; display: block; width: 3px; height: 3px; background-color: var(--color-bk); }
				}
			}
			&.min {
				& > li { 
					font-size: var(--font-size-12px); line-height: 1.4; 
					&.dot {
						padding-left: clamp(4px, var(--vw-8px), 8px);
						&::before { width: 2px; height: 2px; }
					}
				}
			}
			&.max {
				& > li { 
					font-size: var(--font-size-14px); line-height: 1.6; gap: clamp(8px, var(--vw-16px), 16px); 
					&.dot::before { top: 8px; }
				}
			}
		}
		&.bg { width: 100%; border-radius: var(--box-edge-min); background-color: var(--color-bk-tint03); padding: clamp(8px, var(--vw-16px), 16px); }
		&.bd { width: 100%; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint03); padding: clamp(8px, var(--vw-16px), 16px); }
	}
	

	/* PATH */
	.path { 
		display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 16px; color: var(--color-bk-tint60); font-size: var(--font-size-11px); font-weight: var(--font-weight-normal); line-height: 0; vertical-align: baseline; 
		& > span { 
			position: relative; display: flex; align-items: center; gap: 8px; 
			& ~ span::before { 
				flex: none; content: ""; display: block; width: 7px; height: 7px; border-top: 1px solid var(--color-bk-tint20); border-right: 1px solid var(--color-bk-tint20); transform: rotate(45deg) translateY(1px); 
			}
		}
	}

	
	/* STATE */
	.state { 
                display: inline-flex;
                display: inline-flex; align-items: center; gap: 4px; min-height: 16px; color: var(--color-bk-tint50); font-size: var(--font-size-12px); font-weight: var(--font-weight-medium); line-height: 0; white-space: nowrap;
                align-items: center;
                gap: 4px;
                min-height: 16px;
                color: var(--color-bk-tint50);
                font-size: var(--font-size-12px);
                font-weight: var(--font-weight-medium);
                line-height: 0;
                white-space: nowrap;
                
                
                
                
		& b { color: var(--color-bk); font-weight: 600; }
		&::before { flex: none; content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background-color: var(--color-bk-tint20); }
		&.in { /* 확인중, 검토중, 대기 */
			color: orange;
			&::before { background-color: orange; }
		} 
		&.on { /* 개선중, 진행중, 작업중 */
			color: #0072bc;
			&::before { background-color: #0072bc; }
		}
		&.ok { /* 개선완료, 답변완료, 성공 */
			color: #00a651;
			&::before { background-color: #00a651; }
		}
		&.no { /* 개선불가, 실패 */
			color: #ed1c24;
			&::before { background-color: #ed1c24; }
		}
	}
	
	/* LOADING */
	.loading { 
		position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: var(--color-wh-tint10); backdrop-filter: blur(4px); 
		&::before { content: ""; display: block; width: 80px; height: 80px; border: 4px solid var(--color-wh); border-top: 4px solid var(--color-primary); border-radius: 50%; box-shadow: 0 0 16px var(--color-bk-tint10), 0 0 4px var(--color-bk-tint10), 0 0 16px var(--color-bk-tint10) inset, 0 0 4px var(--color-bk-tint10) inset; animation: loading 1s ease infinite; }
	}
	@keyframes loading { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
	
	/* DOCUMENT */
	.document { 
		color: var(--color-bk-tint70); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); text-align: left; line-height: 2;
		& .title { 
			display: block; width: 100%;
			& ~ .title { margin-top: clamp(16px, var(--vw-24px), 32px); }
		}
	}
	
	
}/* @common */

@layer object {
	
	/* item */
	.item { 
		display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 16px;
		& .image {
			position: relative;	display: inline-flex; justify-content: center; align-items: center; overflow: hidden; width: 100%; aspect-ratio: 16/9; background: var(--color-bk-tint03) url("../images/icon/no_image.svg") center 50%/40px no-repeat;
			& > img { width: 100%; object-fit: cover; }
			& > .btn { position: absolute; top: 0; right: 0; }
			&:has(img) { background: none; }
			/*
			&.logo { height: 64px; aspect-ratio: 0; border-bottom: 1px dotted var(--color-bk-tint20); padding: 16px; }
			&.gear { 
				width: 100px; height: 100px; overflow: hidden; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint10); background-color: var(--color-bk-tint03);
				& > img { width: 100%; object-fit: cover; }
				& ~ .wrap { width: calc(100% - 100px - 16px); }
			}
			&.book { 
				align-items: flex-end; height: 240px; border-radius: var(--box-edge-min); background-color: var(--color-bk-tint03); padding: 16px; 
				& > img { max-width: 140px; border: 1px solid var(--color-bk-tint10); box-shadow: var(--box-shadow-min); }
			}
			&.news { 
				aspect-ratio: 1; 
				& > img { object-fit: cover; }
			}
			*/
			&.thumb { width: 120px; height: 100%; aspect-ratio: 0; }
			&.biz {
				width: 80px; height: 80px; overflow: visible; font-size: 0; aspect-ratio: 0; background: none;  
				&::before { content: ""; display: inline-block; height: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: var(--box-shadow-min); }
				&.type0::before { background: var(--color-bk-tint03) url("../images/icon/biz_type0.svg") center 50%/40px no-repeat; }
				&.type1::before { background: var(--color-bk-tint03) url("../images/icon/biz_type1.svg") center 50%/40px no-repeat; }
				&.type2::before { background: var(--color-bk-tint03) url("../images/icon/biz_type2.svg") center 50%/40px no-repeat; }
				&.type3::before { background: var(--color-bk-tint03) url("../images/icon/biz_type3.svg") center 50%/40px no-repeat; }
				&.type4::before { background: var(--color-bk-tint03) url("../images/icon/biz_type4.svg") center 50%/40px no-repeat; }
				&.type5::before { background: var(--color-bk-tint03) url("../images/icon/biz_type5.svg") center 50%/40px no-repeat; }
				& ~ .title { text-align: center; }
				&:has(img)::before { display: none; }
				& > img { width: auto; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--color-wh); box-shadow: var(--box-shadow-min); }
			}
			&.mark { 
				width: 80px; height: 80px; overflow: hidden; border-radius: 50%; background-color: var(--color-wh); padding: 16px; box-shadow: var(--box-shadow-min); 
				& > img { width: 100%; object-fit: contain; }
				& ~ .wrap { width: calc(100% - 80px - 16px); }
			}
		}
		& .title { 
			flex: auto;
			& .less.two { height: 40px; }
			&.fit { flex: none; }
		}
		& .less { 
			width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
			&.two { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
		}
		& .date { flex: none; color: var(--color-bk-tint60); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); line-height: 1; text-align: center; white-space: nowrap; }
		& .text { 
			display: inline-flex; flex-wrap: wrap; gap: 8px; color: var(--color-bk-tint80); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); line-height: 1.4; text-align: left;
			& > p { width: 100%; }
			& > img { max-width: 100%; }
			& > span { 
				display: inline-flex; align-items: flex-start; gap: 8px; color: var(--color-bk-tint60); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); text-align: left; line-height: 1.2;
				&::after { content: ""; display: block; width: 1px; height: 11px; background-color: var(--color-bk-tint20); margin: 2px 8px; }
				&:last-of-type::after { display: none; }
				& > b { color: var(--color-bk-tint80); font-weight: var(--font-weight-normal); }
			}
			& > .bar { 
				display: inline-flex; align-items: center; color: var(--color-bk-tint60);
				&:not(:last-of-type)::after { flex: none; content: ""; display: inline-block; width: 1px; height: 10px; background-color: var(--color-bk); opacity: 0.1; margin: 0 8px; }
			}
		}
		& .file { 
			display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; 
			& > span { 
				display: inline-flex; justify-content: center; align-items: center; min-height: 18px; color: var(--color-wh); font-size: var(--font-size-10px); font-weight: var(--font-weight-normal); line-height: 0; text-align: center; text-shadow: none; white-space: nowrap; border-radius: 2px; background-color: var(--color-bk-tint70); padding: 0 4px; 
				&.xml { background-color: #2b7cd3; }
				&.jsn { background-color: #00a1af; }
				&.csv { background-color: #dfb100; }
				&.txt { background-color: #55738c; }
			}
		}
		& .note { 
			&:not(.bg,.bd) { padding: 4px 0; }
			& > ul { gap: 0; }
		}
		& .wrap { 
			flex: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px 16px; width: 100%; 
			&.auto { width: auto; }
		}
		& .secret { flex: none; display: inline-block; width: 20px; height: 20px; font-size: 0; background: url("../images/icon/ico_lock.svg") center 50%/18px no-repeat; }
		
		& .btns:last-child { align-self: stretch; }
		
		&.row { 
			flex-wrap: nowrap; 
			& .image { flex: none; width: auto; }
		}
		&.col { flex-wrap: nowrap; flex-direction: column; }
	}
	
	
	/* filter */
	.filter {
		display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--color-secondary-tint05); border-radius: var(--box-edge); background-color: var(--color-secondary-tint05); padding: clamp(16px, var(--vw-32px), 32px); margin-bottom: 8px;
		& > .headline { display: none; justify-content: space-between; margin-bottom: 0; }
		& > .field { 
			gap: clamp(8px, var(--vw-16px), 24px); padding: 0;
			& > .tags { justify-content: center; width: 100%; }
			& > dl .input:has([type="checkbox"]) { margin-right: clamp(8px, var(--vw-16px), 16px); }
			&:has(ul) { width: auto; }
			& > .option {
				display: flex; flex-direction: column; align-items: center; gap: clamp(4px, var(--vw-8px), 8px); width: 100%; text-align: center; border-top: 1px dashed var(--color-secondary-tint10); padding-top: clamp(8px, var(--vw-16px), 16px);
				& > .btn.arrow { flex-direction: column-reverse; height: auto; line-height: 1; }
				& > .br { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(16px, var(--vw-24px), 24px); padding-bottom: clamp(16px, var(--vw-32px), 32px); }
			}
		}
		&:has(.option) { padding-bottom: 0; }
		& > .btns { justify-content: flex-end; width: 100%; }
	}
	
	
	/* list */
	.list { 
		display: inline-block; width: 100%; padding: clamp(4px, var(--vw-8px), 8px) 0;
		& .item { 
			width: 100%; min-height: 64px; border-radius: var(--box-edge); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); padding: clamp(8px, var(--vw-16px), 16px) clamp(8px, var(--vw-24px), 24px); 
			&:hover { border-color: var(--color-secondary-tint40); box-shadow: var(--box-shadow-min); }
			&:is(details) { 
				gap: 0; 
				& .btn.arrow::before { transition: transform 0.3s; }
				& .wrap:not(summary) { gap: var(--vw-40px) var(--vw-8px); padding: var(--vw-40px) 0 clamp(4px, var(--vw-8px), 8px) 0; }
				&[open] { 
					background-color: var(--color-secondary-tint03);
					& .btn.arrow::before { transform: rotate(180deg); }
				}
			}
			&:has(.mark) { border: 0; background-color: var(--color-bk-tint03); }
			&:has(.btn.plus:only-child) {
				border: 0; background-color: var(--color-bk-tint03); padding: 0;
				& > .btn { 
					width: 100%; height: 100%; font-size: 0; 
					&::before { width: 40px; opacity: 0.1; } 
				}
				&:hover { 
					box-shadow: none; 
					& > .btn::before { opacity: 0.5; }
				}
			}
			&:has(.image.thumb) {
				& .image.thumb ~ .wrap { width: calc(100% - 120px - 16px); }
			}
			&:has(.image.biz) {
				& .image.biz ~ .wrap { width: calc(100% - 80px - 16px); }
			}
			&:has(.wrap + .state) {
				& > .state { width: 80px; }
				& > .wrap { width: calc(100% - 80px - 16px); }
				&:has(.image.thumb) {
					& > .state { width: 80px; }
					& .image.thumb ~ .wrap { width: calc(100% - 120px - 80px - 32px); }
				}
			}
                        &:has(.wrap + .sumtxt.talk + .state) {
                                & > .state { width: 80px; }
                                & > .sumtxt.talk { width: 80px; }
                                & > .wrap { width: calc(100% - 80px - 80px - 32px); }
                        }			
		}
		& > :is(ul, ol) { 
			display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%;
			& > li { 
				display: inline-block; width: 100%; 
				&.fix > .item { background-color: var(--color-bk-tint03); }
				&.nodata {
					width: 100% !important;
					& > .infotxt { 
						width: 100%; color: var(--color-bk-tint30); font-size: var(--font-size-12px); line-height: 1.2; text-align: center; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: var(--vw-40px) var(--vw-24px); 
						&::before { position: static; width: 100%; height: 32px; background-size: 32px; background-position: 50% 0; opacity: 0.1; }
					}
				}
				&.on > .item { border-color: var(--color-secondary-tint50); background-color: var(--color-secondary-tint03); }
				&:has( > .btn.bookmark) {
					position: relative;
					& > .btn.bookmark { position: absolute; right: clamp(8px, var(--vw-16px), 16px); top: 50%; transform: translateY(-50%); z-index: 1; }
					& > .item { padding-right: calc(var(--component-size) + (clamp(8px, var(--vw-16px), 16px) * 2)); }
				}
				&:has( > .input.notxt) {
					position: relative;
					& > .input.notxt { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 1; min-height: var(--component-size); }
					& > .item { padding-right: calc(var(--component-size) + clamp(8px, var(--vw-16px), 16px)); }
				}
			}
		}
		& > ol { 
			--number-name: "";
			counter-reset: rank;
			& > li { 
				counter-increment: rank;
				& > .item::before { flex: none; content: var(--number-name) counter(rank); display: inline-flex; justify-content: center; align-items: center; min-width: var(--component-size); height: var(--component-size); color: var(--color-wh); font-size: var(--font-size-12px); var(--font-weight-bold) line-height: 1; text-align: center; line-height: 1; border-radius: 100px; background-color: var(--color-secondary); padding: 0 clamp(8px, var(--vw-16px), 16px); }
			}
		}
		&.card {
			& .item { 
				align-content: flex-start; height: 100%; padding: clamp(16px, var(--vw-24px), 24px);
				& .text { font-size: var(--font-size-12px); }
				& .image.biz {
					width: 100%;
					& + .title .less { text-align: center; }
				}
			}
			& > :is(ul, ol) {
				flex-direction: row; flex-wrap: wrap; gap: var(--vw-16px);
				& > li { 
					width: calc((100% - (var(--vw-16px) * 3)) / 4); 
					&:has( > .btn.bookmark) { 
						& > .btn.bookmark { top: 8px; right: 8px; transform: none; }
						& > .item { padding-right: clamp(16px, var(--vw-24px), 24px); }
					}
					&:has( > .input.notxt) {
						& > .input.notxt { right: 8px; top: 8px; transform: none; }
						& > .item { padding-right: calc(var(--component-size) + (clamp(8px, var(--vw-16px), 16px) * 2)); }
					}
				}
			}
			
			&.three > :is(ul, ol) > li { width: calc((100% - (var(--vw-16px) * 2)) / 3); }
			
			&.scroll {
				position: relative;
				& > .btn { 
					position: absolute; top: 50%; border-radius: 50%; 
					&.prev { left: -16px; transform: translateY(-50%); }
					&.next { right: -16px; transform: translateY(-50%); }
				}
			}
			
			&.banner {
				& .item { 
					position: relative; flex-wrap: nowrap; overflow: hidden; padding: 0;
					& .image { 
						display: flex; aspect-ratio: 0; height: 100%;
						& > img {display: block; object-fit: cover; height: 100%; }
						& + .btn { 
							position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; display: none;
							&::before { width: 40px; }
						}
					}
					&:has(.image) { border: 0; }
					&:hover .image + .btn { display: flex; }
				}
				& > :is(ul, ol) > li { flex: 1; width: calc((100% - (var(--vw-16px) * 4)) / 5); }
			}
		}
	}


	/* pages */
	.pages { 
		clear: both; display: flex; justify-content: center; align-items: center; gap: clamp(4px, var(--vw-8px), 8px); width: 100%; padding: clamp(16px, var(--vw-40px), 32px) 0;
		& > .btn {
			min-width: clamp(32px, var(--vw-40px), 40px); height: clamp(32px, var(--vw-40px), 40px); aspect-ratio: 1; border-radius: 50%;
			&.ico::before { opacity: 0.3; }
			&:not(.notxt) { font-size: var(--font-size-12px); }
			&:hover {
				background-color: var(--color-bk-tint05);
				&::before { opacity: 1; }
			}
			&.on { color: var(--color-wh); text-shadow: 0 0 2px var(--color-bk-tint50); background-color: var(--color-primary); }
		}
	}


	/* field */
	.field {
		display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: clamp(4px, var(--vw-8px), 8px) 0;
		
		& > dl {
			--width-dt: clamp(100px, 15%, 160px);
			display: inline-flex; flex-wrap: wrap; align-items: stretch; width: 100%; border-bottom: 1px solid var(--color-secondary-tint10); background-color: var(--color-secondary-tint05);
			& > dt { 
				flex: none; display: inline-flex; flex-wrap: wrap; align-items: center; width: var(--width-dt); height: calc(var(--component-size) + 17px); color: var(--color-bk-tint80); font-size: var(--font-size-12px); font-weight: var(--font-weight-medium); line-height: 1.2; text-align: left; border-top: 1px solid var(--color-secondary-tint10); padding: 8px 16px; 
				&.rq::after { content: "";  
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  
  background-color: var(--color-primary);
  border: 1px solid var(--color-secondary); }
				&.br {
					background-color: var(--color-wh);
					& + dd { border-top: 0; padding: 0 16px 16px 16px; }
				}
			}
			& > dd { 
				flex: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; width: calc(100% - var(--width-dt)); font-size: var(--font-size-12px); word-break: break-all; border-top: 1px solid var(--color-secondary-tint10); background-color: var(--color-wh); padding: 8px; 
				&.half { width: calc(50% - var(--width-dt)); }
			}
		}
		
		& > ul {
			display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 8px;
			& > li { 
				display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; 
				&.half { 
					width: 50%;
					&:nth-last-of-type(2) { border-bottom: 0; }
					& + li { width: 50%; }
				}
				&.two { 
					width: calc((100% / 3) * 2);
					&:nth-last-of-type(2) { border-bottom: 0; }
					& + li { width: calc(100% / 3); }
				}
				&.third { 
					width: calc(100% / 3);
					&:nth-last-of-type(3) { 
						border-bottom: 0;
						& ~ li:not(.two) { border-bottom: 0; }
					}
					& + li:not(.two) { 
						width: calc(100% / 3);
						& + li:not(.two) { width: calc(100% / 3); }
					}
					& + li.two {
						& + li { width: 100%; }
					}
					&:is(.third):nth-last-of-type(2) { 
						border-bottom: 0;
					}
				}
			}
		}
		/*
		&:is(.bd,.bg) {
			& > ul { gap: 0; }
		}
		&.box {
			& > ul { 
				border: 1px solid var(--color-primary-tint20); border-radius: var(--box-edge-min); padding: 8px;
			}
		}
		&.bg {
			& > ul { background-color: var(--color-primary-tint03); border-radius: var(--box-edge-min); }
			&:is(.box) > ul { border-color: var(--color-primary-tint10); }
			&:not(.bd) > ul { padding: 8px; }
		}
		&.bd {
			& > ul { 
				border-top: 1px solid var(--color-primary-tint10);
				& > li { border-bottom: 1px solid var(--color-primary-tint10); }
			}
			&:is(.bg) {
				& > ul { 
					border-top-color: var(--color-primary-tint20); background-color: var(--color-wh); border-radius: 0;
					& > li { border-bottom-color: var(--color-primary-tint20); padding: 0; }
				}
				&:is(.box) > ul { border-color: var(--color-primary-tint30); border-radius: var(--box-edge-min); }
			}
			&.box > ul {
				padding: 0;
				& > li:last-child { border-bottom: 0; }
			}
		}
		*/
	}
	
	
	/* popup */
	.popup { 
		position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: var(--color-bk-tint10); backdrop-filter: blur(4px); padding: clamp(8px, var(--vw-24px), 24px);
		& > article.article {
			--padding: 24px;
			max-width: 680px;
			 max-height: 100%; border-radius: var(--box-edge-max); background-color: var(--color-wh); box-shadow: var(--box-shadow-min); animation: pop 0.3s ease forwards;
			& .head { 
				padding: 16px 12px 0 var(--padding);
				& .btn { margin-left: auto; }
				& + .body { padding-top: 0; }
			}
			& .body { 
				padding: var(--padding);
				& .list .item { border-radius: var(--box-edge-min); }
			}
			& .foot { 
				padding: var(--padding); padding-top: 0; 
				& .pages { padding: 0; }
			}
			
			&.min { max-width: 360px; max-height: 640px; }
			&.max { max-width: 960px; }
			
			&.alert { max-width: 240px; }
		}
		&.banner { 
			background-color: var(--color-bk-tint50); padding: 0;  
			& > article.article { 
				max-width: 100%; border-radius: 0; background: none; padding: 0; box-shadow: none;
				& .body { 
					padding-bottom: 80px;
					& .slider { 
						max-width: 640px; margin: 0 auto; 
						& > a { display: block; font-size: 0; }
					}
					& .btn { 
						position: fixed; top: 50%; transform: translateY(-50%); z-index: 10000; 
						&.prev { left: 0; border-radius: 0 var(--component-edge) var(--component-edge) 0; }
						&.next { right: 0; border-radius: var(--component-edge) 0 0 var(--component-edge); }
					}
				}
				& .foot { 
					position: fixed; left: 50%; transform: translateX(-50%); bottom: clamp(16px, var(--vw-24px), 24px); z-index: 10000; justify-content: flex-start; max-width: 360px; border-radius: 100px; background-color: var(--color-bk-tint50); backdrop-filter: blur(4px); padding: 8px; box-shadow: var(--box-shadow-min);
					& .input {
						margin-left: 24px;
						& > input {
							& ~ label { color: var(--color-wh-tint50); font-weight: var(--font-weight-normal); }
							&:checked ~ label { color: var(--color-wh); }
						}
					}
					& .btn.close { border-radius: 50%; margin-left: auto; }
				}
			}
		}
		&.chatbot {
			top: auto; left: auto; bottom: calc(var(--base-inner-padding) + 64px); right: calc(var(--base-inner-padding) + clamp(48px, var(--vw-64px), 64px) + 16px); background: none; backdrop-filter: none; padding: 0;
			& > article.article.dialogue {
				max-width: 400px !important; max-height: 720px; border: 1px solid var(--color-bk-tint10); box-shadow: var(--box-shadow-max); animation: none;
				& .head { 
					border-bottom: 1px solid var(--color-bk-tint05); padding-bottom: 8px;  
					& > .title { 
						font-weight: var(--font-weight-normal) !important; 
						& > strong { color: var(--color-secondary); font-weight: var(--font-weight-bold) !important; }
					}
				}
				& .body { 
					background-color: var(--color-bk-tint03); padding-top: var(--padding);
					& > .bubble { 
						height: auto !important; background: none !important; padding: 0 !important; margin: 0 !important; 
						& > .item .wrap { gap: 8px; max-width: 100% !important; padding: clamp(16px, var(--vw-24px), 24px) !important; }
					}
				}
				& .foot {
					border-top: 1px solid var(--color-bk-tint05); padding-top: 8px; 
					& .set { width: 100%; }
				}
			}
		}
	}
	@keyframes pop { from { margin-top: 100px; } to { margin-top: 0; } }
	
	
	/* grid */
	.grid { 
		display: block; width: 100%; overflow-x: auto; 	border-top: 1px solid var(--color-secondary-tint20); border-bottom: 1px solid var(--color-secondary-tint20); margin: 8px 0;
		&::-webkit-scrollbar-track { background-color: var(--color-bk-tint05); }
		& :is(th) {}
		& :is(th,td) { 
			text-align: center; vertical-align: middle; border-right: 1px solid var(--color-secondary-tint07); border-bottom: 1px solid var(--color-secondary-tint07); padding: 4px 12px; 
			&:last-child { border-right: 0; }
		}
		& > table { 
			position: relative; width: 100%; border-collapse: separate; 
			& th { height: 32px; color: var(--color-bk-tint60); font-size: var(--font-size-11px); font-weight: var(--font-weight-bold); line-height: 1.2; white-space: nowrap; }
			& td { 
				height: 40px; color: var(--color-bk-tint80); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); line-height: 1.4; 
				& > .state { padding: 0 8px; }
			}
			& tr.hover {
				&:hover { 
					background-color: var(--color-primary-tint05); box-shadow: 0 -1px 0 var(--color-primary-tint10), 0 0 8px var(--color-primary-tint20); 
					& td { border-bottom-color: var(--color-secondary-tint20); }
				}
				&:is([onClick]) { 
					cursor: pointer; 
					&:hover strong { color: var(--color-secondary); }
				}
			}
			& thead { 
				position: sticky; top: 0; left: 0; z-index: 100; background-color: var(--color-wh); 
				& th { border-bottom-color: var(--color-secondary-tint10); }
			} 
			&:has(.nodata) {
				height: 100%;
				& td { 
					padding: 8px; border: 0;
					& > .infotxt { opacity: 0.5; }
				}
			}
		}
		&:has(table tbody th) {
			border: 1px solid var(--color-secondary-tint20);
			& tbody > tr:last-child > :is(th,td) { border-bottom: 0; }
		}
	}
        
        
        /* product */
        .product {
                display: flex;
                align-items: stretch;
                gap: clamp(8px, var(--vw-16px), 24px);
                
                
                & .imageview {
                        position: relative; overflow: hidden; width: calc(100% - 80px - clamp(8px, var(--vw-16px), 24px)); height: 100%; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint20); background-color: var(--color-bk-tint03);
                        & > img {display: block;object-fit: cover;}
                        & > .btn {
                                position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
                                &.prev { left: 0; border-radius: 0 var(--component-edge) var(--component-edge) 0; }
                                &.next { right: 0; border-radius: var(--component-edge) 0 0 var(--component-edge); }
                        }
                }
                & .imagelist {
                        display: flex; flex-direction: column; gap: clamp(4px, var(--vw-8px), 8px); width: 80px; height: 100%; border-radius: var(--box-edge-min); background-color: var(--color-bk-tint03); padding: 8px;
                        & > a {
                                flex: none; display: block; overflow: hidden; width: 100%; aspect-ratio: 1; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint10); background-color: var(--color-bk-tint03);
                                & > img { display: block; height: 100%; object-fit: cover; opacity: 0.5; }
                                &:hover {
                                        box-shadow: var(--box-shadow-min);
                                        & > img { opacity: 1; }
                                }
                                &.on {
                                        border-color: var(--color-bk); box-shadow: var(--box-shadow-min);
                                        & > img { opacity: 1; }
                                }
                        }
                }
        }
	
}/* @object */

@layer component {

	/* button */
	.btn { 
		display: inline-flex; justify-content: center; align-items: center; gap: clamp(2px, var(--vw-4px), 4px); width: auto; min-width: var(--component-size); height: var(--component-size); color: var(--color-bk-tint70); font-size: var(--font-size-13px); font-weight: var(--font-weight-medium); line-height: 0; text-align: center; white-space: nowrap; border-radius: var(--component-edge);
		/*&:focus { outline: var(--component-focus); }*/
		& > .less { display: inline-block; overflow: hidden; max-width: 100%; height: auto; text-overflow: ellipsis; padding: 8px 0; }
		&:not(:disabled,:focus):hover { color: var(--color-bk); }
		
		&.min { 
			min-width: calc(var(--component-size) - 8px); height: calc(var(--component-size) - 8px); font-size: var(--font-size-11px);
			&:is(.bd,.bg) { padding: 0 clamp(4px, var(--vw-8px), 8px); }
			&.ico::before { width: 16px; background-size: 16px !important; }
		}
		&.max { 
			min-width: calc(var(--component-size) + 16px); height: calc(var(--component-size) + 16px); font-size: var(--font-size-15px);
			&:is(.bd,.bg) { padding: 0 clamp(16px, var(--vw-24px), 24px); }
			&.ico::before { width: 32px; }
		}
		
		&:disabled { opacity: 0.3; cursor: default; }
		&:is(.bd,.bg):not(:disabled,:focus):hover { box-shadow: var(--box-shadow-min); }
		&:is(.bd,.bg) { padding: 0 clamp(16px, var(--vw-24px), 24px); }

		&.bd { 
			text-shadow: 0 0 2px var(--color-wh-tint50); border: 1px solid var(--color-bk-tint10); background-color: var(--color-wh-tint80);
			&:not(:disabled,:focus):hover { border-color: var(--color-bk-tint20); background-color: var(--color-wh); }
			&.primary { 
				color: var(--color-primary); border-color: var(--color-primary); background-color: var(--color-primary-tint05);
				&:not(:disabled,:focus):hover { border-color: var(--color-primary); background-color: var(--color-primary-tint10); }
			}
			&.secondary { 
				color: var(--color-secondary); border-color: var(--color-secondary); background-color: var(--color-secondary-tint05); 
				&:not(:disabled,:focus):hover { border-color: var(--color-secondary); background-color: var(--color-secondary-tint10); }
			}
		}
		&.bg { 
			color: var(--color-wh); text-shadow: 0 0 2px var(--color-bk-tint50); background-color: var(--color-bk-tint50);
			&:not(:disabled,:focus):hover { color: var(--color-wh); background-color: var(--color-bk-tint70); }
			&.primary { 
				background-color: var(--color-primary); 
				&:not(:disabled,:focus):hover { background-color: color-mix(in oklab, var(--color-primary) 90%, var(--color-bk)); }
			}
			&.secondary { 
				background-color: var(--color-secondary); 
				&:not(:disabled,:focus):hover { background-color: color-mix(in oklab, var(--color-secondary) 80%, var(--color-bk)); }
			}
			&.ico::before { filter: invert(100%); }
		}

		&.ico {
			&::before { flex: none; content: ""; display: inline-block; width: 24px; aspect-ratio: 1; }
			&:is(.bd,.bg) { padding: 0 clamp(16px, var(--vw-24px), 24px) 0 clamp(8px, var(--vw-16px), 16px); }

			&.col { flex-direction: column; }
			&.end { flex-direction: row-reverse; }

			&.notxt { gap: 0; font-size: 0; padding: 0; }
			
			
			&.user::before { background: url("../images/icon/ico_user.svg") center 50%/32px no-repeat; }
			&.menu {
				&::before { background: url("../images/icon/ico_menu.svg") center 50%/24px no-repeat; }
				&.on::before { background-image: url("../images/icon/ico_close.svg"); }
			}

			&.back::before { background: url("../images/icon/ico_back.svg") center 50%/contain no-repeat; }
			&.find::before { background: url("../images/icon/ico_find.svg") center 50%/contain no-repeat; }
			&.reset::before { background: url("../images/icon/ico_reset.svg") center 50%/contain no-repeat; }

			&.plus::before { background: url("../images/icon/ico_plus.svg") center 50%/contain no-repeat; }
			&.minus::before { background: url("../images/icon/ico_minus.svg") center 50%/contain no-repeat; }

			&.close::before { background: url("../images/icon/ico_close.svg") center 50%/contain no-repeat; }

			&.next::before { background: url("../images/icon/ico_page_next.svg") center 50%/contain no-repeat; }
			&.prev::before { background: url("../images/icon/ico_page_prev.svg") center 50%/contain no-repeat; }
			&.last::before { background: url("../images/icon/ico_page_last.svg") center 50%/contain no-repeat; }
			&.first::before { background: url("../images/icon/ico_page_first.svg") center 50%/contain no-repeat; }

			&.bookmark {
				&::before { background: url("../images/icon/ico_star.svg") center 50%/28px no-repeat; opacity: 0.2; transition: transform 0.2s; }
				&:hover::before { opacity: 0.8; transform: scale(1.3); }
				&.on::before { background-image: url("../images/icon/ico_star_on.svg"); opacity: 1 }
			}

			&.arrow {
				&::before { background: url("../images/icon/ico_arrow.svg") center 50%/contain no-repeat; }
				&.on::before { transform: rotate(180deg); }
			}
			
			&.delete::before { background: url("../images/icon/ico_delete.svg") center 50%/20px no-repeat; }
			
			&.download::before { background: url("../images/icon/ico_download.svg") center 50%/24px no-repeat; }
			
			&.edit::before { background: url("../images/icon/ico_edit.svg") center 50%/20px no-repeat; }
			
			&.tune::before { background: url("../images/icon/ico_tune.svg") center 50%/24px no-repeat; }
			
			&.x::before { background: url("../images/icon/ico_close.svg") center 50%/16px no-repeat; }
			
			&.go {
				gap: clamp(4px, var(--vw-8px), 8px);
				&:is(.bd,.bg) { padding: 0 clamp(8px, var(--vw-16px), 16px); }
				&::before { display: none; }
				&::after { flex: none; content: ""; display: inline-block; width: 5px; height: 5px; border-top: 1px solid var(--color-bk); border-right: 1px solid var(--color-bk); transform: rotate(45deg); }
				&.bd {
					&.primary::after { border-color: var(--color-primary); }
					&.secondary::after { border-color: var(--color-secondary); }
				}
			}
			
		}

		&.sns {
			font-size: 0; border-radius: 50%; background-color: var(--color-wh-tint50);
			&:hover { background-color: var(--color-wh-tint80); box-shadow: var(--box-shadow-min); }
			&::before { flex: none; content: ""; display: inline-block; width: 24px; height: 24px; }
			&.naver::before { background: url("../images/icon/sns_naver.png") center 50%/contain no-repeat; }
			&.kakao::before { background: url("../images/icon/sns_kakao.png") center 50%/contain no-repeat; }
			&.google::before { background: url("../images/icon/sns_google.png") center 50%/contain no-repeat; }
			&:is(.max)::before { width: 32px; height: 32px; }
		}
		
		&.quick {
			position: relative; width: clamp(48px, var(--vw-64px), 64px); height: auto; aspect-ratio: 1; font-size: 0; border-radius: 50%; border: 1px solid var(--color-primary-tint50); background-color: var(--color-wh-tint60); backdrop-filter: blur(4px); box-shadow: var(--box-shadow-min);
			&::before { flex: none; content: ""; display: inline-block; width: 24px; aspect-ratio: 1; }
			&::after { position: absolute; right: calc(100% + 40px); top: 50%; transform: translateY(-50%); z-index: -1; content: ""; display: inline-block; height: 18px; line-height: 18px; color: var(--color-wh); font-size: var(--font-size-10px); font-weight: var(--font-weight-bold); text-align: center; text-shadow: 0 0 2px var(--color-bk-tint80), 0 0 1px var(--color-bk-tint40); border-radius: 2px; background-color: var(--color-bk-tint60); padding: 0 4px; opacity: 0; transition: all 0.3s; }
			&.icon0 {
				border-color: var(--color-bk-tint30); background-color: var(--color-secondary);
				&::before { background: url("../images/icon/quick_icon00.svg") center 50%/32px no-repeat; filter: invert(100%); }
				&::after { display: none; }
				&.on {
					background-color: var(--color-bk-tint80);
					&::before { background: url("../images/icon/ico_close.svg") center 50%/28px no-repeat; }
				}
			}
			&.icon1 {
				&::before { background: url("../images/icon/quick_icon01.svg") center 50%/contain no-repeat; }
				&::after { content: "문의하기"; }
			}
			&.icon2 {
				&::before { background: url("../images/icon/quick_icon02.svg") center 50%/contain no-repeat; }
				&::after { content: "사고팝니다"; }
			}
			&.icon3 { position:relative;
				&::before { background: url("../images/icon/quick_icon03.svg") center 50%/contain no-repeat; 				
				}
				  .label {
				    font-size: 14px;
				  }				
				  .count {    					  
				    color: #fff;
				    padding: 2px 6px;
				    border-radius: 10px;
				    font-size: 12px;
				    position : absolute;
				  }				
				&::after { content: "받은메세지"; }
			}
			&.icon4 {
				&::before { background: url("../images/icon/quick_icon04.svg") center 50%/contain no-repeat; }
				&::after { content: "챗봇"; }
			}
			&.icon5 {
				&::before { background: url("../images/icon/quick_icon05.svg") center 50%/contain no-repeat; }
				&::after { content: "맨위로"; }
			}
			&:not(.icon0):hover {
				border-color: var(--color-bk-tint10); background-color: var(--color-primary); box-shadow: var(--box-shadow-min), var(--box-shadow-max);
				&::before { width: 32px; filter: invert(100%); }
				&::after { right: calc(100% + 8px); opacity: 1; }
			}
		}
	}
	.btns { 
		display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(4px, var(--vw-8px), 8px);
		& > .btn { flex: none; }
		&.row {
			width: 100%;
			> .btn { flex: 1; }
		}
		&.col { 
			flex-direction: column;
			& > .btn { width: 100%; }
		}
	}

	/* INPUT */
	.input {
		--inside-size : 4px;
		position: relative; display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; min-width: var(--component-size); max-width: 100%; vertical-align: top;
		& > label { position: fixed; top: -9999px; left: -9999px; font-size: 0; opacity: 0; }
		/*
		& > label { 
			flex: none; display: inline-flex; justify-content: flex-start; align-items: center; height: var(--component-size); color: var(--color-bk-tint60); font-size: var(--component-font); font-weight: var(--font-weight-medium); line-height: 0; text-align: left; white-space: nowrap;
			&:has(+ *:not(:disabled,:read-only):hover) { color: var(--color-bk); font-weight: var(--font-weight-medium); }
		}
		*/
		& > input { 
			flex: auto; display: block; min-width: 0; height: var(--component-size); color: var(--color-bk); font-size: var(--component-font); font-weight: var(--font-weight-normal); line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--component-bd-color); border-radius: var(--component-edge); background-color: var(--component-bg-color); padding: 0 8px;
			&::-webkit-input-placeholder { font-size: var(--component-font); font-weight: normal; color: var(--color-bk-tint30); line-height: 1; text-align: left; text-transform: none; }

			&:disabled { opacity: 0.3; }
			&:disabled ~ label { opacity: 0.3; }

			&:read-only { background-color: color-mix(in oklab, var(--component-bg-color) 30%, var(--color-bk-tint05)); }
			
			&:not(:disabled,:focus,:read-only):hover { cursor: pointer; border-color: var(--component-bd-color-hover); }
			&:not(:disabled,:focus,:read-only):hover ~ label { color: var(--color-bk); font-weight: var(--font-weight-medium); }

			&:focus { outline: var(--component-focus); outline-offset: -1px; box-shadow: 0 0 4px 0 var(--color-bk-tint20); }
			
			&:is([type="date"],[type="time"])::-webkit-calendar-picker-indicator { position: absolute; top: 0; bottom: 0; right: 0; z-index: 10; width: var(--component-size); height: auto; padding: 0; margin: 0; opacity: 0.5; }
			&:is([type="date"],[type="time"])::-webkit-calendar-picker-indicator:hover { opacity: 1; cursor: pointer; }
			
			&[type="date"]::-webkit-calendar-picker-indicator { background: url("../images/icon/ico_date.svg") 50% 50%/16px no-repeat; }
			&[type="time"]::-webkit-calendar-picker-indicator { background: url("../images/icon/ico_time.svg") 50% 50%/16px no-repeat; }
			
			&[type="number"] { font-family: var(--font-family-code); text-align: center; }
			&[type="number"]::-webkit-input-placeholder { text-align: center; }
			&[type="number"]::-webkit-inner-spin-button,
			&[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
			
			&[type="file"]::file-selector-button { height: calc(var(--component-size) - 8px); color: var(--color-bk); border: 0; border-radius: var(--component-edge); background-color: var(--color-bk-tint10); padding: 0 8px; margin: 3px 0 0 0; transform: translateX(-5px); }

			&:is([type="checkbox"],[type="radio"]) { 
				flex: none; width: calc(var(--component-size) / 2); height: calc(var(--component-size) / 2); padding: 0; transition: all 0.3s ease;
				& ~ label { 
					flex: none; position: static; display: inline-flex; justify-content: flex-start; align-items: center; height: var(--component-size); color: var(--color-bk-tint60); font-size: var(--component-font); font-weight: var(--font-weight-bold); line-height: 0; text-align: left; white-space: nowrap; opacity: 1;
					&:has(+ *:not(:disabled,:read-only):hover) { color: var(--color-bk); font-weight: var(--font-weight-medium); }
					&:has(.sumtxt) { font-weight: var(--font-weight-normal); }
				}
				/*
				& ~ label { flex: auto; white-space: normal; cursor: pointer; z-index: 0; }
				*/
				&:checked { background: var(--color-primary) url("../images/icon/ico_checkbox.svg") 50% 50%/16px no-repeat; }
				&:checked ~ label { color: var(--color-bk); }
				&.switch {
					width: var(--component-size); border-radius: 100px; box-shadow: none; 
					& ~ label::before {
						position: absolute; left: var(--inside-size); top: 50%; transform: translateY(-50%); content: ""; display: block; width: calc(var(--component-size) / 2 - var(--inside-size) * 2); height: calc(var(--component-size) / 2 - var(--inside-size) * 2); border-radius: calc(var(--component-edge) - 1px); border-radius: 50%; background-color: var(--color-bk-tint30); transition: all 0.3s ease;
					}
					&:checked { background: var(--color-primary); box-shadow: none; }
					&:checked ~ label::before { left: calc(var(--component-size) / 2 + var(--inside-size)); background-color: var(--color-wh); }
				}
			}
			&[type="radio"] {
				border-radius: 50%;
				&:checked { background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-wh) inset; }
			}
			&.wrong { 
				border-color: red !important; 
				&:hover { border-color: red !important; }
			}
		}
		&:has( > input:is([type="checkbox"],[type="radio"]) ) { flex: none; flex-wrap: nowrap; }
		&.end { 
			flex-direction: row-reverse; 
			& > input.switch ~ label::before { left: auto; right: var(--inside-size); }
			& > input.switch:checked ~ label::before { left: auto; right: calc(var(--component-size) / 2 + var(--inside-size)); }
		}
		&.unit {
			&::after { content: var(--unit); position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; width: var(--component-size); height: auto; display: inline-flex; justify-content: center; align-items: center; color: var(--color-bk-tint60); font-size: var(--component-font); font-weight: var(--font-weight-light); line-height: 1.2; text-align: center; white-space: nowrap; }
			& > input { padding-right: var(--component-size); }
		}
		
		&:has(input[type="date"]) { gap: 0; }
		
		&:has(.btn) {
			& > .btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; }
			& > input { padding-right: var(--component-size); }
		}
		
		&.notxt {
			gap: 0;
			& > input:is([type="checkbox"], [type="radio"]) ~ label { position: fixed; top: -9999px; left: -9999px; font-size: 0; opacity: 0; }
		}
		&.seetxt {
			& > label { position: static; flex: none; color: var(--color-bk-tint60); font-size: var(--font-size-12px); font-weight: var(--font-weight-bold); opacity: 1; }
			&:has([disabled]) > label { opacity: 0.3; }
		}
		& > .feedback { display: block; width: 100%; color: red; font-size: var(--font-size-11px); font-weight: var(--font-weight-light); line-height: 1; text-align: left; }
	}
	
	/* TEXTAREA */
	.textarea {
		display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: 100%; height: 160px; vertical-align: top;
		& > label { position: fixed; top: -9999px; left: -9999px; font-size: 0; opacity: 0; }
		& > textarea { 
			flex: auto; width: 100%; height: 100%; min-height: calc(var(--component-size) * 2); color: var(--color-bk); font-size: var(--component-font); font-weight: var(--font-weight-normal); line-height: 1.8; text-align: left; border: 1px solid var(--component-bd-color); border-radius: var(--component-edge); background-color: var(--component-bg-color); padding: 8px;
			&::-webkit-input-placeholder { font-size: var(--component-font); font-weight: normal; color: var(--color-bk-tint30); line-height: 1; text-align: left; text-transform: none; }
			
			&:disabled { opacity: 0.3; }

			&:read-only { background-color: color-mix(in oklab, var(--component-bg-color) 30%, var(--color-bk-tint05)); }
			
			&:not(:disabled,:focus,:read-only):hover { cursor: pointer; border-color: var(--component-bd-color-hover); }
			&:not(:disabled,:focus,:read-only):hover ~ label { color: var(--color-bk); font-weight: var(--font-weight-medium); }
			
			&:focus { outline: var(--component-focus); outline-offset: -1px; box-shadow: 0 0 4px 0 var(--color-bk-tint20); }
		}
		& > .sumtxt { font-size: var(--font-size-11px); margin-left: auto; }
		&.min { height: 80px; }
		&.max { height: 240px; }
	}

	/* SELECT */
	.select { 
		position: relative; display: inline-flex; gap: 8px; min-width: var(--component-size); max-width: 100%; height: var(--component-size); vertical-align: top;
		& > label { position: fixed; top: -9999px; left: -9999px; font-size: 0; opacity: 0; }
		& > select { 
			flex: auto; width: 100%; height: 100%; color: var(--color-bk); font-size: var(--component-font); font-weight: var(--font-weight-normal); line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--component-bd-color); border-radius: var(--component-edge); background: var(--component-bg-color) url("../images/icon/ico_arrow.svg") calc(100% - 8px) 50%/16px no-repeat; padding: 0 32px 0 8px;
			& > option { color: var(--color-bk); background-color: var(--component-bg-color); }
			
			&:disabled { opacity: 0.3; }

			&:not(:disabled):hover { cursor: pointer; border-color: var(--component-bd-color-hover); }
			&:not(:disabled):hover ~ label { color: var(--color-bk); font-weight: var(--font-weight-medium); }
			
			&:focus { outline: var(--component-focus); outline-offset: -1px; box-shadow: 0 0 4px 0 var(--color-bk-tint20); }
		}
		& > input { 
			flex: auto; width: 100%; height: 100%; color: var(--color-bk); font-size: var(--component-font); font-weight: var(--font-weight-normal); line-height: 1; text-align: left; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--component-bd-color); border-radius: var(--component-edge); background: var(--component-bg-color) url("../images/icon/ico_arrow.svg") calc(100% - 8px) 50%/16px no-repeat; padding: 0 32px 0 8px;
			
			&:not(:disabled):hover { cursor: pointer; }
			&:not(:disabled):hover ~ label { color: var(--color-bk); font-weight: var(--font-weight-medium); }
			
			&:disabled { opacity: 0.3; }
			
			&:focus { outline: var(--component-focus); border: 1px solid var(--color-primary); }
		}
	}
	
	/* FIELDSET */
	fieldset.set {
		display: inline-flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; padding-left: var(--field-dt);
		& > legend { position: fixed; top: -9999px; left: -9999px; font-size: 0; opacity: 0; }
		& > .fix { flex: none; }
		& > .btns { gap: clamp(4px, var(--vw-8px), 8px); }
		& > .input { 
			flex: auto; 
			&:has( > input:is([type="checkbox"],[type="radio"]) ) { flex: none; }
		}
		
		&.category {
			gap: 0;
			& > .select {
				flex: 1;
				& > select { border-radius: 0; border-left-color: var(--color-bk-tint05); border-right: 0; }
				&:first-of-type > select { border-radius: var(--component-edge) 0 0 var(--component-edge); border-left-color: var(--component-bd-color); }
				&:last-of-type > select { border-radius: 0 var(--component-edge) var(--component-edge) 0; border-right: 1px solid var(--component-bd-color); }
			}
		}
		
		&.keyword { 
			gap: 0; flex-wrap: nowrap;
			& > .select {
				flex: none;
				& > select { border-radius: var(--component-edge) 0 0 var(--component-edge); border-right: 0; }
				& + .input > input { border-radius: 0 var(--component-edge) var(--component-edge) 0; border-left: 0; padding-left: 0; }
			}
			& > .btns { flex: none; flex-wrap: nowrap; padding-left: 8px; }
		}
		
		&.radio {
			gap: 0; border-radius: var(--component-edge); background-color: var(--color-wh);
			& > .input {
				& > label {
					justify-content: center; width: 100%; color: var(--color-bk-tint30); border: 1px solid var(--component-bd-color); border-right: 0; border-left-color: var(--color-bk-tint05); border-radius: 0; background-color: var(--color-bk-tint03); padding: 0 16px;
				}
				& > input { 
					position: fixed; top: -9999px; left: -9999px; 
					&:checked ~ label { color: var(--color-primary); }
				}
				&:first-of-type > label { border-radius: var(--component-edge) 0 0 var(--component-edge); border-left: 1px solid var(--component-bd-color); }
				&:last-of-type > label { border-radius: 0 var(--component-edge) var(--component-edge) 0; border-right: 1px solid var(--component-bd-color); }
				&:has(:checked) {
					& > label { border: 1px solid var(--color-primary); background-color: var(--color-wh); }
					& + .input > label { border-left: 0; }
				}
				&:has(:focus) > label { outline: var(--component-focus); outline-offset: -1px; box-shadow: 0 0 4px 0 var(--color-bk-tint20); }
				&:hover {
					& > label { color: var(--color-bk-tint60); background-color: var(--color-bk-tint05); }
					&:has(:checked) > label { background-color: var(--color-wh); }
				}
			}
		}
		
		&.period {
			gap: 4px;
			&::before { order: 2; flex: none; content: "~"; display: flex; justify-content: center; align-items: center; width: 8px; color: var(--color-bk-tint30); font-size: var(--font-size-12px); line-height: 0; text-align: center; }
			& .input { 
				order: 1; flex: none;
				& > input { width: 100%; }
				& + .input { order: 3; }
			}
		}
		
		&.phone {
			width: 100%; max-width: 320px;
			& > .select { flex: 1; }
			& > .input { 
				flex: 1;
				& > input { text-align: center; }
			}
		}
		
		&.email {
			width: 100%;
			& > .select { flex: none; }
			& > .input { flex: 1; }
		}
		
		&.address {
			width: 100%;
			& > .input {
				&:first-of-type { 
					flex: none; width: 120px;
					& > input { text-align: center; }
				}
				&:nth-of-type(2) { flex: 1; }
				&:nth-of-type(3) { flex: 2; }
			}
			&.col {
				& > .input {
					&:nth-of-type(2),
					&:nth-of-type(3) { flex: none; width: 100%; }
				}
			}
		}
	}
	
}/* @component */

@layer layout {
	
	.container { display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 100%; }
	.inner { width: 100%; max-width: var(--base-inner); padding: 0 var(--base-inner-padding); margin: 0 auto; }
	
	
	/* title */
	.title { 
		display: inline-flex; justify-content: flex-start; align-items: center; color: var(--color-bk-tint80); line-height: 1.3; text-align: left;
		&:is(h1) { font-size: clamp(var(--font-size-32px), var(--vw-40px), var(--font-size-40px)); font-weight: var(--font-weight-lighter); }
		&:is(h2) { font-size: clamp(var(--font-size-24px), var(--vw-32px), var(--font-size-32px)); font-weight: var(--font-weight-light); }
		&:is(h3) { font-size: var(--font-size-20px); font-weight: var(--font-weight-normal); }
		&:is(h4) { font-size: var(--font-size-16px); font-weight: var(--font-weight-medium); }
		&:is(h5) { font-size: var(--font-size-15px); font-weight: var(--font-weight-bold); }
		&:is(h6) { font-size: var(--font-size-13px); font-weight: var(--font-weight-bold); }
	}
	
	
	/* HEADER */
	header.header {
		--size-top : 40px;
		--size-btm : 80px;
		--size-dim : 160px;
		position: sticky; top: -40px; left: 0; right: 0; z-index: 500; width: 100%; border-bottom: 1px solid var(--color-primary); background-color: var(--color-wh); transition: all 0.3s;
		&::before { position: absolute; top: 40px; left: 0; right: 0; content: ""; display: block; width: 100%; height: 1px; background-color: var(--color-bk-tint05); }
		&::after { position: absolute; top: 100%; left: 0; right: 0; content: ""; display: block; width: 100%; height: 0; border-bottom: 1px solid var(--color-primary); background-color: #f8f8f8; box-shadow: var(--box-shadow-min); transition: height 0.3s; }
		
		& > .inner { 
			display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0 var(--base-inner-padding); height: 100%; 
			& > .navs { justify-content: space-between; width: 100%; height: var(--size-top); }
			& > .logo { flex: none; height: var(--size-btm); }
			& > .btns { 
				flex: auto; justify-content: flex-end; gap: clamp(4px, var(--vw-8px), 8px); height: var(--size-btm); 
				& > .finder {
					& .input {
						width: 240px;
						& > input { border-color: transparent; background-color: var(--color-secondary-tint07); }
					}
				}
			}
		}
		
		/* 글로벌메뉴 */
		& .gnb { 
			flex: none; display: flex; height: var(--size-btm);
			& > ul { 
				display: inline-flex; align-items: stretch;
				& > li { 
					flex: none; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
					& > .menu { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: var(--color-bk-tint80); font-size: var(--font-size-16px); font-weight: var(--font-weight-medium); text-align: center; white-space: nowrap; line-height: 1; padding: 0 clamp(8px, var(--vw-16px), 16px); }
					& > .drop { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; justify-content: center; overflow: clip; width: var(--base-inner); height: 0; opacity: 0; padding: 0 var(--base-inner-padding); transition: height 0.3s; }
					&:hover {
						& > .menu { color: var(--color-primary); }
						& > .drop { height: var(--size-dim); opacity: 1 !important; }
					}
					&.my { display: none; }
					&.on > .menu { 
						position: relative; color: var(--color-primary); 
						&::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: block; width: 15px; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-primary-tint20); animation: dot-blink 1s infinite; }
						&::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: block; width: 7px; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--color-bk-tint05); background-color: var(--color-primary); }
					}
					
				}
			}
			& > .navs { display: none; }
		}
		&:not(.sitemap):has(.menu:not(.ico):focus, .linktxt:focus, .gnb > ul:hover) {
			&::after { height: var(--size-dim); }
			& .menu:focus + .drop,
			& .gnb > ul > li:has(*:focus-within) > .drop { height: var(--size-dim); opacity: 1; }
		}
		
		/* 사이트맵 */
		&.sitemap { 
			position: fixed; top: 0; bottom: 0; height: 100%; overflow: hidden scroll; border-bottom: 0;
			&::after { display: none; }
			& > .inner { order: 1; height: auto; }
			& .gnb { 
				order: 2; flex-direction: column; width: 100%; height: auto; padding-bottom: var(--base-inner-padding); 
				& > ul {
					flex-direction: column; width: 100%;
					& > li {
						width: 100%; justify-content: flex-start; align-items: flex-start; border-top: 1px dashed var(--color-bk-tint10); padding: clamp(8px, var(--vw-16px), 16px) 0 var(--base-inner-padding) 0;
						& > .menu { width: auto; height: 40px; }
						& > .drop { position: static; width: 100%; height: auto; transform: none; transition: 0; padding: 0; opacity: 1; }
						&.my { display: flex; }
						&.on > .menu { 
							&::before,
							&::after { top: 4px; left: 4px; }
						}
					}
				}
				& > .navs { display: flex; justify-content: space-between; width: 100%; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: clamp(8px, var(--vw-16px), 16px) clamp(16px, var(--vw-24px), 24px); }
			}
			& article.article.submenu:has(.menulist) {
				align-items: flex-start;
				& .head { width: 320px; }
			}
		}
	}
	@keyframes dot-blink { from { width: 7px; opacity: 1; } to { width: 40px; opacity: 0; } }

	
	/* MAIN */
	main.main { 
		flex: auto; overflow: clip;
		& > .inner { padding: var(--base-inner-padding); }
		& > section.section {
			& .heading > .inner { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: clamp(16px, var(--vw-24px), 24px) 0; padding: var(--base-inner-padding); padding-bottom: 0; }
			& .content > .inner { 
				padding: var(--base-inner-padding);
			}
		}
		&:not(.home) {
			& > section.section > .heading {
				position: relative;
				&::before { position: absolute; top: -25%; right: 10%; transform: scale(2); z-index: -1; content: ""; width: 240px; aspect-ratio: 1; border-radius: 50%; border: 32px solid var(--color-secondary-tint03); }
				&::after { position: absolute; top: -100%; left: 10%; transform: scale(1.2); z-index: -1; content: ""; width: 240px; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-secondary-tint03); }
				& > .inner {
					&::before { position: absolute; top: 40%; right: 35%; z-index: -1; content: ""; width: 80px; aspect-ratio: 1; border-radius: 50%; background-color: var(--color-secondary-tint03); box-shadow: -1100px 0 0 var(--color-secondary-tint03); }
					&::after { position: absolute; top: 30%; left: 30%; z-index: -1; content: ""; width: 180px; aspect-ratio: 1; border-radius: 50%; border: 32px solid var(--color-secondary-tint03); }
				}
			}
		}
	}
	
	
	/* SECTION */
	section.section { 
		display: flex; flex-direction: column; 
		& .heading { 
			display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
			& .path { 
				flex: none; width: 100%;
				& > span:last-of-type { color: var(--color-bk-tint80); font-weight: var(--font-weight-medium); }
			}
			& .linktxt { 
				color: var(--color-bk-tint50); font-size: var(--font-size-11px); font-weight: var(--font-weight-medium); line-height: 1; text-underline-offset: 3px;
				&:hover { color: var(--color-bk); }
			}
			& .btns { 
				flex: auto; justify-content: flex-end; 
				& > .btn.notxt { 
					border-radius: 50%; background-color: var(--color-bk-tint05); 
					&:hover { background-color: var(--color-bk-tint10); }
				}
			}
			& .title { min-height: 40px; }
			& .item {
				width: 100%; flex-wrap: nowrap;
				& .image.biz { 
					flex: none;
					width: auto; border-radius: 50%; background: var(--color-wh); box-shadow: var(--box-shadow-min);
					&::before { background-color: var(--color-wh); }
					& > img { box-shadow: var(--box-shadow-min); }
				}
				& .wrap { gap: 4px 16px; }
				& .btns { flex: none; }
			}
		}
		& .fixed { 
			position: sticky; top: 80px; z-index: 400; padding-top: var(--base-inner-padding); 
			& .item { 
				width: 100%; border-radius: var(--box-edge-min); border: 1px solid var(--color-secondary-tint20); background-color: color-mix(in oklab, var(--color-secondary) 5%, var(--color-wh) 70%); padding: clamp(8px, var(--vw-16px), 16px); backdrop-filter: blur(4px); box-shadow: var(--box-shadow-min); 
				& .btn.menu {
					background-color: var(--color-secondary-tint05);
					&::before { background: url("../images/icon/ico_menu_minihome.svg") center 50%/24px no-repeat; }
					&.on::before { background-image: url("../images/icon/ico_menu_minihome_off.svg"); }
					&:hover { background-color: var(--color-primary-tint10); }
				}
			}
			& .jumping {
				position: fixed; left: var(--base-inner-padding); top: 50%; transform: translateY(-50%); z-index: 400; transition: all 0.3s;
				& .navs { 
					flex: auto; display: block; width: 100%;
					& .nav { 
						justify-content: flex-start; color: var(--color-wh); font-size: var(--font-size-10px); text-align: left; border-radius: 100px; background-color: var(--color-bk-tint50); padding: 0 clamp(16px, var(--vw-16px), 24px); backdrop-filter: blur(4px); box-shadow: var(--box-shadow-min); transform: translateX(-1px);
					}
					& > ul { 
						position: relative; flex-direction: column; align-items: flex-start; flex-wrap: nowrap;  
						&::before { position: absolute; left: 0; top: 16px; bottom: 16px; content: ""; display: block; width: 2px; height: auto; background-color: color-mix(in oklab, var(--color-primary) 20%, var(--color-wh)); box-shadow: 0 0 0 2px var(--color-wh); }
						& > li { 
							position: relative; gap: 0; padding-left: clamp(16px, var(--vw-16px), 24px);
							&::before { content: ""; display: block; width: 0; height: 0; border: 3px solid transparent; border-right: 5px solid var(--color-bk-tint50); }
							&::after { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-wh); }
							&:hover {
								&::before { border-right-color: var(--color-bk); }
								& .nav:hover { background-color: var(--color-bk); }
							}
						}
					}
				}
				&.off { left: -360px; }
			}
		}
		& .lnb { 
			position: sticky; top: 80px; left: 0; right: 0; z-index: 400; display: block; width: 100%; height: 56px; border-top: 1px solid var(--color-bk-tint05); border-bottom: 1px solid var(--color-bk-tint05); background-color: var(--color-wh-tint50); backdrop-filter: blur(8px); margin-top: clamp(16px, var(--vw-24px), 24px);
			& > .inner { height: 100%; font-size: 0; }
			& .menu { 
				display: flex; justify-content: center; align-items: center; height: 100%; color: var(--color-bk-tint60); font-size: var(--font-size-13px); font-weight: var(--font-weight-medium); text-align: center; line-height: 0; white-space: nowrap; border-bottom: 3px solid transparent; padding-top: 3px;
				&:hover { color: var(--color-bk); }
				&.on { color: var(--color-primary); font-weight: var(--font-weight-bold); border-bottom-color: var(--color-primary); }
			}
			& ul { 
				display: inline-flex; align-items: stretch; gap: clamp(16px, var(--vw-24px), 24px); height: 100%;
				& > li { 
					position: relative; display: inline-flex; align-items: stretch; 
					& > ul { 
						position: absolute; top: 100%; left: 0; display: none; height: auto; border-radius: var(--box-edge-min); background-color: var(--color-secondary); padding: clamp(8px, var(--vw-16px), 16px) clamp(16px, var(--vw-24px), 24px); box-shadow: var(--box-shadow-min);
						& > li { 
							display: block; width: 100%;
							& > .menu { 
								justify-content: flex-start; height: 32px; color: var(--color-wh-tint70); font-size: var(--font-size-12px); 
								&::before { display: none; }
								&:hover { color: var(--color-wh); }
							}
						}
					}
					&:has(ul):hover {
						& > .menu::before { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: ""; display: block; width: 0; height: 0; border: 7px solid transparent; border-bottom-color: var(--color-secondary); }
						& > ul { display: block; }
					}
				}
			}
		}
		& .content { 
			flex: auto; 
			& > * { padding-top: 0; }
		}
	}
	
	
	/* ARTICLE */
	article.article {
		display: inline-flex; flex-direction: column; align-items: stretch; width: 100%;
		& .head { 
			flex: none; display: flex; justify-content: flex-start; align-items: center; gap: clamp(4px, var(--vw-8px), 8px); width: 100%; 
			& > .title { flex: none; white-space: nowrap; 
											& > .logo img
											{
					max-height : 25px;
					max-width : 100px;											
					padding-left: 12px;											
											}}
			& > .btns { flex: auto; justify-content: flex-end; }
			& > .field { flex: auto; justify-content: flex-end; padding: 0; }
			& > .sumtxt { min-height: var(--component-size); }
			& > .btn.tune { display: none; }
		}
		& .body { 
			flex: auto; overflow: hidden auto; width: 100%; height: 100%; 
			&:has(.scroll) { overflow: visible; }
		}
		& .foot { 
			flex: none; display: flex; justify-content: center; align-items: center; width: 100%; 
			& > .btns { 
				flex: 1; width: 100%; 
				&:first-of-type { justify-content: flex-start; }
				&:last-of-type { justify-content: flex-end; }
				&:only-of-type { justify-content: center; }
			}
		}
		
		/* 서브메뉴 */
		&.submenu { 
			flex-direction: row; align-items: flex-start; align-items: center; gap: var(--base-inner-padding); padding: 0 clamp(8px, var(--vw-16px), 16px);
			& .linktxt { align-items: center; height: 24px; font-size: var(--font-size-11px); font-weight: var(--font-weight-medium); }
			& .head {
				flex-direction: column; align-items: flex-start; gap: clamp(4px, var(--vw-8px), 8px); width: auto;
				& > .title { color: var(--color-bk-tint60); font-size: var(--font-size-24px); font-weight: var(--font-weight-light); line-height: 1.4; max-width: 450px; white-space: pre-wrap;}
			}
			& .body { display: inline-flex; overflow: visible; width: auto; height: auto; }
			& .menulist {
				display: inline-flex; flex-wrap: wrap; gap: clamp(24px, var(--vw-32px), 32px) 0; width: 100%;
				& > li { 
					display: flex; flex-direction: column; align-items: flex-start; width: calc(100% / 5); padding: 0 clamp(16px, var(--vw-24px), 24px); border-left: 4px solid var(--color-bk-tint05); 
					& > .menu { 
						display: flex; align-items: center; height: var(--component-size); color: var(--color-bk-tint80); font-size: var(--font-size-14px); font-weight: var(--font-weight-medium); line-height: 1; text-align: left; word-break: keep-all;
						&:hover { text-decoration: underline 1px; text-underline-offset: 4px; }
					}
					& > .menu + p { color: var(--color-bk-tint40); font-size: var(--font-size-12px); font-weight: var(--font-weight-normal); line-height: 1.4; text-align: left; }
					& > ul {
						display: flex; flex-direction: column; width: 100%;
						& > li {
							display: block; width: 100%;
							& > .menu { 
								display: flex; align-items:  center; font-weight: var(--font-weight-medium); width: 100%; height: 100%; color: var(--color-bk-tint70); font-size: var(--font-size-10px); /*font-weight: var(--font-weight-normal); */
								&:hover { color: var(--color-bk); }
							}
						}
					}
					&.on > .menu {
						& > span { text-decoration: underline 1px; text-underline-offset: 4px; }
						& > strong { color: var(--color-primary); }
						& > b { color: var(--color-bk-tint80); }
					}
					& > .linktxt { margin-top: 8px; }
				}
			}
		}
		
		
		
		/* 개인화 */
		&.personal {
			max-width: 360px; border-radius: var(--box-edge-max); border: 4px solid var(--color-wh); background-color: var(--color-wh-tint50); background-color: var(--color-secondary-tint03); padding: var(--base-inner-padding); box-shadow: 0 0 4px var(--color-bk-tint05) inset, var(--box-shadow-max);
			& .head { justify-content: center; height: 80px; }
			& .body { overflow: visible; }
			& .field { 
				justify-content: flex-start; padding: 0;
				& .input.notxt { width: 100%; box-shadow: var(--box-shadow);
					& > input { border-color: transparent; }
					& > label { text-shadow: 0 0 4px var(--color-wh); }
				}
				& .input:not(.notxt) > label { text-shadow: 0 0 4px var(--color-wh); }
				& .btn { width: 100%; }
			}
		}
		
		/* 헬프데스크 */
		&.helpdesk {
			flex-direction: row; padding: clamp(8px, var(--vw-24px), 24px); 
			& .head { 
				flex-direction: column; justify-content: center; width: 80px;
				&::before { content: ""; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--color-primary-tint10) url("../images/icon/ico_help.svg") 50% 50%/32px no-repeat; }
			}
			& .body { display: inline-flex; align-items: center; width: calc(100% - 80px); padding-left: clamp(16px, var(--vw-24px), 24px); }
			& .note { 
				flex: none; display: inline-flex; align-items: center; gap: clamp(8px, var(--vw-24px), 24px); width: 100%;
				& .linktxt { font-size: var(--font-size-12px); }
			}
		}
		
		/* 상세 */
		&.view {
			& .head { 
				& > .item { width: 100%; min-height: var(--vw-64px); border-radius: var(--box-edge); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); padding: clamp(8px, var(--vw-16px), 16px) clamp(8px, var(--vw-24px), 24px); }
			}
			& .body { 
				& > .item { 
					width: 100%; gap: var(--vw-40px) var(--vw-8px); padding: var(--vw-40px) var(--vw-24px); 
					&.answer { 
						gap: var(--vw-16px) var(--vw-8px); border-radius: var(--box-edge); background-color: var(--color-secondary-tint05); padding: var(--vw-32px) var(--vw-24px); margin: clamp(4px, var(--vw-8px), 8px) 0;
						& .state { margin-left: auto; }
						& .field { 
							justify-content: flex-start; padding: 0; 
							& ~ .btns.br { padding-top: 8px; }
						}
					}
				}
                                & > .company {
                                        display: flex; gap: var(--vw-40px) 0; width: 100%; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: var(--vw-40px); margin-bottom: 8px;
                                        & .item {
                                                flex-direction: column; justify-content: center; width: 30%; padding-right: var(--vw-40px);
                                                & .title { flex: none; }
                                        }
                                        & .note {
                                                flex: auto; padding: 0; width: 70%;
                                                & > ul { gap: 8px; border-left: 4px solid var(--color-bk-tint05); padding-left: clamp(8px, var(--vw-16px), 16px); }
                                        }
                                        & .btns { flex: none; align-self: flex-end; }
                                }				
			}
		}
		
		/* 작성 */
		&.edit {
			& .head { 
				& > .item { width: 100%; border-radius: var(--box-edge); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); padding: clamp(8px, var(--vw-16px), 16px) clamp(8px, var(--vw-24px), 24px); }
			}
		}
		
		/* 대화창 */
		&.dialogue {
			& .head { 
				& > .item { width: 100%; border-radius: var(--box-edge); border: 1px solid var(--color-secondary-tint20); background-color: var(--color-wh); padding: clamp(8px, var(--vw-16px), 16px) clamp(8px, var(--vw-24px), 24px); }
			}
			& .body {
				& > .bubble {
					display: flex; flex-direction: column; gap: clamp(16px, var(--vw-24px), 32px); width: 100%; height: 100%; border-radius: var(--box-edge); background-color: var(--color-bk-tint03); padding: clamp(16px, var(--vw-32px), 32px); margin: clamp(4px, var(--vw-8px), 8px) 0;
					& > .item {
						flex-wrap: nowrap; flex-direction: column; justify-content: flex-start; align-items: flex-start;
						& .wrap { width: auto; max-width: 80%; border: 1px solid var(--color-bk-tint07); border-radius: 0 var(--box-edge-max) var(--box-edge-max) var(--box-edge-max); background-color: var(--color-wh); padding: clamp(16px, var(--vw-32px), 32px); }
						&:has(.image.biz) {
							position: relative; padding-left: clamp(56px, var(--vw-80px), 80px);
							& .image.biz { 
								position: absolute; left: 0; top: 0; width: 48px; height: 48px; 
								&::before { background-size: 32px; background-color: var(--color-wh); }
							}
						}
						&:has(.image.bot) {
							position: relative; padding-left: 48px;
							& .image.bot { 
								position: absolute; left: 0; top: -10px; width: 40px; height: 40px; border-radius: 50%; background: var(--color-secondary); box-shadow: var(--box-shadow-min);
								&::before { content: ""; display: block; width: 24px; height: 24px; background: url("../images/icon/quick_icon04.svg") center 50%/24px no-repeat; filter: invert(100%); }
							}
						}
						&.me { 
							align-items: flex-end;
							& .wrap { border-color: var(--color-primary-tint20); border-radius: var(--box-edge-max) 0 var(--box-edge-max) var(--box-edge-max); background-color: var(--color-primary-tint10); }
						}
					}
				}
			}
		}

		/* 상품 */
		&.product {
			position: relative; flex-direction: row; gap: var(--base-inner-padding); align-items: flex-start; border-radius: var(--box-edge); padding: var(--vw-40px);  background-color: var(--color-bk-tint03);
			& .head { 
				align-self: stretch; width: calc(100% - 360px - var(--base-inner-padding));
				& .imageview { 
					position: relative; overflow: hidden; width: 100%; height: 100%; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint20);  background-color: var(--color-bk-tint03);
					& > img {width:100%; display: block; object-fit: cover; }
					& > .btn { 
						position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
						&.prev { left: 0; border-radius: 0 var(--component-edge) var(--component-edge) 0; }
						&.next { right: 0; border-radius: var(--component-edge) 0 0 var(--component-edge); }
					}
				}
			}
			& .body { 
				display: inline-flex; flex-direction: column; gap: clamp(16px, var(--vw-24px), 24px); width: 360px; padding-bottom: calc(80px + clamp(16px, var(--vw-24px), 24px));
				& .item { 
					padding: 0; 
					& .image.biz { width: 48px; height: 48px; }
				}
				& .note {
					padding: 0;
					& > ul { gap: 8px; border-left: 4px solid var(--color-bk-tint05); padding-left: clamp(8px, var(--vw-16px), 16px); }
				}
				& .btns { 
					width: 100%; 
					& .btn.secondary { flex: auto; }
				}
			}
			& .foot {
				position: absolute; right: var(--vw-40px); bottom: var(--vw-40px); justify-content: flex-start; width: 360px; height: 80px; border-radius: var(--box-edge-min); background-color: var(--color-bk-tint03); padding: 8px;
				& .imagelist {
					display: flex; gap: clamp(4px, var(--vw-8px), 8px); height: 100%;
					& > a { 
						flex: none; display: block; overflow: hidden; height: 100%; aspect-ratio: 1; border-radius: var(--box-edge-min); border: 1px solid var(--color-bk-tint10); background-color: var(--color-bk-tint03); 
						& > img { display: block; height: 100%; object-fit: cover; opacity: 0.5; }
						&:hover { 
							box-shadow: var(--box-shadow-min); 
							& > img { opacity: 1; }
						}
						&.on { 
							border-color: var(--color-bk); box-shadow: var(--box-shadow-min); 
							& > img { opacity: 1; }
						}
					}
				}
			}
		}
		
	}
	
	
	/* FOOTER */
	footer.footer { 
		--width-help : 440px;
		--width-select : 240px;
		border-top: 1px solid var(--color-bk-tint80); background-color: var(--color-bk-tint80); padding: var(--base-inner-padding) 0;
		& > .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: clamp(16px, var(--vw-24px), 24px) 0; }
		& .navs { 
			order: 1; flex: auto; width: calc(100% - var(--width-select)); 
			& > ul > li::after { background-color: var(--color-wh-tint20); }
			& .nav {
				color: var(--color-wh-tint60); text-shadow: 0 0 4px var(--color-bk-tint50); 
				& > strong { color: var(--color-primary-tint80); }
				&:hover {
					color: var(--color-wh);
					& > strong { color: var(--color-primary); }
				}
			}
		}
		& .select { 
			order: 2; flex: none; width: var(--width-select); 
			& > select { color: var(--color-wh-tint60); border-color: transparent; background-color: var(--color-bk-tint80); }
		}
		& article.helpdesk { 
			order: 4; width: var(--width-help); border-radius: var(--box-edge-max); border: 1px solid var(--color-secondary-tint30); background-color: var(--color-secondary-tint30); box-shadow: var(--box-shadow); 
			& .head {
				border-radius: 50%; background-color: var(--color-secondary-tint50);
				&::before { filter: invert(100%); background-color: transparent; }
			}
			& .note > ul > li { 
				color: var(--color-wh-tint80); text-shadow: 0 0 4px var(--color-bk-tint50);
				&::before { background-color: var(--color-wh); }
			}
			& a { 
				color: var(--color-primary-tint80); font-weight: var(--font-weight-bold);
				&:hover { color: var(--color-primary); }
			}
		}
		
		& .foodpolis {
			order: 3; flex: auto; position: relative; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: clamp(8px, var(--vw-16px), 16px); width: calc(100% - var(--width-help)); container-name: foodpolis; container-type: inline-size;
			& .logo.ci::before { background-image: url("../images/icon/logo_foodpolis_foot.png"); }
			& .contact { 
				display: flex; flex-wrap: wrap;
				& > span {
					color: var(--color-wh-tint70); font-size: var(--font-size-13px); font-weight: var(--font-weight-normal); line-height: 1.4; word-break: keep-all;
					&::after { content: "/"; color: var(--color-wh-tint20); font-weight: var(--font-weight-normal); padding: clamp(4px, var(--vw-8px), 8px); }
					&:last-of-type::after { display: none; }
				}
			}
			& .copyright { color: var(--color-wh-tint30); font-size: var(--font-size-12px); font-weight: var(--font-weight-medium); letter-spacing: 1px; line-height: 1.2; }
		}
		@container foodpolis (width < 720px) {
			.contact > span { 
				&:first-of-type { display: none; }
			}
		}
		@container foodpolis (width < 480px) {
			.contact > span {
				width: 100%;
				&::after { display: none; }
			}
		}
	}
	
	/* QUICK */
	aside.quick {
		position: fixed; bottom: calc(var(--base-inner-padding) + 64px); right: var(--base-inner-padding); z-index: 500;
		& > .btns { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; flex-direction: column; border-radius: 100px; width: clamp(48px, var(--vw-64px), 64px); height: clamp(48px, var(--vw-64px), 64px); opacity: 0; transition: all 0.3s; }
		&:has(.icon0.on) {
			& > .btns { height: auto; overflow: visible; padding-bottom: calc(clamp(48px, var(--vw-64px), 64px) + clamp(4px, var(--vw-8px), 8px)); opacity: 1; }
		}
	}
	
}/* @layout */

@layer basic {
	
	* { padding: 0; margin: 0; border: 0; box-sizing: border-box; vertical-align: baseline; transition-behavior: allow-discrete; }
	::before, ::after { box-sizing: border-box; transition-behavior: allow-discrete; }
	html { width: 100%; height: 100%; font-size: var(--base-font-size); -webkit-text-size-adjust: none; scroll-behavior: smooth; }
	body { width: 100%; min-width: var(--base-min-width); height: 100%; min-height: var(--base-min-height); overflow: hidden auto; font: var(--font-weight-normal) var(--font-size-15px)/1.8 var(--base-font-family); background: var(--base-background); -webkit-overflow-scrolling: touch; }
	i, em, address { color: inherit; font-style: normal; }
	input, select, textarea, button { color: inherit; font-family: inherit; border-radius: 0; box-shadow: none; appearance: none; }
	input[type=checkbox], input[type=radio] { clip: auto; clip-path: none; }
	select::-ms-expand { display: none; }
	textarea { resize: none; }
	a { color: inherit; text-decoration: none; cursor: pointer; }
	menu, li { list-style: none; }
	button { font-family: inherit; cursor: pointer; background: none; }
	caption { position: absolute; width: 0; height: 0; font-size: 0; visibility: hidden; clip: rect(0 0 0 0); }
	table { border-spacing: 0; border-collapse: separate; empty-cells: show; }
	mark { background: none; }
	iframe { width: 100%; aspect-ratio: 16/9; border: 0; }
	img { max-width: 100%; }
	video { max-width: 100%; }


	:root {

		interpolate-size: allow-keywords;

		/***** Sizes *****/
		--font-size-40px: 2.5rem;
		--font-size-32px: 2rem;
		--font-size-24px: 1.5rem;
		--font-size-20px: 1.25rem;
		--font-size-18px: 1.125rem;
		--font-size-16px: 1rem;
		--font-size-15px: 0.9375rem;
		--font-size-14px: 0.875rem;
		--font-size-13px: 0.8125rem;
		--font-size-12px: 0.75rem;
		--font-size-11px: 0.6875rem;
		--font-size-10px: 0.625rem;
	
		--font-weight-thin    : 100;
		--font-weight-lighter : 200;
		--font-weight-light   : 300;
		--font-weight-normal  : 400;
		--font-weight-medium  : 500;
		--font-weight-bold    : 600;
		--font-weight-bolder  : 700;
		--font-weight-heavy   : 800;
		--font-weight-black   : 900;
	
		--vw-8px  : 0.42vw;
		--vw-16px : 0.83vw;
		--vw-24px : 1.25vw;
		--vw-32px : 1.67vw;
		--vw-40px : 2.08vw;
		--vw-64px : 3.33vw;
		--vw-80px : 4.17vw;
		--vw-160px : 8.33vw;
		--vw-320px : 16.67vw;
		--vw-480px : 25.00vw;
	
	
	
		/***** Base *****/
		--base-inner: 1440px;
		--base-inner-padding: clamp(16px, var(--vw-40px), 5%);
	
		--base-min-width: 0;
		--base-min-height: 0px;
	
		--base-font-size: 22px;
		--base-font-family: 'S-Core Dream', 'Malgun Gothic', sans-serif;
	
		--base-background: var(--color-wh);
		
		
		
		/***** Component *****/
		/* height             */--component-size: 48px;
		/* border-radius      */--component-edge: 3px;
		/* font-size          */--component-font: var(--font-size-12px);
		/* background-color   */--component-bg-color: var(--color-wh);
		/* border-color       */--component-bd-color: var(--color-bk-tint20);
		/* border-color:hover */--component-bd-color-hover: var(--color-bk-tint50);
		/* outline            */--component-focus: 1px solid var(--color-secondary);
	
		
		
		
		/***** Color *****/
		/* primary */
		--color-primary:#668000;
		--color-primary-tint03: rgb(from var(--color-primary) r g b / 3%);
		--color-primary-tint05: rgb(from var(--color-primary) r g b / 5%);
		--color-primary-tint07: rgb(from var(--color-primary) r g b / 7%);
		--color-primary-tint10: rgb(from var(--color-primary) r g b / 10%);
		--color-primary-tint20: rgb(from var(--color-primary) r g b / 20%);
		--color-primary-tint30: rgb(from var(--color-primary) r g b / 30%);
		--color-primary-tint40: rgb(from var(--color-primary) r g b / 40%);
		--color-primary-tint50: rgb(from var(--color-primary) r g b / 50%);
		--color-primary-tint60: rgb(from var(--color-primary) r g b / 60%);
		--color-primary-tint70: rgb(from var(--color-primary) r g b / 70%);
		--color-primary-tint80: rgb(from var(--color-primary) r g b / 80%);
		--color-primary-tint90: rgb(from var(--color-primary) r g b / 90%);
	
	
		/* secondary */
		--color-secondary: #175B37;
		--color-secondary-tint03: rgb(from var(--color-secondary) r g b / 3%);
		--color-secondary-tint05: rgb(from var(--color-secondary) r g b / 5%);
		--color-secondary-tint07: rgb(from var(--color-secondary) r g b / 7%);
		--color-secondary-tint10: rgb(from var(--color-secondary) r g b / 10%);
		--color-secondary-tint20: rgb(from var(--color-secondary) r g b / 20%);
		--color-secondary-tint30: rgb(from var(--color-secondary) r g b / 30%);
		--color-secondary-tint40: rgb(from var(--color-secondary) r g b / 40%);
		--color-secondary-tint50: rgb(from var(--color-secondary) r g b / 50%);
		--color-secondary-tint60: rgb(from var(--color-secondary) r g b / 60%);
		--color-secondary-tint70: rgb(from var(--color-secondary) r g b / 70%);
		--color-secondary-tint80: rgb(from var(--color-secondary) r g b / 80%);
		--color-secondary-tint90: rgb(from var(--color-secondary) r g b / 90%);
	
		
		/* white */
		--color-wh: #fff;
		--color-wh-tint03: rgb(from var(--color-wh) r g b / 3%);
		--color-wh-tint05: rgb(from var(--color-wh) r g b / 5%);
		--color-wh-tint07: rgb(from var(--color-wh) r g b / 7%);
		--color-wh-tint10: rgb(from var(--color-wh) r g b / 10%);
		--color-wh-tint20: rgb(from var(--color-wh) r g b / 20%);
		--color-wh-tint30: rgb(from var(--color-wh) r g b / 30%);
		--color-wh-tint40: rgb(from var(--color-wh) r g b / 40%);
		--color-wh-tint50: rgb(from var(--color-wh) r g b / 50%);
		--color-wh-tint60: rgb(from var(--color-wh) r g b / 60%);
		--color-wh-tint70: rgb(from var(--color-wh) r g b / 70%);
		--color-wh-tint80: rgb(from var(--color-wh) r g b / 80%);
		--color-wh-tint90: rgb(from var(--color-wh) r g b / 90%);
		
		
		/* black */
		--color-bk: #000;
		--color-bk-tint03: rgb(from var(--color-bk) r g b / 3%);
		--color-bk-tint05: rgb(from var(--color-bk) r g b / 5%);
		--color-bk-tint07: rgb(from var(--color-bk) r g b / 7%);
		--color-bk-tint10: rgb(from var(--color-bk) r g b / 10%);
		--color-bk-tint20: rgb(from var(--color-bk) r g b / 20%);
		--color-bk-tint30: rgb(from var(--color-bk) r g b / 30%);
		--color-bk-tint40: rgb(from var(--color-bk) r g b / 40%);
		--color-bk-tint50: rgb(from var(--color-bk) r g b / 50%);
		--color-bk-tint60: rgb(from var(--color-bk) r g b / 60%);
		--color-bk-tint70: rgb(from var(--color-bk) r g b / 70%);
		--color-bk-tint80: rgb(from var(--color-bk) r g b / 80%);
		--color-bk-tint90: rgb(from var(--color-bk) r g b / 90%);
		
		/***** etc *****/
		--focus-outline: 2px dotted green;
		--focus-offset: -2px;
	
		--font-family-code: 'Consolas', 'monospace', sans-serif;
	
		--box-edge: 8px;
		--box-edge-min: 4px;
		--box-edge-max: 16px;
		
		--box-shadow: 0 0 8px var(--color-bk-tint05);
		--box-shadow-min: 0 2px 4px var(--color-bk-tint10);
		--box-shadow-max: 0 4px 8px var(--color-bk-tint10);
	
	}
	
	/* scrollbar */
	::-webkit-scrollbar { width: 16px; height: 16px; }
	::-webkit-scrollbar-track { background-color: transparent; }
	::-webkit-scrollbar-thumb { border: 4px solid transparent; border-radius: 100px; background-color: var(--color-bk-tint10); background-clip: padding-box; }  
	::-webkit-scrollbar-thumb:hover { background-color: var(--color-bk-tint20); }
	::-webkit-scrollbar-button { display: none; }
	::-webkit-scrollbar-corner { background-color: transparent; }
	
	/* outline */
	:focus { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
	
	/* important */
	.hide { display: none !important; }

	.fL { float: left !important; }
	.fR { float: right !important; }

	.tR { text-align: right !important; }
	.tL { text-align: left !important; }
	.tC { text-align: center !important; }

	.fS { justify-content: flex-start !important; }
	.fC { justify-content: center !important; }
	.fE { justify-content: flex-end !important; }
	
	.mL { margin-left: auto !important; }
	.mR { margin-right: auto !important; }

	.noB { border: none !important; }
	.noP { padding: 0 !important; }
	.noM { margin: 0 !important; }
	.noG { gap: 0 !important; }
	
	.w80px { width: 80px !important; }
	.w100px { width: 100px !important; }
	.w120px { width: 120px !important; }
	.w160px { width: 160px !important; }

    .ui-datepicker {
        &>.ui-datepicker-header.mtz-monthpicker {
            padding: 5px !important;

            &>.mtz-monthpicker-year{
                font-size: 0.8rem;
                width: 100%;
                text-align: center;
                padding: 5px;
            }
        }
    }

    .no-scroll {
        overflow: hidden;
    }

    .datepicker-double .input {
        flex-grow: 1;
    }

    .datepicker-double{
        display: flex;
        width: 100%;
        gap: 0.2rem;
        align-items: center;
    }

    .datepicker-double .dash:before {
        display: flex;
        align-items: center;
        justify-content: center;
        content: "~";
    }

    .fields_list-top-button-container{
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 1rem;
    }
    .fields_list-top-button-container .fields_list{
        width: 100%;
    }

    .fields_list{
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
    }

    i.required{
        display: inline-flex;
        justify-content: center;
    }

    i.required:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 4px;
  border-radius: 50%;
  
  background-color: var(--color-primary);
  border: 1px solid var(--color-secondary);
    }

    .input {
        & > input {
            &.input-detail:is([type="checkbox"],[type="radio"]){
                opacity: 1 !important;
            }
            &.input-detail:not([type="checkbox"],[type="radio"]){
                opacity: 1 !important;
                border: none !important;
                background-color: inherit !important;
            }
        }
    }

    .select {
        & > select {
            &.input-detail {
                opacity: 1 !important;
            }
        }
    }


    @media screen and (max-width: 720px) {
        .fields_list-top-button-container{
            flex-direction: column;
        }
    }

}/* @basic */




.toast {
  position: fixed;
  bottom: 20px;
  right: 0%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transition: opacity .4s, transform .4s;
  z-index: 10001;
  pointer-events: none; 
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: auto; 
}

.heart {
  width: 24px;
  height: 24px;
  background: url("../images/icon/gpt_like.svg") center/contain no-repeat;
}