@charset "utf-8";
@import url("pretendard.css");
@import url("animate.min.css");
@import url("slick.css?v=1");
@import url("quick.css");

/* 미디어 쿼리를 사용한 반응형 스타일 */
@media screen and (max-width: 100em) {
    .LayoutIntro {
        font-size: 0.9em;
    }
}
@media screen and (max-width: 88em) {
    .LayoutIntro {
        font-size: 0.8em;
    }
}@media screen and (max-width: 82em) {
	body{
		font-size: 0.825em;
	}
}
/* iPad 가로 모드 전용 (대략 1024~1366px) */
@media only screen and (min-width: 1024px) and (max-width: 1365px) {
	/* 인트로 페이지 */
	.IntroMenu__logo{
		margin-left: 0 !important;
		left: 2em !important;
	}
	.IntroMenu.on:after{height: 16em !important;}
	.IntroMenu__list{padding-left:17em !important;}
	.IntroMenuList{font-size: 1.1em;}
	.IntroMenuList[data-rank="0"] > .IntroMenuList__item{padding: 0 3.2em 0 0 !important;}
	.IntroMenuList[data-rank="1"]{
		top: 7em !important;
		padding: 0 !important;
	}
	.IntroMenu__global{right: 2em !important;}
	.IntroMenuList[data-rank="1"] .IntroMenuList__item{
		margin-bottom: 0.5em;
		font-size: 1em;
	}
	.IntroMenuList[data-rank="1"] > .IntroMenuList__item > a > span{letter-spacing: -1px !important;}
	.IntroMenuList .new-label{
		width: 1.2em !important;
		height: 1.2em !important;
	}
	.MainLatest__more{bottom: -5em !important;}
	.WelcomePage  .Modal__inner{font-size: 1.5em !important;}
	.MainBoardBox__list{
		background-size: 110% 110% !important;
		padding: 1em !important;
		font-size: 1.5em !important;
	}
	.MainBoardBox__list:after{
		opacity: 1 !important;
	}
	.MainBoardBox__list ul{
		opacity: 1 !important;
	}
	.QuickView__item img{width: 80%;}

	/* 내 정보수정 */
	.JoinPage__title{font-size: 0.75em;}
	.JoinPage__title .LayoutIntro__inner{text-align: center;}
	.JoinPage__title .LayoutIntro__inner img{width: 50%;}
}

/* Button */
.Button__control{
	display: flex;
	flex-direction: row;
	gap:.2em;
	justify-content: center;
	align-items: center;
}
.Check__inner{
	display: flex;
	flex-direction: row;
	gap:1em;
	justify-items: center;
	align-items: center;
}
.Check__inner > div{
	flex-grow: 1;
	flex-shrink: 1;
}
.Button__check {
	overflow: hidden;
	position: relative;
}
.Button__check .info{
	background-color: #D9D9D9;
	border-radius: .5em;
	height:4em;
	line-height: 4em;
	min-width: 10em;
	padding:0 1em;
	text-align: center;
	transition: all .5s;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	color:#111;
}
.Button__check input{
	position: absolute;
	left:-9999em;
}
.Button__check .info span{
	font-size: 1.25em;
	vertical-align: baseline;
}
.Button__check .info:hover{
	background-color: #cfcfcf;
}
.Button__check input:checked + .info{
	background-color: #767EC1;
	color:#fff;
}
.Button__check .info .price{font-weight: 900;}
.Button__check.line .info{
	justify-content: center;
	background-color: #fff;
	border:1px solid #aaa;
	height: 5em;
	line-height: 5em;
}

/* 가입 흐름 버튼 — 세 단계로 나눈다 (2026-08-27)
 *
 * 그전에는 `회원가입`·`중복확인`·`주소검색`이 전부 같은 검정(#444)이었다. 화면에서
 * 제일 중요한 버튼이 보조 버튼과 구분되지 않아, 어디를 눌러야 끝나는지가 안 보였다.
 *
 *   .Button__join           보조 — 중복확인 · 주소검색 · 문의하기 (흰 바탕 + 회색 테두리)
 *   .Button__join.primary   주 행동 — 회원가입 · 수정 · 로그인 (브랜드 보라 채움)
 *   .Button__join.off       취소 — 가장 조용하게 (연한 테두리 + 흐린 글자)
 *
 * ⚠️ 기본값이 보조다. 클래스를 안 붙인 버튼은 자동으로 보조가 된다 — 주 행동에만
 *    `primary` 를 붙이면 되고, 새 버튼이 실수로 눈에 띄는 일이 없다.
 * ⚠️ 글자색을 여기서 다시 정하는 이유: dashboard.css 의
 *    `.Button[class*="Button_"]{color:#fff}` 가 이 버튼에도 걸린다. 특정도가 같아
 *    (0,2,0) 나중에 읽히는 이 파일이 이긴다.
 */

/* 주 행동 색 — 브랜드 보라(#767EC1)를 한 단계 어둡게 잡았다.
   #767EC1 위의 흰 글자는 대비 3.9:1 로 본문 기준(4.5:1)에 못 미친다.
   #5D64A8 은 5.6:1 이고 같은 색 계열이라 브랜드가 흐트러지지 않는다. */
:root{
	--join-primary: #5D64A8;
	--join-primary-hover: #4C528C;
}

.Button.Button__join{
	/* 연한 회색을 깔아 "누를 수 있는 것" 으로 읽히게 한다. 흰 바탕에 테두리만 있으면
	   입력칸과 구분이 잘 안 된다 — 이 버튼들은 대개 입력칸 바로 옆에 붙는다. */
	background-color: #f1f1f5;
	color:#444;                 /* #f1f1f5 위 대비 8.8:1 */
	border-radius: .5em;
	height:3.2em;
	line-height: 3.2em;
	min-width: 10em;
	text-align: center;
	transition: all .2s;
	border:1px solid #c9c9d1;
}
.Button.Button__join span{
	color:#444;
	font-size: 1em;
	vertical-align: baseline;
}
.Button.Button__join:hover{
	background-color: #e4e4ec;
	border-color:#a9a9b8;
}

/* 주 행동 */
.Button.Button__join.primary{
	background-color: var(--join-primary);
	border-color: var(--join-primary);
	color:#fff;
}
.Button.Button__join.primary span{
	color:#fff;
}
.Button.Button__join.primary:hover{
	background-color: var(--join-primary-hover);
	border-color: var(--join-primary-hover);
}

/* 취소 — 보조보다 한 단계 더 조용하게 */
.Button.Button__join.off{
	background-color: #fff;
	color:#8a8a95;
	border-color:#e2e2e8;
}
.Button.Button__join.off span{
	color:#8a8a95;
}
.Button.Button__join.off:hover{
	background-color: #f6f6f8;
	border-color:#c9c9d1;
}

/* 회원선택 화면의 "선택하기" — 그 화면의 주 행동이므로 위와 같은 색을 쓴다.
   (예전에는 #767EC1 이라 가입 버튼과 색이 달랐다) */
.Button.Button__enter{
	background-color: var(--join-primary);
	border: 1px solid var(--join-primary);
	border-radius: .5em;
	height:3.2em;
	line-height: 3.2em;
	min-width: 10em;
	text-align: center;
	transition: all .2s;
}
.Button.Button__enter span{
	color:#fff;
	font-size: 1em;
	vertical-align: baseline;
}
.Button.Button__enter:hover{
	background-color: var(--join-primary-hover);
	border-color: var(--join-primary-hover);
}

.info__area{background-color:#f1f1f1;border-radius:20px;padding:35px 50px;}
.InfoTitle{position: relative;padding-bottom: .5em;}
.InfoTitle span{font-size: 1.5em;font-weight: 500;line-height: 1.4em;color:#111}
.InfoTitle b{font-size:1em;padding-left:1em;font-weight:400;}
.InfoText{
	line-height: 1.4em;
	font-size: 1em;
	padding:0 1em;
}
.info__area > ul{padding-top:10px;}
.info__area > ul li{list-style:none;padding-bottom:10px;}
.info__area > ul > li::before{content:"●";}
.info__area ol, .info__area ol ul{padding-top:10px;}
.info__area ol > li{padding-left:1.5em;}
.info__area ol ul li{padding-left:1em;}
/* MainLogo */
.MainLogo {
    display: block;
    margin: 0 auto;
    width: 12em;
    height: 5em;
    text-indent: -9999px;
    background: url(../images/common/logo_sino.png) center no-repeat;
	background-size: 85%;
}
.Container{top:0 !important}

/* Layout */
.LayoutIntro{
	width: 100vw;
	height: 100vh;
	position: relative;
	background-color: #fff;
	display: flex;
	flex-direction: column;
}
.LayoutIntro__content{
	flex-grow: 1;
	flex-shrink: 1;
}
.LayoutIntro__header{
	flex-grow: 0;
	flex-shrink: 0;
	position: relative;
	z-index:100;
	box-shadow: 0 3px 4px rgba(0,0,0,0.15);
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.LayoutIntro__header:after{
	content:'';
	display: block;
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	height: 1px;
	background-color: #ccc;
}
.LayoutIntro__content{
	position: relative;
	z-index: 1;
	overflow: auto;
}
.LayoutIntro__inner{
	width:88em;
	margin:0 auto;
	position: relative;
}
.LayoutIntro__inner img{
	max-width: 100%;
}
.LayoutIntro__footer{
	flex-shrink: 0;
	flex-grow: 0;
	padding:2em 0;
	border-top:1px solid #ccc
}
.LayoutIntro__footer .Footer__address{
	text-align: right;
}
.Footer__address{font-size: 0.9em;}
.Footer__address .privacy{
	color:#34C0B9;
	vertical-align: middle;
	font-weight: 600;
}

/* IntroMenuList */
.IntroMenu{
	border-top:1px solid #ccc;
	overflow: hidden;
}
.IntroMenu.on{
	overflow: visible;
}
.IntroMenu.on:after{
	z-index: 1;
	opacity: 0.9;
	height:12em;
}
.IntroMenu.on .IntroMenuList[data-rank="1"]{z-index: 10;opacity: 1;}
.IntroMenu:after{
	transition: all .2s ease;
	content:'';
	position: absolute;
	left:0;
	right:0;
	top:7.5em;
	height:0em;
	background: #ffffff;
	z-index: -1;
	border-top:1px solid #eee;
	border-bottom:2px solid #ccc;
	opacity: 0;
}
.IntroMenu__logo{
	position: absolute;
	left:3em;
	top:50%;
	margin-top:-2.5em;
	height:5em;
}

.IntroMenu__global{
	display: flex;
	flex-direction: row;
	gap:1em;
	flex-grow: 0;
    flex-shrink: 0;
	line-height: 2.4em;
	position: absolute;
	right:3em;
	top:0;
	bottom:0;
	justify-content: center;
    align-items: center;
}
.IntroMenu__global .mypage > a{
	display: inline-block;
	line-height: 1em;
	position: relative;
	margin:0 .5em;
}
.IntroMenu__global .mypage > a:first-child:after{
	content: '';
	display: block;
	width: 1px;
	height: 1em;
	background-color: #aaa;
	position: absolute;
	right:-1em;
	top:50%;
	margin-top:-0.5em;
}
.IntroMenu__global .mypage span{
	font-size: 0.875em;
	color:#666;
	vertical-align: middle;
}
.IntroMenu__global .mypage .icon{
	width:1.8em;
	height:1em;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1em;
	vertical-align: middle;
}
.IntroMenu__global .mypage .icon.icon_member{
	background-image: url(../images/marketing/icon_member.svg);
}
.IntroMenu__global .mypage .icon.icon_login{
	background-image: url(../images/marketing/icon_login.svg);
}

.IntroMenu__global .quick a{
	border: 1px solid #767EC1;
	width: 7em;
	display: inline-block;
	line-height: 2.4em;
	color:#767EC1;
	border-radius: 7em;
	text-align: center;
}
.IntroMenu__global .quick a > span{
	font-size: 0.75em;
}
.IntroMenu__global .quick a.bg2{
	background-color: #767EC1;
	color:#fff;
}
.IntroMenu__list{
	padding-left:19em;
}
.IntroMenu ul{list-style: none;}
.IntroMenuList[data-rank="0"]{
	display: flex;
	flex-direction: row;
}
.IntroMenuList[data-rank="0"] > .IntroMenuList__item{
	position: relative;
	padding:0 2.3em;
	z-index: 10;
}
.IntroMenuList[data-rank="0"] > .IntroMenuList__item:hover > a{
	color:#1D0A81;
}
.IntroMenuList[data-rank="0"] > .IntroMenuList__item:hover > a:after{
	content:'';
	display: block;
	position:absolute;
	left:50%;
	margin-left:-3px;
	width:6px;
	height:6px;
	border-radius: 6px;
	top:2em;
	background-color: #004e6d;
}
.IntroMenuList[data-rank="0"] > .IntroMenuList__item > a{
	line-height: 7.5em;
    position: relative;
    display: inline-block;
}
.IntroMenuList[data-rank="0"] > .IntroMenuList__item > a > span{
	font-size: 1.25em;
	font-weight: 500;
	letter-spacing: -0.5px;
}
.IntroMenuList[data-rank="1"]{
    position: absolute;
    left: 0em;
    top: 7.5em;
    right: -4em;
    padding: 1em 0em 2em 2.2em;
    min-height: 5em;
    opacity: 0;
    z-index: -1;
    transition: all .2s ease;
}
.IntroMenuList[data-rank="1"] > .IntroMenuList__item > a{line-height: 1.8em;}
.IntroMenuList[data-rank="1"] > .IntroMenuList__item > a > span{font-size: 1em;border-bottom: 1px solid transparent;letter-spacing: -0.5px;}
.IntroMenuList[data-rank="1"] > .IntroMenuList__item > a:hover > span{border-color: #004e6d;}
.IntroMenuList .new-label{
	height: 1.4em;
	width: 1.4em;
	padding: 0;
	background-color: #767EC1;
	font-weight: normal;
	font-size: 12px !important;
	vertical-align: middle;
}

/* IntroPage */
.IntroPage{
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
}
.IntroPage__top{
	position: absolute;
	left:1em;
	top:1em;
	z-index: 102;
}
.IntroPage__title{
	text-align: center;
}
.IntroPage__title .title{padding-bottom: 1em;}
.IntroPage__title .title span{
	font-size: 7em;
    font-weight: 900;
    color: #fff;
    opacity: 0.95;
	line-height: 1em;
	letter-spacing: -1px;
}
.IntroPage__title .text span{font-size: 1.875em;color: #fff;}
.IntroPage__content{
	height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
	justify-content: center;
}
.IntroPage__list{
	padding-top:3em;
	display: flex;
	flex-direction: row;
	gap:2em;
	align-items: center;
	justify-content: center;
}
.IntroPage__item{
	position: relative;
}
.IntroPage__item .enter{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap:.5em;
	display: none;
	opacity: 0;
}
.IntroPage__item.active .enter{
	position: absolute;
    left: -2em;
    right: -2em;
	bottom:-4em;
    display: flex;
	opacity: 1;
	transition: all 1s;
	padding-top:1em;
}
.IntroPage__item .enter a{
    width: 10em;
	padding:1em;
	background-color: #ffffff55;
	border-radius: 5em;
    text-align: center;
	transition: all .5s;
	color:#fff;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border:2px solid #ffffff55
}
.IntroPage__item .enter a span{font-size: 1.2em;}
.IntroPage__item.bg2 a:hover{
	background: #115D62;
	border-color: #115D62;
}
.IntroPage__item.bg1 a:hover{
	background: #767EC1;
	border-color: #767EC1;
}

.IntroPage__item .title{
	font-size: 1.6em;
    line-height: 1.6em;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 2em;
    border: 2px solid #eee;
    padding: 0.6em 1em;
    min-width: 10em;
    text-align: center;
    justify-content: center;
    gap: .5em;
	transition:  all .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.IntroPage__item .title:hover{
	border-color: #767EC1;
	background-color: #00000055;
}

.IntroPage__button{
    display: block;
    border-radius: 20em;
    width: 20em;
	padding:1.6em 0;
    border: 2px solid #fff;
    text-align: center;
	transition: all .5s;
}
.IntroPage__button span{
	font-size: 1.5em;
	color:#fff;
	line-height: 1.2em;
}



/* StatNotice */
.StatNotice{
	text-align: right;
	padding:1em 0;
	font-size: 0.85em;
	color:#3e4161;
}
.StatNotice a{
	color:#767EC1;
}
.StatNotice span, .StatNotice span{font-size: 1em;line-height: 1em;}

/* IntroContent */
.IntroContent{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index: 10;
	overflow: hidden;
}

/* IntroSlider */
.IntroSlider{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index: 1;
	overflow: hidden;
}
.IntroSlider .slick-slide img{width: 100%;}
.IntroSlider .slick-dots{
	position: absolute;
	z-index: 1000;
	left:1em;
	right:1em;
	bottom:1em;
}
.IntroSlider .slick-dots li{
    position: relative;
    display: inline-block;
    margin: 0 .2em;
    padding: 0;
    cursor: pointer;
}
.IntroSlider .slick-dots li.slick-active button{
	background-color: #000;
}
.IntroSlider .slick-dots li button{
    display: block;
    width: .5em;
    height: .5em;
	border-radius: .5em;
	overflow: hidden;
    cursor: pointer;
	opacity: 0.5;
	text-indent: -2em;
	background-color: #666;
}

/* Common */
.MainTitle{line-height: 4em;}
.MainTitle span{font-size: 1.875em;}

/* MediConsulting */
.MediConsulting{
	width: 58em;
	display: flex;
	flex-direction: row;
	gap:1em;
}
.MediConsulting__item{
	flex-grow: 1;
	flex-shrink: 1;
	background-color: #E8E7F2;
	border-radius: 1em;
	height:23.8em;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: space-between;
	gap:2em;
	padding:3em;
	box-sizing: border-box;
	transition: background-color .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.MediConsulting__item:hover{
	background-color: #cbc9e6;
}
.MediConsulting__item .text{
	color:#1D0A81;
	font-size:1.5em;
	line-height: 1.4em;
}
.MediConsulting__item .title{
	position: relative;
	width:100%;
}
.MediConsulting__item .title:after{
	content:'';
	display: block;
	position: absolute;
	right:-1em;
	top:50%;
	margin-top:-2em;
	width:4em;
	height: 4em;
	background-image: url(../images/marketing/icon_arrow.svg);
	border-radius: 2em;
	background-position: center;
	background-repeat: no-repeat;
}
.MediConsulting__item .icon img{
	width: 10em;
}

/* MainSection */
.MainSectionInner__01{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap:3em;
}
.MainSectionInner__01, .MainSectionInner__02, .MainSectionInner__03{
	padding-top:3em;
}
.MainSection__02{
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
}
.MainSection__02 > div{
	position: absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color: #fff;
}
.MainSectionInner__03{
	padding-bottom: 5em;
}

/* MainSectionTab */
.MainSectionTab{
	display: flex;
	flex-direction: column;
	height: 100%;
}
.MainSectionTab__title{
	flex-grow: 0;
	flex-shrink: 0;
}
.MainSectionTab__title{
	border-bottom: 1px solid #ccc;
}
.MainSectionTab__title > a{
	display: block;
	position: relative;
	float:left;
	width:50%;
	line-height: 4em;
	text-align: center;
}
.MainSectionTab__title > a.active:after{
	content: '';
	display: block;
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	height: 1px;
	background-color: #767EC1;
}
.MainSectionTab__title > a span{
	display: block;
	font-size: 1.25em;
	position: relative;
}
.MainSectionTab__title > a span:after{
	position: absolute;
	right:0;
	top:50%;
	height:1em;
	width: 1px;
	background-color: #ccc;
	margin-top:-0.5em;
	content:'';
	display: block;
}
.MainSectionTab__title > a:last-child span::after{
	display: none;
}
.MainSectionTab__title > a.active{
	color:#767EC1;
	font-weight: 600;
}
.MainSectionTab__content{
	flex-grow: 1;
	flex-shrink: 1;
	position: relative;
	height: 100%;
}

.MainSectionTab__content > div{
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
}

/* MainLatest */
.MainLatest{
	overflow: hidden;
	flex-grow: 1;
	flex-shrink: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	opacity: 0;
	z-index: -1;
}
.MainLatest.active{
	opacity: 1;
	z-index: 100;
}
.MainLatest__list{
	flex-grow: 1;
	flex-shrink: 1;	
	display: flex;
	flex-direction: column;
}

.MainLatest__more{
	display: block;
	position: absolute;
	right:0;
	bottom:-1em;
}
.MainLatest__more > span{
	color:#767EC1;
	font-size:0.75em;
	line-height: 1.2em;
	text-transform: uppercase;
	font-weight: 800;
}
.MainLatest__more:after{
	content:'';
	display: block;
	position: absolute;
	right:0;
	top:50%;
	margin-top:-0.7em;
	width:1.4em;
	height: 1.4em;
	background-image: url(../images/marketing/icon_more.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1em;
}
.MainLatest__item{
	position: relative;
	padding-left:4.5em;
	padding-right:2em;
	height:4em;
	display: flex;
    flex-direction: column;
    justify-content: center;
	border-bottom: 1px solid #ccc;
	flex-grow: 1;
    flex-shrink: 1;
}
.MainLatest__item .date{
	display: block;
	position: absolute;
	left:0;
	top:50%;
	margin-top:-1.2em;
	width:4.5em;
	height: 3em;
	text-align: center;
}
.MainLatest__item .date > .d{
	display: block;
	font-size: 1.75em;
	line-height: 1em;
}
.MainLatest__item .date > .y_m{
	display: block;
	line-height: 1em;
	font-size: 0.75em;
	color:#666;
}
.MainLatest__item .link{
	display: block;
	line-height:3em;
	font-size: 1.125em;
	width:86%;
	position: relative;
}
.MainLatest__item .new:after{
	content:'';
	display: block;
	position: absolute;
	right:-1.2em;
	top:50%;
	margin-top:-0.7em;
	width:1.4em;
	height: 1.4em;
	background-image: url(../images/intro/icon_new.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.1em;
}
.MainLatest__item .status{
	display: block;
	position: absolute;
	right:0em;
	top:50%;
	margin-top:-1.5em;
	width:4em;
	height: 3em;
	line-height: 3em;
	text-align: center;
}
.MainLatest__item .status img{
	vertical-align: middle;
}
.MainLatest__item .status .answer{
	vertical-align: middle;
	color:#34C0B9;
}

/* MainStatics */
.MainStatics__title{
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	align-items: center;
}
.MainStatics__content{
	border-radius: 1.25em;
	background-color: #F5F5F5;
	padding:3em;
}
.MainStatics__control{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.MainStatics__control .title{
	line-height: 2em;
	font-size: 1.875em;
	padding:0 0.5em;
	color:#1D0A81;
}
.MainStatics__control .button{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2em;
	width: 2em;
	border: 1px solid #ccc;
	border-radius: 50%;
	text-indent: 0;
	overflow: visible;
	font-size: 1em;
	color: #1D0A81;
	text-decoration: none;
	transition: all 0.2s;
}
.MainStatics__control .button:hover{
	background: #1D0A81;
	color: #fff;
	border-color: #1D0A81;
}
.MainStatics__control .button span{ display: none; }
.MainStatics__control .button::after{
	font-size: 1.2em;
	font-weight: bold;
}
.MainStatics__control .button.prev::after{
	content: '\2039';
}
.MainStatics__control .button.next::after{
	content: '\203A';
}

/* MainStatics MainTab (연감/국가별 통계) */
.MainStatics__mainTab{
	display: flex;
	flex-direction: row;
	gap: 0.5em;
}
.MainStatics__mainTab a{
	display: block;
	padding: 0.5em 1.5em;
	border-radius: 0.5em;
	font-size: 1em;
	color: #666;
	background-color: #e8e8e8;
	transition: all 0.2s ease;
}
.MainStatics__mainTab a:hover{
	background-color: #d0d0d0;
}
.MainStatics__mainTab a.active{
	background-color: #1D0A81;
	color: #fff;
}

/* CountryStats (국가별 통계) */
.CountryStats__header{
	padding-bottom: 1em;
	border-bottom: 1px solid #ddd;
	margin-bottom: 1.5em;
}
.CountryStats__subTab{
	display: flex;
	flex-direction: row;
	gap: 0.5em;
}
.CountryStats__subTab a{
	display: block;
	padding: 0.5em 2em;
	border-radius: 0.25em;
	font-size: 1em;
	color: #666;
	background-color: #fff;
	border: 1px solid #ccc;
	transition: all 0.2s ease;
}
.CountryStats__subTab a:hover{
	border-color: #1D0A81;
	color: #1D0A81;
}
.CountryStats__subTab a.active{
	background-color: #1D0A81;
	border-color: #1D0A81;
	color: #fff;
}
.CountryStats__controls{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1em;
}
.CountryStats__baseDate{
	color: #666;
	font-size: 0.9em;
}
.CountryStats__note{
	color: #888;
	font-size: 0.85em;
	text-align: center;
	margin: 0.5em 0 1.5em;
}

/* MainTab */
.MainTab__list{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ccc;
}
.MainTab__main{
	display: flex;
	flex-direction: row;
}
.MainTab__main a{
	display: block;
	line-height: 3em;
	width: 10em;
	text-align: center;
	position: relative;
}
.MainTab__main a.active > span{
	color:#767EC1
}
.MainTab__main a.active:after{
	content:'';
	display: block;
	position: absolute;
	right:0;
	left:0;
	bottom:-1px;
	height:2px;
	background-color: #767EC1;
}
.MainTab__main a > span{
	font-size: 1.125em;
	color:#666666;
}
.MainTab__sub a{
	display: block;
    line-height: 3em;
    width: 10em;
    text-align: center;
    position: relative;
}
.MainTab__sub a > span{
	font-weight: bold;
}
.MainTab__sub a.active > span{
	color:#767EC1;
}
.MainTab__sub a.active:after{
	content:'';
	display: block;
	position: absolute;
	right:0;
	left:0;
	bottom:-1px;
	height:2px;
	background-color: #767EC1;
}

.MainTab__content{
	padding-top:2em;
}
.MainTab__content > .MainTab__item{
	max-height: 100em;
	height:0;
	transition: all 1s;
	overflow: hidden;
} 
.MainTab__content > .MainTab__item.active{
	height:auto;
}

/* MainBoard */
.MainBoard__list{
	display: flex;
	flex-direction: row;
	gap:2em;
}

/* MainBoardBox */
.MainBoardBox{
	flex-grow: 1;
	flex-shrink: 1;
	border: 1px solid #CCCCCC;
	border-radius: 1em;
	position: relative;
	overflow: hidden;
	flex-basis: 25%;
}

.MainBoardBox__title{
	padding-left:2em;
	line-height: 5em;
	position: relative;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}
.MainBoardBox__title span{
	font-size: 1.5em;
	color:#111;
}
.MainBoardBox__title:after{
	content:'';
	display: block;
	height: 2em;
	width: 2em;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 2em;
	background-image: url(../images/marketing/icon_next2.png);
	text-indent: -99em;
	overflow: hidden;
	position: absolute;
	right:2em;
	top:50%;
	margin-top:-1em;
	transition: all .2s;
}
.MainBoardBox__title:hover:after{
	transform: translateX(.5em);
}
.MainBoardBox__list{
	padding:2em;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	transition: all .5s;
	background-image: url(../images/marketing/bg_main1.jpg);
}
.MainBoardBox__list.bg2{
	background-image: url(../images/marketing/bg_main2.jpg);
}
.MainBoardBox__list.bg3{
	background-image: url(../images/marketing/bg_main3.jpg);
}
.MainBoardBox__list.bg4{
	background-image: url(../images/marketing/bg_main4.jpg);
}
.MainBoardBox__list:hover{
	background-size: 110% 110%;
}
.MainBoardBox__list:hover:after{
	opacity: 1;
}
.MainBoardBox__list:hover ul{
	opacity: 1;
}
.MainBoardBox__list:after{
	opacity: 0;
	display: block;
	content:'';
	position: absolute;
	right:0;
	left:0;
	top:0;
	bottom:0;
	background-color: #00000066;
	z-index: 1;
	transition: all .5s;
}
.MainBoardBox__list ul{
	position: relative;
	z-index: 10;
	opacity: 0;
}
.MainBoardBox__list li a{
	line-height: 2em;
}
.MainBoardBox__list li a > span{display: block;font-size: 0.875em;color:#fff}
.MainBoardBox__list li{
	display: block;
	position: relative;
}
.MainBoardBox__list li.new:after{
	content:'';
	display: block;
	position: absolute;
	right:-1.2em;
	top:50%;
	margin-top:-0.7em;
	width:1.4em;
	height: 1.4em;
	background-image: url(../images/marketing/icon_new.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.1em;
}

/* ChartBox */
.ChartBoxInner{
	display: flex;
	flex-direction: row;
	gap : 1em;
	margin-bottom:1em;
	flex-wrap: wrap; /* 줄 바꿈을 허용하여 한 줄에 여러 개 차트가 나열되지 않도록 */
}
.ChartBoxInner:last-child{
	margin-bottom: 0;
}
.ChartBox {
	border-radius: 1em;
	overflow: hidden;
	background-color: #fff;
	padding: 1em;
	box-sizing: border-box;
	flex-grow: 1; /* 차트가 가능한 공간을 채울 수 있도록 설정 */
	flex-shrink: 0; /* 차트가 작아지지 않도록 설정 */
	flex-basis: calc(50% - 1em); /* 한 줄에 두 개씩 배치하고, 간격을 고려한 너비 */
}
.ChartBox__title {
	padding:1em;
	text-align: center;
}
.ChartBox__title span{
	font-size: 1.2em;
	color:#111;
}
/* 차트 제목 아래 붙는 범위 안내 (예: "집계가 끝난 2025년까지")
   위 `.ChartBox__title span` (0,1,1) 을 이기려고 선택자에 클래스를 겹쳐 (0,2,1) 로 둔다.
   !important 로 덮지 않는다 — CLAUDE.md 참조. 색은 4.5:1 을 넘기려고 #888 이 아닌 #666. */
.ChartBox__title span.ChartBox__titleNote{
	display: block;
	margin-top: 0.25em;
	font-size: 0.85em;
	font-weight: normal;
	color: #666;
}

/* JoinPage */
/* 회원가입 상단 띠 (제목 + 진행 단계)
   2026-08-27 축소. 276px 을 쓰고 있었는데 그중 128px 이 위아래 여백이었다.
   진행 단계는 지금 어디쯤인지 알려주는 장식이지 읽고 판단할 내용이 아니다.
   화면을 열자마자 보여야 하는 것은 그 아래의 가입 폼이다. → 약 160px 로 줄였다. */
.JoinPage__title{
	background: #767EC1;
	padding:2.2em 0;
}
.JoinPage__title .title {
	padding-bottom: 0.9em;
}
.JoinPage__title .title span{
	font-size: 2.1em;
	color:#fff;
	line-height: 1.2em;
}
/* 단계 그림은 **높이**로 크기를 맞춘다.
   ⚠️ 폭(width:%)으로 맞추면 안 된다. 이 자리에 오는 그림은 원본 크기가 서로 다르다 —
      join_step1~3.png 는 1400x100, 내 정보수정의 modify.png 는 **420x100**.
      폭 기준으로 주면 modify.png 는 원본보다 커져 뭉개지고, 담는 상자로 줄이면
      두 화면의 알약 높이가 57px / 91px 로 달라진다. 세로가 모두 100px 인 그림들이라
      높이를 묶으면 가입 흐름 어느 화면에서나 같은 크기로 보인다. */
.JoinPage__title .step img{
	max-height:4.5em;
	max-width:100%;
	width:auto;
	height:auto;
}

.JoinBox{
	background: #F1F1F1;
	border-radius: 1em;
	padding:2em;
}
.JoinBox .text{
	color:#333;
	line-height: 1.2em;
}
.JoinBox .text2{
	color:#333;
	font-size: 1.375em;
	line-height: 1.5em;
	text-align: center;
}
.JoinBox .text2 strong{
	color:#BE4795;
}
.JoinBox .bank {
	padding:2em;
	background-color: #fff;
	border-radius: 1em;
	text-align: center;
}
.JoinBox .bank > span{
	display: inline-block;
	padding:0 1em;
	color:#333;
	font-size: 1.25em;
}
.JoinTitle{
	font-weight: 400;
	padding:1em 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.JoinTitle span{
	font-size: 2.25em;
	line-height: 1em;
	color:#333
}
.JoinTitle.center{text-align: center;justify-content: center;}

/* JoinTable */
.JoinTable table{
	width: 100%;
	table-layout: fixed;
}
.JoinTable table td{
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background-color: #fff;
	color:#666;
	line-height: 1.4em;
	padding:2em 0;
}
.JoinTable table th{
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
.JoinTable table th{
	height: 5em;
}
.JoinTable table tr th:first-child{
	border-left:0
}
.JoinTable thead th{
	background: #F1F1F1;
	font-weight: 600;
	color: #111;
	border-top:1px solid #000;
}
.JoinTable tbody th{
	font-weight: 600;
	background: #00777F0F;
	color: #111;
}
.JoinTable tfoot th{
	font-weight: bold;
}

/*  MemberInfo */
.MemberInfo__list{
	overflow:hidden;
	margin-left:-2em;
}
.MemberInfo__item{
	width:33.33%;
	float:left;
}
.MemberInfo__inner{
	border: 1px solid #ccc;
	border-radius: 1em;
	margin-left:2em;
	text-align: center;
}
.MemberInfo__item .title {
	padding-top:2em;
}
.MemberInfo__item .title span{
	font-size: 1.875em;
	line-height: 1em;
}
.MemberInfo__item .desc{
	padding-bottom: 1em;
}
.MemberInfo__item .desc span{
	font-size: 1em;
	line-height: 1em;
}
.MemberInfo__item .price{
	padding: 1.5em 2em;
    background: #f6f7ff;
	min-height: 10em;
    display: flex;
    flex-direction: column;
    justify-content: center;
	line-height: 1.2em;
}
.MemberInfo__item .price li{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding:.5em 0;
}
.MemberInfo__notice span{color:#333}
.MemberInfo__item .link{padding:2em 0}
.MemberInfo__item .link .noti{min-height: 2em;}



/* JoinForm */
.JoinForm .InfoTitle{
	border-bottom:1px solid #000
}
.JoinForm__row{
    position: relative;
    border-bottom:1px solid #eee;
    min-height:3em;
}
.JoinForm__row > .title{
    position: absolute;
    left:0;
    line-height:2em;
    top:50%;
    margin-top:-1em;
    width:12em;
    font-weight: 400;
}
.JoinForm__row .title.required label::after{content:"*";color:#34C0B9;padding-left:5px;}
.JoinForm__row > .title label{
	color:#333;
	font-size: 1em;
	text-align: left;
	display: block;
	padding:0 1em;
}
.JoinForm__row > .data{
    position: relative;
    padding-left:13em;
    padding-top:1em;
    padding-bottom:1em;
    line-height: 2em;
}
.JoinForm__row .data > input{
	border-color: #ccc;
	border-radius: 5px;
	width:48.5%;
	max-width:600px;
	height:3.2em;
	line-height: 3.2em;
	margin-right:10px;
}
.JoinForm .AgreeBox{
	padding:2.5em;
	background-color: #efefef;
	border-top:1px solid #aaaaaa;
}
.JoinForm__row > .data__topno{padding-top:0;}

/* ---------------- 가입/정보수정 화면에서 품목분류 카드 장식 제거 ----------------
 * 2026-08-27 view 의 인라인 <style> 에서 옮겨왔다.
 * 이 위젯(product-form.css)은 전시회 신청에서 회색 카드로 보이는 게 맞지만,
 * 가입 폼 안에서는 다른 입력칸과 같은 줄로 읽혀야 해서 배경·테두리를 지운다.
 * ⚠️ 위젯 폭 계산(.JoinPage #MfdsProduct .ProductForm)이 이 규칙을 전제한다 —
 *    카드의 좌우 padding·테두리가 0 이라는 그 "다른 규칙" 이 바로 여기다. */
.JoinPage .ProductForm__item.insert{
	background-color:#fff !important;
	border:none !important;
}
.JoinPage #ProductInsert{ padding-left:0; }

.UpdatePage .ProductForm__item{
	background-color:#fff !important;
	border:none !important;
	padding-left:0 !important;
}

/* 서버 검증 오류 묶음 (폼 상단) — 칸별 오류(label.error)와 같은 톤으로.
 * 예전 인라인 스타일은 #FF0000 테두리 + #FFD2D2 배경이라 화면에서 혼자 튀었다. */
.JoinPage .error-messages,
.UpdatePage .error-messages{
	margin:10px 0;
	padding:0.9em 1.1em;
	background-color:#faf3f3;
	border-left:3px solid #c07a7a;
	border-radius:4px;
	font-size:0.9em;
	line-height:1.7em;
	color:#a94f50;
}

/* 잘못 입력한 칸 — textarea 까지 포함한다 (예전 인라인 규칙은 점선 원색 빨강이었다) */
.JoinPage .data.has-error input,
.JoinPage .data.has-error select,
.JoinPage .data.has-error textarea,
.UpdatePage .data.has-error input,
.UpdatePage .data.has-error select,
.UpdatePage .data.has-error textarea{
	border-color:#c98b8b;
}

/* ---------------- 이메일 인증 화면 (/auth/email_verify) ----------------
 * 2026-08-27 재디자인. view 의 인라인 <style> 에서 옮겨오면서 정리했다.
 * 그전 문제: ⏳ 이모지, 주황·마젠타 등 이 화면 팔레트에 없는 색, 제목 중복.
 * 지금은 가입 폼의 안내 박스(.JoinForm__note)와 같은 모양을 쓴다 —
 * 같은 흐름 안에서 안내가 두 가지 얼굴을 가질 이유가 없다. */
.VerifyPanel{ max-width:640px; margin:0 auto; text-align:left; }
.VerifyPanel__lead{
	margin-bottom:1.2em;
	font-size:1.05em;
	line-height:1.7em;
	color:#333;
	text-align:center;
}
.VerifyPanel__lead b{ color:#5D64A8; }

/* 상태 박스 — 왼쪽 띠 색으로 상태를 구분한다 */
.VerifyBox{
	display:flex;
	align-items:flex-start;
	padding:1.1em 1.3em;
	border-radius:6px;
	line-height:1.7em;
	font-size:0.95em;
}
.VerifyBox > .mif-icon{ flex:none; margin-right:0.6em; font-size:1.15em; line-height:1.7em; }
.VerifyBox__title{ display:block; font-weight:600; margin-bottom:0.25em; }
.VerifyBox__mail{ font-weight:600; word-break:break-all; }

.VerifyBox--wait{ background-color:#f1f2fa; border-left:3px solid #767EC1; color:#4c5185; }
.VerifyBox--wait > .mif-icon,
.VerifyBox--wait .VerifyBox__mail{ color:#5D64A8; }

.VerifyBox--done{ background-color:#f1f8f4; border-left:3px solid #0e9f6e; color:#2f6b52; }
.VerifyBox--done > .mif-icon{ color:#0e9f6e; }

.VerifyBox--fail{ background-color:#faf3f3; border-left:3px solid #c07a7a; color:#a94f50; }
.VerifyBox--fail > .mif-icon{ color:#c07a7a; }

/* 남은 단계 — 가입 접수 메일의 안내와 같은 문장을 화면에서도 쓴다 */
.VerifySteps{
	margin-top:1.1em;
	padding:1em 1.3em;
	background-color:#fafafc;
	border:1px solid #e6e6ec;
	border-radius:6px;
	font-size:0.92em;
	line-height:1.9em;
	color:#555;
}
.VerifySteps b{ color:#333; }
.VerifySteps__note{ display:block; margin-top:0.5em; color:#8a8a95; font-size:0.95em; }

/* ---------------- 알림 토스트 (#alert-list) ----------------
 * 화면 정중앙 + 배경 딤. 2026-08-27 변경.
 *
 * 그전에는 오른쪽 위에 붙어 있었다(가입폼 top:120px/right:0, 내 정보수정
 * top:250px/right:15px — 두 뷰가 각자 인라인 <style> 로 갖고 있어 위치도 달랐다).
 * "사용 가능한 아이디입니다" 같은 확인 문구가 시선 밖에서 떠 눈치채기 어려웠다.
 *
 * 스타일을 이 파일로 모았다 (CLAUDE.md: CSS 는 view 에 인라인으로 두지 않는다).
 *
 * ⚠️ 딤은 **알림이 떠 있는 동안에만** 깔려야 한다. `#alert-list` 는 알림이 없어도
 *    빈 div 로 항상 문서에 있다. `:empty` 로 숨긴다 — 이 div 안에는 공백조차 없고
 *    (`<div id="alert-list"></div>`) JS 가 append/remove 로만 채우므로 정확히 맞는다.
 * ⚠️ pointer-events:none — 딤이 클릭을 막지 않는다. 이 알림은 5초 뒤 스스로 사라지는
 *    안내일 뿐 확인을 요구하는 대화상자가 아니다. 혹시 제거가 실패해도 화면이
 *    잠기지 않는다. */
#alert-list:empty{ display:none; }
#alert-list{
	position:fixed;
	inset:0;
	z-index:1000;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:6px;
	padding:20px;
	background-color:rgba(23,24,38,0.45);
	pointer-events:none;
}
#alert-list .alert{
	font-family:"Pretendard", sans-serif !important;
	font-size:15px;
	line-height:1.6;
	background-color:#5D64A8;      /* 가입 버튼과 같은 주 색 */
	color:#fff;
	border-radius:10px;
	padding:18px 26px;
	margin:0;
	max-width:420px;
	text-align:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.25);
	animation:alertPop .18s ease-out;
}
@keyframes alertPop{
	from{ opacity:0; transform:translateY(8px) scale(.96); }
	to  { opacity:1; transform:none; }
}

/* 회원가입 폼 안내 문구 (2026-08-27)
   .JoinForm__note  기본정보등록 블록 아래 — 이메일/연락처를 실제 값으로 받기 위한 안내
   .JoinForm__hint  개별 항목 아래 — 그 항목에서만 필요한 한 줄 안내
   왼쪽 여백은 .JoinForm__row > .data 와 같은 13em 이라 입력칸과 세로선이 맞는다. */
.JoinForm__note{
	/* 들여쓰기는 .JoinForm__row > .data 와 같은 13em — 입력칸과 왼쪽 끝이 맞는다.
	   ⚠️ font-size 를 이 요소에 주면 em 기준이 함께 줄어 어긋난다. 크기는 안쪽 span 에만 준다. */
	display:flex;
	align-items:flex-start;
	margin:0.8em 0 1.2em 13em;
	padding:0.9em 1.1em;
	background-color:#f1f2fa;
	border-left:3px solid #767EC1;
	border-radius:4px;
	line-height:1.6em;
	color:#4c5185;          /* #f1f2fa 위에서 대비 6.6:1 */
}
.JoinForm__note > span{
	font-size:0.9em;
}
/* 항목 하나에만 붙는 안내 — .JoinForm__note 와 같은 모양, 한 단계 작게 */
.JoinForm__hint{
	display:flex;
	align-items:flex-start;
	margin-top:0.8em;
	padding:0.7em 0.9em;
	background-color:#f1f2fa;
	border-left:3px solid #767EC1;
	border-radius:4px;
	font-size:0.9em;
	line-height:1.6em;
	color:#4c5185;
}
/* 아이콘 — flex gap 대신 margin 을 쓴다(구형 브라우저에서 gap 이 무시되면 글자에 붙는다) */
.JoinForm__note > .mif-info,
.JoinForm__hint > .mif-info{
	flex:none;
	margin-right:0.5em;
	line-height:1.6em;
	color:#767EC1;
}

/* 제품 품목분류 위젯(#MfdsProduct)을 가입폼 입력칸과 같은 크기로.
   ⚠️ 이 위젯(public/css/product-form.css)은 전시회 신청·마이페이지에서도 쓴다.
      거기서는 지금 크기가 맞으므로 **가입폼 안으로만** 범위를 좁힌다.
   폭: 안쪽 입력칸이 .JoinForm__row .data > input(48.5% / 최대 600px)과 같아지도록
       저장 버튼 자리(padding-right:2.4em)를 더한 값으로 잡는다. */
.JoinPage #MfdsProduct .ProductForm{
	/* 안쪽 입력칸이 정확히 48.5%(최대 600px) — .JoinForm__row .data > input 과 같아지도록
	   오른쪽에 붙는 여백을 폭에 더한다.
	     2.4em = .ProductForm 의 padding-right (저장 버튼 자리)
	     0.6em = 카드(.ProductForm__item) 의 padding-right
	   ⚠️ 카드의 **왼쪽** padding 과 테두리는 이 화면에서 다른 규칙에 덮여 0 이다
	      (2026-08-27 브라우저 실측: padL=0 / border=0 / padR=7.68px). 그래서 좌우를
	      다 더하면 입력칸이 그만큼 넓어진다. 위젯 CSS 를 손대면 여기도 다시 재야 한다. */
	box-sizing:border-box;
	width:calc(48.5% + 2.4em + 0.6em);
	max-width:calc(600px + 2.4em + 0.6em);
	font-size:inherit;      /* 위젯 기본 .8125rem 는 가입폼 글자보다 작다 */
	--pf-row:3.2em;         /* 입력칸 높이 = .JoinForm__row .data > input 과 동일 */
}
.JoinPage #MfdsProduct .ProductForm__item input[type="text"],
.JoinPage #MfdsProduct .ProductForm__item select{
	padding-top:0.5em;
	padding-bottom:0.5em;
}

/* 내 정보 수정(/auth/update)의 "주요 상품 관리" — 입력칸 높이를 페이지의 다른
   입력칸과 맞춘다 (2026-08-27). 실측 29px vs 41px 로 이 칸만 납작했다.
   ⚠️ **높이만** 맞추고 폭은 넓은 채로 둔다. 여기 줄에는
      "[14-A17000] 심혈관용 기구(3,4등급) / Cadiovascular devices(3,4class)" 처럼
      긴 분류명이 그대로 들어가서, 가입폼처럼 465px 로 좁히면 잘린다.
   ⚠️ 대상이 둘이다 — 새로 넣는 위젯(#MfdsProduct, AJAX 로 붙는다)과
      이미 저장된 목록(.data > .ProductForm, 서버가 그린다). 둘 다 잡아야 한다.
   범위를 .UpdatePage 로 좁히는 이유는 가입폼과 같다: 이 위젯을 전시회 신청에서도 쓴다. */
.UpdatePage #MfdsProduct .ProductForm,
.UpdatePage .data > .ProductForm{
	font-size:inherit;      /* 위젯 기본 .8125rem(13px) → 페이지와 같은 12.8px */
	--pf-row:3.2em;         /* = .JoinForm__row .data > input 의 높이 */
}
.UpdatePage .ProductForm__item input[type="text"],
.UpdatePage .ProductForm__item select{
	padding-top:0.5em;
	padding-bottom:0.5em;
}

/* 입력 오류 — 알림창 대신 칸 바로 아래 한 줄 (2026-08-27).
   원색 빨강(#dc3545)은 폼 전체가 시끄러워져 채도를 낮춘 붉은색을 쓴다.
   #a94f50 은 흰 배경에서 대비 5.3:1 로 본문 기준(4.5:1)을 넘는다. */
.JoinPage label.error{
	display:block;
	margin-top:0.5em;
	font-size:0.9em;
	line-height:1.5em;
	color:#a94f50;
}
.JoinPage label.error::before{
	content:"!";
	display:inline-block;
	width:1.35em;
	height:1.35em;
	margin-right:0.4em;
	font-size:0.85em;
	font-weight:700;
	line-height:1.35em;
	text-align:center;
	color:#fff;
	background-color:#c07a7a;
	border-radius:50%;
}
/* 잘못 입력한 칸의 테두리도 같은 계열로 — 기본 테두리(#ccc)와 구분되되 튀지 않게 */
.JoinPage .data.has-error > input,
.JoinPage .data.has-error > select,
.JoinPage input.error,
.JoinPage select.error{
	border-color:#c98b8b;
}

/* 품목분류 위젯을 못 불러왔을 때 — 오류 문구와 같은 톤 */
.JoinForm__loadFail{
	padding:0.7em 0.9em;
	background-color:#faf3f3;
	border-left:3px solid #c07a7a;
	border-radius:4px;
	font-size:0.9em;
	line-height:1.6em;
	color:#a94f50;
}
.JoinPage .AgreeBox{border:none;padding:0;background:none;}
.JoinPage .AgreeBox__list{border-radius:10px;border:none;margin-bottom:10px;}
.JoinPage .AgreeBox .InfoTitle{border:none;}

/* 약관 접기/펼치기 (2026-08-27)
   전문이 늘 펼쳐져 있으면 정작 눌러야 할 동의 체크박스와 가입 버튼이 한참 아래로
   밀린다. <details> 라 JS 가 없어도 되고, 펼침/접힘이 스크린리더에 그대로 전달된다.
   기존 패턴: public/css/imda.css 의 .ImdaGuide (2026-08-22) — 같은 방식으로 짠다. */
.JoinPage .AgreeTerms{
	border:1px solid #e0e0e6;
	border-radius:8px;
	background-color:#fafafc;
}
.JoinPage .AgreeTerms > summary{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0.9em 1.1em;
	cursor:pointer;
	list-style:none;               /* 기본 삼각형 제거 (Firefox) */
}
.JoinPage .AgreeTerms > summary::-webkit-details-marker{display:none;}
.JoinPage .AgreeTerms > summary:hover{background-color:#f4f4f8;border-radius:8px;}
.JoinPage .AgreeTerms[open] > summary{
	border-bottom:1px solid #e6e6ec;
	border-radius:8px 8px 0 0;
}
.AgreeTerms__title{
	font-size:1.1em;
	font-weight:500;
	color:#222;
}
/* 펼침 상태에 따라 문구가 바뀐다. summary 가 상태를 알려주므로 이 글자는 장식이다
   (마크업에서 aria-hidden 처리). */
.AgreeTerms__toggle{
	display:inline-flex;
	align-items:center;
	font-size:0.9em;
	color:#767EC1;
	white-space:nowrap;
}
.AgreeTerms__toggle::before{content:"내용 보기";}
.JoinPage .AgreeTerms[open] .AgreeTerms__toggle::before{content:"접기";}
.AgreeTerms__toggle > i{
	margin-left:0.35em;
	font-size:0.9em;
	transition:transform .15s;
}
.JoinPage .AgreeTerms[open] .AgreeTerms__toggle > i{transform:rotate(180deg);}
/* 펼쳤을 때 전문 상자 — 위쪽 여백과 테두리는 details 가 이미 갖고 있다 */
.JoinPage .AgreeTerms .AgreeBox__list{
	margin-top:0;
	margin-bottom:0;
	border-radius:0 0 8px 8px;
	background-color:#fff;
}
/* 동의 줄 — 체크박스는 접힌 상태에서도 항상 보인다. 전문 보기는 오른쪽 끝에. */
.JoinPage .AgreeBox__checkbox{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:0.8em;
	padding:0 0.2em;
}
.JoinPage .AgreeBox__checkbox label{
	display:inline-flex;
	align-items:center;
	cursor:pointer;
}
.AgreeTerms__full{
	font-size:0.9em;
	color:#767EC1;
	text-decoration:underline;
	white-space:nowrap;
}
.AgreeTerms__full:hover{color:#4c5185;}

/* mypage */
.mypage__wrap, .mail__auth__wrap{width:100%;}
.mypage__wrap h3, .mail__auth__wrap h3{font-size:2em;text-align:center;color:#fff;background-color:#767ec1;padding:50px 0;}
.mypage__wrap > a{
	color:#fff;
	font-size:0.85em;
	border:2px solid #fff;
	border-radius:20px;
	padding:10px 20px;
	position:absolute;
	left:50%;
	top:38px;
	transform:translateX(42em);
}
.mypage__wrap > a:hover{background-color:#fff;color:#767EC1;}
.mypage__wrap .Page__inner{width:88em;margin:0 auto;padding:0 0 100px;position:relative;}
.mypage__wrap h4{font-size:1.5em;color:#767EC1;padding:70px 0 50px;}
.mypage__wrap .level__info{width:100%;}
.mypage__wrap .level__info th, td {border: 1px solid #ccc;border-collapse: collapse;height:65px;}
.mypage__wrap .level__info th:first-child{border-left:none;}
.mypage__wrap .level__info td[rowspan="8"], .mypage__wrap .level__info thead th:last-child{border-right:none;}
.mypage__wrap .level__info thead th{background-color:#f1f1f1;border-top:2px solid #777;}
.mypage__wrap .level__info .mif-checkmark{
	font-size:0.75em;
	border:2px solid #444;
	color:#444;
	display:inline-block;
	width:20px;
	height:20px;
	line-height:20px;
	border-radius:50%;
}
.mypage__wrap .level__info .th__sct{background-color:#cbcde6 !important;color:#000;}
.mypage__wrap .level__info .td__sct{background-color:#f4f5ff;}
.mypage__wrap .paid__lists table{border-collapse:collapse;border-spacing:0;}
.mypage__wrap .paid__lists th{
	border-bottom:3px solid #767ec1;
	height:35px;
	font-weight:500;
}
.mypage__wrap .paid__lists td{
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	height:40px;
}
.mypage__wrap .paid__lists td:first-child{
	border-left:none;
}
.mypage__wrap .paid__lists td:last-child{border-right:none;}
.mypage__wrap .paid__lists tr:nth-child(even) td {
	background: #eaeaed; }

/* Update page */
.UpdatePage{width:100%;}
.LayoutIntro__inner h1 b{font-size:0.5em;font-weight:400;margin-left:10px;opacity:0.7;}
.UpdatePage .LayoutIntro__inner .step img{max-height:91px;}

/* mail auth */
.mail__auth__inner{
    width: 88em;
    margin: 0 auto;
    position: relative;
}
.mail__auth__content{border-bottom:1px solid #ccc;padding:0 20px;}
.mail__auth__content h4{padding-top:80px;font-weight:400;font-size:1.1em;}
.mail__auth__content .mail__auth__complete{font-size:2em;font-weight:400;padding:20px 0 70px;}
.mail__auth__content .mail__auth__complete b{font-weight:600;color:#767ec1;}
.mail__auth__content .mail__auth__desc{font-size:1.2em;line-height:1.5em;font-weight:400;padding-bottom:50px;}
.mail__auth__addinfo{padding:0 20px 200px;}
.mail__auth__addinfo .mail__auth__reference{padding:30px 0;font-size:0.9em;}
.mail__auth__addinfo ul li{font-size:0.9em;line-height:1.75em;list-style:none;display:flex;}
.mail__auth__addinfo ul li i{font-style:normal;width:20px;flex-shrink:0;}
.mail__auth__addinfo button{
	width:240px;
	height:54px;
	line-height:54px;
	font-size:1.25em;
	color:#767EC1;
	border:2px solid #767EC1;
	font-weight:400;
	margin-left:20px;
	margin-top:50px;
}
.mail__auth__addinfo button:hover{color:#fff;background-color:#767EC1;}