/* ========== Design Tokens ========== */
:root {
	--bg:#ffffff;
	--ink:#111827;
	/* gray-900 */
	--ink-2:#2A2336;
	/* gray-700 */
	--muted:#6b7280;
	/* gray-500 */
	--primary:#8E65E6;
	/* lighter */
	--accent:#EAF1FB;
	--border:#dddddd;
	--success:#22c55e;
	--warning:#f59e0b;
	--danger:#ef4444;
	--radius-lg:20px;
	--radius:10px;
	--shadow:0 10px 30px rgba(108,77,246,.15),0 2px 8px rgba(17,24,39,.06);
	--container:1200px;
}

/* 초기화 */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	color: #191919;
  font-family: 'Pretendard Variable', sans-serif;
	font-size: 62.5% !important;
	letter-spacing: -0.01em;
	word-break: keep-all;
	word-wrap: break-word;
	box-sizing: border-box;
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color : transparent !important;
	animation:entry .3s ease forwards;
  opacity: 0;
}

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

html {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

body {
	font-size: 1.6rem;
}

a {
	color: inherit;
	outline: none;
	text-decoration: none;
}

ol, ul {
	list-style: none;
}

b, strong {
	font-weight: 700;
}

img {
	max-width: 100%;
}

button {
	font-family: inherit;
	border: none;
	outline: none;
	cursor: pointer;
	color: inherit;
	-webkit-appearance: none;
	background: none;
}

select {
	outline: none;
	border: 1px solid transparent;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
}

input, textarea {
	font-family: inherit;
	outline: none;
	border: 1px solid transparent;
}

:focus {
	outline: none;
}

::placeholder {
	color:#888888;
}

em, i {
	font-style: normal;
}

@-webkit-keyframes entry {
	to{opacity: 1;}
}

@keyframes entry {
	to{opacity: 1;}
}

@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {

}
@media screen and (max-width:768px) {

}
@media screen and (max-width:576px) {

}


/* 블라인드 */
.blind {
	overflow: hidden;
	position: absolute;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
}


/* 디스플레이 */
.d-block {
  display: block;
}


/* 줄바꿈 */
.md {
  display: block;
}

@media screen and (max-width:1200px) {

}
@media screen and (max-width:1024px) {
  .md {
    display: none;
  }
}
@media screen and (max-width:768px) {

}
@media screen and (max-width:576px) {

}


/* 버튼 */
.btn {
  /*display: inline-flex;
  justify-content: space-between;*/
  align-items: center;
  width: 100%;
  padding: 0px 30px;
  border-radius:10px;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}


@media screen and (min-width:1201px) {
  .btn:hover i {
    transform: translateX(15px);
  }

}

@media screen and (max-width:1200px) {
  .btn {
    font-size:1.8rem;
  }
}
@media screen and (max-width:1024px) {
  .btn {
    padding:0px 20px;
  }
}
@media screen and (max-width:768px) {
  .btn {
    font-size:1.6rem;
  }
}
@media screen and (max-width:576px) {
  .btn {
    padding:0px 16px;
    font-size:1.2rem;
  }
}

.container {
	width:min(100%,var(--container));
	margin-inline:auto;
	padding:0 20px;
}

.section {
	position:relative;
}
.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:.6rem;
	padding:.9rem 1.2rem;
	border-radius:12px;
	font-weight:700;
	border:1px solid transparent;
	cursor:pointer;
	transition:.2s background,.2s box-shadow
}
.btn-primary {
	background:var(--primary);
	color:#fff;
	box-shadow:var(--shadow)
}
.btn-primary:hover {
	filter:brightness(.96)
}
.btn-ghost {
	background:#fff;
	border-color:var(--border)
}
.badge {
	display:inline-flex;
	align-items:center;
	gap:.35rem;
	padding:.4rem .65rem;
	border-radius:999px;
	background:#fff;
	border:1px solid var(--border);
	font-size:.8rem
}
.shadow {
	box-shadow:var(--shadow)
}
.card {
	background:#fff;
	border:1px solid var(--border);
	border-radius:var(--radius);
	box-shadow:var(--shadow)
}
.subtle {
	color: var(--muted)
}
/* ========== Header ========== */
header {
	position:sticky;
	top:0;
	z-index:50;
	background:rgba(255,255,255,.85);
	backdrop-filter:blur(8px);
	border-bottom:1px solid rgba(17,24,39,.06)
}
.nav {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:15px 20px;
}
.logo {
	display:flex;
	align-items:center;
	gap:.6rem;
	font-weight:800
}
.logo-badge {
	width:28px;
	height:28px;
	border-radius:8px;
	background:linear-gradient(135deg,var(--primary),#B794F4)
}
.nav-actions {
	display:flex;
	align-items:center;
	gap:.6rem
}
.btn-gradation {
    background: linear-gradient(90deg, #6E8EFF, #A57EFF);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    height:44px;
}
.btn-gradation img {
    height:14px;
    padding-left:20px;
}
.btn-logout {
    border:1px solid var(--border);
    width:70px;
    height:44px;
    border-radius: 5px;
}

.mobile-toggle {
	display: none
}

/* ========== Footer ========== */
footer {
	padding:30px 0;
	background:#2A2336;
	color:#fff
}
footer .container {
    display: flex;
    justify-content: space-between;
}
footer .container .bt-menu span.tel {
    padding-right:80px;
}
footer a {
	color: #fff
}

@media screen and (max-width: 768px) {  
    footer .container {
    display: block;
    }
    footer .container .bt-menu {
        padding-top:15px;
    }
    footer .container .bt-menu span.tel {
    display: block;
    }
    footer span {
        font-size:1.4rem;
    }
}
/* ========== Utilities ========== */
.center {
	text-align:center
}
.mt-2 {
	margin-top:8px
}
.mt-3 {
	margin-top:12px
}
.mt-4 {
	margin-top:16px
}
.mt-6 {
	margin-top:24px
}
.mt-8 {
	margin-top:32px
}
.mb-8 {
	margin-bottom: 32px
}
.sub-container {
    position:relative; 
    overflow:hidden; 
    padding:50px 0 100px 0;
}