@charset "utf-8";
@import "../fonts/noto-sans-korean-webfont/noto-sans-korean.css";

:root {
  --primary: #5046E5;
  --secondary: #fff;
  --info: #19b20C;
  --danger: #E10797;
  --dark: #131322;
  --white: #fff;
  --light:#f9f9f9;
  --light-gray:#EDEEF0;
  --gray: #CBCCD5;
  --dark-gray: #7C828D;
  --light-black:#8C8C8C;
  --sumin: #9691d7;
  --gradient:linear-gradient(291deg, #77D3CB 0, #5AA9E2 20%, #6585D7 40%, #AE7BE8 60%, #DF8190 80%, #DC4E97 100%);
  --icon-width:20px;
  --icon-height:20px;
  --font-size-xs:1rem;
  --font-size-sm:1.2rem;
  --font-size-md:1.4rem;
  --font-size-lg:1.6rem;
  --font-size-xl:1.8rem;
  --weight-thin:100;
  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:700;
  --weight-bold:900;
  --bp-mob:540px;
  --bp-tab:860px;
  --bp-pc:1023px;
  --bp-desk:1200px;
  --bp-big:1640px;
	--font: 'Noto Sans KR', sans-serif;
}
/* responsive
* 1640px
* 1200px
* 1023px
* 860px
* 540px
*/

/* common */
*::-webkit-scrollbar {width: 10px;}
*::-webkit-scrollbar-track {background-color: var(--white);}
*::-webkit-scrollbar-thumb {background-color: var(--gray);border-radius:50px;background-clip: padding-box;border: 2px solid transparent;}
*::-webkit-scrollbar-button {display: none;}
*::-webkit-scrollbar-thumb:hover {background-color: var(--primary);transition: all 0.2s;cursor:pointer;}
*::-webkit-scrollbar-track,.container::-webkit-scrollbar-thumb {border-radius: 50px;}
html {font-size: 62.5%;line-height: 1.5;}
body {font-family: 'Noto Sans KR', sans-serif;font-size:14px;color:var(--dark);}
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px transparent inset ; -webkit-text-fill-color: var(--dark); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; }
input[type="checkbox"] {display:none;}
input[type="checkbox"] + span.input-span {cursor:pointer;background: url(../imgs/ic_check_none.svg) center no-repeat;width: 20px;height: 20px;display:inline-block}
input[type="checkbox"]:checked + span.input-span{background:url(../imgs/ic_check.svg) center no-repeat;}
input[type="radio"] {-webkit-appearance: none;-moz-appearance: none;appearance: none;width: 16px;height: 16px;border: 1px solid #B6B9BF;border-radius: 50%;outline: none;cursor: pointer;}
input[type="radio"]:checked {background-color: var(--primary);border: 2.5px solid white;box-shadow: 0 0 0 1.5px var(--primary);width: 15px;height: 15px;}
.d-none {display:none;}
.d-block {display:block;}
.d-flex {display:flex;}
.d-inline-flex {display:inline-flex;}
@media screen and (min-width:540px){
  body {font-size:16px;}
}

/*  전체 layout */
.container {width:100%;height:100%;}
.signup {width:100%; max-width:340px;margin:0 auto;padding:1rem;}
.login-form-wrap {width:100%; max-width:340px;margin:0 auto;padding:2rem;}
@media screen and (min-width:540px){
  .signup, .login-form-wrap {padding:0;}
}
/* login */
.hd-join {padding:4rem 0 3rem;}
.login-wrap {width:100%;height:auto;min-height:100vh;background:var(--primary);overflow:hidden;}
.login-inner {width: 100%; height: 100vh; display: flex; flex-direction: column; justify-content: center;align-items: center; padding-top: 3rem;}
.login-inner .logo {margin: 3rem;display: block;}
.login-inner .login-box {width:100%;height:80vh;background:var(--white);border-radius:2rem 2rem 0 0;flex: 1 0 0;padding: 2rem 0;}
.login-form {padding: 4vh 0 2rem;width:100%;}
.login-form .row {display:flex;align-items: center;margin: 0 0 3rem;}
.login-form .row:last-of-type {margin-bottom:0;}
.login-form .row label {width:4rem;display:block;font-size:var(--font-size-sm);flex:0 0 4rem;}
.login-form .row .input-box {border:1px solid var(--light-gray);background:var(--light);border-radius:4px;padding: 0 1rem;flex:1 1 auto;display:flex;align-items:center;position:relative;}
.login-form .row .input-box input {width:calc(100% - 10rem);border:0;background: transparent;height: 4.8rem;flex:1 1 0;color:var(--light-black);}
.login-form .row .input-box input:focus {background:transparent;}
.login-form .row .input-box .button-icon {width: 3rem;height:4rem;}
.login-form .row .input-box .button-icon img {margin:0 auto;}
.login-form .row .input-box .button-icon .password-icon.hide {display:none;}
.login-form .error {margin-top:1rem;display: block;font-size: var(--font-size-sm);color: var(--danger);text-align:center;}
.login-form .error.d-none {display:none;}
.login-auto {text-align:center;margin: 1rem auto 0;}
.login-auto label {display:flex; align-items: center; justify-content: center; gap:1rem; color:#1A1D2C;}
.login-enter {width:100%;}
.login-enter button {background:var(--primary);color:var(--white);width:100%;padding:1.2rem;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);border-radius:0.8rem;margin:2rem 0;}
.login-join {display:flex;align-items: center;justify-content: center;gap:4rem;max-width:786px;margin:0 auto;}
.login-join a:hover {text-decoration: underline;}
.login-switch {width:100%;text-align: center;margin-top:2rem;}
.login-switch a {font-size:var(--font-size-md);color:var(--dark);padding:0.4rem 1.2rem; border-radius:50px;display: inline-flex; justify-content: center; align-items: center;}
.login-switch a:hover {text-decoration: underline;}
@media screen and (min-width:540px) {
  .login-inner {padding-top:25vh;}
  .login-inner .login-box {height:60vh;}
}

/* join-form */
.join-form {display:flex;flex-direction: column;position:relative;}
.join-form .form-content {overflow-y:auto;padding-bottom: 9rem;}
.join-form label {display:flex;align-items: center;gap:1rem;padding:2rem 0;cursor:pointer;}
.join-form label .text {font-weight:var(--weight-bold);flex:1 1 auto;}
.join-form label .text .point {color:var(--primary);padding-right: 0.4rem;}
.join-form label .more {display:block;width:9px;height:14px;background:url(../imgs/ic_more.svg) no-repeat center;}
.join-form label.all-agree {padding:0;}
.join-form label.all-agree .text {font-size:var(--font-size-xl);}
.join-form .terms-box {height:9.5rem;overflow-x:hidden;overflow-y:auto;border:1px solid var(--gray);padding:1.6rem;margin-bottom:3rem;}
.join-form .form-btn {position: fixed;width:100%;background:#fff;padding:2rem;bottom:0;left:0;z-index:100;max-width:340px;margin:0 auto;}
.join-form .form-btn .next-btn {background-color:var(--gray);color:var(--white);font-size:var(--size-md);width:100%;height:4.4rem;border-radius:6px;}
.join-form .form-btn .next-btn.highlight {background-color:var(--primary);}
.join-message {font-size:2rem;padding:2rem 0 3rem;font-weight:var(--weight-medium);}
.join-form .step {margin-bottom:2rem;position:relative;}
.join-form .step p {font-size:var(--font-size-sm);display:flex;align-items: center;justify-content: space-between;}
.join-form .step p .time {color:var(--danger);}
.join-form .step p .util  {color:var(--primary); text-decoration: underline;}
.join-form .step input {width:100%;border:1px solid var(--light-gray);background:var(--light);height:4rem;padding:1rem;border-radius:8px;margin-top:6px;}
.join-form .step input:focus, .join-form .step input:active {background:#fff;}
.join-form .step input::placeholder {font-size:1.2rem;}
.join-form .step input.success {border-color:var(--primary);background:#fff;}
.join-form .step input.error {border-color:1px solid var(--danger);background:#fff;}
.join-form .step .error {font-size:var(--font-size-sm);color:var(--danger);word-break:keep-all;}
.join-form .step .success {font-size:var(--font-size-sm);color:var(--primary);word-break:keep-all;}
.join-form .step input.pw-check {padding-right:60px;}
.join-form .step .pw {position:absolute;bottom: 22px;width: 28px;height: 38px;z-index: 1;}
.join-form .step .pw-view {right: 30px;background: url(../imgs/ic_eye.svg) no-repeat center;}
.join-form .step .pw-view-slash {right: 30px;background: url(../imgs/ic_eye_slash.svg) no-repeat center;}
.join-form .step .pw-delete {right: 1px;background: url(../imgs/ic_x.svg) no-repeat center;}
@media screen and (min-width:340px){
  .join-form .form-btn {left:50%;transform:translateX(-50%);padding:2rem 0;}
}
@media screen and (min-width:540px){
  .join-form .terms-box {font-size:1.4rem;}
  .join-form .step .pw {bottom:25px;}
}

/* 가입완료 */
.signup-complete {width:100%;height:100vh;background:url(../imgs/complete_img.svg) no-repeat top 12vh center;}
.signup-text {text-align:center;padding-top:17vh;}
.signup-text p:first-of-type {color:var(--primary);font-size:var(--font-size-xl);}
.signup-text p:first-of-type b {font-weight:var(--weight-bold);}
.signup-text p:last-of-type {margin-top:3px;}
.signup-btn {position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;padding:2rem;text-align:center;max-width:340px;}
.signup-btn .next-btn {background-color:var(--primary);color:var(--white);font-size:var(--size-md);font-weight:var(--weight-bold);width:100%;height:4.4rem;border-radius:6px;}
@media screen and (min-width:540px){
  .signup-btn {padding:2rem 0;}
}

/* 메인 layout */
.menu {width: 40px;height: 40px;flex: 0 0 40px;}
.menu .hamburger-menu {width: 100%;height: 100%;background:url(../imgs/ic_menu_gray.svg) no-repeat center #fff;border:0;outline:none;background-size:60%;}
.dim {width:100%;height:100vh;background:rgba(0,0,0,0.7);position:fixed;left:0;z-index: 9900;top:0;bottom:0;right:0;transition:all 0.35s;visibility:hidden;opacity:0;}
.dim.open {visibility: visible;opacity:1;}
.dim .hamburger-menu-close {width:40px;height:40px;background:url(../imgs/ic_close.svg) no-repeat center;border:0;outline:none;position:absolute;right:2rem;top:2rem;transform:translateX(4rem);transition:all 0.3s;}
.dim.open .hamburger-menu-close {transform:translateX(0);}
.hd {width:100%;}
.hd-wrap {width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;padding: 1rem;gap: 0.6rem;border-bottom:1px solid #eee;}
.hd-wrap .hd-title {position:relative;text-align:left;display: flex;align-items: center;flex: 1 1 auto;overflow: hidden;}
.hd-wrap .hd-title .ttl {font-weight: var(--weight-md);padding-right:1rem;display: block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight: var(--weight-bold);}
.hd-wrap .hd-right .hd-chat-edit {display:none;}
.hd-wrap .hd-right .hd-chat-edit.show {display:flex; align-items: center;}
.hd-wrap .hd-right .chat-edit-btn {width: 2rem;height: 4rem;display:inline-block;margin:0 0.2rem;background:url(../imgs/ic_ellipsis.svg) no-repeat center;background-size: 0.5rem;}
.hd-wrap .hd-right .chat-edit-panel {position:absolute;display:none;top: 5rem;right: 1rem;background:var(--white);padding:2rem;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.4);z-index: 9991;}
.hd-wrap .hd-right .chat-edit-panel.panel-view {display:block;}
.hd-wrap .hd-right .chat-edit-panel button {width:100%;display:block;text-align:left;padding-left: 2.6rem;font-size:var(--font-size-md);}
.hd-wrap .hd-right .chat-edit-panel .modify-btn {background:url(../imgs/ic_edit.svg) no-repeat center left;margin-bottom:1rem;}
.hd-wrap .hd-right .chat-edit-panel .delete-btn {background:url(../imgs/ic_trash.svg) no-repeat center left;}
.hd-wrap .hd-right {display:flex;justify-content: center;align-items: center;gap: 0.6rem;}
.hd-wrap .hd-right a {display:block;}
.hd-wrap .hd-right .chat-new-btn {width:3rem;height:3rem;border-radius:100%;overflow:hidden;}
.hd-wrap .hd-right .chat-new-btn img {width:100%;height:100%;display:block;}
.hd-wrap .hd-right .chat-mode {display:none;align-items: center; gap: 0 0.6rem; padding: 0 0.6rem;}
.hd-wrap .hd-right .chat-mode button {background:var(--light); border:1px solid; font-size:var(--font-size-md);padding:0.6rem;border-radius:6px; line-height: 1.2; flex:1 1 auto;}
.hd-wrap .hd-right .chat-mode .gpt-mode01 {border-color:#468FE5; color:#468FE5;}
.hd-wrap .hd-right .chat-mode .gpt-mode01.on {border-color:#468FE5; background:#468FE5; color:#fff;}
.hd-wrap .hd-right .chat-mode .gpt-mode02 {border-color:#229073; color:#229073;}
.hd-wrap .hd-right .chat-mode .gpt-mode02.on {border-color:#229073; background:#229073; color:#fff;}

.hd-wrap .hd-right .profile-img {display:block;width:3rem;height:3rem;overflow: hidden; border-radius: 100%;}
.hd-wrap .hd-right .profile-img img {width: 100%; height: 100%; border-radius:100%;display:block; border: 1px solid #eee;}
.hd-wrap .hd-right .profile-text {font-size:var(--font-size-lg);transition:all 0.25s;display:none;}
.hd-wrap .hd-right .profile-text:hover {color:var(--primary);}
.hd-wrap .hd-right .profile-text span {font-weight: var(--weight-medium);}
.article {width:100%;height:100%;overflow: hidden;position:relative;z-index: 1;}
.article-wrap {display:flex;flex-wrap:wrap;flex-direction: column;width: 100%;height: calc(100% - 70px);}
.article-wrap.full {height:100%;}
.content {flex:1 1 auto;padding: 2rem;background:#fff;overflow:hidden;overflow-y:auto;height:100%;-webkit-overflow-scrolling: touch;}
.content.scr-fixed {overflow:hidden;}

.input {padding: 2rem 2rem 4rem;width:100%;background: var(--white);position:absolute;bottom:0;left:0;}
.input .input-area {width:100%;max-width:768px;margin:0 auto;display:flex;border-radius:50px;min-height: 5rem;display:flex;align-items: center;position:relative;border: 1px solid var(--gray);background: var(--white);overflow: hidden;max-height: 124px;}
.input .input-area textarea {width:100%;height: auto;border: 0;background: transparent;line-height: 2.4rem;outline: none;padding: 0 5rem 0 2rem;max-height: 120px;overflow-y: hidden;}
.input .input-area .send-btn {position:absolute;width: calc(50px - 1.6rem);height: calc(50px - 1.6rem);right: 0.8rem;top: 0.8rem;background:url('../imgs/ic_send_white.svg') no-repeat center #ACB1C7;border-radius: 100%;background-size: 54%;}
.input .input-area.active {border-color:var(--primary);}
.input .input-area.active .send-btn {background-color:var(--primary);}
@media screen and (min-width:768px){
  .hd-wrap .hd-right .chat-edit-btn {width:3rem; height:3rem;background-size:5px;}
  .hd-wrap .hd-right a {width:3rem;height:3rem;}
}
@media screen and (min-width:1023px){
  .menu {display:none;}
  .dim {display:none;}
  .hd {height: 82px;padding-left: 300px;}
  .hd-wrap {justify-content: initial;border-bottom:0;}
  .hd-wrap .hd-title .ttl {font-size:var(--font-size-xl);font-weight:var(--weight-bold);padding-left:1rem;}
  .hd-wrap .hd-right .chat-edit-btn {display:none;}
  .hd-wrap .hd-right {margin-left:auto;margin-right:1rem;width: auto;}
  .hd-wrap .hd-right .chat-new-btn {display:none;}
  .hd-wrap .hd-right .profile-img {width: 3.8rem;height:3.8rem;}
  .hd-wrap .hd-right .profile-text {display:block;width: auto;min-width: 7rem;height:auto;}
  .article {height: 100%;padding:1.8rem 1.8rem 0;background:#f0f0fa;}
  .content {width:100%;height: 100%;overflow-y: auto;}
  .input {width:calc(100% - 3.6rem);bottom:0;left:1.8rem;padding:3rem 1rem;}
  .hd-wrap .hd-right .chat-mode {display:flex;}
}

/* 네비게이션 (left menu) */
.nav {width:80%;height:100%;visibility:hidden;opacity:0;position:fixed;z-index: 9990;top:0;left:0;transform:translateX(-100%);transition:all 0.25s;background:var(--white);padding:2rem;}
.nav.open {transform:translateX(0);visibility:visible;opacity:1;}
.nav-right {width:100%;height:calc(100% - 61px);}
.nav-wrap {display:flex; flex-direction:column;width:100%;height:100%;position:relative;}
.nav-wrap .logo {margin-bottom: 2.2rem;}
.nav-wrap .chat-mode {display:flex;align-items: center;justify-content: space-between;position:relative;margin-bottom: 1.5rem;gap:0.4rem;}
.nav-wrap .chat-mode .ttl {font-size:var(--font-size-sm); color:#6C727F;}
.nav-wrap .chat-mode .mode-btn {padding: 0.5rem 3rem 0.5rem 1rem;border-radius: 6px;background: url(../imgs/ic_arrow_down.svg) no-repeat center right 1rem #f1f1f1;}
.nav-wrap .chat-mode .mode-btn span {font-size:var(--font-size-sm);}
.nav-wrap .chat-mode .mode-btn .ver01 {color:var(--dark)}
.nav-wrap .chat-mode .mode-btn .ver02 {color:#229073}
.nav-wrap .chat-mode .mode-btn .ver03 {color:#C546E5}
.nav-wrap .chat-mode .mode-panel {position: absolute;display: none;top: 3.5rem;right: 0rem;background: var(--white);padding: 1rem 2rem;border-radius: 6px;box-shadow: 0 1px 4px rgba(0,0,0,0.4);z-index: 9991;}
.nav-wrap .chat-mode .mode-panel.panel-view {display:block;}
.nav-wrap .chat-mode .mode-panel label {display:flex;width:100%;align-items: center;justify-content: space-between;gap: 2rem;margin: 1rem 0;}
.nav-wrap .chat-mode .mode-panel label span {font-size:var(--font-size-sm);}
.nav-wrap .chat-mode .mode-panel label .ver01 {color:var(--dark)}
.nav-wrap .chat-mode .mode-panel label .ver02 {color:#229073}
.nav-wrap .chat-mode .mode-panel label .ver03 {color:#C546E5}

.nav-wrap .chat-mode button {background:var(--light); border:1px solid; font-size:var(--font-size-md);padding:0.6rem;border-radius:6px; line-height: 1.2; flex:1 1 auto;}
.nav-wrap .chat-mode .gpt-mode01 {border-color:#468FE5; color:#468FE5;}
.nav-wrap .chat-mode .gpt-mode02 {border-color:#229073; color:#229073;}
.nav-wrap .chat-mode .gpt-mode03 {border-color:#C546E5; color:#C546E5;}
.nav-wrap .chat-mode .gpt-mode01.on {border-color:#468FE5; background:#468FE5; color:#fff;}
.nav-wrap .chat-mode .gpt-mode02.on {border-color:#229073; background:#229073; color:#fff;}
.nav-wrap .chat-mode .gpt-mode03.on {border-color:#C546E5; background:#C546E5; color:#fff;}

.nav-wrap .new-chat {width:100%;}
.nav-wrap .new-chat .new-chat-btn {background:url(../imgs/ic_chat_black.svg) no-repeat center left 2rem #f0f0fa;transition:all 0.25s;border:1px solid #f0f0fa;padding:1rem 1rem 1rem 5rem;border-radius:0.6rem;width:100%;text-align:left;}
.nav-wrap .new-chat .new-chat-btn:hover {background:url(../imgs/ic_chat_purple.svg) no-repeat center left 2rem #f0f0fa;border-color:var(--primary);color:var(--primary);}
.nav-wrap .history {width:100%;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;}
.nav-wrap .history h3 {font-size: var(--font-size-sm);margin: 2.8rem 0 0.8rem;}
.nav-wrap .history .history-sch {position: relative;display: flex;align-items: center;padding:0 0 1rem; background:var(--white);}
.nav-wrap .history .history-sch input {border:0;outline:none;width:100%;padding: 0 3rem 0 1rem;height: 4rem;background:var(--light);border:1px solid var(--light-black);border-radius:6px;font-size: var(--font-size-md);}
.nav-wrap .history .history-sch input::placeholder {color:var(--dark-gray);font-size:var(--font-size-sm);vertical-align: middle;}
.nav-wrap .history .history-sch input:active, .nav-wrap .history .history-sch input:focus {border-color:var(--primary);background-color:var(--white);}
.nav-wrap .history .history-sch .sch-btn {position:absolute;right:0;top:0;width: 3rem;height: 4rem;}
.nav-wrap .history .history-sch .sch-btn img {margin:0 auto;}
.nav-wrap .history .history-box-wrap {width:100%;overflow-x:hidden;overflow-y:auto;flex:1 1 auto;padding: 1rem 0 3rem;-ms-overflow-style: none;scrollbar-width: none;-webkit-overflow-scrolling: touch;}
.nav-wrap .history .history-box-wrap::-webkit-scrollbar {display: none;}
.nav-wrap .history .history-box-wrap .history-box {margin-bottom: 2rem;}
.nav-wrap .history .history-box-wrap .history-box .date {font-size: var(--font-size-sm);color: var(--primary);margin: 0.5rem 0;}
.nav-wrap .history .history-box-wrap .history-box .history-list li {margin: 1rem 0;position: relative;display: flex;align-items: center;}
.nav-wrap .history .history-box-wrap .history-box .history-list li a {display: block;width: 100%;}
.nav-wrap .history .history-box-wrap .history-box .history-list li a .ttl {font-size: var(--font-size-md);width: 100%;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 4rem;font-weight: var(--weight-medium);}
.nav-wrap .history .history-box-wrap .history-box .history-list li a .desc {font-size: var(--font-size-sm);color: var(--dark-gray);width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit {position:absolute;right:0;top: -5px;width:3rem;height:3rem;border-radius: 100%;background:url(../imgs/ic_ellipsis.svg) no-repeat center;}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit-panel {position:absolute;display:none;top: 3rem;right: 1rem;background:var(--white);padding:2rem;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.4);z-index: 9991;}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit-panel.panel-view {display:block;}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit-panel button {width:100%;display:block;text-align:left;padding-left: 2.6rem;font-size:var(--font-size-md);}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit-panel .modify-btn {background:url(../imgs/ic_edit.svg) no-repeat center left;margin-bottom:1rem;}
.nav-wrap .history .history-box-wrap .history-box .history-list li .edit-panel .delete-btn {background:url(../imgs/ic_trash.svg) no-repeat center left;}
.nav-wrap .history .history-box-wrap #data-none {text-align:center; padding:4rem 2rem; font-size: var(--font-size-md);  color: #9691d7;}

.nav-wrap .leftmenu {width:100%;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;}
.nav-wrap .leftmenu .gnb {display:block;padding:1.6rem;display:flex;align-items: center;gap:1rem;}
.nav-wrap .leftmenu .gnb.gnb-on {background:#f5f3ff;color:var(--primary);position:relative;font-weight:var(--weight-bold);}
.nav-wrap .leftmenu .gnb.gnb-on:after {display:block;content:'';position:absolute;width:4px;height:100%;left:0;top:0;background:var(--primary);}
.nav-wrap .leftmenu .gnb i {display:block;width:30px;height:20px;}
.nav-wrap .leftmenu .gnb .gnb-ic-01 {background:url(../imgs/gnb_01_off.svg) no-repeat center;}
.nav-wrap .leftmenu .gnb .gnb-ic-02 {background:url(../imgs/gnb_02_off.svg) no-repeat center;}
.nav-wrap .leftmenu .gnb .gnb-ic-03 {background:url(../imgs/gnb_03_off.svg) no-repeat center;}
.nav-wrap .leftmenu .gnb.gnb-on .gnb-ic-01 {background:url(../imgs/gnb_01_on.svg) no-repeat center;}
.nav-wrap .leftmenu .gnb.gnb-on .gnb-ic-02 {background:url(../imgs/gnb_02_on.svg) no-repeat center;}
.nav-wrap .leftmenu .gnb.gnb-on .gnb-ic-03 {background:url(../imgs/gnb_03_on.svg) no-repeat center;}
.nav-wrap .bottom {padding:1rem 0 0; background:var(--white); position:absolute;bottom:0;left:0;width:100%;display:flex;align-items: center;justify-content: space-between;}
.nav-wrap .bottom .set-btn {display:block;width:auto;padding-left: 4.5rem;background:url(../imgs/ic_setting.svg) no-repeat center left 1rem;}
.nav-wrap .bottom .gpt-mode03 {background:var(--light); border:1px solid; font-size:var(--font-size-md);padding:0.6rem;border-radius:6px; line-height: 1.2; border-color:#C546E5; color:#C546E5;}
.nav-wrap .bottom .gpt-mode03.on {border-color:#C546E5; background:#C546E5; color:#fff;}


@media screen and (min-width:1023px){
  .nav {transform:translateX(0);visibility: visible;opacity:1;width: 300px;border-right:1px solid var(--light-gray);}
  .nav-right {padding-left: 300px;height:calc(100% - 82px);}
  .nav-wrap .new-chat .new-chat-btn, .nav-wrap .bottom .set-btn {font-size:var(--font-size-lg);}
  .nav-wrap .chat-mode .mode-panel label span {font-size:var(--font-size-md);}
  .nav-wrap .history h3 {font-size:var(--font-size-md);}
  .nav-wrap .chat-mode {display:none;}
}

/* 인트로 */
.intro {text-align:center;max-width:768px;padding: 10rem 0;margin:0 auto;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;}
.intro .chat-ver {margin-bottom: 2rem;animation: fadeInUp 1.5s;animation-delay: 0s;animation-fill-mode:both;}
.intro .chat-ver span {border-radius:50px;padding:0.4rem 2rem;font-size:var(--font-size-md);font-weight:var(--weight-semibold);}
.intro .chat-ver .ver01 {border:1px solid #468FE5; color:#468FE5;}
.intro .chat-ver .ver02 {border:1px solid #229073; color:#229073;}
.intro .chat-ver .ver03 {border:1px solid #C546E5; color:#C546E5;}
.intro .text-img {padding:1rem;width: 20rem;animation: fadeInUp 1.5s;margin: 0 auto;}
.intro .intro-text {padding:1rem;line-height: 4.5rem;animation: fadeInUp 1.5s;animation-delay: 0.5s;animation-fill-mode:both;font-size: var(--font-size-xl);} 
.intro .intro-text .grad {font-size: 4rem;background: linear-gradient(291deg, #77D3CB 0, #5AA9E2 20%, #6585D7 40%, #AE7BE8 60%, #DF8190 80%, #DC4E97 100%);background-size: 100% 100%;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;display: block;font-weight: var(--weight-bold);}
.intro .intro-text .text {color: #AAA;font-weight: var(--weight-medium);}
.intro .recommend {display:flex;flex-wrap:wrap;gap: 1rem;padding: 2rem 0;animation: fadeInUp 1.5s;animation-delay: 1s;animation-fill-mode:both;}
.intro .recommend div {display:block;cursor:pointer;flex: 1 1 calc(50% - 2rem);transition:background-color 0.2s, color 0.2s;background:#f2f2f5;border-radius:1rem;padding: 1.4rem 1.4rem 4rem;font-weight:var(--weight-regular);text-align: left;position: relative;}
.intro .recommend div:after {display:block;content:'';position:absolute;right: 1rem;bottom: 1rem;border-radius:100%;padding:1rem;width: 2.2rem;height: 2.2rem;background-position: center;background-size: 1.4rem;background-repeat: no-repeat;background-color: #fff;}
.intro .recommend div:first-of-type:after {background-image: url(../imgs/ic_animal01.svg);}
.intro .recommend div:nth-of-type(2):after {background-image: url(../imgs/ic_animal02.svg);}
.intro .recommend div:nth-of-type(3):after {background-image: url(../imgs/ic_animal03.svg);}
.intro .recommend div:nth-of-type(4):after {background-image: url(../imgs/ic_animal04.svg);}
.intro .recommend div p {font-size:var(--font-size-md);}
.intro .recommend div span {font-size:var(--font-size-sm);color:#aaa;font-weight: var(--weight-light);}
.intro .recommend div:hover {background:var(--primary);color:var(--white);}
.intro .recommend div:hover span {color:#fff;}
.intro .sticker {width:100%;position:relative;max-width:768px;margin:2rem auto;padding:2rem;gap:1.6rem;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,0.2);display:flex;animation: fadeInUp 2s;animation-delay: 1.5s;animation-fill-mode:both;align-items: center;}
.intro .sticker img {width:4rem;}
.intro .sticker p {text-align:left;display:block;padding-right:3rem;font-size:1.2rem;flex: 1 1 auto;}
.intro .sticker p br{display:none;}
.intro .sticker .sticker-close {width:3rem;height:3rem;position:absolute;right:1.6rem;top:1.6rem;background:url(../imgs/ic_x_b.svg) no-repeat center #fff;}
.intro .sticker.hide-sticker {display:none;}
@media screen and (min-width:1023px){
  .intro {margin: 0 auto;}
  .intro .chat-ver span {font-size:var(--font-size-lg);}
  .intro .logo {width:6rem;}
  .intro .text-img {width: 40rem;}
  .intro .intro-text {font-size:4rem;line-height:1.5;padding:2rem 0 4rem;}
  .intro .intro-text .grad {font-size:4rem;}
  .intro .recommend div {padding: 2rem 2rem 9rem;flex: 1 1 calc(25% - 2rem);}
  .intro .recommend div p {font-size:var(--font-size-xl);}
  .intro .recommend div span {font-size:var(--font-size-md);}
  .intro .recommend div:after {width:4rem; height:4rem;background-size:2.6rem;}
  .intro .sticker p {font-size:var(--font-size-md);}
  .intro .sticker p br {display:block;}
  .intro .sticker .sticker-close {top:2rem;right:2rem;}
}
@keyframes fadeInUp {
  0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
  }
  to {
      opacity: 1;
      transform: translateZ(0);
  }
}

/* 채팅 */
.chat {margin:0 auto;max-width:768px;width:100%;height: 100%;}
.chat h2 {font-weight:var(--weight-bold); color:var(--dark-gray);margin-bottom:2rem;font-weight:var(--weight-medium);}
.chat h2 .count {color:var(--gray);padding-left:0.6rem;}
.chat h2 .chat-ver {margin-left: 1rem;display:inline-block; padding:0.4rem 1rem; font-size:var(--font-size-sm);background:#f1f1f1;border-radius:50px;}
.chat h2 .chat-ver.ver01 {color:#468FE5;}
.chat h2 .chat-ver.ver02 {color:#229073}
.chat h2 .chat-ver.ver03 {color:#C546E5}
.chat h2 .chat-ver.d-none {display:none;}
.chat .chat-list {width:100%;padding-bottom:5rem;}
.chat .chat-list .chat-box {width:100%;margin-bottom:2rem;}
.chat .chat-list .chat-info {display:flex;align-items:center;gap:0.8rem;width:100%;}
.chat .chat-list .chat-info .chat-profile-text {display: inline-block;width: 26px;height: 26px;line-height: 26px;background: linear-gradient(291deg, #77D3CB 0, #5AA9E2 20%, #6585D7 40%, #AE7BE8 60%, #DF8190 80%, #DC4E97 100%);color: var(--white);text-align: center;border-radius: 100%;font-size: var(--font-size-md);font-weight: var(--weight-medium);}
.chat .chat-list .chat-info .chat-profile-img {width:26px;height:26px;display:inline-block; border-radius: 100%; overflow: hidden; border: 1px solid #eee;}
.chat .chat-list .chat-info .chat-profile-img.d-none {display:none;}
.chat .chat-list .chat-info .chat-name {font-size:var(--font-size-md);font-weight:var(--weight-bold);}
.chat .chat-list .chat-div {padding:0 0 0 3.5rem;}
.chat .chat-list .chat-div b {font-weight: bold;}

#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}
#link, #link:hover {-webkit-transition: color 2s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

@media screen and (min-width:1023px){
  .chat .chat-list .chat-info {gap:1rem;}
  .chat .chat-list .chat-info .chat-profile-text {width:30px;height:30px;line-height:30px;}
  .chat .chat-list .chat-info .chat-profile-img {width:30px;height:30px;}
  .chat .chat-list .chat-info .chat-name {font-size:var(--font-size-lg);}
  .chat .chat-list .chat-div {padding:0 0 0 4.4rem;}
}

/* 로딩 */
.loading {z-index: 1; width: 200px;height: 200px;background:var(--white);position: fixed;border-radius: 100%;top: 50%;left:50%;transform:translate(-50%, -50%);}
.loading-icon {width:100%;height:100%;border: 2px solid transparent;border-color: transparent var(--primary) transparent var(--primary);animation: rotate-loading 1.5s linear 0s infinite normal;transform-origin: 50% 50%;border-radius: 100%;}
.loading:hover .loading-icon {border-color: transparent var(--primary) transparent var(--primary);}
.loading:hover .loading-icon, .loading .loading-icon {transition: all 0.5s ease-in-out;}
#loading-text {-moz-animation: loading-text-opacity 0.5s linear 0s infinite normal;-o-animation: loading-text-opacity 2s linear 0s infinite normal;-webkit-animation: loading-text-opacity 2s linear 0s infinite normal;animation: loading-text-opacity 2s linear 0s infinite normal;color: var(--primary);font-size: var(--font-size-md);font-weight: var(--weight-bold);opacity: 0;position: absolute;text-align: center;text-transform: uppercase;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
@keyframes rotate-loading {
  0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
  100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}
@keyframes loading-text-opacity {
  0%  {opacity: 0}
  20% {opacity: 0}
  50% {opacity: 1}
  100%{opacity: 0}
}

@media screen and (min-width:1023px){
  .loading {width:250px;height:250px;}
  #loading-text {font-size:var(--font-size-xl);}
}


/* 모달 */
.modal.show-modal {visibility:visible;opacity:1;pointer-events: auto;}
.modal.show-modal  .modal-layer {transform:translate(-50%, -50%);}
.modal {width:100%;height:100%;opacity: 0; transition:all 0.5s;position:fixed;top:0;left:0;z-index: 9990; visibility: hidden;}
.modal .modal-dim {background:rgba(0,0,0,0.7);width:100%;height: 100vh;position: relative;top:0;left:0;}
.modal .modal-layer {position:absolute;top:50%;left:50%;transform:translate(-50%, -80%);transition:all 0.4s;background:#fff;padding: 3rem 2rem;border-radius:6px;width: min(80%, 450px);}
.modal .modal-layer .modal-hd {font-size: var(--font-size-lg);font-weight: var(--weight-bold);margin-bottom: 1rem;padding-right:4rem;padding-left: 1rem;}
.modal .modal-layer .modal-close {width:30px;height:30px;display:block;position:absolute;right:2rem;top:2.5rem;background:url(../imgs/ic_x_b.svg) no-repeat center;}
.modal .modal-layer .modal-con {text-align: center;font-size: var(--font-size-md);padding: 1rem 0;line-height:2;}
.modal .modal-layer .modal-con .highlight {color: var(--primary);}
.modal .modal-layer .modal-con .modal-input label {position:relative;padding: 1rem;display: block;overflow:hidden;}
.modal .modal-layer .modal-con .modal-input label span{position:absolute;top: -0.4rem;transform:translateY(20px);opacity:0;left: 2rem;background:#fff;padding: 0 0.6rem;font-weight:var(--weight-medium);font-size: var(--font-size-md);transition: all 0.3s;}
.modal .modal-layer .modal-con .modal-input label input {width:100%;background:#fff;border-radius:6px;height: 48px;padding: 1rem;outline: none;border: 1px solid var(--dark);}
.modal .modal-layer .modal-con .modal-input label input:focus + span {transform:translateY(0);opacity:1;}
.modal .modal-layer .modal-con .modal-input label input:focus::placeholder {opacity:0;}
.modal .modal-layer .modal-con .modal-input-adm {display:flex;flex-direction: column;align-items: flex-start;width: 100%;}
.modal .modal-layer .modal-con .modal-input-adm form {width:100%;}
.modal .modal-layer .modal-con .modal-input-adm label {display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:0.5rem 0;gap: 0.4rem;}
.modal .modal-layer .modal-con .modal-input-adm label.label-type02 {flex-direction:row;align-items: center;}
.modal .modal-layer .modal-con .modal-input-adm label.label-type02 span {padding-top:0;}
.modal .modal-layer .modal-con .modal-input-adm label.label-type02 .label-row {display:flex; align-items: center;margin-right:2rem;}
.modal .modal-layer .modal-con .modal-input-adm label span {font-weight:var(--weight-bold);text-align:left;padding-top:6px;}
.modal .modal-layer .modal-con .modal-input-adm label input:not(input[type="radio"]) {width:100%;border:1px solid var(--light-gray);color:var(--light-blackgh); padding:0.6rem 1rem;flex:1 1 auto;border-radius:6px;background:var(--light);}
.modal .modal-layer .modal-con .modal-input-adm label input[type="radio"] {width:16px;height:16px;flex:0 0 16px; margin:0 1rem;}
.modal .modal-layer .modal-con .modal-input-adm label span.file-input {text-align:center;width:20%;height:49px;background:var(--primary); color:var(--white);border-radius:6px; padding: 0; line-height: 49px; font-weight: var(--weight-medium);}
.modal .modal-layer .modal-con .modal-input-adm label textarea {width:100%;border:1px solid var(--light-gray);color:var(--light-blackgh); padding:0.6rem 1rem;flex:1 1 auto;border-radius:6px;background:var(--light);resize: vertical;min-height:250px;outline:none;}
.modal .modal-layer .modal-con .modal-input-adm label input[type="text"]:focus, .modal .modal-layer .modal-con .modal-input-adm label input[type="text"]:active, .modal .modal-layer .modal-con .modal-input-adm label textarea:focus, .modal .modal-layer .modal-con .modal-input-adm label textarea:active {border-color:var(--dark);background:var(--white);}
.modal .modal-layer .modal-ft {display: flex;align-items: center;justify-content: flex-end;gap: 1rem;margin-top: 1rem;}
.modal .modal-layer .modal-ft button {border:0;outline:none;padding: 0 1rem;}
.modal .modal-layer .modal-ft .active {color: var(--danger);font-weight: var(--weight-bold);}
.modal .modal-layer .modal-ft .primary-btn {color: var(--primary);font-weight: var(--weight-bold);}
.modal .modal-layer .modal-ft .normal-adm {background:var(--white);border:1px solid var(--gray);padding:4px 10px;border-radius:6px;}
.modal .modal-layer .modal-ft .active-adm {background:#88a2ff;border:1px solid #88a2ff;padding:4px 10px;border-radius:6px; color:var(--white);}
.modal .modal-layer .modal-ft .active-adm-02 {background:var(--danger);border:1px solid var(--danger);padding:4px 10px;border-radius:6px; color:var(--white);}


@media screen and (max-width:340px){
  .modal .modal-layer {max-height:70vh; overflow-y:auto;}
}
@media screen and (max-height:650px){
  .modal .modal-layer {max-height:70vh; overflow-y:auto;}
}


/* 컨펌 */
.confirm.show-confirm {visibility:visible;opacity:1;pointer-events: auto;}
.confirm.show-confirm  .modal-layer {transform:translate(-50%, -50%);}
.confirm {width:100%;height:100%;opacity: 0; transition:all 0.5s;position:fixed;top:0;left:0;z-index: 9999; visibility: hidden;}
.confirm .modal-dim {background:rgba(0,0,0,0.7);width:100%;height: 100vh;position: relative;top:0;left:0;}
.confirm .modal-layer {position:absolute;top:50%;left:50%;transform:translate(-50%, -80%);transition:all 0.4s;background:#fff;padding: 3rem 2rem;border-radius:6px;width: min(80%, 340px);}
.confirm .modal-layer .modal-hd {font-size: var(--font-size-lg);font-weight: var(--weight-bold);margin-bottom: 1rem;padding-right:4rem;padding-left: 1rem;}
.confirm .modal-layer .modal-close {width:30px;height:30px;display:block;position:absolute;right:3rem;top:3rem;background:url(../imgs/ic_x_b.svg) no-repeat center;}
.confirm .modal-layer .modal-con {text-align: center;font-size: var(--font-size-lg);padding: 1rem 0;line-height:2;}
.confirm .modal-layer .modal-con .highlight {color: var(--primary);}
.confirm .modal-layer .modal-con .modal-input label {position:relative;padding: 1rem;display: block;overflow:hidden;}
.confirm .modal-layer .modal-con .modal-input label span{position:absolute;top: -0.4rem;transform:translateY(20px);opacity:0;left: 2rem;background:#fff;padding: 0 0.6rem;font-weight:var(--weight-medium);font-size: var(--font-size-md);transition: all 0.3s;}
.confirm .modal-layer .modal-con .modal-input label input {width:100%;background:#fff;border-radius:6px;height: 48px;padding: 1rem;outline: none;border: 1px solid var(--dark);}
.confirm .modal-layer .modal-con .modal-input label input:focus + span {transform:translateY(0);opacity:1;}
.confirm .modal-layer .modal-con .modal-input label input:focus::placeholder {opacity:0;}
.confirm .modal-layer .modal-con .modal-input-adm {display:flex;flex-direction: column;align-items: flex-start;width: 100%;}
.confirm .modal-layer .modal-con .modal-input-adm label {display:flex;flex-direction:column;align-items:flex-start;width:100%;margin:0.5rem 0;gap: 0.4rem;}
.confirm .modal-layer .modal-con .modal-input-adm label span {font-weight:var(--weight-bold);text-align:left;}
.confirm .modal-layer .modal-con .modal-input-adm label input:not(input[type="radio"]) {width:100%;border:1px solid var(--light-gray);color:var(--light-blackgh); padding:0.6rem 1rem;flex:1 1 auto;border-radius:6px;background:var(--light);}
.confirm .modal-layer .modal-con .modal-input-adm label textarea {width:100%;border:1px solid var(--light-gray);color:var(--light-blackgh); padding:0.6rem 1rem;flex:1 1 auto;border-radius:6px;background:var(--light);resize: vertical;min-height:250px;outline:none;}
.confirm .modal-layer .modal-con .modal-input-adm label input:focus, .modal .modal-layer .modal-con .modal-input-adm label input:active, .modal .modal-layer .modal-con .modal-input-adm label textarea:focus, .modal .modal-layer .modal-con .modal-input-adm label textarea:active {border-color:var(--dark);background:var(--white);}
.confirm .modal-layer .modal-ft {display: flex;align-items: center;justify-content: flex-end;gap: 1rem;margin-top: 1rem;}
.confirm .modal-layer .modal-ft button {border:0;outline:none;padding: 0 1rem;}
.confirm .modal-layer .modal-ft .confirm-btn {color: var(--primary);font-weight: var(--weight-medium);}
.confirm .modal-layer .modal-ft .active {color: var(--danger);font-weight: var(--weight-medium);}
.confirm .modal-layer .modal-ft .confirm-btn:hover {font-weight: var(--weight-bold);}
.confirm .modal-layer .modal-ft .active:hover {font-weight: var(--weight-bold);}
.confirm .modal-layer .modal-ft .normal-adm {background:var(--white);border:1px solid var(--gray);padding:4px 10px;border-radius:6px;}
.confirm .modal-layer .modal-ft .active-adm {background:#88a2ff;border:1px solid #88a2ff;padding:4px 10px;border-radius:6px; color:var(--white);}
.confirm .modal-layer .modal-ft .active-adm-02 {background:var(--danger);border:1px solid var(--danger);padding:4px 10px;border-radius:6px; color:var(--white);}

@media screen and (min-width:1023px){
  .modal .modal-layer {width:min(80%, 640px);}
  .modal .modal-layer .modal-hd {font-size:var(--font-size-xl);}
  .modal .modal-layer .modal-con {font-size:var(--font-size-lg);}
  .modal .modal-layer .modal-ft {font-size:var(--font-size-lg);}
  .modal .modal-layer .modal-con .modal-input label input:not(input[type="radio"]),
  .modal .modal-layer .modal-con .modal-input-adm label input:not(input[type="radio"])  {height:49px;}
  .modal .modal-layer .modal-con .modal-input-adm {padding:1rem;}
  .modal .modal-layer .modal-con .modal-input-adm label {flex-direction: row;}
  .modal .modal-layer .modal-con .modal-input-adm label span {flex:0 0 150px;}
}

/* 설정 */
.article-wrap.full .content {padding:0;}
.setting {border:1px solid var(--light-gray);border-left:0;border-right:0;border-top:0;max-width:768px;min-height:400px;}
.setting .ttl {font-size:var(--font-size-sm);font-weight:var(--weight-bold);background:#f2f5f7;padding:0.4rem 2rem;}
.setting .setting-list li:not(:last-of-type) {border-bottom:1px solid var(--light-gray);}
.setting .setting-list li a {display:block;width:100%;padding:2rem; padding-right:5rem; background:url(../imgs/ic_more.svg) no-repeat center right 2rem;}
.setting .setting-list li a small {font-size:var(--font-size-sm);font-weight:var(--weight-medium);color:var(--primary);display:block;}
.setting .setting-list li div {padding:2rem;display:flex;align-items:center;justify-content: space-between;}
.setting .setting-list li div span.email {color:var(--info);}
.setting .setting-list li div span.call {color:var(--primary);}
.setting .mypage-profile {padding:4rem 2rem; text-align:center;}
.setting .mypage-profile .profile-img {width:7rem; height:7rem; border-radius:100%; overflow:hidden;}
.setting .mypage-profile .profile-img img {width:100%; height:100%; border-radius:100%;border: 1px solid #eee;}
.setting .mypage-profile .profile-name {margin-top:1rem;display:flex; align-items: center; gap:0.6rem;justify-content: center;padding:0 2rem;}
.setting .mypage-profile .profile-name .name-edit {width:1.4rem; height:1.4rem; background:url(../imgs/ic_edit.svg) no-repeat center;background-size:100% 100%;}
@media screen and (min-width: 769px){
  .setting{border:1px solid var(--light-gray);border-radius:1rem;margin: 8vh auto;}
}
@media screen and (min-width: 1023px){
  .setting .setting-list li a small  {display:inline;}
}



/* 비밀번호 설정 */
.info-change {padding:2rem;max-width:768px;margin:2rem auto;}
.info-change .info-message {font-weight:var(--weight-medium);padding: 2rem 0 4rem;font-size:var(--font-size-lg);}
.info-change .info-form-btn {width:100%;background:#fff;padding:2rem;max-width:340px;margin:0 auto;}
.info-change .info-form-btn .next-btn {background-color:var(--gray);color:var(--white);font-size:var(--size-md);width:100%;height:4.4rem;border-radius:6px;}
.info-change .info-form-btn .next-btn.highlight {background-color:var(--primary);}
@media screen and (min-width: 769px){
  .info-change .info-message {font-size:var(--font-size-xl);}
}
@media screen and (min-width: 1023px){
  .info-change {border:1px solid var(--light-gray); border-radius:1rem;margin: 8vh auto;padding:6rem 4rem;}
}

/* 개인정보약관 */
.privacy {padding:2rem;max-width:768px;margin:0 auto;}
.privacy .ttl {font-size:var(--font-size-xl);font-weight:var(--weight-bold);margin-bottom:1rem;}
.privacy .terms-desc {padding-bottom:3rem;line-height:1.7;}
.privacy .terms-desc p {font-weight:var(--weight-bold); font-size:var(--font-size-lg);margin-bottom:1rem;}
@media screen and (min-width: 1023px){
  .privacy {padding:4rem 2rem;}
  .privacy .ttl {font-size:2rem;margin-bottom:3rem;}
  .privacy .terms-desc p {font-size:var(--font-size-xl);}
}

/* 공지사항 */
.notice {width:100%;max-width:768px;margin:0 auto;display:block;}
.notice.d-none {display:none;}
.notice .notice-item {border-bottom:1px solid var(--light-gray);}
.notice .notice-item .notice-heading {display:flex;width:100%;align-items:center;gap: 0.4rem;padding: 1.6rem;cursor: pointer;}
.notice .notice-item .notice-heading .tag {background:var(--danger);color:var(--white);width:1.6rem;height:1.6rem;font-size:1rem;font-weight:var(--weight-bold);text-align:center;border-radius:100%;line-height:1.6rem;display: block;flex: 0 0 1.6rem;}
.notice .notice-item .notice-heading .tag.tag-hide {display:none;}
.notice .notice-item .notice-heading .ttl {flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;font-weight:var(--weight-medium);}
.notice .notice-item .notice-heading .date {display:block;font-size:var(--font-size-xs);color:var(--light-black);flex: 0 0 60px;text-align: right;}
.notice .notice-item .notice-content {max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
.notice .notice-item .notice-content .con-wrap {padding:1.6rem; margin:0 1.6rem;border-top: 2px solid var(--dark);}
.notice .notice-item .notice-content .con-wrap .ttl {font-weight:var(--weight-bold);margin-bottom: 1rem;}
.notice .notice-item.notice-view .notice-content {max-height:auto;}
#data-none-notice {text-align:center; padding:10rem 2rem; color:var(--sumin); font-size:var(--font-size-md);border-bottom:1px solid var(--light-gray); width:90%;margin:0 auto;}
#data-none-notice.d-none {display:none;}
@media screen and (min-width: 1023px){
  .notice {margin:6vh auto;border-top:1px solid var(--light-gray);}
  .notice .notice-item:hover {background:var(--light);}
}

/* 회원탈퇴 */
.resign {padding:2rem; max-width:768px;margin:0 auto;min-height:100%;position:relative;padding-bottom:10rem;}
.resign .highlight {font-weight: var(--weight-bold); font-size:var(--font-size-lg);text-align:center;padding:2rem 1rem;color:var(--danger);word-break: keep-all;}
.resign .resign-box {padding:1rem 2rem; background:var(--light);margin-bottom:2rem;}
.resign .resign-box p {word-break: keep-all;margin:1rem 0;}
.resign .info {padding:3rem;}
.resign .info span {font-size:var(--font-size-md);}
.resign .info span:nth-child(2n) {padding-left:4rem; font-size: var(--font-size-lg);}
.resign .btns {position:absolute;bottom:0;left:0;width:100%;display:flex;align-items:center;justify-content:center;gap:1rem;padding:2rem;}
.resign .btns button {background:var(--white);color:var(--light-black);padding:1.6rem;border-radius:6px;width:50%;}
.resign .btns .cancel-btn {background:var(--primary);border:1px solid var(--primary);color:var(--white);}
.resign .btns .resign-btn {border:1px solid var(--light-black);}
@media screen and (min-width:1023px){
  .resign .highlight {font-size:var(--font-size-xl);}
  .resign .highlight, .resign .resign-box, .resign .btns {padding:3rem;}
}

/* 채팅 추천 추가 */
.chat .chat-box .chat-more {width: calc(100% - 3rem);padding: 1rem;background: #f3f3f7;border-radius: 24px 24px 0 24px;margin-top: 1rem;margin-left: auto;}
.chat .chat-box .chat-more .more-box {background: #fff;border-radius: 14px;padding:1rem;}
.chat .chat-box .chat-more .more-box a {display:block;color: var(--dark);font-weight: 400;font-size: 1.4rem;width: 100%;word-break: break-all;padding: 0.4rem 0 0.4rem 2rem;position: relative;transition: all 0.25s;}
.chat .chat-box .chat-more .more-box a:before {display:block;content:'';position:absolute;left: 2px;top: 9px;width: 12px;height: 12px;background: url('/resources/chatDocs/assets/imgs/ic_sch.svg') no-repeat center;background-size: 100%;}
.chat .chat-box .chat-more .more-btn {display: block;font-size: 1.4rem;color: var(--primary);margin-left: auto;font-weight: 500;padding:1rem 1rem 0;}
.chat .chat-box .chat-div a {color: #1a0dab;}
.chat .chat-box .chat-div a:link {color:#1a0dab;}
.chat .chat-box .chat-div a:visited {color: #681da8}
.chat .chat-box .chat-div a:hover {text-decoration: underline} 

@media screen and (min-width:1023px){
  .chat .chat-box .chat-more {padding: 2rem;}
  .chat .chat-box .chat-more .more-box {padding:2rem;}
  .chat .chat-box .chat-more .more-btn {padding:2rem 2rem 0rem;font-size:1.5rem;}
  .chat .chat-box .chat-more .more-box a {padding: 1rem 0 1rem 3.2rem;font-size: 1.5rem;}
  .chat .chat-box .chat-more .more-box a:hover {color:var(--primary);text-decoration:underline;}
  .chat .chat-box .chat-more .more-box a:before {width: 18px;height: 18px;top: 13px;}
  .chat .chat-box .chat-more .more-box a:hover:before {width: 18px;height: 18px;background:url('/resources/chatDocs/assets/imgs/ic_sch_purple.svg') no-repeat center;background-size: 100%;}
}

/* sticky modal */
.sticky-modal .modal-layer {padding:0;}
.sticky-modal .modal-layer .modal-sticky-hd {position:sticky;width:100%;padding: 1.4rem;background: var(--white);top: 0;border-radius: 6px 6px 0 0;border-bottom: 1px solid var(--dark);}
.sticky-modal .modal-layer .modal-sticky-hd .modal-hd {margin:0;font-size:1.4rem;padding: 0 3rem 0 0;width: 100%;word-break: keep-all;}
.sticky-modal .modal-layer .modal-sticky-hd .modal-close {top:1rem;right:1rem;}
.sticky-modal .modal-layer .modal-con {margin: 0;padding: 0;}
.sticky-modal .modal-layer .modal-con .modal-list {text-align:left;max-height: 40vh;overflow-y: auto;overflow-x: hidden;}
.sticky-modal .modal-layer .modal-con .modal-list ul li {width:100%;}
.sticky-modal .modal-layer .modal-con .modal-list ul li a {display:block;width:100%;padding: 0.6rem 4rem 0.6rem 1.5rem;background: url('/resources/chatDocs/assets/imgs/ic_drawer_btn_right.svg') no-repeat center right 2rem;height: 100%;font-size: 1.3rem;border-bottom: 1px solid #eee;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

@media screen and (min-width:1023px){
  .modal .modal-layer {width:min(80%, 840px);}
  .sticky-modal .modal-layer .modal-sticky-hd {padding:2rem 3rem;}
  .sticky-modal .modal-layer .modal-sticky-hd .modal-hd {font-size:1.8rem;}
  .sticky-modal .modal-layer .modal-sticky-hd .modal-close {top:2rem;right:2rem;}
  .sticky-modal .modal-layer .modal-con .modal-list ul li a {font-size:1.6rem;padding: 1.2rem 4rem 1.2rem 3rem;}
}

/* 새창띄우기 - 법령 팝업 */
.law-detail {width:100%;height:100%;}
.law-detail .tabs {position: sticky;top: 0;padding: 2rem;display: flex;align-items: center;justify-content:center;gap: 0 1rem;background: #fff;border-bottom: 1px solid var(--primary);}
.law-detail .tabs .tab-btn {border:1px solid #ddd;width:120px;height:40px;border-radius:100px;color:#999;}
.law-detail .tabs .tab-btn.active {border:1px solid var(--primary);color:var(--primary);font-weight:700;background:#f1f0fa;}
.law-detail .tabs-inner .tab-con {display:none;padding:1rem;font-size: 1.4rem;}
.law-detail .tabs-inner .tab-con.active {display:block;}


@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용할 스타일 정의 */
  .intro .intro-text .grad {
    background: linear-gradient(291deg, #87fff5 0, #94d2ff 20%, #8dadff 40%, #e8d6fc 60%, #ffadba 80%, #ff71ba 100%);
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* 페이징 css */
.pagination {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  margin-top: 20px;
}

.pagination a {
  padding: 8px 16px;
  margin: 0 4px;
  border: 1px solid #ddd;
  background-color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.pagination a.active {
  background-color: #5046e5;
  color: white;
  border: 1px solid #5046e5;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

.pagination a.disabled {
  color: #ccc;
  cursor: not-allowed;
}

.data-list {
  margin-top: 20px;
  text-align: center;
}