@charset "UTF-8";

/* 한국경제 통합회원 회원가입-로그인 개편 UI Style 
 * 2023.03
 */

:root {
	--hk-text-primary: #121212;
    --hk-text-secondary: #585858;
	--hp9-bg: #FFF2E4;
}

/* Reset */
html,body {-webkit-text-size-adjust:none}
body,div,span,em,strong,select,section,article,nav,footer,header,address,caption,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,textarea,input,button,a,tr,th,td,table {margin:0; padding:0; box-sizing:border-box}
body {color:#121212; font-size:14px; font-family:'Apple SD Gothic Neo','Helvetica Neue','AppleGothic','Droid Sans fallback',sans-serif}
ol,ul,li {list-style:none}
img,fieldset,iframe {border:none; vertical-align:top}
img,iframe {max-width:100%}
i,em,address,optgroup {font-style:normal}
hr {display:none}
input,textarea {-webkit-appearance:none; border-radius:0}
textarea {resize:none}
button {border:none; border-radius:0; background:transparent; cursor:pointer}
table {border-collapse:collapse; border-spacing:0}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
a {color:#121212; text-decoration:none}
a:hover {text-decoration:underline}

/* Common */
::-webkit-scrollbar {width:6px}
::-webkit-scrollbar-track {background-color:#fafafa}
::-webkit-scrollbar-thumb {border-radius:3px; background-color:#7d7d7d}
::-webkit-scrollbar-button {width:0; height:0}
/* logo */
/* .logo-short-hk::before {content:''; display:inline-block; width:38px; height:20px; background:url('https://static.hankyung.com/img/logo/logo-short-hk.svg') no-repeat 0 0/contain; vertical-align:top} */

/* Button */
.btn-primary {display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:5px 10px; border-radius:10px; background:#142c67; color:#fff; font-weight:normal; font-size:17px}
    /* size */
    .btn-lg {min-height:60px}
/* Tooltip */
.latest {display:inline-block; min-height:22px; padding:0 7px; border-radius:3px; background:#121212; color:#fff; font-size:11px; line-height:1; white-space:nowrap; text-align:center}
.latest::before {content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:4px solid #121212; vertical-align:1px}
.latest::after {content:''; display:inline-block; width:1px; min-height:22px; vertical-align:-7px}

.layer-tooltip {display:none; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); width:calc(100vw - 40px); max-width:270px; padding:16px; border:1px solid #ddd; border-radius:8px; background:#fff; font-size:12px; box-shadow:1px 1px 8px rgba(0, 0, 0, .2)}
.layer-tooltip::before {content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #ddd; vertical-align:1px}
.layer-tooltip::after {content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #fff; vertical-align:1px}
.layer-tooltip.right {left:auto; right:-4px; transform:none}
.layer-tooltip.right::before,
.layer-tooltip.right::after {left:auto; right:16px; transform:none}
.layer-tooltip.active {display:block}

/* Form */
/* input: text */
.input-wrap + .input-wrap {margin-top:16px}
.inp-txt {display:block; width:100%; min-height:50px; line-height:48px; padding:0 19px; border:1px solid #585858; border-radius:10px; background:#fff; font-size:17px}
.inp-txt::placeholder {color:#888}
.inp-txt:-ms-input-placeholder {color:#888}
.inp-txt::-ms-input-placeholder {color:#888}
.inp-txt:disabled,
.inp-txt[readonly] {background:#eee; cursor:not-allowed}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
}

/* checkbox */
.form-check label {display:inline-flex; align-items:center; gap:10px; cursor:pointer}
.form-check label:before {content:''; display:inline-block; width:20px; height:20px; border:1px solid #585858; border-radius:4px; box-sizing:border-box; vertical-align:top}
.form-check input[type='checkbox'] {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
.form-check input[type='checkbox']:checked + label:before {border:none; background:#142c67 url('https://static.hankyung.com/img/www/w/common/form/icon-check-fff.svg') no-repeat center center/10px 9px}

/* Layout */
#wrap {max-width:460px; margin:0 auto; padding:39px 19px}
/* top */
.top-area {transform:translate(-10px, -30px)}
.top-area .logo-hk {display:inline-block; padding:10px; line-height:0}
.top-area .logo-hk::before {content:''; display:inline-block; width:60px; height:15px; background:url('https://static.hankyung.com/img/logo/logo-hk.svg') no-repeat 0 0/contain; vertical-align:top}
/* header */
.header {margin-bottom:20px; word-break:keep-all}
.header .logo-section {display:flex; justify-content:center}
/* .header .logo-section {gap:6px; min-height:42px}
.header .logo-section .logo-short-hk {display:inline-flex; justify-content:center; align-items:flex-end; padding:0 6px 8px 5px; background:#142c67}
.header .logo-section .logo-short-hk::before {content:''; display:inline-block; width:39px; height:24px; background:url('https://static.hankyung.com/img/logo/logo-short-hk-w.svg') no-repeat 0 50%/contain; vertical-align:top} */
.header .logo-section .logo-short-hk {display:none}
.header .logo-section .section-title {font-size:34px}
.logo-section-sub {margin-top:16px}
/* .header .logo-section .section-title {display:inline-flex; align-items:flex-end; padding-bottom:7px; color:#555; font-family:'NanumMyeongjo', serif; line-height:1.1} */

.header-title,
.logo-section-sub {font-size:20px; text-align:center}
.header-desc,
.logo-section-sub-desc {font-size:16px; line-height:1.5; text-align:center}
.header-util-top {display:flex; justify-content:flex-end; width:100%; margin-bottom:24px}
.header-util-top .btn-close {width:24px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat 50% 50%/contain}

/* footer */
.footer {margin-top:60px; color:var(--hk-text-secondary); font-size:13px; text-align:center}
.footer a {color:var(--hk-text-secondary)}
.footer .service-info {margin-bottom:10px}
.footer .service-info dt {margin-bottom:3px; font-weight:bold}
.footer .service-policy {display:inline-flex; align-items:center; justify-content:center}
.footer .service-policy li {display:inline-flex; align-items:center}
.footer .service-policy li + li::before {content:''; display:inline-block; width:1px; min-height:13px; margin:0 10px; background:#ddd}
.footer .copyright {margin-top:5px}
.footer .service-link .link-faq::before {content:''; display:inline-block; width:16px; height:16px; margin-right:4px; background:url('https://static.hankyung.com/img/common/icon/icon-help.svg') no-repeat 50% 50%/contain; vertical-align:-3px}

/* Contents */
.contents .txt-title {font-weight:bold; font-size:20px; text-align:center}
.contents .txt-desc {font-size:13px; line-height:1.55; text-align:center; word-break:keep-all}
.contents .txt-desc:first-child {padding-top:20px}
.contents .txt-title + .txt-desc {margin-top:30px}
.contents .txt-accent {color:#EE4C4C; font-size:13px; text-align:center; word-break:keep-all}
.contents .rel-links {display:flex; align-items:center; justify-content:center; gap:40px; font-size:15px}
.contents .rel-links > a {position:relative}
.contents .rel-links > a + a::before {content:''; display:inline-block; position:absolute; top:50%; left:-20px; width:1px; height:95%; background:#ddd; transform:translateY(-50%)}
.contents .rel-links:not(:first-child) {margin-top:30px}
.social-area {border-top:1px solid #ddd; margin-top:30px; padding-top:25px}
.social-area .tit {margin-bottom:25px; color:var(--hk-text-secondary); font-weight:normal; font-size:13px; text-align:center}
.social-list {display:flex; justify-content:center; gap:30px}
.social-list > li {position:relative}
.social-list [class^="btn-social-"] {display:inline-block; width:40px; height:40px; vertical-align:top; background-repeat:no-repeat; background-size:contain}
.social-list .btn-social-kakao {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-kakao.svg')}
.social-list .btn-social-naver {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-naver.svg')}
.social-list .btn-social-google {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-google.svg')}
.social-list .btn-social-apple {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-apple.svg?v=20240523')}
.social-list .latest {position:absolute; top:48px; left:50%; transform:translateX(-50%)}
/* Contents: 회원가입 */
.join-contents {padding-top:25px}
.join-contents .txt-title {margin-bottom:25px}
/* Contents: 로그인 */
.login-contents {padding-top:25px; padding-bottom:15px}
.login-contents > .txt-accent {margin-bottom:15px}
.login-contents .login-option {margin:15px 0}
.login-contents .login-option > .txt-accent {margin:10px 0 15px; text-align:left}
.login-contents .btn-wrap {margin-top:15px}

/* 기업회원 로그인 관련 */
.notice-list {display:flex; flex-direction:column; gap:4px; margin-top:25px; color:var(--hk-text-secondary); font-size:12px; word-break:keep-all}
.notice-list > li {position:relative; padding-left:16px}
.notice-list > li::before {content:''; position:absolute; left:8px; top:8px; width:2px; height:2px; border-radius:100%; background:var(--hk-text-secondary)}

.is-biz .header {display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:40px}
.is-biz .header .logo-section {width:100%}
.is-biz .notice-list,
.is-biz .footer {margin-top:32px}
.is-biz .login-form .notice-list {margin-top:16px}
.is-biz .login-contents {padding:0}
.is-biz .service-link {display:flex; flex-direction:column; align-items:center; gap:4px}
.is-biz .btn-primary {background: #262A33}

html:has(.is-premium9),
body:has(.is-premium9) {background:var(--hp9-bg)}
.logo--premium9 {display:block; width:100%; max-width:278px; aspect-ratio:278 / 32; background:url('https://static.hankyung.com/resource/common/img/logo/logo-premium9.svg') no-repeat center/contain; transform:translateZ(0); backface-visibility:hidden}
.is-premium9 .inp-txt {background:#fff2e4 !important; border:1px solid #E6D9CE !important; color:#121212 !important; color-scheme:light !important}
.is-premium9 .inp-txt:-webkit-autofill,
.is-premium9 .inp-txt:-webkit-autofill:hover,
.is-premium9 .inp-txt:-webkit-autofill:active,
.is-premium9 .inp-txt:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px #fff2e4 inset !important;
	-webkit-text-fill-color: #121212 !important;
	background-color: #fff2e4 !important;
}

/***** 문화,유레카 등 한경 외 *****/
/* .header .logo-arte {display:inline-flex; width:15px00px; height:39px; background:url('https://static.hankyung.com/img/logo/logo-arte.svg') no-repeat 0 50%/contain; vertical-align:top}
.header .logo-eureka {display:inline-flex; width:142px; height:53px; background:url('https://static.hankyung.com/img/logo/logo-eureka.svg') no-repeat 0 50%/contain; vertical-align:top} */
.header .logo-arte  {font-size:44px}
.header .logo-eureka,
.header .logo-webinow {font-size:34px}
.header .logo-arte {letter-spacing:0}
.contents > .txt-title {font-weight:normal; font-size:16px}
.intro-thumb {margin:50px 0 70px; text-align:center;}
.intro-thumb img {width:160px; height:160px; border-radius:100%; object-fit:cover; object-position:center}
.account-check {display:flex; flex-direction:column; gap:16px}
.account-check [class^="btn-"] {position:relative; display:block; width:100%; min-height:60px; padding:5px 10px; border-radius:10px; color:#121212; font-weight:normal; font-size:17px; line-height:1; text-align:center}
.account-check [class^="btn-"] .txt {display:inline-flex; align-items:center; gap:15px; min-width:180px; text-align:left}
.account-check [class^="btn-"] .txt::before {content:''; display:inline-block; width:32px; background-repeat:no-repeat; background-position:50% 50%}
.account-check [class^="btn-"] .latest {position:absolute; top:-15px; right:-10px; background:#555}
.account-check [class^="btn-"] .latest::before {top:auto; bottom:-4px; border-bottom:none; border-top:4px solid #555}
.account-check .btn-login-hk {background-color:#fff; border:1px solid #ddd}
.account-check .btn-login-hk .txt::before {height:28px; background:#142c67 url('https://static.hankyung.com/img/logo/logo-short-hk-w.svg') no-repeat 50% 10px/23px 12px}
.account-check .btn-login-kakao {background-color:#fee403}
.account-check .btn-login-kakao .txt::before {height:17px; background-image:url('https://static.hankyung.com/img/common/icon/social/icon-kakao.svg')}
.account-check .btn-login-naver {background-color:#0ec75B; color:#fff}
.account-check .btn-login-naver .txt::before {height:15px; background-image:url('https://static.hankyung.com/img/common/icon/social/icon-naver.svg')}
.account-check .btn-login-apple {background-color:#000; color:#fff}
.account-check .btn-login-apple .txt::before {height:18px; background-image:url('https://static.hankyung.com/img/common/icon/social/icon-apple.svg')}
.account-check .btn-login-google {background-color:#fff; border:1px solid #ddd}
.account-check .btn-login-google .txt::before {height:19px; background-image:url('https://static.hankyung.com/img/common/icon/social/icon-google.svg')}
.account-check:not(:first-child) {margin-top:30px}

/* media query */
@media screen and (max-width:767.98px) {
    #wrap:has(.header-util-top) {padding-top:14px}
}
@media screen and (max-width:300px) {
	.social-list {justify-content:space-between; gap:0}
}
@media screen and (min-width:768px) {
    body {font-family:-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif; letter-spacing:-.075em}
    _::-webkit-full-page-media, _:future, :root body {letter-spacing:0} /* safari */

    #wrap {padding:20px}
    #wrap > .inner {position:relative; min-height:760px; padding:60px 39px; border:1px solid #ddd}
    #wrap:has(.header-util-top) > .inner {padding-top:14px}
    .header-util-top .btn-close {transform:translateX(25px)}
    
	.top-area {position:absolute; top:10px; transform:translateX(-10px)}

    .header {margin-bottom:48px}
    /* .header .logo-section {gap:20px; min-height:71px}
    .header .logo-section .logo-short-hk {padding:0 10px 13px}
    .header .logo-section .logo-short-hk::before {width:60px; height:32px}
    .header .logo-section .section-title {padding-bottom:12px} */
    /* .contents .txt-desc {margin:0 -10px} */
    .contents .txt-desc:first-child {padding-top:35px}

	/* 기업회원 관련 */
	#wrap.is-premium9 > .inner {border-color:#E6D9CE}
    #wrap.is-premium9 > .inner:has(.login-pw-form) {border:none}
    #wrap.is-premium9 > .inner:not(:has(.header-util-top)) {padding-top:32px}
    .is-biz .header {margin-bottom:72px}

    /***** 문화,유레카 등 한경 외 *****/
    .account-check [class^="btn-"] .txt {gap:30px; min-width:203px}
}

/* jQuery-ui modal */
.ui-widget-overlay {background:#fff !important}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
    width: 95% !important;
    max-width: 500px;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}
.ui-dialog .ui-dialog-content > p {display:flex; gap:10px}
.ui-icon.ui-icon-alert {flex:0 0 auto; float:none; margin:0 !important}

/* spinner */
.loading-spinner {position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.7)}
.loading-spinner img {width:100px}

/* OS dark mode */
@media (prefers-color-scheme: dark) {
	:root {
        --hk-text-primary: #fff;
        --hk-text-secondary: #bdbdbd;
    }

	body {background:#1c1c1e}
	body, a {color:#fff}
	#wrap > .inner,
	.social-area {border-width:0.5px; border-color:#323235}
	.contents .txt-accent {color:#ff4f53}
	.contents .rel-links > a + a::before {background:#323235}
	.form-check label:before {background:#fff; border:none}
	.latest {background:#555}
	.latest::before {border-bottom-color:#555}
	.social-list .btn-social-apple {filter:invert(1)}
	/* .social-list .btn-social-apple {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-apple-pierced-w.svg?v=20240523')} */
	.account-check .btn-login-apple {border:1px solid #323235} 
	.account-check .btn-login-hk,
	.account-check .btn-login-google {background-color:#000; border:none; color:#fff}
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:active,
	input:-webkit-autofill:focus {
		-webkit-text-fill-color: #fff;
		-webkit-box-shadow:0 0 0 50px #000 inset;
		background-color: #000 !important;
	}
	.inp-txt:disabled,
	.inp-txt[readonly] {background:#333 !important; color:#888 !important}
	.inp-txt {border:none; background:#000; color:#fff; color-scheme:dark}
	.top-area .logo-hk::before {background-image:url('https://static.hankyung.com/img/logo/logo-hk-w.svg');}

	.layer-tooltip {border:1px solid #000; background:#000}
	.layer-tooltip::before, 
	.layer-tooltip::after {border-top-color:#000}

	.is-premium9 {
		--hk-text-primary: #121212;
        --hk-text-secondary: #585858;	
	}
	body:has(.is-premium9), 
	.is-premium9 a {color:#121212}
	.is-premium9 .inp-txt {background:#fff2e4 !important; border:1px solid #E6D9CE !important; color:#121212 !important; color-scheme:light}
}