/*--- base ---*/
@-ms-viewport {
    width: device-width;
}

@o-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

:root {
	/* size start */
	--max-wrapper-w: 1920px;
	--max-w: 1440px;
	--max-product-w: 1200px;
	--main-px: 60px;
	--header-h: 86px;
	/* --footer-h: 406px; */
	--footer-h: 438px;  /* 푸터 내용이 늘어남 */
	--tab-bar-h: 64px;
	--breadcrumb-h: 50px;

	/* size */
	--spacing: 2px;
	--spacing-2: 4px;
	--spacing-3: 8px;
	--spacing-4: 12px;
	--spacing-5: 16px;
	--spacing-6: 20px;
	--spacing-7: 24px;
	--spacing-8: 32px;
	--spacing-9: 40px;
	--spacing-10: 48px;

	/* radius */
	--radius: 6px;
	--radius-2: 8px;
	--radius-3: 10px;
	--radius-4: 12px;
	--radius-5: 16px;
	--radius-6: 100%;  /* full */
	/*
	  size end
    */

	/*
	  font start
    */
	--font-paperlogy: "Paperlogy";

	/* font-size */
	--text-heading-4xl: 60px;
	--text-heading-3xl: 48px;
	--text-heading-2xl: 40px;
	--text-heading-xl: 36px;
	--text-heading-lg: 28px;
	--text-heading-md: 24px;
	--text-heading-sm: 20px;
	--text-heading-xs: 18px;
	--text-body-xl: 18px;
	--text-body-lg: 16px;
	--text-body-md: 14px;
	--text-body-sm: 12px;
	--text-body-xs: 10px;

	/* letter-spacing */
	--letter-spacing-ratio: -0.002%;  /* -0.2% */
	/*
	  font end
    */

	/*
	  color start
    */
    /* exclude color */
	--blue-050: #F5F7FA;  /* Description */
	--blue-100: #E4ECFF;  /* Description */
	--blue-200: #C8DCFF;  /* Description */
	--blue-300: #AEC9FF;  /* Description */
	--blue-400: #7AA1FF;  /* Description */
	--blue-500: #598AFF;  /* Description */
	--blue-600: #1C56FF;  /* main color */
	--blue-700: #123ECC;  /* Description */
	--blue-800: #0A31A8;  /* main color, CTA */
	--blue-900: #0D2A8A;  /* a bit darker than the main */
	--blue-950: #0B235B;  /* thicker than the main */

    --gray-100: #F8F8F8;  /* bg: card, placeholder */
    --gray-200: #E8E8E8;  /* disabled bg, stroke */
	--gray-250: #D1D1D1;  /* between disabled bg and disabled text */
    --gray-300: #BBBBBB;  /* disabled text, icon */
    --gray-400: #999999;  /* sub icon */
    --gray-500: #666666;  /* sub text */
    --gray-600: #333333;  /* main text, icon */
	--gray-600-a-20: rgba(51, 51, 51, 0.2);   /* #33333333 */
    --gray-700: #111111;  /* black */

	--real-black-a-06: rgba(0, 0, 0, 0.06);  /* #0000000F */

	--black: var(--gray-700);
	--white: #FFFFFF;

	/* main color */
	--logo: #1A2C72;
	--primary: var(--blue-600);  /* main color */
	--secondary: var(--blue-800);  /* main color, hover, emphasis(강조) */

    /* alarm  color */
	--red-text: #D61111;  /* error, badge text */
	--red-bg: #FBD8DC;  /* badge bg */
	--yellow: #FEDA4A;  /* bookmark, star */

    /* etc  color */
	--green-050: #EFF7F1;  /* green bg */
	--green-500: #54A93F;  /* breen text, icon */
	--tesllon-care-green: #00A84D;  /* tesllon care green */
	--jb-green: #51E3A4;  /* Description */
	--jb-blue: #007AFF;  /* Description */

	/* badge color */
	/* --badge-red: #DC3545;  /* 계약상태 만료 */
	--badge-red: #D61111;  /* red-text: 계약상태 만료 */
	--badge-orange: #E99C26;  /* 서비스유형 점검  */
	--badge-green: #54A93F;  /* green-500: 계약상태 대기 */
	--badge-skygreen: #4CB592;  /* 서비스유형 교체, 구매 */
	--badge-teal: #20C997;
	--badge-emerald: #30BCCC;  /* 구독 */
	--badge-blue-service: #4680FF;  /* 서비스유형 설치 */
	--badge-blue-contract: #598AFF;  /* blue-500: 계약상태 활성 */ 
	--badge-purple: #9B6BFF;  /* 서비스유형 회수 */
	--badge-light-gray: #BBBBBB;  /*  gray-300: 계약상태 작성중 */
	--badge-admin-gradient: linear-gradient(101.98deg, #1C56FF 0%, #51E3A4 100%);  /* 관리자 뱃지 */

	/* 활용 */
	--text-primary: var(--gray-600);
	--text-secondary: var(--gray-500);
	--text-third: var(--gray-400);
	--text-placeholder: var(--gray-100);
	--text-disabled: var(--gray-300);

	--color-icon: var(--gray-600);
	--color-sub-icon: var(--gray-400);
	--color-disabled-icon: var(--gray-300);

	--color-stroke: var(--gray-200);
	--color-surface: #FBFBFC;

	--color-bg-card: var(--gray-100);
	--color-disabled-bg: var(--gray-200);

	--color-scrollbar-track: #DDDDDD;
	--color-scrollbar-thumb: rgba(153, 153, 153, 0.5); /* #99999980 */
	--color-scrollbar-thumb-hover: rgba(153, 153, 153, 0.6); /* #99999999 */

	/*
	  color end
    */

	/* box-shadow: x y blur spread rgba() */
    --shadow-option-list: 0 1px 8px 0px rgba(0, 0, 0, 0.07);
    --shadow-top-menu: 0 7px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-bottom-menu: 0 -2px 10px 1px rgba(0, 0, 0, 0.1);
    --shadow-card: 0 2px 10px 0px rgba(0, 0, 0, 0.1);
    --shadow-fab: 0 4px 15px 0px rgba(0, 0, 0, 0.1);
	--shadow-tooltip: 0 0 16px 0 rgba(0, 0, 0, 0.1);


	/* transition */
	--transition: 0.2s ease-in-out;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,input,textarea,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button {
    /*font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;*/
	font-family: var(--font-paperlogy), -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/* base */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    word-break: keep-all;
	/* body-md: start */
	font-size: var(--text-body-md);
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
	letter-spacing: calc(var(--text-body-md) * var(--letter-spacing-ratio));
	/* body-md: end */
    color: var(--text-primary);
    user-select: none;
}

html, body {
	width: 100%;
    /* overflow-x: hidden; */
}

body::-webkit-scrollbar {
    display: none;
}

body {
	min-width: 280px;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--white);
	font-family: var(--font-paperlogy), -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-size: var(--text-body-md);
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
	letter-spacing: calc(var(--text-body-md) * var(--letter-spacing-ratio));
	color: var(--text-primary);

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

main {
	min-height: calc(100vh - var(--footer-h));
	min-height: calc(100dvh - var(--footer-h));
	margin: 0 auto;
	padding: 0 var(--main-px);
	padding-top: var(--header-h);
}

::selection {
    background-color: var(--primary);
    color: var(--white);
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: var(--text-primary);
}

a,
a:link,
a:visited {
    text-decoration: none;
    transition: var(--transition);
    color: inherit;
}

ul,
ol,
li,
dl {
    list-style: none;
	margin-bottom: 0;
	padding-left: 0;
}

p {
	margin-bottom: 0;
}

b {
    font-weight: 700;
}

button {
    border: none;
	background: none;
	text-decoration: none;
    cursor: pointer;
}

/* typography */
.heading-4xl {
	font-size: var(--text-heading-4xl);  /* 60px */
	font-weight: 600;
	line-height: 1.1333;  /* 68px */
}
.heading-3xl {
	font-size: var(--text-heading-3xl);  /* 48px */
	font-weight: 600;
	line-height: 1.1666;  /* 56px */
}
.heading-2xl {
	font-size: var(--text-heading-2xl);  /* 40px */
	font-weight: 600;
	line-height: 1.2;  /* 48px */
}
.heading-xl {
	font-size: var(--text-heading-xl);  /* 36px */
	font-weight: 600;
	line-height: 1.1111;  /* 40px */
}
.heading-lg {
	font-size: var(--text-heading-lg);  /* 28px */
	font-weight: 600;
	line-height: 1.2857;  /* 36px */
}
.heading-md {
	font-size: var(--text-heading-md);  /* 24px */
	font-weight: 600;
	line-height: 1.166;  /* 28px */
}
.heading-sm {
	font-size: var(--text-heading-sm);  /* 20px */
	font-weight: 600;
	line-height: 1.2;  /* 24px */
}
.heading-xs {
	font-size: var(--text-body-xl);  /* 18px */
	font-weight: 600;
	line-height: 1.3333;  /* 24px */
}
.body-xl {
	font-size: var(--text-body-xl);  /* 18px */
	font-weight: 400;
	line-height: 1.3333;  /* 24px */
}
.body-lg {
	font-size: var(--text-body-lg);  /* 16px */
	font-weight: 400;
	line-height: 1.5;  /* 24px */
}
.body-md {
	font-size: var(--text-body-md);  /* 14px */
	font-weight: 400;
	line-height: 1.4285;  /* 20px */
}
.body-sm {
	font-size: var(--text-body-sm);  /* 12px */
	font-weight: 400;
	line-height: 1.3333;  /* 16px */
}

.font-500 {
	font-weight: 500;
}

.text-primary,
[data-pc-direction=ltr] .text-primary {
	--bs-primary-rgb: var(--text-primary);
	color: var(--text-primary);
}
.text-secondary,
[data-pc-direction=ltr] .text-secondary {
	--bs-secondary-rgb: var(--text-secondary);
	color: var(--text-secondary);
}
.text-third,
[data-pc-direction=ltr] .text-third {
	--bs-third-rgb: var(--text-third);
	color: var(--text-third);
}

.full {
	width: 100%;
}
.ml-1 {
	margin-left: var(--spacing-2);
}
.gap-8 {
	gap: calc(var(--spacing-2) * 8);
}

/* 세로 스크롤바 */
*::-webkit-scrollbar {
	width: 4px;
}

*::-webkit-scrollbar-track {
	background: var(--color-scrollbar-track);
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb {
	background: var(--color-scrollbar-thumb);
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--color-scrollbar-thumb-hover);
}

/* 가로 스크롤바 */
*::-webkit-scrollbar:horizontal {
	height: 4px;
}

*::-webkit-scrollbar-track:horizontal {
	background: var(--color-scrollbar-track);
	border-left: 0;
	border-radius: 2.5px;
}

*::-webkit-scrollbar-thumb:horizontal {
	background: var(--color-scrollbar-thumb);
	border-left: 0;
	border-radius: 2.5px;
}

/* scrollbar utilities */
.scrollbar-gutter {
	scrollbar-gutter: stable;
}

.scrollbar-hide {
	-ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
	display:none;
}


/* 토스트 메시지 스타일 */
.toast-container .toast {
	color: #FFFFFF;
}
.toast-container .toast .toast-body {
	color: #FFFFFF;
}

/* WYSIWYG 에디터 공통 스타일 */
.wysiwyg-content {
	font-size: var(--text-body-lg);
	line-height: 32px;
	color: var(--text-secondary);
}

.wysiwyg-content * {
	color: var(--text-secondary);
}

.wysiwyg-content p,
.wysiwyg-content a {
	font-size: var(--text-body-lg);
	line-height: 32px;
}

.wysiwyg-content strong,
.wysiwyg-content b,
.wysiwyg-content em,
.wysiwyg-content i,
.wysiwyg-content u,
.wysiwyg-content s,
.wysiwyg-content strike,
.wysiwyg-content del,
.wysiwyg-content ins {
	font-size: inherit;
	line-height: inherit;
}

/* 리스트 스타일 */
.wysiwyg-content ul,
.wysiwyg-content ol {
	margin: var(--spacing-5) 0;
	padding-left: var(--spacing-9);
	color: var(--text-secondary);
}

.wysiwyg-content ul {
	list-style: disc;
}

.wysiwyg-content ol {
	list-style: decimal;
}

.wysiwyg-content li {
	margin-bottom: var(--spacing-2);
	line-height: 32px;
	font-size: var(--text-body-lg);
	list-style: inherit;
}

/* 테이블 스타일 */
.wysiwyg-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-5) 0;
	border: 1px solid var(--color-stroke);
	border-radius: var(--radius-2);
	overflow: hidden;
}

.wysiwyg-content table th,
.wysiwyg-content table td {
	padding: var(--spacing-4);
	border: 1px solid var(--color-stroke);
	font-size: var(--text-body-lg);
	line-height: 32px;
}

.wysiwyg-content table th {
	background: var(--gray-100);
	font-weight: 600;
	color: var(--text-primary);
}

.wysiwyg-content table td {
	color: var(--text-secondary);
}

/* 인용구 스타일 */
.wysiwyg-content blockquote {
	margin: var(--spacing-5) 0;
	padding: var(--spacing-5);
	padding-left: var(--spacing-9);
	border-left: 4px solid var(--gray-300);
	background: var(--gray-100);
	border-radius: var(--radius-2);
	color: var(--text-secondary);
	font-size: var(--text-body-lg);
	line-height: 32px;
}

/* 코드 스타일 */
.wysiwyg-content code {
	background: var(--gray-100);
	padding: 2px var(--spacing-3);
	border-radius: var(--radius);
	font-family: 'Courier New', Courier, monospace;
	font-size: var(--text-body-md);
	line-height: var(--text-heading-sm);
	color: var(--text-primary);
}

.wysiwyg-content pre {
	background: var(--gray-100);
	padding: var(--spacing-5);
	border-radius: var(--radius-2);
	overflow-x: auto;
	margin: var(--spacing-5) 0;
	border: 1px solid var(--color-stroke);
}

.wysiwyg-content pre code {
	background: none;
	padding: 0;
	border-radius: 0;
	font-size: var(--text-body-md);
	line-height: 1.5;
}

/* 제품 스펙 스타일 */
.product-spec-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.product-spec-title {
	padding: 80px 0;
	text-align: center;
}
.product-spec-title h1 {
	color: var(--secondary)
}

.product-spec-box {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: var(--max-product-w);
	padding: 30px 46px;
	border-radius: var(--radius-4);
	background: var(--gray-100);
}
.product-spec-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 46px
}
.product-spec-item {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.product-spec-item-label {
	font-size: var(--text-body-md);
	font-weight: 500;
	line-height: 18.2px;
	letter-spacing: -0.42px;
	color: var(--text-third);
}
.product-spec-item-value {
	font-size: 15px;
	font-weight: 500;
	line-height: 19.5px;
	letter-spacing: -0.42px;
	color: var(--gray-700);
}

ul.product-spec-meta-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding-left: 0;
}
li.product-spec-meta-item {
	position: relative;
	margin: 0;
	padding-left: 14px; /* 커스텀 불렛 공간 확보 */
	font-size: var(--text-body-md);
	line-height: 22.4px;
	color: var(--text-third);
}
li.product-spec-meta-item::before {
	content: "•";
	position: absolute;
	left: 2px;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* 
	start: product extra info
*/
/* 공통 */
.product-extra-info-container {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-3);
	width: 100%;
	padding: var(--spacing-6) var(--spacing-5);
	border-radius: var(--radius-3);
    background: var(--white);
    box-shadow: var(--shadow-card);
}
/* 제품 안내 쪽 */
.product-extra-info-container.center {
	align-items: center;
	gap: var(--spacing-5);
}
.product-extra-info-title {
	font-size: var(--text-heading-xl);
	line-height: 1.166;
	text-align: center;
}
.product-extra-info-title .icon {
	margin-bottom: var(--spacing-2);
}
.product-extra-info-title .icon svg {
	width: 50px;
	height: 50px;
	stroke: var(--red-text);
}
.product-extra-info-title .icon svg .ic-exclamation-point {
	stroke: var(--white);
}
.product-extra-info-title strong.emphasis {
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: #a50404;
}
.product-extra-info-description {
	font-size: var(--text-heading-sm);
	font-weight: 600;
	line-height: 1.3333;
	text-align: center;
}
.product-extra-info-meta {
	margin-top: var(--spacing-4);
	font-size: var(--text-body-lg);
	line-height: 1.4285;
	text-align: center;
	color: var(--text-secondary);
}
.product-extra-info-description .highlight,
.product-extra-info-meta .highlight {
	margin: 0;
	padding: 0;
	background: var(--yellow);
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* 현장 컨설팅 메타 리스트 */
.product-extra-info-meta .product-extra-info-list {
	margin-top: var(--spacing-4);
	padding: var(--spacing-3);
	border-radius: var(--radius-3);
	background: var(--gray-100);
}
.product-extra-info-meta .product-extra-info-item {
	text-align: left;
}


/* 제품상세 쪽인 경우 아우터 */
.product-extra-info-container-outer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
}
.product-extra-info-container-outer .product-extra-info-container {
	background: var(--gray-100);
	box-shadow: none;
}

ul.product-extra-info-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-2);
	list-style: none;
	margin: 0;
	padding-left: 0;
}
li.product-extra-info-item {
	position: relative;
	padding-left: 20.64px; /* 커스텀 불렛 공간 확보 */
	font-size: var(--text-body-md);
	line-height: 1.4285;
	color: var(--text-third);
}

/* 커스텀 불렛 "·" 추가 */
li.product-extra-info-item::before {
	content: "•";
	position: absolute;
	left: var(--spacing-3);
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
li.product-extra-info-item strong {
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
	color: inherit;
}
/* 
	end: product extra info
	class="product-extra-info-image desktop-only"
*/

.product-extra-info-image.desktop-only {
	display: block;
}
.product-extra-info-image.mobile-only {
	display: none;
}

@media (max-width: 1440px) {
	.product-spec-container {
		padding: 0 var(--spacing-8);
	}
}

/* tablet */
@media (max-width: 1024px) {
	:root {
		--header-h: 64px;
		--footer-h: calc(491px + var(--tab-bar-h));
	}
	
	main {
		padding: var(--header-h) 0 0 0;
	}
}

/* mobile */
@media (max-width: 768px) {
	.product-spec-container {
		padding: 0 var(--spacing-5);
	}
	.product-spec-box {
		padding: var(--spacing-6);
	}
	.product-spec-title h1 {
		font-size: var(--text-heading-md);  /* 24px */
		line-height: 1.166;  /* 28px */
	}
	.product-spec-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-7) var(--spacing-6);
	}

	/* 
	start: product extra info
	*/
	.product-extra-info-container {
		width: auto;
		margin: 0 var(--spacing-5);
		padding: var(--spacing-5);
	}
	/* 제품 안내 쪽 */
	.product-extra-info-container.center {
		gap: var(--spacing-4);
	}
	.product-extra-info-title {
		font-size: var(--text-heading-lg);
	}
	.product-extra-info-title .icon {
		margin-bottom: var(--spacing);
	}
	.product-extra-info-title .icon svg {
		width: 40px;
		height: 40px;
	}
	.product-extra-info-description {
		font-size: var(--text-heading-xs);
	}
	.product-extra-info-meta {
		margin-top: var(--spacing-3);
		font-size: var(--text-body-md);
	}
	
	li.product-extra-info-item {
		padding-left: 15px;
		font-size: var(--text-body-sm);
		line-height: 1.3333;
	}
	li.product-extra-info-item::before {
		left: var(--spacing-2);
	}
	/* 
		end: product extra info
	*/

	/* wysiwyg-content */
	.wysiwyg-content,
	.wysiwyg-content p,
    .wysiwyg-content a,
	.wysiwyg-content li,
	.wysiwyg-content table th,
    .wysiwyg-content table td,
	.wysiwyg-content blockquote {
		font-size: var(--text-body-md);
		line-height: 1.4285;  /* 20px */
	}
	.wysiwyg-content code,
	.wysiwyg-content pre code {
		font-size: var(--text-body-sm);
		line-height: var(--text-body-lg);
	}
	.wysiwyg-content ul, .wysiwyg-content ol {
		padding-left: var(--spacing-7);
	}

	.product-extra-info-image.desktop-only {
		display: none;
	}
	.product-extra-info-image.mobile-only {
		display: block;
	}
}