@charset "UTF-8";

/* Mypage Common UI Style, 2022
 * My Stock
 * My News
 */

:root {
    --hk-text-primary: #121212;
    --hk-text-secondary: #585858;
    --hk-up: #b50000;
    --hk-down: #2853b2;
    --hk-hold: #585858;
    --hk-up-bg: #b50000;
    --hk-down-bg: #2853b2;
    --hk-hold-bg: #585858;
    --hk-up-dark: #ff5f5f;
    --hk-down-dark: #5897ff;
    --hk-hold-dark: #bdbdbd;
    --hk-up-bg-dark: #D83B3B;
    --hk-down-bg-dark: #3773DA;
    --hk-hold-bg-dark: #585858;

	--hk-keycolor: #436f91;
}

/* RESET */
html,body{-webkit-text-size-adjust:none}
body{color:#121212; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif; /*font-family: -apple-system, "Malgun Gothic", "맑은 고딕", BlinkMacSystemFont, helvetica, "Apple SD Gothic Neo", sans-serif;*/ font-size:14px;line-height:1.45;word-break:keep-all;word-wrap:break-word}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,select,p,button,figure,figcaption{margin:0;padding:0}
img,fieldset,iframe{border:0 none;vertical-align:middle}
table{width:100%}
table,thead,tbody,tfoot,tr,th,td{border:0 none;border-collapse:collapse;table-layout:fixed}
h1,h2,h3,h4,h5,h6{font-size:100%}
ul,ol,dl,li,dt,dd{list-style:none}
a{text-decoration:none;color:#121212}
em,address{font-style:normal}
button{border:0 none;border-radius:0;cursor:pointer; background:none}
input, textarea {border-radius:0; border:0 none; /* background:none */ -webkit-appearance:none; -webkit-border-radius:0}
input[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{-webkit-appearance:radio; -webkit-border-radius:10px}
caption{overflow:hidden;width:0;height:0;font-size:0;line-height:0}
legend {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
input,textarea,select,button{color:inherit;font-size:inherit;font-family:inherit}
input[type="submit"]{-webkit-appearance:none;-webkit-border-radius:0px;padding:0;border:0;margin:0}
textarea{width:100%;resize:none;vertical-align:middle}
textarea::-webkit-input-placeholder,textarea::-moz-placeholder,textarea:-ms-input-placeholder,textarea:-moz-placeholder{color:#777}
input::-webkit-input-placeholder,input::-moz-placeholder,input:-ms-input-placeholder,input:-moz-placeholder{color:#777}
iframe {max-width:100%}
img {max-width:100%}

/* 공통 svg spinner */
.loading-spinner {text-align:center}
.loading-spinner .spinner {width:70px}

/* SKIP NAVI */
#skipnavi,
.skip_navi {position:relative; z-index:9999}
#skipnavi a,
.skip_navi a {display:block; width:100%; font-size:0; line-height:0}
#skipnavi a:focus,
.skip_navi a:focus {padding:20px 0; font-size:14px; line-height:12px; color:#fff; text-align:center; background:#121212}

/* COMMON CLASS */
html {background:#F3F2F8}
.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent} 
a[class^="btn-"],
button[class^="btn-"],
*[class^="icon-"],
*[class^="badge-"] {display:inline-block}

.txt-en, .txt-num {letter-spacing:0}
.icon-new {width:16px; height:16px; overflow:hidden; background-position:-153px -116px; color:transparent; white-space:nowrap; vertical-align:-2px}

/* 회원 아이콘 */
[class^="icon-mylogin-"] {display:inline-block; width:24px; height:24px; border-radius:25rem; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; vertical-align:middle}	
.icon-mylogin-hk,
.icon-mylogin-email {background:#142c67 url('https://static.hankyung.com/img/logo/logo-short-hk-w.svg') no-repeat 3px 50%/17px 9px}
.icon-mylogin-kakao {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-kakao.svg')}
.icon-mylogin-naver {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-naver.svg')}
.icon-mylogin-apple {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-apple.svg')}
.icon-mylogin-google {background-image:url('https://static.hankyung.com/img/common/icon/social/icon-cir-google.svg')}

/* 한경 Only 아이콘 */
.icon-hkonly {display:inline-block; margin-right:6px; padding:3px 5px 2px; border-radius:4px; background:#04aba9; color:#fff; font-weight:normal; font-size:11px; line-height:1.3; vertical-align:2px}
a.news-hkonly {text-decoration:none; box-shadow:inset 0 -8px 0 #dff9f8; transition:all .15s cubic-bezier(.33,.66,.66,1); overflow-wrap:break-word; -webkit-tap-highlight-color:rgba(0,0,0,0)}
a.news-hkonly:hover {box-shadow:inset 0 -20px 0 #dff9f8}
/* 회원전용 아이콘 */
.icon-membersonly {display:inline-block; margin-right:6px; padding:2px 5px; border-radius:4px; background:#00bbb4; /*background:#ff761b;*/ color:#fff; font-weight:normal; font-size:11px; line-height:1.3; white-space:nowrap; vertical-align:2px}
a.icon-membersonly {color:#fff !important}
.icon-membersonly2 {display:inline-block; width:10px; height:13px; margin:0 0 0 6px; background:url('https://static.hankyung.com/img/www/w/common/icon/icon-lock.svg') no-repeat center center/contain; color:transparent; overflow:hidden; text-indent:-999px; vertical-align:-1px}
a.news-membersonly {display:inline !important; text-decoration:none; box-shadow:inset 0 -8px 0 #ffebdd; transition:all .15s cubic-bezier(.33,.66,.66,1); overflow-wrap:break-word; -webkit-tap-highlight-color:rgba(0,0,0,0)}
a.news-membersonly:hover {box-shadow:inset 0 -20px 0 #ffebdd}
/* 프리미엄 아이콘 */
.icon-premium2 {margin-right:4px; vertical-align:-3px}
.icon-premium-txt {display:inline-block; margin-right:6px; padding:1px 4px 1px 5px; border-radius:4px; background:#eb4e45; color:#fff; font-weight:bold; font-size:11px; line-height:1.3; letter-spacing:0; vertical-align:2px; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif; text-align:center}

img.icon--member {margin-right:4px; vertical-align:-2px}
img.icon--premium {margin-right:4px; vertical-align:-2px}
.slick-slide img.icon--member,
.slick-slide img.icon--premium {display:inline}

.container > .btn-more-wrap,
.inner > .btn-more-wrap,
.news-list ~ .btn-more-wrap {padding-left:20px; padding-right:20px}
.main-component .news-list ~ .btn-more-wrap {padding-left:0; padding-right:0}
.btn-more-wrap {padding-top:15px; padding-bottom:15px; background:#fff; text-align:center}
.btn-more-wrap .btn-more {display:flex; align-items:center; justify-content:center; width:100%; padding:10px 0; border:1px solid #585858; border-radius:6px; font-weight:bold; font-size:17px; box-sizing:border-box}

/* 푸터 */
.footer--simplify {padding:0px 20px 20px; text-align:center}
.footer--simplify .footer-copyright {font-size:13px; letter-spacing:0}

/* AD */
.ad_bottom_fix {position:fixed; bottom:0; left:0; z-index:2; width:100%; background-color:#f2f2f2; text-align:center}
.ad_bottom_fix div {margin:0 auto}
.ad_bottom_fix.close_ad {background:rgba(0,0,0,0.6); min-height:50px}
.ad_bottom_fix.close_ad .btn-remove-ad {position:absolute; top:0; left:50%; display:inline-flex; align-items:center; width:40px; height:15px; margin-left:160px; padding:2px 2px 0; text-align:center; background:#ff0000; color:#fff; white-space:nowrap; font-size:10px; line-height:1}

/* 간소화 헤더 (모바일버전)
* use: 마이뉴스, 마이스톡
*/
.hk-header--simplify {background:#142C67}
.hk-header--simplify .header__inner {padding:0 20px}
.hk-header--simplify .logo__area {display:flex; align-items:center; min-height:50px} 
.hk-header--simplify .logo__area .logo--hk {display:block}
.hk-header--simplify .logo__area .logo--hk .img-logo {width:38px; height:20px}
.hk-header--simplify .logo__area .service__tit {display:inline-flex; align-items:center; color:#fff; font-weight:700; font-size:20px; line-height:1}
.hk-header--simplify .logo__area .service__tit::before {content:''; display:inline-block; width:1px; height:15px; margin:0 10px; background-color:#5F6982}
.hk-header--simplify .logo__area .service__tit .txt {transform:translateY(-1px)}

.hk-header--simplify__gnb {margin:0 -20px; padding:8px 20px; border-top:1px solid #2F4D98}
.hk-header--simplify__gnb > .inner__scroll {overflow-x:scroll; overflow-y:hidden; box-sizing:border-box; -webkit-overflow-scrolling:touch; text-align:center}
.hk-header--simplify__gnb > .inner__scroll::-webkit-scrollbar {display:none}
.section__gnb—simplify {display:inline-flex; align-items:center; gap:16px; color:#fff}
.section__gnb—simplify a {color:#fff; font-size:16px; line-height:22px; white-space:nowrap}
.section__gnb—simplify a:hover {color:#fff}

/* [2022.06.14] 구독,스크랩 토스트팝업 공통 */
.hk__icon-x {content:''; display:inline-block; width:20px; height:20px; background-image:linear-gradient(to bottom, #373737 0%, #373737 100%), linear-gradient(to left, #373737 0%, #373737 100%); background-size:100% 1px,1px 100%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg); vertical-align:top}

.hk__toast {position:fixed; left:0; right:0; bottom:0; z-index:999999999; padding:15px 40px 15px 10px; border:1px solid #e3e3e3; border-radius:20px 20px 0 0; background:#fff; box-shadow:3px 3px 7px rgba(0,0,0,.05); visibility:hidden; opacity:0; transform:translateY(100%); transition:all ease-in .25s}
.hk__toast .toast__body {display:flex; align-items:center; font-size:14px}
.hk__toast .toast__body > .toast__icon {flex:0 0 auto; margin-right:11px}
.hk__toast .toast__btn-close {position:absolute; top:9px; right:9px; padding:10px}
.hk__toast.show {visibility:visible; opacity:1; transform:translateY(0)}
/*_____ Common _____*/
/* body {font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif} */

/* helpers class */
.ellip {display:block; display:-webkit-box; word-break:break-all; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical}

.overflow-hidden {position:fixed; inset:0; overflow:hidden; transform:none}
html.overflow-hidden {height:100dvh}

/* icon */
[class^="myicon-"] {display:inline-block; box-sizing:border-box}
.myicon-user {width:60px; height:60px; border-radius:100%; background-image:url('https://static.hankyung.com/img/www/w/my-pages/icon-user.svg'); background-repeat:no-repeat; background-size:contain}
.myicon-plus {width:16px; height:16px; background-image:linear-gradient(to bottom, #121212 0%, #121212 100%), linear-gradient(to left, #121212 0%, #121212 100%); background-size:100% 2px,2px 100%; background-position:center; background-repeat:no-repeat}
.myicon-del-circle {width:20px; height:20px; border-radius:100%; background-color:#c3c3c3; background-image:linear-gradient(to bottom, #fff 0%, #fff 100%), linear-gradient(to left, #fff 0%, #fff 100%); background-size:50% 2px,2px 50%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg)}
.myicon-del {width:20px; height:20px; border-radius:100%; background-image:linear-gradient(to bottom, #888 0%, #888 100%), linear-gradient(to left, #888 0%, #888 100%); background-size:50% 2px,2px 50%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg)}
.myicon-add-circle {width:20px; height:20px; border:1px solid #c3c3c3; border-radius:100%; background-color:#fff; background-image:linear-gradient(to bottom, #c3c3c3 0%, #c3c3c3 100%), linear-gradient(to left, #c3c3c3 0%, #c3c3c3 100%); background-size:60% 2px,2px 60%; background-position:center; background-repeat:no-repeat}
.myicon-remove-circle {width:20px; height:20px; border:1px solid #c3c3c3; border-radius:100%; background-color:#fff; background-image:linear-gradient(to bottom, #c3c3c3 0%, #c3c3c3 100%); background-size:60% 2px,2px 60%; background-position:center; background-repeat:no-repeat}
.myicon-prev {width:10px; height:10px; margin-left:4px; border-bottom:2px solid #888; border-left:2px solid #888; transform:rotate(45deg)}

/* button */
[class^="mybtn-"] {display:inline-flex; align-items:center; box-sizing:border-box; vertical-align:top}
.mybtn-default {display:inline-flex; align-items:center; box-sizing:border-box; justify-content:center; min-height:40px; padding:0 15px; border-radius:8px; font-size:16px}
.mybtn-outline {padding:0 11px; border:1px solid #ddd; border-radius:6px; line-height:33px; font-size:14px; white-space:nowrap}
.mybtn-outline .myicon-plus {margin-right:8px}
.mybtn-circle {justify-content:center; width:40px; height:40px; border:1px solid #585858; border-radius:20px}
.mybtn-round {justify-content:center; min-height:40px; padding:0 20px; background:#888; color:#fff; font-size:15px; line-height:40px; border-radius:20px; white-space:nowrap}
.mybtn-arr-fold {justify-content:center; width:30px; height:30px}
.mybtn-arr-fold::before {content:''; display:inline-block; width:7px; height:7px; margin-top:-3px; border-right:1px solid #121212; border-bottom:1px solid #121212; transform:rotate(45deg)}
.mybtn-arr-fold.on::before {margin-top:5px; transform:rotate(225deg)}

.mybtn-confirm {background-color:#121212; border:1px solid #121212; color:#fff}
.mybtn-cancel {background-color:#fff; border:1px solid #ddd; color:#121212}

.mybtn-round.mybtn-complete {background:#121212}

/* badge */
[class^="mybadge-"] {display:inline-flex; align-items:center; box-sizing:border-box}
.badge-consensus {display:inline-flex; align-items:center; justify-content:center; margin:0; padding:5px 8px 4px; border-radius:5px; background:#888; color:#fff; font-weight:normal; font-size:11px; line-height:1; box-sizing:border-box}
.badge-consensus.corporation {background:#35c876} /* 기업 */
.badge-consensus.industry {background:#8623e3} /* 산업 */
.badge-consensus.market {background:#f71b73} /* 시장 */
.badge-consensus.economy {background:#2e4bca} /* 경제 */
.badge-consensus.derivation {background:#3a9dd6} /* 파생 */

/* form */
.myinput-txt {display:block; width:100%; height:45px; line-height:43px; padding:0 10px; border:1px solid #ddd; border-radius:10px; background:#fff; box-sizing:border-box; outline:none; font-size:16px}
.myinput-txt::placeholder {color:#888}
.myinput-txt:-ms-input-placeholder {color:#888}
.myinput-txt::-ms-input-placeholder {color:#888}
.myinput-txt:disabled,
.myinput-txt[readonly]:not(.daterangePicker) {background:#eee; cursor:not-allowed}

.myinput-txt {
	-webkit-ime-mode:active;
	-moz-ime-mode:active;
	-ms-ime-mode:active;
	ime-mode:active;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{display:none}

.myinput-search-wrap {position:relative}
.myinput-search-wrap .mybtn-search {position:absolute; top:50%; right:10px; transform:translateY(-50%)}

.select-style {display:block; position:relative; min-height:35px; background:#fff; box-sizing:border-box}
.select-style select {position:relative; z-index:2; width:100%; height:100%; padding:0 35px 0 13px; border:1px solid #585858; border-radius:6px; background:transparent; font-size:14px; line-height:33px; vertical-align:middle; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; outline:none; box-sizing:border-box}
.select-style select::-ms-expand {opacity:0}
.select-style select option {font-size:14px}
.select-style::after {content:''; position:absolute; top:calc(50% - 4px); right:15px; width:8px; height:8px; border-right:1px solid #121212; border-bottom:1px solid #121212; transform:rotate(45deg) translateY(-50%)}

/* tab */
.tab-wrap {position:relative}
.tab-wrap .inner-scroll {overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch}
/* .tab-wrap .inner-scroll::-webkit-scrollbar {display:none} */
.tab-wrap .inner-scroll {min-height:0; overscroll-behavior:contain; padding-bottom:4px}
.tab-wrap .inner-scroll::-webkit-scrollbar {width:4px; height:4px}
.tab-wrap .inner-scroll::-webkit-scrollbar-thumb {background:rgba(0, 0, 0, 0.3); border-radius:2px}
.tab-wrap .inner-scroll::-webkit-scrollbar-track {background:transparent}

.tab-type1-wrap {min-height:40px; margin-bottom:20px}
.tab-type1 {display:inline-flex; min-width:100%; box-sizing:border-box}
.tab-type1 > li {flex:1 1 auto}
.tab-type1 > li > a {display:block; min-height:40px; margin:0 -1px; padding:0 10px; border:1px solid #ddd; background:#fff; font-size:17px; line-height:38px; text-align:center; box-sizing:border-box}
.tab-type1 > li:first-child > a {margin-left:0; border-radius:10px 0 0 10px}
.tab-type1 > li:last-child > a {margin-right:0; border-radius:0 10px 10px 0}
.tab-type1 > li.on > a {position:relative; border-color:#121212; font-weight:bold}

.tab-type2-wrap {position:relative; min-height:45px; background:linear-gradient(0deg, rgba(34,34,34,1) 1px, rgba(255,255,255,1) 1px);}
.tab-type2 {display:flex; justify-content:center}
.tab-type2 > li {flex:0 0 auto; padding:0}
.tab-type2 > li > a {display:inline-block; position:relative; min-height:45px; padding:10px 13px 0; color:var(--hk-text-secondary); font-size:17px; box-sizing:border-box}
.tab-type2 > li.on > a {border-bottom-color:#121212; color:#121212; font-weight:bold}
.tab-type2 > li.on > a::after {content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:#121212}

.tab-round {display:inline-flex}
.tab-round .tab-link {display:inline-block; min-height:38px; padding:0 13px; border:1px solid #ddd; border-radius:20px; font-size:14px; line-height:38px; text-align:center; white-space:nowrap}
.tab-round .on .tab-link {font-weight:bold}
.tab-round li + li {margin-left:5px}

/* table */
.table-collapse {width:100%; table-layout:fixed}
.table-collapse thead th {padding:0 0 5px 0; color:var(--hk-text-secondary); font-weight:normal; font-size:12px; text-align:left}
.table-collapse tbody th,
.table-collapse td {padding:0 0 10px 0; font-size:15px; text-align:left}

/* list */
.news-tit,
.lead,
.report-content {overflow:hidden; display:block; display:-webkit-box; text-overflow:clip; word-wrap:break-word; word-break:break-all; -webkit-box-orient:vertical}
.lead {color:var(--hk-text-secondary); font-size:14px}

.thumb {position:relative; overflow:hidden; border-radius:6px}
.thumb > a {display:block; width:100%; height:100%}
.thumb img {width:100%; height:100%; object-fit:cover; object-position:top}

.news-list > li {padding:12px 0 10px}
.news-list > li + li {border-top:1px solid #e6e6e6}
.news-list > li > .news-item {align-items:flex-start; padding:0}
.news-item {display:flex; align-items:center; padding:12px 0 10px; box-sizing:border-box}
.news-item + .news-item {border-top:1px solid #dfdfdf}
.news-item .thumb {position:relative; flex:0 0 auto; width:80px; height:50px; margin-left:10px; text-align:right}
.news-item .thumb > a {position:relative; width:100%; height:100%; border-radius:6px}
.news-item .thumb > a::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid rgba(0,0,0,.15); border-radius:6px; box-sizing:border-box; pointer-events:none}
/* .news-item .thumb img {object-fit:contain; object-position:center} */
.news-item .thumb .thumb-icon {right:5px; bottom:5px; transform:scale(0.6)}
.news-item .txt-cont {flex:1 0 auto; width:calc(100% - 90px)}
.news-item .date {color:var(--hk-text-secondary); font-size:12px}
.news-item .news-tit {font-weight:400; font-size:19px; line-height:25px; -webkit-line-clamp:2}

.report-list > li {padding:15px 0 12px}
.report-list > li + li {border-top:1px solid #ddd}
.report-list .report-item-wrap {display:flex; align-items:center; justify-content:space-between; margin-bottom:5px}
.report-list .report-item {display:flex; align-items:center}
.report-list .report-item .badge-consensus {flex:0 0 auto; margin-right:7px}
.report-list .report-item .stock-name {font-weight:bold; font-size:17px}
.report-list .txt-date {flex:0 0 auto; color:var(--hk-text-secondary); font-size:13px; letter-spacing:0}
.report-list .report-content {font-size:19px; line-height:1.4; -webkit-line-clamp:2}

.stock-itemlist-header {display:flex; padding:10px 0; border-top:1px solid #eee; color:var(--hk-text-secondary); font-size:12px}
.stock-itemlist > li {padding:10px 0}
.stock-itemlist > li > .item {display:flex; align-items:center; justify-content:space-between}
.stock-itemlist .stock-title .name {display:table-cell; color:#121212; white-space:unset; font-size:17px}
.stock-itemlist .stock-title .name a {color:#121212}
.stock-itemlist .stock-title .code {display:block; color:var(--hk-text-secondary); font-size:12px; white-space:unset}
.stock-itemlist .stock-nums {display:flex; align-items:center; margin-left:10px; text-align:right}
.stock-itemlist .stock-nums > .col + .col {margin-left:10px; line-height:1}
.stock-itemlist .stock-nums .price {color:#121212; font-size:17px; line-height:1.2}
.stock-itemlist .stock-nums .stock-point {font-size:12px; white-space: nowrap;}
.stock-itemlist .stock-nums .count {color:#121212; font-size:12px}
.stock-itemlist .stock-nums .rate {display:inline-block; min-width:70px; padding:0 7px; border-radius:8px; background-color:var(--hk-hold-bg); color:#fff; font-size:14px; line-height:30px; vertical-align:top; box-sizing:border-box; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif; text-align:center}
.stock-itemlist .up .stock-nums .rate {background-color:var(--hk-up-bg)}
.stock-itemlist .down .stock-nums .rate {background-color:var(--hk-down-bg)}
.stock-itemlist .hold .stock-nums .rate {background-color:var(--hk-hold-bg)}
.stock-itemlist .mybtn-move {padding:5px}

.stock-itemlist.type-accordion {border-bottom:1px solid #ddd}
.stock-itemlist.type-accordion > li {padding:10px 0 0; border-top:1px solid #ddd}
.stock-itemlist.type-accordion > li > .item {padding-bottom:10px}
.stock-itemlist.type-accordion .stock-nums > .col + .col {margin-left:10px}
.stock-itemlist .collapse-cont {display:none; padding:20px 40px 10px 0; background:linear-gradient(180deg, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 7px, rgba(255,255,255,1) 100%)}
.stock-itemlist .collapse-cont.show {display:block}
.edit .stock-itemlist .collapse-cont {padding-right:0}

.btn-more-wrap {padding-left:0 !important; padding-right:0 !important}

.mypage-infobox {margin-top:20px; padding-top:15px; border-top:1px solid #ddd; color:var(--hk-text-secondary); font-size:12px; line-height:1.5}

.no-news {border-top:1px solid #ddd; padding:80px 0 0 0}
.no-news .msg {padding:115px 0 100px; background:url('https://static.hankyung.com/img/www/w/my-pages/img-no-data.png') no-repeat 50% 0/260px 160px; text-align:center; color:#999; font-size:17px}

.no-news2 {border-top:1px solid #ddd; padding:80px 0; text-align:center; color:#999; font-size:16px}
.no-news2 .btns {margin-top:15px}

/* plugin */
.daterangepicker {z-index:99999999}

.sortable-ghost {background:rgba(238,238,238,.5); border-radius:5px}

/* ad */
.ad-box {max-width:720px; margin:30px auto; text-align:center}

/* layout */
.mypage__container > .inner {padding:15px 20px}

.box {padding:24px 19px; border:1px solid #ddd; border-radius:10px; background:#fff; box-shadow:3px 3px 6px rgba(0,0,0,.1); box-sizing:border-box}

/* contents */
.up,
.up a:not(.stock-category) {color:var(--hk-up)}
.down,
.down a:not(.stock-category) {color:var(--hk-down)}
.hold,
.hold a:not(.stock-category) {color:var(--hk-hold)}
.stock-point::before {content:''; display:inline-block; margin-right:4px}
.up .stock-point::before {width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:9px solid var(--hk-up); vertical-align:1px}
.down .stock-point::before {width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--hk-down); vertical-align:baseline}
.hold .stock-point::before {width:10px; height:4px; background:var(--hk-hold); vertical-align:3px}

.rate-box {display:inline-flex; align-items:center; justify-content:flex-end; min-width:70px; height:29px; padding:0 5px; border-radius:6px; color:#fff; vertical-align:top; font-size:14px; line-height:1.1; box-sizing:border-box}
.rate-box.up {background:var(--hk-up-bg)}
.rate-box.down {background:var(--hk-down-bg)}
.rate-box.hold {background:var(--hk-hold-bg)}

.txt-lt {text-align:left !important}
.txt-ct {text-align:center !important}
.txt-rt {text-align:right !important}

.txt-info {color:var(--hk-text-secondary); font-size:12px}
.no-data {padding:50px 0; font-size:16px; text-align:center}

.initial-data {padding:85px 0 130px; font-size:18px; text-align:center}
.initial-data .initial-icon {height:80px}
.initial-data p + p {margin-top:10px}
.initial-data .initial-subtxt {color:var(--hk-text-secondary); font-size:15px}
.initial-data .initial-subtxt + .initial-subtxt {margin-top:0}

/* theme */
/*
    theme-*-default : 기본 컬러, #888
    theme-*-primary : 주요 컬러
    theme-*-secondary : 보조 컬러
    theme-*-tertiary : 3차 컬러
    theme-*-warning : 경고해야하는 요소에 사용
    theme-*-error : 오류를 표시하는 요소에 사용
    theme-*-neutral : 회색 컬러, 중립 요소에 사용, #ddd
*/

/* theme1 : mytheme-orange */
.mytheme-orange .theme-color-primary {color:#121212}
.mytheme-orange .theme-bg-primary {background-color:#121212}
.mytheme-orange .theme-bg-primary-light {background-color:#fef6f1}
.mytheme-orange .myicon-plus {background-image:linear-gradient(to bottom, #121212 0%, #121212 100%), linear-gradient(to left, #121212 0%, #121212 100%); background-size:100% 2px,2px 100%}
.mytheme-orange .myicon-user {background-color:#121212}
.mytheme-orange .tab-round .on .tab-link {background-color:#121212; border-color:#121212; color:#fff}
.mytheme-orange .svg-fill,
.mytheme-orange .mybtn-star-toggle.on .svgicon-star {fill:#121212}
.mytheme-orange .theme-color-primary .txt-date {color:#121212}

/* theme2 : mytheme-green */
.mytheme-green .theme-color-primary {color:#02b349}
.mytheme-green .theme-bg-primary {background-color:#02b349}
.mytheme-green .theme-bg-primary-light {background-color:#f1f9f3}
.mytheme-green .myicon-plus {background-image:linear-gradient(to bottom, #02b349 0%, #02b349 100%), linear-gradient(to left, #02b349 0%, #02b349 100%); background-size:100% 2px,2px 100%}
.mytheme-green .myicon-user {background-color:#02b349}
.mytheme-green .tab-round .on .tab-link {background-color:#02b349; border-color:#02b349; color:#fff}
.mytheme-green .svg-fill,
.mytheme-green .mybtn-star-toggle.on .svgicon-star {fill:#02b349}
.mytheme-green .theme-color-primary .txt-date {color:#02b349}

/*_____ My Stock _____*/
.mystock-group {position:relative}
.mystock-group .mybtn-add-group {display:none}
.mystock-group .tab-round-wrap {margin:0 -24px}
.mystock-group .tab-round-wrap .tab-round {padding:0 24px}

.mystock-utils2 {display:flex; align-items:center; justify-content:space-between; margin:15px 0}
.mystock-utils2 [class^="util-"] {display:flex; align-items:center; gap:10px}

/* 애널리스트 */
.analyst-contents .mystock-utils {display:flex; align-items:center; justify-content:space-between}
.myAnalystSlider {position:relative; margin:20px -20px 0 !important; padding:0 20px !important; overflow:hidden}
.myAnalystSlider .swiper-slide {width:60px}
.myAnalystSlider .item {display:block; position:relative; width:60px; text-align:center}
.myAnalystSlider .photo {display:flex; align-items:center; justify-content:center; width:60px; height:60px; margin-bottom:8px; border-radius:100%; overflow:hidden; background-color:#888; color:#fff; font-weight:bold; font-size:20px; line-height:60px; white-space:nowrap}
.myAnalystSlider .name,
.myAnalystSlider .company {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:0}
.myAnalystSlider .name {font-weight:bold; font-size:17px}
.myAnalystSlider .company {color:var(--hk-text-secondary); font-size:11px}
.myAnalystSlider .swiper-slide.new .item::after {content:''; position:absolute; top:2px; right:10px; width:12px; height:12px; border-radius:100%; background:#ff0000}
.myAnalystSlider .swiper-slide:first-child .photo {background:#121212 !important}
.myAnalystSlider .swiper-slide.on .photo {position:relative}
.myAnalystSlider .swiper-slide.on .photo::after {content:''; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; border:4px solid var(--hk-keycolor); border-radius:100%; box-sizing:border-box}
.myAnalystSlider .swiper-slide.on .name {color:var(--hk-keycolor)}
.analyst-subscription-list {margin-top:30px}

.my-analyst-list-wrap .no-news,
.my-analyst-list-wrap .no-news2 {margin-top:25px}
.my-analyst-list {margin-top:25px; border-top:1px solid #ddd}
.my-analyst-list > .item {position:relative; padding:15px 0 12px}
.my-analyst-list .analyst-profile-wrap {display:flex; align-items:center; justify-content:space-between}
.my-analyst-list .analyst-profile {display:flex; align-items:center}
.my-analyst-list .analyst-profile .name {margin-right:10px; font-weight:bold; font-size:17px; line-height:1.2}
.my-analyst-list .analyst-profile .company {flex:0 0 auto; color:var(--hk-text-secondary); font-size:12px}
.my-analyst-list .report-list .report-item .badge-consensus {margin-right:5px}
.my-analyst-list .report-list .report-item .stock-name {font-weight:normal; font-size:14px}
.my-analyst-list .report-list .txt-date {font-size:12px}
.my-analyst-list .report-list .report-content {font-size:16px}
.my-analyst-list .report-list > li {border-color:#eee}
.my-analyst-list > .report-list .report-content {margin:5px 0 8px}
.my-analyst-list > .report-list .analyst-profile .name {font-size:12px}
.my-analyst-list > .item .analyst-profile {padding-bottom:15px; border-bottom:1px solid #ddd}
/* 관심종목 */

/* 포트폴리오 */
.my-portfolio-summary {padding-top:10px}
.my-portfolio-summary .chart {margin-bottom:10px}
.my-portfolio-summary .data dl {display:flex; font-size:15px}
.my-portfolio-summary .data dt {flex:0 0 auto; width:95px}
.my-portfolio-summary .data dd:first-of-type {flex:1 1 auto}
.my-portfolio-summary .data dd:last-child {flex:0 0 auto; width:30%}
.my-portfolio-summary .data dd {text-align:right; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.my-portfolio-summary .data dl:first-child {margin-bottom:7px; font-size:19px}
.my-portfolio-summary .data dl:first-child ~ dl dt {color:var(--hk-text-secondary)}
.my-portfolio-summary .data dl + dl {margin-top:5px}
.my-portfolio-summary .data .txt-info {margin-top:15px; padding-top:15px; border-top:1px solid #ddd}
.my-portfolio-detail {margin-top:30px}
/**/
.my-portfolio-detail .stock-itemlist-header {justify-content:space-between; padding-right:40px}
.my-portfolio-detail .stock-itemlist-header .col {flex:0 0 auto; text-align:right}
.my-portfolio-detail .stock-itemlist-header .col:nth-child(1) {flex:1; text-align:left}
.my-portfolio-detail .stock-itemlist-header .col.current {}
.my-portfolio-detail .stock-itemlist-header .col.average {min-width:100px; margin-left:10px}
.my-portfolio-detail .stock-itemlist-header .col:last-child {flex:0 0 auto; width:102px}
.my-portfolio-detail .stock-itemlist .stock-nums {align-items:flex-start}
.my-portfolio-detail .stock-itemlist .stock-nums .col.average {min-width:100px}
.my-portfolio-detail .stock-itemlist.type-accordion .stock-nums .col:last-child {margin-left:0}
.my-portfolio-detail .mybtn-edit {margin:1px 3px 0 0; padding:2px 3px}
.my-portfolio-detail.edit .stock-itemlist-header {padding-right:100px}
/**/
.my-portfolio-detail .item-row.item-row-title {margin-bottom:8px; padding:0 5px 8px 5px; border-bottom:1px solid #eee}
.my-portfolio-detail .item-row .stock-title {display:flex; align-items:center}
.my-portfolio-detail .item-row .stock-title .code {margin-left:10px}
.my-portfolio-detail .item-row .util-btns {display:flex; align-items:center; gap:5px}
.my-portfolio-detail .collapse-cont {padding:15px 10px 5px; background:linear-gradient(180deg, rgba(229,229,229,1) 0%, rgba(247,247,247,1) 7px, rgba(247,247,247,1) 100%);}
.my-portfolio-detail .collapse-cont .table-collapse td {font-size:14px}
.my-portfolio-detail .collapse-cont .table-collapse .count,
.my-portfolio-detail .collapse-cont .table-collapse .txt-date {font-size:12px}




.stock-itemlist > li > .item.type-column {flex-direction:column; align-items:flex-start}
.stock-itemlist .item-row {display:flex; align-items:center; justify-content:space-between; width:100%; padding:0 10px; box-sizing:border-box}

.table-stock-itemlist thead th {padding:0 0 5px; color:var(--hk-text-secondary); font-weight:normal; font-size:12px}
.table-stock-itemlist td {vertical-align:top}
.table-stock-itemlist .rate {display:inline-block; min-width:70px; padding:0 7px; border-radius:8px; background-color:var(--hk-hold-bg); color:#fff; font-size:14px; line-height:30px; vertical-align:top; text-align:center; box-sizing:border-box; font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif}
.up .table-stock-itemlist .rate {background-color:var(--hk-up-bg)}
.down .table-stock-itemlist .rate {background-color:var(--hk-down-bg)}
.hold .table-stock-itemlist .rate {background-color:var(--hk-hold-bg)}
.table-stock-itemlist .price {color:#121212; font-size:15px; line-height:1.2}
.table-stock-itemlist .count {color:#121212; font-size:12px}

.table-collapse .util-layer-wrap {position:relative}
.table-collapse .util-layer-wrap .mybtn-vertical-more {padding:10px}
.table-collapse .util-layer {display:none; position:absolute; top:30px; right:10px; z-index:10; min-width:50px; padding:10px 0; background:#fff; border:1px solid #ddd; border-radius:6px; font-size:14px; box-sizing:border-box}
.table-collapse .util-layer a,
.table-collapse .util-layer button {display:block; width:100%; padding:5px 0; box-sizing:border-box}



/*_____ My News _____*/
.mynews-contents .initial-txt svg {vertical-align:-1px}
.journalist-contents .mynews-utils {display:flex; align-items:center; justify-content:space-between}
.mynews-contents .txt-date,
.journalist-contents .txt-date {color:var(--hk-text-secondary); font-size:12px}

.myJournalistSlider {position:relative; margin:20px -20px 0; padding:0 20px; overflow:hidden}
.myJournalistSlider .swiper-slide {width:60px}
.myJournalistSlider .item {display:block; position:relative; width:70px; text-align:center}
.myJournalistSlider .photo {display:flex; align-items:center; justify-content:center; position:relative; width:60px; height:60px; margin-bottom:8px; border-radius:100%; overflow:hidden; background:#ddd; color:#fff; font-weight:bold; font-size:20px; line-height:60px; white-space:nowrap}
.myJournalistSlider .photo img {width:100%; height:100%; object-fit:cover; object-position:center top}
.myJournalistSlider .photo::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border-radius:100%; border:1px solid rgba(0,0,0,.07)}
.myJournalistSlider .name,
.myJournalistSlider .part {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-left:-10px}
.myJournalistSlider .name {font-weight:normal; font-size:15px}
.myJournalistSlider .part {color:var(--hk-text-secondary); font-size:12px}
.myJournalistSlider .swiper-slide.on:first-child .photo {background:#121212}
.myJournalistSlider .swiper-slide.on:not(:first-child) .photo::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#121212; opacity:.7}
.myJournalistSlider .swiper-slide.on .name {color:#121212}
.myJournalistSlider .swiper-slide.new .item::after {content:''; position:absolute; top:2px; right:10px; width:12px; height:12px; border-radius:100%; background:#ff0000}

.my-journalist-list-wrap {margin-top:20px}
.journalist-list > li {display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-top:1px solid #eee}
.journalist-list > li:first-child {border-color:#ddd}
.journalist-list .photo {flex:0 0 auto; position:relative; width:50px; margin-right:10px}
.journalist-list .photo > a {position:relative; display:block; width:50px; height:50px; border-radius:100%; overflow:hidden}
.journalist-list .photo > a::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border-radius:100%; border:1px solid rgba(0,0,0,.07)}
.journalist-list .photo img {width:100%; height:100%; object-fit:cover; object-position:center top}
.journalist-list .journalist-cont {flex:1 1 auto}
.journalist-list .journalist-profile-wrap {display:flex; align-items:center; justify-content:space-between}
.journalist-list .journalist-profile {display:flex; align-items:center}
.journalist-list .journalist-profile .name {font-size:15px; line-height:1.2}
.journalist-list .journalist-profile .part {flex:0 0 auto; margin-left:10px; border-left:1px solid #ddd; padding-left:10px; color:var(--hk-text-secondary); font-size:12px; line-height:1.1}
.journalist-list .journalist-profile-wrap .txt-date {flex:0 0 auto; margin-left:10px; color:var(--hk-text-secondary); font-size:12px}
.journalist-list .news-tit {margin-top:5px; font-weight:normal; font-size:17px; line-height:25px; -webkit-line-clamp:2}
.journalist-list .new .photo::after {content:''; position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:100%; background:#ff0000}

.journalist-detail {display:flex; align-items:center; justify-content:space-between; padding:20px 0; border-top:1px solid #ddd}
.journalist-detail .photo {flex:0 0 auto; position:relative; width:50px; margin-right:10px}
.journalist-detail .photo > a {display:block; width:50px; height:50px; border-radius:100%; overflow:hidden}
.journalist-detail .photo img {width:100%; height:100%; object-fit:cover; object-position:center top}
.journalist-detail.new .photo::after {content:''; position:absolute; top:2px; right:2px; width:10px; height:10px; border-radius:100%; background:#ff0000}
.journalist-detail .profile-wrap {flex:1 1 auto; width:calc(100% - 110px)}
.journalist-detail .profile {display:flex; align-items:center}
.journalist-detail .profile .name {font-weight:bold; font-size:19px; line-height:1.2}
.journalist-detail .profile .part {margin-left:10px; color:var(--hk-text-secondary); font-size:12px}
.journalist-detail .journalist-say {margin-top:2px; font-size:13px}
.journalist-detail .journalist-subscription {flex:0 0 auto; position:relative; min-width:45px; padding:0 5px 0 0; text-align:center; font-size:12px; line-height:1.2; text-align:center}
.journalist-detail .journalist-subscription .count {font-weight:bold; font-size:17px}
.journalist-detail .journalist-subscription::before {content:''; position:absolute; top:50%; left:0; width:1px; height:30px; background:#ddd; transform:translateY(-50%)}

.journalist-news-list > li {padding:17px 0; border-top:1px solid #eee}
.journalist-news-list > li:first-child {border-color:#ddd}
.journalist-news-list .news-tit {font-weight:normal; font-size:18px; line-height:25px; -webkit-line-clamp:2}
.journalist-news-list .txt-date {display:block; color:var(--hk-text-secondary); font-size:12px}

.journalist-subscription-list > li {display:flex; align-items:center; justify-content:space-between}
.journalist-subscription-list > li + li {margin-top:15px}
.journalist-subscription-list .item {flex:1 1 auto; display:flex; align-items:center; justify-content:space-between}
.journalist-subscription-list .profile-wrap {display:flex; align-items:center}
.journalist-subscription-list .profile-wrap .photo {flex:0 0 auto; width:50px; height:50px; margin-right:10px; border-radius:100%; overflow:hidden}
.journalist-subscription-list .profile-wrap .photo > a {position:relative; display:block; width:100%; height:100%}
.journalist-subscription-list .profile-wrap .photo > a::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; border-radius:100%; border:1px solid rgba(0,0,0,.07)}
.journalist-subscription-list .profile-wrap .photo img {width:100%; height:100%; object-fit:cover; object-position:center top}
.journalist-subscription-list .profile-wrap .name {display:block; font-size:17px}
.journalist-subscription-list .profile-wrap .part {display:block; margin-top:2px; color:var(--hk-text-secondary); font-size:12px}
.journalist-subscription-list .subscription-date {padding:6px 10px; border-radius:5px; font-size:12px; text-align:right}
.journalist-subscription-list .subscription-date > dd {margin-top:1px}
.journalist-subscription-list [class^="mybtn-"] {flex:0 0 auto; margin-left:10px}

.journalist-subscription-list.ui-sortable {padding:0}
.journalist-subscription-list.ui-sortable .mybtn-move {pointer-events: none}
.journalist-subscription-list > li.ui-sortable-helper {padding:5px 10px; background:rgba(238,238,238,.5); border-radius:5px}

.my-news-list-wrap {margin-top:30px}
.my-news-list > li {position:relative; padding:20px 60px 18px 0; border-top:1px solid #eee}
.my-news-list .scrap-info {display:flex; align-items:center; margin-bottom:5px; color:var(--hk-text-secondary); font-size:12px; line-height:1.1; white-space:nowrap}
.my-news-list .scrap-info > .item {flex:0 0 auto; display:flex; align-items:center}
.my-news-list .scrap-info > .item + .item {margin-left:10px; border-left:1px solid #ddd; padding-left:10px}
.my-news-list .scrap-info .txt-date {flex:0 0 auto; margin-left:10px; color:var(--hk-text-secondary); font-size:12px}
.my-news-list .news-tit {font-weight:normal; font-size:17px; line-height:25px; -webkit-line-clamp:2}
.my-news-list .mybtn-del {position:absolute; top:50%; right:0; padding:10px; transform:translateY(-50%)}
.my-news-list > li:first-child {padding-top:0; border:none}
.my-news-list > li:first-child .mybtn-del {top:calc(50% - 10px)}

.tit-box-wrap {display:flex; align-items:center; margin:20px 0 30px}
.tit-box-wrap button {flex:0 0 auto}
.tit-box-wrap .tit-box {flex:0 1 auto; width:calc(100% - 80px); font-size:17px; line-height:40px; text-align:center}
.tit-box-wrap .tit-box:only-child {flex:1 1 auto}

.my-news-group .item {display:flex; align-items:center; justify-content:space-between; height:60px; margin-top:15px; padding:0 30px; border:1px solid #ddd; border-radius:10px; box-sizing:border-box; text-decoration:none}
.my-news-group .month {font-size:17px}
.my-news-group .month::before {content:''; display:inline-block; width:22px; height:22px; margin-right:18px; background:url('https://static.hankyung.com/img/www/w/my-pages/icon-scrap-group.svg') no-repeat 0 0/contain; vertical-align:-3px}
.my-news-group .clipping-num {font-size:15px; letter-spacing:0}
.my-news-group .item:hover {background:#f7f7f7}

/* modal */
.hk__modal--open {position:fixed; inset:0; overflow:hidden; transform:none}
html.hk__modal--open {height:100dvh; touch-action:none}

.hk-modal {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:99999999; /*margin:20px !important;*/ align-items:center; justify-content:center; background-color:rgba(0,0,0,.75); animation:fade-out .3s forwards}
.hk-modal .hk-modal-inner {position:fixed; left:0; bottom:0; right:0; padding:20px 0; border-radius:10px 10px 0 0; background:#fff; animation:modalScaleDown .3s cubic-bezier(.6, 0, .4, 1) forwards}
.hk-modal .mybtn-close-modal {position:absolute; top:22px; right:20px; z-index:2;}
.hk-modal .mybtn-close-modal::before {content:''; display:inline-block; width:25px; height:25px; background-image:linear-gradient(to bottom, #121212 0%, #121212 100%), linear-gradient(to left, #121212 0%, #121212 100%); background-size:100% 1px,1px 100%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg)}
.hk-modal .hk-modal-header {padding:0 20px 15px}
.hk-modal .hk-modal-header .mybtn-circle {position:absolute; top:13px; left:20px}
.hk-modal .hk-modal-tit {font-weight:bold; font-size:20px; line-height:1.2; text-align:center}
.hk-modal .hk-modal-body {padding:0 20px}
.hk-modal .hk-modal-footer {display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; text-align:center}
.hk-modal .hk-modal-footer [class^="mybtn-"] {flex:0 0 auto; width:calc(50% - 5px); display:inline-flex; align-items:center; box-sizing:border-box; justify-content:center; height:40px; border-radius:8px; font-size:16px}
.hk-modal .hk-modal-footer [class^="mybtn-"]:only-child {width:100%}
.hk-modal .hk-modal-footer:empty {display:none}

.hk-modal .hk-modal-footer .mybtn-outline {justify-content:center; min-width:70px; height:30px; margin:0 3px; padding:0 10px; border-radius:5px; font-size:14px}
.hk-modal .msg {font-size:18px; text-align:center}
.hk-modal .msg-underline {text-decoration:underline}
.hk-modal .scroll-area {overflow-x:hidden; overflow-y:auto}
.hk-modal.show {display:flex; animation:fade-in .3s forwards}
.hk-modal.show .hk-modal-inner {animation:modalScaleUp .3s cubic-bezier(.6, 0, .4, 1) forwards}
.hk-modal.hide {animation:fade-out .3s forwards}
.hk-modal.hide .hk-modal-inner {animation:modalScaleDown .3s cubic-bezier(.6, 0, .4, 1) forwards}
@keyframes fade-in {
  from {opacity:0}
  to {opacity:1}
}
@keyframes fade-out {
  from {opacity:1}
  to {opacity:0; z-index:-1; height:0; overflow:hidden}
}
@keyframes modalScaleUp {
	0% {-webkit-transform:translateY(100%); transform:translateY(100%)}
	to {-webkit-transform:translateY(0); transform:translateY(0)}
}
@keyframes modalScaleDown {
    0% {-webkit-transform:translateY(0); transform:translateY(0); opacity:1}
	to {-webkit-transform:translateY(200%); transform:translateY(200%); opacity:0}
}

.hk-modal .myinput-txt {height:40px}

/* modal: 애널리스트 추가 */
.modal-add-analyst {align-items:flex-start; overflow-y:auto}
.modal-add-analyst .hk-modal-inner {position:relative; top:20px; width:100%; min-height:calc(100% - 20px); box-sizing:border-box}
.modal-add-analyst .analyst-search-cont {margin-top:20px}
.modal-add-analyst .analyst-search-cont .mybtn-confirm {display:flex; align-items:center; box-sizing:border-box; justify-content:center; width:100%; height:40px; margin-top:20px; border-radius:8px; background-color:#121212; color:#fff; font-size:16px}
.modal-add-analyst .analyst-card-list dt,
.modal-add-analyst .analyst-card-list dd {padding:0 11px}
.modal-add-analyst .analyst-card-list > dt {color:var(--hk-text-secondary); font-size:14px}
.modal-add-analyst .analyst-card-list .item:first-child {margin-top:10px}
.modal-add-analyst .analyst-card-list .item {display:flex; align-items:center; position:relative; margin-top:15px}
.modal-add-analyst .analyst-card-list .item .rank {display:none; flex:0 0 auto; width:30px; font-weight:bold; font-size:20px}
.modal-add-analyst .analyst-card-list .item .profile {flex:1 1 auto; padding-right:30px; overflow:hidden}
.modal-add-analyst .analyst-card-list .item .name,
.modal-add-analyst .analyst-card-list .item .company {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.modal-add-analyst .analyst-card-list .item .name {font-size:17px}
.modal-add-analyst .analyst-card-list .item .company {margin-top:2px; color:var(--hk-text-secondary); font-size:12px}
.modal-add-analyst .analyst-card-list .item .mybtn-star-toggle {position:absolute; top:calc(50% - 2px); right:0; transform:translateY(-50%)}
.modal-add-analyst .scroll-area {height:calc(100dvh - 245px)}
.modal-add-analyst .no-data {height:300px; box-sizing:border-box}

/* modal: 애널리스트 구독관리 */
.analyst-subscription-list {margin-left:-5px; margin-right:-5px}
.analyst-subscription-list > li {display:flex; align-items:center; justify-content:space-between; padding:5px}
.analyst-subscription-list > li + li {margin-top:15px}
.analyst-subscription-list .item {flex:1 1 auto; display:flex; align-items:center; justify-content:space-between}
.analyst-subscription-list .profile-wrap {display:flex; align-items:center}
.analyst-subscription-list .profile-wrap .photo {display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; margin-right:10px; border-radius:100%; overflow:hidden; background-color:#888; color:#fff; font-weight:bold; font-size:16px; line-height:50px; white-space:nowrap; text-decoration:none}
.analyst-subscription-list .profile-wrap .name {display:block; font-size:17px}
.analyst-subscription-list .profile-wrap .company {display:block; margin-top:2px; color:var(--hk-text-secondary); font-size:12px}
.analyst-subscription-list .subscription-date {padding:5px 10px; border-radius:5px; background:none; font-size:12px; text-align:right}
.analyst-subscription-list [class^="mybtn-"] {flex:0 0 auto; margin-left:10px}
.modal-edit-analyst .scroll-area {max-height:280px}
/* modal: 관심종목 그룹관리 */
.modal-edit-interest .mygroup-list {max-height:200px; overflow-y:auto}
.modal-edit-interest .mygroup-list > .item {position:relative; padding:10px 65px 10px 30px; border-top:1px solid #ddd}
.modal-edit-interest .mygroup-list .group-name {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size:18px}
.modal-edit-interest .mygroup-list .mybtn-edit {position:absolute; top:50%; left:5px; transform:translateY(-50%)}
.modal-edit-interest .mygroup-list .utils {display:flex; align-items:center; position:absolute; top:50%; right:5px; transform:translateY(-50%)}
.modal-edit-interest .mygroup-list .utils button + button {margin-left:15px}
.modal-edit-interest .scroll-area {max-height:280px}

.modal-edit-interest .scroll-area .mygroup-list {overflow:visible; max-height:unset}

/* modal: 종목 추가 */
/* .modal-add-stock,
.modal-addgroup {align-items:flex-start; overflow-y:auto}
.modal-add-stock .hk-modal-inner,
.modal-addgroup .hk-modal-inner {position:relative; top:20px; width:100%; min-height:calc(100% - 20px); box-sizing:border-box}
.modal-add-stock .mystock-search-result {display:none; height:calc(100dvh - 160px); border:1px solid #ddd; border-top:none; border-radius:0 0 8px 8px; box-sizing:border-box}
.modal-add-stock .mystock-search-list {padding:5px 0}
.modal-add-stock .mystock-search-list > li {display:flex; align-items:center; justify-content:space-between; padding:9px 20px; font-size:16px; text-decoration:none; cursor:pointer}
.modal-add-stock .mystock-search-list > li:hover {background:#eef5fb}
.modal-add-stock .mystock-search-list > li > span {flex:0 0 auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box}
.modal-add-stock .mystock-search-list > li .category {color:var(--hk-text-secondary); font-size:12px; text-align:right}
.modal-add-stock .mystock-search-list > li > .code {width:30%}
.modal-add-stock .mystock-search-list > li > .name {width:50%}
.modal-add-stock .mystock-search-list > li > .category {width:20%; padding-right:1px}
.modal-add-stock .mystock-search-list > li mark {background:none; color:var(--hk-keycolor); font-weight:bold}
.modal-add-stock .myinput-search-wrap.active .myinput-txt {border-bottom-left-radius:0; border-bottom-right-radius:0}
.modal-add-stock .myinput-search-wrap.active + .mystock-search-result {display:block}
.modal-add-stock .no-data {height:300px} */
.modal-add-stock,
.modal-addgroup {align-items:flex-start; overflow-y:auto}
.modal-add-stock .hk-modal-inner,
.modal-addgroup .hk-modal-inner {position:relative; top:0; width:100%; min-height:100%; box-sizing:border-box; padding:16px 0; border-radius:0; overflow:hidden}
.modal-add-stock .hk-modal-header {padding:0}
.modal-add-stock .hk-modal-tit {display:none}
.modal-add-stock .hk-modal-body {position:relative}
.modal-add-stock .mystock-search-result {display:none; position:absolute; top:45px; left:20px; right:20px; z-index:2; margin:0; padding:0; height:calc(100dvh - 76px); border:none; border-radius:0; box-sizing:border-box}
.modal-add-stock .mystock-search-list {padding:5px 0 24px}
.modal-add-stock .mystock-search-list > li {display:flex; align-items:center; justify-content:space-between; padding:9px 8px; font-size:16px; text-decoration:none; cursor:pointer}
.modal-add-stock .mystock-search-list > li:hover {background:#eef5fb}
.modal-add-stock .mystock-search-list > li > span {flex:0 0 auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box}
.modal-add-stock .mystock-search-list > li .category {color:var(--hk-text-secondary); font-size:12px; text-align:right}
.modal-add-stock .mystock-search-list > li > .code {width:30%}
.modal-add-stock .mystock-search-list > li > .name {width:50%}
.modal-add-stock .mystock-search-list > li > .category {width:20%; padding-right:1px}
.modal-add-stock .mystock-search-list > li mark {background:none; color:var(--hk-keycolor); font-weight:bold}
.modal-add-stock .myinput-search-wrap.active + .mystock-search-result {display:block}
.modal-add-stock .no-data {height:300px}
.modal-add-stock:not(.modal-add-portfolio) .mybtn-close-modal {top:24px; right:auto; left:20px; z-index:2;}
.modal-add-stock:not(.modal-add-portfolio) .myinput-search-wrap {margin-left:32px}
.mystock-search-list .loading-spinner {display:none !important}

/* modal: 포트폴리오 추가 */
/* .modal-add-portfolio {align-items:flex-start; overflow-y:auto}
.modal-add-portfolio .hk-modal-inner {position:relative; top:20px; width:100%; min-height:calc(100% - 20px); overflow:hidden}
.modal-add-portfolio .hk-modal-header {display:flex; align-items:center; justify-content:space-between}
.modal-add-portfolio .hk-modal-body {position:relative}
.modal-add-portfolio.modal-add-stock .mystock-search-result {position:absolute; top:45px; left:20px; right:20px; z-index:2; margin:0; padding:0; background:#fff}
.modal-add-portfolio .set-my-portfolio > .item {margin-top:20px}
.modal-add-portfolio .set-my-portfolio > .item + .item {margin-top:40px}
.modal-add-portfolio .stock-title {display:flex; align-items:center; justify-content:space-between; margin-bottom:15px}
.modal-add-portfolio .stock-title .name {font-size:17px}
.modal-add-portfolio .stock-title .mybtn-del {margin-left:10px}
.modal-add-portfolio .table-collapse th {padding-left:8px; padding-right:8px}
.modal-add-portfolio .table-collapse td:not(:first-child) {padding-left:5px}
.modal-add-portfolio .filed-control .mybtn-add {justify-content:center; width:100%; padding:10px 0; font-size:15px}
.modal-add-portfolio .filed-control .mybtn-add .txt {margin-left:5px}
.modal-add-portfolio .scroll-area {margin:0 -20px; padding:0 20px; height:calc(100dvh - 160px)} */

.modal-add-portfolio {align-items:flex-start; overflow-y:auto}
.modal-add-portfolio .hk-modal-inner {position:relative; top:0; width:100%; min-height:100%; padding:16px 0; border-radius:0; overflow:hidden}
.modal-add-portfolio .hk-modal-header {display:flex; align-items:center; justify-content:space-between}
.modal-add-portfolio .hk-modal-header {padding:0}
.modal-add-portfolio .hk-modal-tit {display:none}
.modal-add-portfolio .hk-modal-body {position:relative}
.modal-add-portfolio.modal-add-stock .mystock-search-result {height:calc(100dvh - 56px); background:#fff}
.modal-add-portfolio .set-my-portfolio > .item {margin-top:20px}
.modal-add-portfolio .set-my-portfolio > .item + .item {margin-top:40px}
.modal-add-portfolio .stock-title {display:flex; align-items:center; justify-content:space-between; margin-bottom:15px}
.modal-add-portfolio .stock-title .name {font-size:17px}
.modal-add-portfolio .stock-title .mybtn-del {margin-left:10px}
.modal-add-portfolio .table-collapse th {padding-left:8px; padding-right:8px}
.modal-add-portfolio .table-collapse td:not(:first-child) {padding-left:5px}
.modal-add-portfolio .filed-control .mybtn-add {justify-content:center; width:100%; padding:10px 0; font-size:15px}
.modal-add-portfolio .filed-control .mybtn-add .txt {margin-left:5px}
/* .modal-add-portfolio .scroll-area {margin:0 -20px; padding:0 20px; height:calc(100dvh - 160px)} */

/* .modal-add-portfolio .mybtn-cancel {position:absolute; top:19px; left:20px; z-index:2; min-height:32px; padding:0 12px; line-height:32px; font-size:12px} */
.modal-add-portfolio .mybtn-cancel {position:absolute; top:24px; left:20px; z-index:2; min-height:unset; width:25px; height:25px; padding:0; border:none; background:none !important}
.modal-add-portfolio .mybtn-cancel::before {content:''; display:inline-block; width:25px; height:25px; background-image:linear-gradient(to bottom, #121212 0%, #121212 100%), linear-gradient(to left, #121212 0%, #121212 100%); background-size:100% 1px,1px 100%; background-position:center; background-repeat:no-repeat; transform:rotate(45deg)}
.modal-add-portfolio .mybtn-cancel .txt {display:none}

.modal-add-portfolio .mybtn-complete {position:absolute; top:19px; right:20px; z-index:2; min-height:32px; line-height:32px; padding:0 12px; font-size:12px}
.modal-add-portfolio.modal-add-stock .myinput-search-wrap {margin:0 53px 0 38px}
.modal-add-portfolio.modal-add-stock .mystock-search-list {padding:5px 0 32px}

	

		



/* modal: 기자 추가 */
.modal-add-journalist {align-items:flex-start; overflow-y:auto}
.modal-add-journalist .hk-modal-inner {position:relative; top:20px; width:100%; min-height:calc(100% - 20px); box-sizing:border-box}
.modal-add-journalist .journalist-search-cont {margin-top:20px}
.modal-add-journalist .journalist-card-list dt,
.modal-add-journalist .journalist-card-list dd {padding:0 14px}
.modal-add-journalist .journalist-card-list > dt {color:var(--hk-text-secondary); font-size:14px}
.modal-add-journalist .journalist-card-list .item:first-child {margin-top:10px}
.modal-add-journalist .journalist-card-list .item {display:flex; gap:10px; align-items:center; position:relative; margin-top:15px}
.modal-add-journalist .journalist-card-list .item .rank {flex:0 0 auto; min-width:30px; font-weight:bold; font-size:20px}
.modal-add-journalist .journalist-card-list .item .profile {flex:1 1 auto; padding-right:30px; overflow:hidden}
.modal-add-journalist .journalist-card-list .item .name,
.modal-add-journalist .journalist-card-list .item .part {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.modal-add-journalist .journalist-card-list .item .name {font-size:17px}
.modal-add-journalist .journalist-card-list .item .part {margin-top:2px; color:var(--hk-text-secondary); font-size:12px}
.modal-add-journalist .journalist-card-list .item .svg-star {position:absolute; top:calc(50% - 2px); right:0; transform:translateY(-50%)}
.modal-add-journalist .scroll-area {height:calc(100dvh - 265px)}
.modal-add-journalist .no-data {height:300px; padding:0; box-sizing:border-box}
.modal-add-journalist .journalist-card-list .card-list .item {display:block; padding:0}
.modal-add-journalist .journalist-card-list .card-list .item > .mybtn-star-toggle {display:flex; align-items:center; position:relative; width:100%; box-sizing:border-box; text-align:left; text-decoration:none; cursor:pointer}
.modal-add-journalist .journalist-search-cont .mybtn-confirm {display:flex; align-items:center; box-sizing:border-box; justify-content:center; width:100%; height:40px; margin-top:20px; border-radius:8px; background-color:#121212; color:#fff; font-size:16px}
.modal-add-journalist.type-2 .hk-modal-header {display:flex; align-items:center; justify-content:space-between}
.modal-add-journalist.type-2 .journalist-search-cont {overflow-y:auto; height:calc(100dvh - 270px)}

/* 2024.07 추가 */
/* header */
.header {padding:20px 20px 0; box-sizing:border-box}
.header-cont {position:relative}
.header-top {display:flex; align-items:center; justify-content:space-between}
.link-area > a {display:inline-block; position:relative; font-size:14px}
.sub-header {display:flex; align-items:center; justify-content:space-between; width:100%}
.sub-header .btn-prev {width:28px; height:28px; cursor:pointer}
.sub-header .btn-prev::after {content:''; display:inline-block; width:10px; height:10px; margin:0 5px; border-bottom:1px solid #121212; border-left:1px solid #121212; transform:rotate(45deg); vertical-align:middle; text-align:center}
.sub-header .page-tit {line-height:1; font-size:20px}
.sub-header .page-info {min-width:28px}

/* .mypage__wrap .modal-edit-interest .mygroup-list {overflow-y:hidden} */
.mypage__wrap {background-color:#F3F2F8; padding-bottom:50px}
.mypage__wrap .inner {max-width:960px; margin:0 auto}
.mystock__container {padding:0 20px}
.mystock__container > .inner {overflow:hidden; margin:20px auto 24px; padding:24px; border-radius:20px; background-color:#fff; box-sizing:border-box}
.mybtn-set-analyst .svgicon,
.mybtn-set-group .svgicon {display:none}
.mybtn-set-group::before, .mybtn-set-analyst::before {content:''; display:block; width:20px; height:20px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='settings-01'%3E%3Cg id='Icon'%3E%3Cpath d='M13.9999 17.5C15.9329 17.5 17.4999 15.933 17.4999 14C17.4999 12.067 15.9329 10.5 13.9999 10.5C12.0669 10.5 10.4999 12.067 10.4999 14C10.4999 15.933 12.0669 17.5 13.9999 17.5Z' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21.8484 17.1818C21.7072 17.5017 21.6651 17.8566 21.7275 18.2006C21.7899 18.5447 21.9539 18.8622 22.1984 19.1121L22.262 19.1758C22.4593 19.3728 22.6157 19.6067 22.7225 19.8642C22.8292 20.1217 22.8842 20.3978 22.8842 20.6765C22.8842 20.9553 22.8292 21.2313 22.7225 21.4888C22.6157 21.7463 22.4593 21.9803 22.262 22.1773C22.065 22.3745 21.8311 22.531 21.5736 22.6377C21.3161 22.7445 21.04 22.7994 20.7613 22.7994C20.4825 22.7994 20.2065 22.7445 19.949 22.6377C19.6915 22.531 19.4575 22.3745 19.2605 22.1773L19.1969 22.1136C18.9469 21.8691 18.6294 21.7051 18.2854 21.6427C17.9413 21.5803 17.5865 21.6225 17.2666 21.7636C16.9529 21.8981 16.6854 22.1213 16.4969 22.4059C16.3085 22.6904 16.2073 23.0239 16.206 23.3652V23.5455C16.206 24.108 15.9825 24.6476 15.5847 25.0454C15.1869 25.4432 14.6473 25.6667 14.0848 25.6667C13.5222 25.6667 12.9826 25.4432 12.5848 25.0454C12.187 24.6476 11.9636 24.108 11.9636 23.5455V23.45C11.9553 23.099 11.8417 22.7585 11.6374 22.4729C11.4331 22.1873 11.1477 21.9697 10.8181 21.8485C10.4982 21.7073 10.1433 21.6652 9.79929 21.7276C9.45524 21.79 9.13776 21.954 8.8878 22.1985L8.82416 22.2621C8.62716 22.4594 8.39321 22.6158 8.1357 22.7226C7.87819 22.8293 7.60216 22.8843 7.3234 22.8843C7.04464 22.8843 6.76862 22.8293 6.51111 22.7226C6.25359 22.6158 6.01965 22.4594 5.82265 22.2621C5.62542 22.0651 5.46896 21.8312 5.36222 21.5737C5.25547 21.3162 5.20052 21.0401 5.20052 20.7614C5.20052 20.4826 5.25547 20.2066 5.36222 19.9491C5.46896 19.6916 5.62542 19.4576 5.82265 19.2606L5.88628 19.197C6.13079 18.947 6.29481 18.6295 6.3572 18.2855C6.41958 17.9414 6.37746 17.5866 6.23628 17.2667C6.10184 16.953 5.8786 16.6854 5.59405 16.497C5.3095 16.3086 4.97606 16.2074 4.63477 16.2061H4.45446C3.89188 16.2061 3.35235 15.9826 2.95454 15.5848C2.55674 15.187 2.33325 14.6474 2.33325 14.0849C2.33325 13.5223 2.55674 12.9827 2.95454 12.5849C3.35235 12.1871 3.89188 11.9636 4.45446 11.9636H4.54992C4.90097 11.9554 5.24144 11.8418 5.52705 11.6375C5.81267 11.4332 6.03022 11.1478 6.15143 10.8182C6.29262 10.4983 6.33473 10.1434 6.27235 9.79939C6.20996 9.45533 6.04594 9.13785 5.80143 8.88789L5.7378 8.82425C5.54057 8.62725 5.38412 8.3933 5.27737 8.13579C5.17062 7.87828 5.11567 7.60225 5.11567 7.32349C5.11567 7.04473 5.17062 6.76871 5.27737 6.5112C5.38412 6.25369 5.54057 6.01974 5.7378 5.82274C5.9348 5.62551 6.16875 5.46906 6.42626 5.36231C6.68377 5.25556 6.95979 5.20061 7.23855 5.20061C7.51731 5.20061 7.79334 5.25556 8.05085 5.36231C8.30836 5.46906 8.54231 5.62551 8.73931 5.82274L8.80295 5.88637C9.05291 6.13088 9.37039 6.2949 9.71445 6.35729C10.0585 6.41967 10.4134 6.37756 10.7333 6.23637H10.8181C11.1318 6.10193 11.3993 5.87869 11.5878 5.59414C11.7762 5.30959 11.8773 4.97615 11.8787 4.63486V4.45456C11.8787 3.89198 12.1022 3.35244 12.5 2.95463C12.8978 2.55683 13.4373 2.33334 13.9999 2.33334C14.5625 2.33334 15.102 2.55683 15.4998 2.95463C15.8976 3.35244 16.1211 3.89198 16.1211 4.45456V4.55001C16.1225 4.8913 16.2236 5.22474 16.4121 5.50929C16.6005 5.79384 16.868 6.01708 17.1817 6.15153C17.5016 6.29271 17.8565 6.33482 18.2005 6.27244C18.5446 6.21006 18.8621 6.04603 19.112 5.80153L19.1757 5.73789C19.3727 5.54067 19.6066 5.38421 19.8641 5.27746C20.1216 5.17071 20.3977 5.11577 20.6764 5.11577C20.9552 5.11577 21.2312 5.17071 21.4887 5.27746C21.7462 5.38421 21.9802 5.54067 22.1772 5.73789C22.3744 5.93489 22.5309 6.16884 22.6376 6.42635C22.7444 6.68386 22.7993 6.95989 22.7993 7.23865C22.7993 7.51741 22.7444 7.79343 22.6376 8.05094C22.5309 8.30846 22.3744 8.5424 22.1772 8.7394L22.1136 8.80304C21.869 9.053 21.705 9.37048 21.6426 9.71454C21.5803 10.0586 21.6224 10.4134 21.7636 10.7333V10.8182C21.898 11.1319 22.1212 11.3994 22.4058 11.5879C22.6903 11.7763 23.0238 11.8774 23.3651 11.8788H23.5454C24.108 11.8788 24.6475 12.1023 25.0453 12.5001C25.4431 12.8979 25.6666 13.4374 25.6666 14C25.6666 14.5626 25.4431 15.1021 25.0453 15.4999C24.6475 15.8977 24.108 16.1212 23.5454 16.1212H23.4499C23.1086 16.1226 22.7752 16.2237 22.4906 16.4122C22.2061 16.6006 21.9828 16.8681 21.8484 17.1818Z' stroke='%23121212' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");}

/* 2026.03.30 신규 간소화 GNB 변경 조정건 */
html:has(.hk-header-compact), 
body:has(.hk-header-compact) .mypage__wrap {background:#F3F4F6}
body:has(.hk-header-compact) .mystock__container > .inner {margin-top:0; border:1px solid #DADBDC}

@media all and (max-width:359px) {
    .my-portfolio-summary .data dl {font-size:14px}
    .my-portfolio-summary .data dl:first-child {font-size:17px}
    .my-portfolio-summary .data dt {width:75px}

	.stock-itemlist .stock-title .name,
	.stock-itemlist .stock-nums .price {font-size:13px}
	.stock-itemlist .stock-nums .rate {min-width:auto; padding:0 3px; border-radius:5px; font-size:12px; line-height:28px}
}

@media all and (min-width:960px) {
	.hk-modal .hk-modal-inner {position:relative; /*top:-50px;*/ min-width:375px; max-width:720px; border-radius:10px; overflow:hidden;}

	.modal-add-journalist .hk-modal-inner,
	.modal-add-analyst .hk-modal-inner,
	.modal-add-stock .hk-modal-inner,
	.modal-add-portfolio .hk-modal-inner {top:20px; min-height:calc(100dvh - 40px);}
	.modal-addgroup .hk-modal-inner {top:calc(50% - 140px); min-height:unset}

	.sub-header .page-tit {font-size:24px}
}
@media all and (min-width:1080px) {
	body {font-family:-apple-system, BlinkMacSystemFont, 'Noto Sans KR', 'Apple SD Gothic Neo', 'Apple SD 산돌고딕 Neo', 'Malgun Gothic', '맑은 고딕', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; letter-spacing:-0.039em}
	a:hover {text-decoration:underline; text-underline-offset:3px}
}

/* 가로모드 */
@media (orientation: landscape) {
	.modal-edit-interest .mygroup-list {max-height:100px}
}

/* 2026.05.07 신규 마이한경 해당 버튼 작업 없어서 임시 제거 / 추후 추가하게되면 수정예정  */
.btn-top-wrap {display:none !important}

/* OS 다크모드 */
@media (prefers-color-scheme:dark) {
	:root {
        --hk-text-primary: #fff;
        --hk-text-secondary: #bdbdbd;
        --hk-up: #ff5f5f;
        --hk-down: #5897ff;
        --hk-hold: #bdbdbd;
		--hk-keycolor: #79ADD4;
    }

	/* @media all and (max-width:720px) { */
		.myicon-del-circle {background-color:#c3c3c3; background-image:linear-gradient(to bottom, #000 0%, #000 100%), linear-gradient(to left, #000 0%, #000 100%)}
		.myicon-remove-circle {background-color:#c3c3c3; background-image:linear-gradient(to bottom, #000 0%, #000 100%)}
		.myicon-add-circle {background-color:#c3c3c3; background-image:linear-gradient(to bottom, #000 0%, #000 100%), linear-gradient(to left, #000 0%, #000 100%)}
		.myicon-prev {border-color:#fff}
		.mybtn-circle {border:none; background:#1c1c1e}

		.myinput-txt {border:none; background:#1c1c1e}
		.myinput-txt:disabled,
		.myinput-txt[readonly]:not(.daterangePicker) {background:#555}
		.myinput-search-wrap .mybtn-search {filter:invert(1)}

		.select-style {background:#1c1c1e; border-radius:6px}
		.select-style select {border:none}
		.select-style::after {border-color:#fff}

		.tab-type1 > li > a {border:none; background:#1c1c1e}
		.tab-type1 > li.on > a {background:#555}
		.tab-type2-wrap {background:linear-gradient(0deg, rgba(85, 85, 85,1) 1px, rgba(0,0,0,1) 1px)}
		.tab-type2 > li.on > a {color:#fff}
		.tab-type2 > li.on > a::after {background:#fff}
		.tab-round .tab-link {border:none; background:#1c1c1e}

		.news-list > li + li,
		.news-item + .news-item {border-width:0.5px; border-color:#323235}

		.report-list > li + li,
		.stock-itemlist-header {border-width:0.5px; border-color:#323235}
		.stock-itemlist .stock-title .name,
		.stock-itemlist .stock-title .name a,
		.stock-itemlist .stock-nums .price,
		.stock-itemlist .stock-nums .count {color:#fff}

		.stock-itemlist.type-accordion,
		.stock-itemlist.type-accordion > li {border-width:0.5px; border-color:#323235}
		.stock-itemlist .collapse-cont {background:linear-gradient(180deg, rgba(28,28,30,1) 0%, rgba(0,0,0,0) 7px, rgba(0,0,0,0) 100%)}
		.mybtn-arr-fold::before {border-color:#fff}

		.mypage-infobox {border-width:0.5px; border-color:#323235}
		.no-news,
		.no-news2 {border-width:0.5px; border-color:#323235}
		
		.box {border:none; background:#1c1c1e}

		.sortable-ghost {background:rgba(28,28,30,.5)}
		/* mystock */
		.analyst-subscription-list .profile-wrap .photo {background:#1c1c1e}
		.my-analyst-list {border-color:#555}
		.my-analyst-list .report-list > li,
		.my-analyst-list > .item .analyst-profile,
		.my-portfolio-summary .data .txt-info,
		.my-portfolio-detail .item-row.item-row-title {border-width:0.5px; border-color:#323235}
		.my-portfolio-summary .chart path[fill="#ffffff"] {fill:#1c1c1e}
		.table-stock-itemlist .price,
		.table-stock-itemlist .count {color:#fff}
		.table-collapse .util-layer {background:#1c1c1e; border:none}

		/* mynews */
		.my-news-list > li,
		.my-news-list .scrap-info > .item + .item {border-width:0.5px; border-color:#323235}
		.myJournalistSlider .photo {background:#1c1c1e}
		.journalist-list > li,
		.journalist-news-list > li {border-width:0.5px; border-color:#323235}
		.journalist-list > li:first-child,
		.journalist-news-list > li:first-child {border-color:#555}
		.journalist-list .journalist-profile .part {border-width:0.5px; border-color:#323235}
		.journalist-detail {border-width:0.5px; border-color:#323235}
		.journalist-detail .journalist-subscription::before {background:#323235}

		.my-news-group .item {border:none; background:#1c1c1e}
		.my-news-group .item:hover {background:#333}
		
		/* modal */
		.hk-modal .hk-modal-inner {background:#1c1c1e}
		.hk-modal .myinput-txt {background:#000}
		.hk-modal .myinput-txt:disabled,
		.hk-modal .myinput-txt[readonly]:not(.daterangePicker) {background:#555}
		.hk-modal .mybtn-circle {border:none; background:#000}
		.hk-modal .mybtn-close-modal::before {background-image:linear-gradient(to bottom, #fff 0%, #fff 100%), linear-gradient(to left, #fff 0%, #fff 100%)}

		.modal-edit-interest .mygroup-list > .item {border-width:0.5px; border-color:#323235}
		/* modal: 종목 추가 */
		/* .modal-add-stock .mystock-search-result {background:#000} */
		/* .modal-add-stock .mystock-search-list {padding:5px 0}
		.modal-add-stock .mystock-search-list > li {display:flex; align-items:center; justify-content:space-between; padding:9px 5px 9px 15px; font-size:16px; text-decoration:none; cursor:pointer} */
		
		/* .modal-add-stock .mystock-search-list > li > span {flex:0 0 auto; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; box-sizing:border-box}
		.modal-add-stock .mystock-search-list > li .category {color:var(--hk-text-secondary); font-size:12px; text-align:right}
		.modal-add-stock .mystock-search-list > li > .code {width:30%}
		.modal-add-stock .mystock-search-list > li > .name {width:50%}
		.modal-add-stock .mystock-search-list > li > .category {width:20%; padding-right:1px}
		.modal-add-stock .mystock-search-list > li mark {background:none; font-weight:bold}
		.modal-add-stock .myinput-search-wrap.active .myinput-txt {border-bottom-left-radius:0; border-bottom-right-radius:0}
		.modal-add-stock .myinput-search-wrap.active + .mystock-search-result {display:block} */
		/* modal: 포트폴리오 추가 */
		/* .modal-add-portfolio .set-my-portfolio > .item {margin-top:20px}
		.modal-add-portfolio .stock-title {display:flex; align-items:center; justify-content:space-between; margin-bottom:15px}
		.modal-add-portfolio .stock-title .name {font-size:17px}
		.modal-add-portfolio .stock-title .mybtn-del {margin-left:10px}
		.modal-add-portfolio .table-collapse th {padding-left:8px; padding-right:8px}
		.modal-add-portfolio .table-collapse td:not(:first-child) {padding-left:5px}
		.modal-add-portfolio .scroll-area {margin:0 -20px; padding:0 20px; max-height:280px} */
		.modal-add-stock .mystock-search-list > li:hover,
		.modal-add-portfolio.modal-add-stock .mystock-search-result {background:#1c1c1e}

		/* My Stock Vue 화면 관련 */
		.vld-overlay .vld-background {background:#000 !important}

		/* 2024.07 추가 */
		html {background:#000}
		.mypage__wrap {background-color:#000; color:#fff}
		.mypage__wrap .box,
		.stock-itemlist .collapse-cont {background-color:#000}
		.my-portfolio-summary .chart path[fill="#ffffff"] {fill:#000}
		.mytheme-orange .svg-fill, .mytheme-orange .mybtn-star-toggle.on .svgicon-star {fill:#fff}
		.mytheme-orange .mybtn-star-toggle .svgicon-star {fill:#333}
		.mypage__wrap a,
		.mytheme-orange .theme-color-primary,
		.myAnalystSlider .swiper-slide.on .name,
		.mytheme-orange .theme-color-primary .txt-date {color:#fff}
		.mystock__container .tab-type1 > li > a,
		.mytheme-orange .tab-round .tab-link {background-color:#000}
		.mystock__container > .inner {background-color:#1c1c1e}
		.mystock__container .tab-type1 > li.on > a,
		.mytheme-orange .tab-round .on .tab-link {background-color:#888}
		.sub-header .btn-prev::after {border-color:#fff}
		.mytheme-orange .myicon-plus,
		.mybtn-set-group::before, .mybtn-set-analyst::before,
		.loading-spinner .spinner {filter:invert(1)}
		.mybtn-set-group, .mybtn-set-analyst, .mybtn-circle,
		.select-style select {background-color:#000}
		.select-style::after {z-index:2}
		.btn-more-wrap {background:transparent}
		.btn-more-wrap .btn-more {border:none; background-color:#323235 !important}
		.mypage__wrap .tab-type2-wrap {background:linear-gradient(0deg, rgba(85, 85, 85, 1) 1px, rgb(28 28 30) 1px)}
		.mypage__wrap .mybtn-confirm {color:#fff; background-color:#888; border-color:#888}
		.mypage__wrap .mybtn-cancel {color:#fff; background-color:#333; border-color:#333}

		.modal-add-portfolio .mybtn-cancel::before {filter:invert()}

		/* 2026.03.30 신규 간소화 GNB 변경 조정건 */
		html:has(.hk-header-compact), 
		body:has(.hk-header-compact) .mypage__wrap {background:#000}
		body:has(.hk-header-compact) .mystock__container > .inner {border:none}
	/* } */
}