/*
@media all and (display-mode: standalone), (display-mode: fullscreen) {
  *, *:before, *:after {
    -webkit-user-select1: none;        
    -moz-user-select1: none; 
    -ms-user-select1: none; 
  }
}
*/

:root {
    --noon-font-max:28px;
	--terix-color-main:#d2378c;
	--trrix-color-main-in-dark:#fff;
	--terix-layout-header-height:50px;
	--terix-layout-quickbar-height:50px;
}

body.mobile {
	--terix-layout-quickbar-height:80px;
}

h1 {
    font-size:var(--noon-font-max);
    font-weight:600;
}

div {
    box-sizing:border-box; 
}

/*********** layout ****************/
.terix-frame {
	min-height:100vh;
	width:100%;
	container-type: inline-size;
	container-name:frame
}


.terix-frame > .terix-slider {
  min-height: 100vh;
  width: 100%;
  1overflow: hidden; /* sticky를 위해서 풀긴하는데 어떤 영향이 있을찌 */
   position: relative;
}

.terix-frame > .terix-slider > .terix-slider-wrapper {
	min-height:100vh;
	height:auto;
}

.terix-frame > .terix-slider > .terix-slider-wrapper > .terix-shell.terix-slider-item {
	min-height:100vh;
	overflow-y:visible;
	1padding:0px !important;
}

.terix-page { /* terix-shell-body */
	flex:1 0 auto;
}

.terix-page-toolbar > * {
	padding:4px 10px;
}

@media (max-width:600px) {
	.terix-shell .terix-page-toolbar {
		display:none !important;
	}

}


/*********** terix-shell ************/
.terix-shell {
	padding:0px;
}

.terix-shell > .terix-shell-prima {
	padding:20px;
	padding-top:calc(var(--terix-layout-header-height) + 20px);
}

.terix-shell > .terix-shell-prima[data-layout="full"] {
	padding:0px;
	padding-top:0px;calc(var(--terix-layout-header-height) + 20px);
}

.terix-shell > .terix-shell-prima[data-layout="header-space"] {
	padding:0px;
	padding-top:calc(var(--terix-layout-header-height));
}

.terix-shell > .terix-page {
	container-type:inline-size;
	container-name:page;
	padding:20px;
}

.terix-shell.case-frame > .terix-page {
	padding-top:calc(var(--terix-layout-header-height) + 20px);
}

.terix-shell.case-frame.has-prima > .terix-page {
	padding-top:20px;
}

.terix-shell.case-frame[data-layout="prima-space"] > .terix-page {
	padding-top:20px;
}

.terix-shell-footer {
  flex-shrink: 0;
}

.terix-shell > .terix-page > .terix-page-toolbar {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
	margin-bottom:15px;
	background:#f1f1f1;
	border-radius:5px;
	padding:6px 10px;

}

.terix-shell .terix-page-toolbar {
	1margin-top:20px;
	1margin-left:20px;
	1margin-right:20px;

	1display:flex;
}

@media (max-width:600px) {

}

.terix-shell[data-layout="full-page"] > .terix-page {
	padding:0px !important;
}

.terix-shell[data-layout="full-topp"] > .terix-page {
	padding:0px !important;
}

.terix-shell[data-layout="full-topp"] > .terix-page > .terix-page-content {
	padding:20px !important;
}

.terix-shell[data-layout="header-space"] > .terix-page {
	padding:0px !important;
}

.terix-shell[data-layout="full-page"] > .terix-page > .terix-page-toolbar {
	display:none;
}

.terix-shell[data-layout="header-space"] > .terix-page > .terix-page-toolbar {
	display:none;
}

/**** page header hide then tool show *******/
.terix-shell.terix-slider-item[data-layout="full-page"] .terix-shell-header .terix-page-tool
,.terix-shell.terix-slider-item[data-layout="header-space"] .terix-shell-header .terix-page-tool
,.terix-slider-header[data-layout="full-page"] .terix-shell-header .terix-page-tool
,.terix-slider-header[data-layout="header-space"] .terix-scell-header .terix-page-tool {
	display:block !important;
}


@media (max-width:600px) {
	
	.terix-shell.terix-slider-item .terix-page-toolbar [button=terix-menu-toggle] {
		display:inline-block;
	}

}


/*********** error-box *************/
.terix-error-box {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	min-height: 70vh;
	gap:25px;
}

.terix-error-box .icon {
	width:100px;
	height:100px;
}


/*********** section ****************/
.terix-section, section {
    position:relative;
}

.terix-section-content,
section > .section-inner {
    max-width:600px;
    margin:0 auto;
    padding:60px 0px;
    
}

.terix-body-phyton-controlled {
	max-width:1200px;
	padding-top:100px;
}

@media (max-width:640px) {
    .terix-section-content,
    section > .section-inner {
        padding:70px 20px;
    }
}


/******************* navigation *****************/

.terix-shell-header {
    position: fixed;
    background1: rgba(0, 0, 0, 0.4);
    color: #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
	top:0px;
    1padding: 12px 0px;
    width:100%;
    z-index:1000;
	height:var(--terix-layout-header-height);

}

.terix-shell-header i {
	font-size:20px;
	padding:3px 3px;
}

.terix-shell-header .terix-page-tool  i {
	font-size:20px;
	padding:3px 3px;
}

.terix-shell-header.light {
	color:#444;
}

.terix-shell-header > * {
  opacity: 0;
  transition1: opacity 0.01s ease-in;
}

/* 화면에 들어오면서 보여지게 될 때 */
body.ready .terix-shell-header > * {
  opacity: 1;
}

.terix-shell-header .site-name {
	display:none;
	text-decoration:none;
	color:inherit;
}

.terix-shell-header .shell-name {
	display:none;
}

.terix-header-menu {
  display: flex;
  gap: 15px;
  1flex:1;
}

.terix-header-menu a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  
}

.terix-shell-header [button=backward] {
	display:none;
}

@media (max-width:600px) {

	.terix-shell.forward .terix-shell-header .logo-icon,
	.terix-shell.forward .terix-shell-header .site-name,
	.terix-shell.forward .terix-shell-header [button=terix-menu-toggle]
	{
		display:none;
	}
		
	.terix-shell.forward .terix-shell-header .shell-name {
		display:block;
	}
	
    .terix-shell.forward .terix-shell-header .terix-header-menu {
        display:none;
    }
	
	.terix-shell-header .terix-header-menu .terix-menu-item:not(.pinned) {
		display:none;
	}
	
	.terix-shell-header [button=backward] {
		display:inline-block;
	}
}

.terix-shell-header > .left-side {
  display: flex;
  align-items: center;
  gap: 8px;
  1flex:1;
  padding:0px 20px;
}

.terix-shell-header > .right-side {
  display: flex;
  align-items: center;
  gap: 8px;
  1flex:1;
  padding:0px 20px;
}

.terix-shell-header .logo-icon {
  height: 28px;
  filter: brightness(0) invert(1);
  1margin-top:5px;
  display:inline-block;
  background-size:contain;
}

/* 중앙 메뉴 */
.terix-menu-item {
	text-decoration:none;
}

.terix-menu-item.selected {
	color:var(--terix-color-main);
}

.terix-shell-header.dark .terix-menu-item.selected {
	color:var(--trrix-color-main-in-dark);
}

.terix-menu-tree {
	background:rgba(255,0,0,0.3);
	position:absolute;
	top:var(--terix-layout-header-height);
	left:0px;
	right:0px;
}

.terix-menu-group[data-depth="2"] > .terix-menu-item {
	padding-left:20px;
}

.terix-menu-group[data-depth="3"] > .terix-menu-item {
	padding-left:40px;
}

.terix-menu-tree .terix-menu-group[data-depth="1"] {
  position: relative;
  display: none;
  padding: 10px;
}


/****************** page-tool ****************/
.terix-page-tool {
  position: relative;
  font-size: inherit; /* 텍스트 숨김 */
  cursor:pointer;
}

.terix-page-tool  i {
	font-size:18px;
	padding:3px 3px;
}

/*
.terix-page-tool::before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900;                   
  font-size: 20px;              
  display: inline-block;
  content: "";
  
}

.terix-page-tool[data-tool="search"]::before {
  content: "\f002"; 
}
.terix-page-tool[data-tool="append"]::before {
  content: "\f067"; 
}
*/

.terix-shell-header .terix-page-tool {
	display:none;
	font-size:0;
}

@media (max-width:600px) {

	.terix-shell-header .terix-page-tool {
		display:block;
		font-size:0;
	}
}

/****************** menu-style **************/
body[menu-type=left] .terix-menu-tree {
	 position:fixed;
	 top1:50px;
	 left:0px;
	 width:250px;
	 bottom:0px;
	 background:#eee;
	 overflowY:auto;
	 border-right:solid 1px #ccc;
}

/*** container *****/
body[menu-type=left] .terix-page,
body[menu-type=left] .terix-shell-footer {
	margin-left:250px;
}


@media (max-width:600px) {

	body[menu-type=left] > .terix-menu-tree {
		display:none;
	}

	body[menu-type=left] .terix-page,
	body[menu-type=left] .terix-shell-footer {
		margin-left:0px;
	}
}


/****************** overlay-menu *************/
.terix-overlay-popup {
    z-index:3000;
    1display:none;
    background:rgba(0,0,0,0.2);
    position:fixed;
    width:100vw;
    top:0px;var(--terix-layout-header-height);
    bottom:0px;
    right:0px;
    1display:none;
    1padding:50px 10px;
	
	transform: translateX(100%);   /* 오른쪽 밖에서 시작 */
	transition: transform 0.3s ease-out;
    1display:flex;
    1flex-direction:column;
	  display: flex;
	  justify-content: flex-end; /* 내부 콘텐츠 오른쪽 정렬 */
}

.terix-overlay-popup-inner {
    display:flex;
    flex-direction:column;
    height:100%;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
	width:80vw;
	background:#fff;
	
}

.terix-overlay-menu {
    padding:20px;
    flex:1;
}

body.popup-show .terix-overlay-popup {
	transform: translateX(0);  
}

.terix-frame {
  transition: transform 0.3s ease-out;
}

body.popup-show .terix-frame {
  transform: translateX(-80vw);
  transition: transform 0.3s ease-out;
}

.terix-overlay-menu a {
    text-decoration:none;
    font-size:16px;
    padding:6px 10px;
    cursor:pointer;
    display:block;
    color:#000;
    border-bottom:solid 1px #ddd;
    
}

.terix-overlay-popup .terix-overlay-header {
	flex:0 0 50px;
	display:flex;
	align-items:center;
	justify-content:end;
	padding:8px 15px;
}

.terix-overlay-popup .terix-overlay-header [button] {
	padding:6px;
}

.terix-overlay-popup .footer-partner {
    font-size:14px;
    font-weight:400;
}

.terix-overlay-popup .link-block {
    font-size:14px;
    font-weight:400;
}

/******************* footer *****************/
.terix-shell-footer {
  background-color: #f2f2f2;
  padding: 40px 20px;
}

.terix-shell-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}


/************* ani and sticky *********/
.fixed-target {
  position: relative;
  height: 500px; /* 박스가 원래 위치해 있던 영역 */
}

.sticky-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  background: pink;
  padding: 10px;
  transition: all 0.3s ease;
  z-index: 10;
}

.sticky-box.fixed {
  position: fixed;
  top: 0;
}


/*********** font and align ***********/
.section-title-block {
    margin-bottom:30px;
}

.section-heading {
    margin-bottom:30px;
}
.section-subing {
    margin-bottom:15px;
}

.ta-center {
    text-align:center;
}

.h1 {
    font-size:32px;
    1line-height:1.5;
    font-weight:700;
}

.h2 {
    font-size:28px;
    font-weight:500;
    1line-height:1.2;
}

.h3 {
    font-size:22px;
    font-weight:400;
}

.tw-600 {
    font-weight:600;
}


/************** reveal-effect *****************/
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.8s ease;
  will-change: opacity, transform;
}

.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-lite {
  opacity: 0;
  transform: translateY(10px);
  animation: revealUp 0.6s ease forwards;
  animation-delay: 0.5s; /* 나타나는 시간 딜레이 */
}

.reveal-lite.later {
    animation-delay: 1s; /* 나타나는 시간 딜레이 */
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-pin-block {
    position:relative;
}


/************ before-after-group *************/
.before-after-group .before-after-row {
    display:flex;
    height:180px;
    gap:10px;
}

.before-after-group .before-after-row > div {
    flex:1;
    background:#fafafa;
}

.before-after-group .before-after-row img {
    width:200%;
    height:100%;
    object-fit:cover;
    object-position:center bottom;
}

.before-after-group .before-after-row > div:first-child img {
    object-position:left bottom;
    clip-path: inset(0 50% 0 0); position: relative;
}

.before-after-group .before-after-row > div:nth-child(2) img {
    object-position:right bottom;
    clip-path: inset(0 0 0 50%); position: relative;
    margin-left:-100%;
}

.before-after-group .caption {
    text-align:center;
}

.before-after-group {
    margin-bottom:20px;
}


/************* terix-slider ****************/
.terix-slider-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: auto;
	background: #fff;
	z-index: 2000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	display:none;
}

.terix-slider-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  transition: transform 0.3s ease;
  position: relative;
  height:100%;

  1overflow:hidden;
}

.terix-slider {
	display:none;
	1opacity: 0;
	1transition: opacity 3s ease;
	pointer-events: none; /* 안 보일 때 클릭 방지 */
}

.terix-slider.active {
	display:block;
	1opacity: 1;
	pointer-events: auto;
}


.terix-slider-item {
  1min-height: 100vh;
  width: 100%;
  flex: 0 0 100%;
  display:flex;
  flex-direction: column;
  margin: 0;
  height:100%;
  overflow-y:auto;
  1container-type:inline-size;
  1container-name:page
}

body.quickbar .terix-frame .terix-slider-item {
	padding-bottom:var(--terix-layout-quickbar-height);
	
}



/*************  terix-slider-anchor-container ****************/
.terix-slider-anchor-container {
	display:none;
}

body.quickbar .terix-slider-anchor-container {
	position:fixed;
	bottom:0px;
	background:#fff;
	border-top:solid 1px #ccc;
	display:flex;
	justify-content: space-between;
	width:100%;
	height:var(--terix-layout-quickbar-height);
	align-items:start;
	
	
	
}

.terix-slider-anchor-container .terix-slider-anchor {
	text-align:center;
	1border-right:solid 1px red;
	width:100%;
	display:block;
	cursor:pointer;
	1padding:20px;
	padding-top:10px;
}

.terix-slider-anchor-container .terix-slider-anchor.active {
	color:var(--terix-color-main);
	
}

.terix-slider-anchor .icon {
	font-size:19px;
}

.terix-slider-anchor .label {
	display:none;
}


body.quickbar .terix-slider-anchor-container {
	height:var(--terix-layout-quickbar-height);
	padding-bottom:var(--terix-layout-quickbar-space);
	box-sizing:border-box;
}



body.quickbar .terix-shell-header .terix-header-menu {
	display:none;
}

body.quickbar .terix-shell-header [button=terix-menu-toggle] {
	display:none;
}

body.quickbar .terix-shell-header .logo-icon {
	display:none;
}

body.quickbar .terix-shell-header .site-name {
	display:none;
}

body.quickbar .terix-shell-header .shell-name {
	display:block;
	font-size:18px;
	font-weight:600;
}



/************************* terix-popup ****************************/
body.modal-open {
  overflow: hidden;
  position: fixed !important;
  width: 100%;
  top: 0;
  left: 0;
}

/*
.terix-frame {
  transition: transform 0s;
  will-change: transform;
  
}

body.terix-scroll-locked {
  overflow: hidden;
}
*/

.terix-popup {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  1display: flex;
  1align-items: center;
  1justify-content: center;
  1padding: 20px;
  1box-sizing: border-box;
  z-index: 10000;
  
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
	
}

.terix-popup-core {
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;

	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}


.terix-popup-inner {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  box-sizing: border-box;

  width: 100%;
  height: 100%;
  max-width: 500px;
  max-height: 500px;
    container-type: inline-size;
	container-name:page
}

.terix-popup-header {
  flex: 0 0 40px;     /* 고정 높이 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  font-size:12px;
}

.terix-popup-header:has(> *:only-child) {
  justify-content: flex-end !important;
}

.terix-popup-content {
  flex: 1 1 auto;     /* 남은 공간 모두 차지 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0px;
  background: #fff;
  box-sizing: border-box;
}

.terix-popup-footer {
  flex: 0 0 40px;     /* 고정 높이 */
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-top: 1px solid #ddd;
  box-sizing: border-box;
  font-size:12px;
}

.terix-popup-header i,
.terix-popup-footer i {
	font-size:16px;
}



/* 1. 전체 팝업 배경 (마스크 역할) */
.terix-popup.ratio {
  background-color:rgba(0, 0, 0, 0.01); /* 투명하게 */
}

.terix-popup.ratio img {
	object-fit:cover;
	width:100%;
	height:100%;
}

.terix-popup.ratio .terix-popup-inner {
  width: 90vw;
  max-width: 600px;
  overflow: hidden;
  height:auto;
  border-radius: 8px;
  max-height:10000px !important;
}

.terix-popup.ratio .terix-popup-content {
	aspect-ratio: 1 / 1;
	overflow:hidden;
}

.terix-popup.ratio[data-ratio="1:1"] .terix-popup-content {
	aspect-ratio: 1 / 1;
}

.terix-popup.ratio[data-ratio="4:3"] .terix-popup-content {
	aspect-ratio: 4 / 3;
}

.terix-popup.ratio[data-ratio="2:1"] .terix-popup-content {
	aspect-ratio: 2 / 1;
}

.terix-popup.ratio[data-ratio="16:9"] .terix-popup-content {
	aspect-ratio: 16 / 9;
}

.terix-popup.auto .terix-popup-inner {
	height:auto;
}

.terix-popup.full .terix-popup-inner {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
}

.terix-popup.auto .terix-popup-inner, 
.terix-popup.custom .terix-popup-inner {
	max-width: 100vw;
	max-height: 90vh;
	height:auto; /** apple ios ***/
}


.terix-popup[data-mode=form] .terix-shell > .terix-page {
	padding:20px 40px 100px 40px;
	
}


/* 높이가 600px 미만일 때 header를 아래로 */
@media (max-width: 600px) {

	/**** 모두 아래에 붙인다 *****/
	.terix-popup .terix-popup-core {
		padding:0px;
		align-items:end;
	}

	.terix-popup-inner {
		border-radius:0px;
		1max-height:90vh !important;
	}


	.terix-popup.custom .terix-popup-core {
		top:auto;
	}
  
	.terix-popup.custom .terix-popup-inner {
		1max-height:90vh !important;
		height:auto; /** apple ios ***/
	}
	
	

  
   .terix-popup.ratio .terix-popup-inner {
	 width:100vh;
   }
  
  
  .terix-popup[data-mode=browser] .terix-popup-inner {
	flex-direction: column-reverse;
	max-height:100vh !important;
  }
 
  .terix-popup[data-mode=browser] .terix-popup-header {
	border-bottom:none;
	border-top:1px solid #ddd;
	
  }
  
  

  
  body.standalone .terix-popup[data-mode=browser] .terix-popup-header {
	flex:0 0 80px;
	align-items: start;
	padding-top:10px;
	padding:10px 12px 0px 12px;
	
  }
  
  body.standalone .terix-popup-footer {
	flex:0 0 80px;
	align-items: start;
	padding-top:10px;
	padding:10px 12px 0px 12px;
  }
}

/* 공통 초기 상태 */
.terix-popup-inner {
	animation-duration: 0.2s;
	animation-fill-mode: both;
}

.terix-popup-inner {
	animation-name: popup-fade-in;
}


@keyframes popup-fade-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes popup-fade-out {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

.terix-popup[data-mode="advert"].closing .terix-popup-inner {
	animation: popup-fade-out 0.4s ease forwards;
}

/* 작은 화면: 아래에서 위로 */
@media (max-width:600px) {
	.terix-popup-inner {
		animation-duration: 0.5s;
		animation-name: popup-slide-up;
	}

	.terix-popup[data-mode="advert"].closing .terix-popup-inner {
		animation: popup-slide-down 0.3s ease forwards;
	}
}

@keyframes popup-slide-up {
  from {
    opacity: 0.5;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popup-slide-down {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(50%);
    opacity: 0;
  }
}

.terix-popup {
  transition: transform 0.3s ease;
  will-change: transform;
  touch-action: none;
}

.terix-popup-inner .handle-holder {
  width: 100%;
  flex:0 0 30px;
  background: #fff;
  border-radius: 5px;
  touch-action: none;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:drag;
}



.terix-popup-inner .handle {
  width: 40px;
  height: 5px;
  background: #ccc;
  border-radius: 5px;
  1margin: 0 auto 10px auto;
  1touch-action: none;
}

@media (max-width:600px) {
	.terix-popup-inner .handle-holder {
		display:flex;
	}
	
	.terix-popup.handle .terix-popup-header {
		display:none;
	}
}

/**************** terix-tool *********************/
.terix-global-tool-scroll-top {
	position:fixed;
	right:30px;
	bottom:30px;
	display:none;
	width:40px;height:40px;
	background:var(--terix-color-main);
	border-radius:50%;
	z-index:500;
	text-align:center;
	line-height:40px;
	opacity:0.5;
	color:#fff;
	font-size:15px;
	cursor:pointer;
}

body.quickbar .terix-global-tool-scroll-top {
	bottom:calc(30px + var(--terix-layout-quickbar-height));
	
}


/*************** terix-table-common ********************/

td.center, th.center {
	text-align:center;
}

td.right, th.right {
	text-align:right;
}

table.terix-table-common {
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
	border-top:solid 3px #71A6C5;
	border-bottom:solid 1px #71A6C5;
	border-top:solid 2px var(--terix-color-main);
	border-bottom:solid 1px #888;
	table-layout:fixed;
}

table.terix-table-common tbody {
	border-top:solid 1px #888;
}

table.terix-table-common th {
	background:#f1f6f8;
	color:#444;
	font-weight:normal;
}

table.terix-table-common th,
table.terix-table-common td {
	border:solid 1px #ddd;
	border-left:none;
	border-right:none;
	padding:4px 6px;
	font-size:12px;
}

/*
table.terix-table-common[data-responsible=last-cell] {

}

table.terix-table-common[data-responsible=last-cell] th:last-child,
table.terix-table-common[data-responsible=last-cell] td:last-child {
	display:none;
}

@container page (max-width:700px) {

	table[data-responsible=last-cell] thead {
		display:none !important;
	}

	table[data-responsible=last-cell] th,
	table[data-responsible=last-cell] td {
		display:none !important;
	}

	table[data-responsible=last-cell] td:last-child {
		display:flex !important;
		padding:10px;
		flex-direction:column;
		gap:5px;
		
	}
	
}
*/


/***************** terix-form *********************/
.terix-form {
	display:flex;
	gap:10px;
	flex-direction:column;
	max-width:500px;
}

.terix-form > .item-row {
	display:flex;
	gap:3px;
	flex-direction:column;
}

.terix-form > .item-row .label {
	color:#444;
	font-size:.9rem;
}

.terix-form > .item-row input[type=text] {
	padding:5px 8px;
	border:solid 1px #ccc;
	border-radius:5px;
	font-size:1.1rem;
	width:100%;
}

.terix-form > .action-row {
	margin-top:20px;
}

.terix-form > .action-row [button].normal {
	padding:4px 12px;
	background:var(--terix-color-main);
	color:#fff;
	border-radius:6px;
	border:solid 1px var(--terix-color-main);
	font-size:1.1rem;
	min-width:100px;
	
}


/***************** terix-control-tabview *********************/
.terix-control-tabview {
	position: sticky;
	top: var(--terix-layout-header-height);0;
	z-index: 100;
	background: white;
	transition: box-shadow 0.3s ease;
	border-bottom: solid 1px #ddd;
	margin-bottom:30px;
}

.terix-control-tabview .tab-buttons {
  display: flex;
  justify-content: space-around;
}

.terix-control-tabview .tab-buttons a {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  text-align:center;
   border-bottom:solid 3px #eee;
 
}

.terix-control-tabview .tab-buttons a.active {
  color: var(--terix-color-main);
  font-weight: bold;
  border-bottom:solid 3px var(--terix-color-main);
}

.terix-control-tabview .tab-underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--terix-color-main);
  width: 0;
  transition: transform 0.3s ease, width 0.3s ease;
}


/***************** terix-tab-slider *********************/
.terix-tab-slider {
  width: 100%;
  1overflow: hidden;
  1font-family: sans-serif;
  overflow:visible;
  padding-bottom:40px;

}

/*
.tab-header {
  position: relative;
  border-bottom: 1px solid #ccc;
  width:100%;
}
*/



.terix-tab-slider .tab-header {
  position: sticky;
  top: var(--terix-layout-header-height);0;
  z-index: 100;
  background: white;
  transition: box-shadow 0.3s ease;
  border-bottom: solid 1px #ddd;
}

.terix-tab-slider .tab-header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #fff; /* 또는 살짝 강조된 배경 */
}

.terix-tab-slider .tab-buttons {
  display: flex;
  justify-content: space-around;
}

.terix-tab-slider .tab-buttons button {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.terix-tab-slider .tab-buttons button.active {
  color: #000;
  font-weight: bold;
}

.terix-tab-slider .tab-underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--terix-color-main);
  width: 0;
  transition: transform 0.3s ease, width 0.3s ease;
}

.terix-tab-slider .tab-contents {
  overflow: hidden;
  width: 100%;
  touch-action: pan-y;
	transition: height 0.3s ease;
	height: auto; /* 초기 상태에서도 이게 필요 */
	margin-top:30px;
}

.terix-tab-slider .tab-wrapper {
  display: flex;
  transition: transform 0.3s ease;
  width: 100vw; /* 기본 3패널 기준, JS에서 덮어씀 */
}

.terix-tab-slider .tab-panel {
  flex: 0 0 100vw;
  box-sizing: border-box;
  1padding: 20px;
  1border:solid 1px red;
}

.terix-tab-slider .tab-panel-inner {
  padding:0px 10px;
}

.terix-tab-slider .tab-panel img {
  width: 100%;
  height: auto;
  display: block;
  
}

/******************* terix-list-set *****************/
.terix-list-set {
	
}

.terix-dataset-header {
	display:flex;
	justify-content:space-between;
	gap:10px;
	margin-bottom:15px;
}


.terix-dataset-header [button=set-list-type] {
	color:#888;
}

.terix-dataset-header [button=set-list-type].active {
	color:var(--terix-color-main);
}

.terix-dataset-header .type-options {
	display:flex;
	gap:4px;
}

.terix-dataset-header .type-options [button] {
	padding:3px;
}

.terix-dataset-header .tools {
	display:flex;
	gap:8px;
	align-items:center;
}

.terix-dataset-header .tools select {
	border:none;
}


.terix-list-set[data-type=grid] {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap:10px;
}

.terix-list-set[data-type=list] {
	display:block;
}


.terix-list-set[data-type=list] > * {
	display:flex;
	gap:10px;
	padding:10px;
	border-bottom:solid 1px #ddd;
}

.terix-list-set[data-type=list] > div:first-child {
	border-top:solid 1px #ddd;
}

.terix-list-set[data-type=list] > div > *:first-child {
	flex:0 0 20%;
}

table.terix-list-set[data-type=list] {

}

table.terix-list-set[data-type=table][data-responsible=last-cell] th:last-child,
table.terix-list-set[data-type=table][data-responsible=last-cell] td:last-child {
	display:none;
}

table.terix-list-set[data-type=list] {
	border:none !important;
}

table.terix-list-set[data-type=list] tbody {
    display: block;
    gap: 10px;
    padding:0px;
	border-bottom:none;
}

table.terix-list-set[data-type=list] tr {
    display:block;
	border-bottom:solid 1px #ddd;
}

table.terix-list-set[data-type=list] tr:first-child {
	border-top:solid 1px #ddd;
}

table.terix-list-set[data-type=list] td {
	border:none;
}

table.terix-list-set[data-type=list] thead {
	display:none !important;
}
	
table.terix-list-set[data-type=list][data-responsible=last-cell] th:last-child,
table.terix-list-set[data-type=list][data-responsible=last-cell] td:last-child {
	display:block;
}

table.terix-list-set[data-type=list][data-responsible=last-cell] th,
table.terix-list-set[data-type=list][data-responsible=last-cell] td {
	display:none !important;
}

table.terix-list-set[data-type=list][data-responsible=last-cell] td:last-child {
	width:100%;
	display:flex !important;
	padding:10px;
	flex-direction:column;
	gap:5px;
	
}

@container page (max-width:700px) {

	/*** table resonsible copy form type-list ****************/
	table.terix-list-set[data-type=table] {
		border:none !important;
	}

	table.terix-list-set[data-type=table] tbody {
		display: block;
		gap: 10px;
		padding:0px;
		border-bottom:none;
	}

	table.terix-list-set[data-type=table] tr {
		display:block;
		border-bottom:solid 1px #ddd;
	}

	table.terix-list-set[data-type=table] tr:first-child {
		border-top:solid 1px #ddd;
	}

	table.terix-list-set[data-type=table] td {
		border:none;
	}

	table.terix-list-set[data-type=table] thead {
		display:none !important;
	}
		
	table.terix-list-set[data-type=table][data-responsible=last-cell] th:last-child,
	table.terix-list-set[data-type=table][data-responsible=last-cell] td:last-child {
		display:block;
	}

	table.terix-list-set[data-type=table][data-responsible=last-cell] th,
	table.terix-list-set[data-type=table][data-responsible=last-cell] td {
		display:none !important;
	}

	table.terix-list-set[data-type=table][data-responsible=last-cell] td:last-child {
		width:100%;
		display:flex !important;
		padding:10px;
		flex-direction:column;
		gap:5px;
		
	}


	
}

/************** terix-dataset-paging-navigation ****************/
.terix-dataset-paging-navigation {
	margin-top:20px;
	display:flex;
	justify-content:center;
	gap:5px;
}

.terix-dataset-paging-navigation.before {
	margin-bottom:20px;
	margin-top:0px;
	display:flex;
	justify-content:center;
	gap:5px;
}



.terix-dataset-paging-navigation .invalid {
	color:#888;
}

.terix-dataset-paging-navigation strong {
	color:var(--terix-color-main);
}

.terix-dataset-paging-navigation [button="terix-fetch-dataset"] {
	border:solid 1px #ccc;
	padding:8px 10px;
	width:100%;
	text-align:center;
	display:inline-block;
	border-radius:6px;
}


/***************** terix-loading-bar ********************/
.terix-loading-bar {
  position: fixed;
  top:calc( var(--terix-layout-header-height) - 2px);
  left: 0;
  width: 100%;
  height: 2px;
  background:var(--terix-color-main);  /* 또는 terix 테마 색 */
  z-index: 200000;
  1transition: width 0.3s ease;
  
}

.terix-loading-bar.flow {
	background:#fff;rgba(255,255,255,0.8);
}

.terix-loading-bar.flow span  {
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	display:inline-block;
	width:200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
	rgba(255,255,255,0.5) 12%,
    var(--terix-color-main) 25%,
	rgba(255,255,255,0.5) 37%,
	transparent 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: -200% 0;
  animation: terix-flow-gradient-left-to-right 0.8s linear infinite;
  z-index: 9999;
  pointer-events: none;
}

@media (max-width:600px) {

	.terix-loading-bar.flow span {
		animation: terix-flow-gradient-left-to-right 0.5s linear infinite;
	}
}

@keyframes terix-flow-gradient-left-to-right {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}




.terix-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  z-index: 10000;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--terix-color-main);;
  border-radius: 50%;
  animation: terix-spin 0.9s linear infinite;
}

/* dot 스타일로 전환되면 원형 스타일 제거 + dot 스타일 적용 */
.terix-spinner.dot {
  width: 50px;
  height: 20px;
  margin: -10px 0 0 -30px;
  border: none;
  background: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  animation: none;
}

.terix-spinner.dot::before,
.terix-spinner.dot::after,
.terix-spinner.dot span {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-color:var(--terix-color-main);;
  border-radius: 50%;
  animation: terix-dot-blink 1.4s infinite ease-in-out;
}

.terix-spinner.dot span {
  animation-delay: 0.2s;
}

.terix-spinner.dot::after {
  animation-delay: 0.4s;
}

@keyframes terix-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes terix-dot-blink {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40%          { transform: scale(1);   opacity: 1; }
}