@charset "UTF-8";

/* ==========================================================================
 * KEDI (Korea Economic Daily Index) 공통 css
 * common.css
 * ========================================================================== */

/* Variables */
:root {
    /* gray scale */
    --gray-base: #111;
    --gray-subtle: #444;
    --gray-soft: #707070;
    --gray-light: #999;

    /* semantic colors */
    --color-primary: #305dcf;
    --color-up: #b50000;
    --color-down: #2853b2;
    --color-flat: #585858;
}

/* Reset */
html,body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none; -moz-text-size-adjust:none; -o-text-size-adjust:none; 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,tr,th,td,table {margin:0; padding:0}
*,::after,::before {box-sizing:border-box}
body {color:var(--gray-base); font-family:"Pretendard Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:-.02em}
h1,h2,h3,h4,h5,h6 {font-size:inherit}
ol,ul {list-style-type:none}
blockquote,q {quotes:none}
blockquote:before,blockquote:after,q:after,q:before {content:''; content:none}
img,fieldset,iframe {border:0 none; vertical-align:top}
img {max-width:100%}
i,em,address,optgroup {font-style:normal}
hr {display:none}
input,button,textarea,select {font:inherit; color:inherit}
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}
button {border:0 none; border-radius:0; background:transparent; cursor:pointer; color:inherit}
[role="button"] {cursor:pointer}
table {border-collapse:collapse; border-spacing:0}
th, td {color:inherit}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
legend {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
a {color:inherit; text-decoration:none}

/* Utility */
.blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0}
.is-flex {--display:flex}
.is-grid {--display:grid}
.is-inline {--display:inline}
.is-inline-flex {--display:inline-flex}
.show-mo,
.show-tablet-up,
.show-pc {display:none}
.line-clamp {display:block; display:-webkit-box; text-overflow:clip; overflow:hidden; word-wrap:break-word; -webkit-box-orient:vertical}
.text-left {text-align:left}
.text-center {text-align:center}
.text-right {text-align:right}

/* ===========================
   Layout
=========================== */
html {background: #fff}
.wrap {min-height:100vh}
.layout-inner {max-width:1240px; margin:0 auto; padding:0 20px}

/* Header */
.header {position:sticky; top:0; z-index:100}
.header__inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; max-width:1240px; margin:0 auto; padding:24px 20px 0}
.header__inner::before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.9); -webkit-backdrop-filter:saturate(180%) blur(10px); backdrop-filter:saturate(180%) blur(10px); pointer-events:none; z-index:-1}
.header__logo > a {display:block; width:72px; height:18px; background:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-kedi.svg') no-repeat center / contain}
.header__gnb-list {display:flex; gap:24px}
.header__gnb-item a {font-weight:500; font-size:clamp(16px, 2.34vw, 18px)}
.header__gnb-item.on a {font-weight:600; color:var(--color-primary)}
.header__utils {display:flex; align-items:center; gap:16px}
.header__lang {display:inline-flex; align-items:center; gap:4px; font-size:14px}
.header__lang::before {content:''; display:inline-block; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' d='M9 1.5A11.48 11.48 0 0 1 12 9a11.48 11.48 0 0 1-3 7.5m0-15A11.48 11.48 0 0 0 6 9a11.48 11.48 0 0 0 3 7.5m0-15a7.5 7.5 0 1 0 0 15m0-15a7.5 7.5 0 0 1 0 15M1.875 6.75h14.25m-14.25 4.5h14.25'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h18v18H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") no-repeat center / contain}
.header__allmenu-btn::before {content:''; display:inline-block; 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='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:top}

/* Mobile Allmenu */
.allmenu {position:fixed; top:0; right:0; bottom:0; left:0; z-index:300; background-color:rgba(0, 0, 0, .6)}
.allmenu[hidden] {display:none}
.allmenu__inner {padding:24px 20px 60px; background-color:#fff}
.allmenu__header {display:flex; justify-content:flex-end; margin-bottom:24px}
.allmenu__close::before {content:''; display:inline-block; 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='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:top}
.allmenu__gnb-list {display:flex; flex-direction:column; gap:20px; padding-top:8px}
.allmenu__gnb-item a {font-size:16px; font-weight:500}
.allmenu__gnb-item.on a {font-weight:600; color:var(--color-primary)}

/* Footer */
.footer {position:sticky; top:100vh; background-color:#111; color:var(--gray-light); line-height:1.45}
.footer__inner {max-width:1240px; margin:0 auto; padding:60px 20px}
.footer__info {display:flex; flex-direction:column; gap:24px; padding-bottom:40px; border-bottom:1px solid rgba(255, 255, 255, 0.20)}
.footer__notice {display:flex; flex-direction:column; gap:32px; flex:1}
.footer__section-title {display:block; margin-bottom:8px; font-size:14px; font-weight:700; color:#fff}
.footer__section-list {display:flex; flex-direction:column; gap:2px; font-size:12px; word-break:keep-all; overflow-wrap:anywhere}
.footer__section-list li {position:relative; padding-left:10px}
.footer__section-list li::before {content:''; position:absolute; left:0; top:8px; width:2px; height:2px; border-radius:100%; background:var(--gray-light)}
.footer__contact {width:100%}
.footer__contact-title {display:block; margin-bottom:12px; font-size:14px; font-weight:700; color:#fff}
.footer__contact-desc {margin-bottom:16px; font-size:12px; word-break:keep-all; overflow-wrap:anywhere}
.footer__contact-email {display:flex; align-items:center; gap:8px; position:relative; padding:12px 16px; background-color:rgba(255, 255, 255, 0.10); border-radius:4px}
.footer__contact-label {display:inline-block; width:16px; height:16px; overflow:hidden; color:transparent}
.footer__contact-label::before {content:''; display:inline-block; width:100%; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M14.333 12 9.905 8m-3.81 0-4.428 4m-.334-7.333 5.444 3.81c.44.309.66.463.9.523.212.052.434.052.646 0 .24-.06.46-.214.9-.523l5.444-3.81M4.533 13.333h6.934c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874c.218-.427.218-.987.218-2.108V5.867c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874c-.428-.218-.988-.218-2.108-.218H4.533c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874c-.218.428-.218.988-.218 2.108v4.266c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.428.218.988.218 2.108.218'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:top}
.footer__contact-email a {font-size:14px; color:#fff}
.footer__contact-email a:after {content:''; position:absolute; top:0; left:0; right:0; bottom:0}
.footer__family {display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 0; border-bottom:1px solid rgba(255, 255, 255, 0.20); overflow:hidden}
.footer__family .splideMarquee {overflow:hidden}
.footer__family-label {font-size:12px}
.footer__family-list {display:flex; align-items:center; gap:12px 20px}
.footer__family-item a {display:block}
.footer__family-item a::before {content:''; display:inline-block; height:clamp(14px,2.08vw,16px); vertical-align:middle; background-repeat:no-repeat; background-position:center; background-size:contain}
.footer__family-item a.logo--hk::before {width:clamp(59px,8.46vw,65px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-hk-w.svg')}
.footer__family-item a.logo--wowtv::before {width:clamp(83px,8.46vw,92px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-hktv-w.svg')}
.footer__family-item a.logo--magazine::before {width:clamp(57px,8.46vw,65px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-magazine-w.svg')}
.footer__family-item a.logo--hkbp::before {width:clamp(110px,8.46vw,126px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-hkbp-w.svg')}
.footer__family-item a.logo--artetv::before {width:clamp(70px,8.46vw,80px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-artetv-w.svg')}
.footer__family-item a.logo--tenasia::before {width:clamp(75px,8.46vw,86px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-tenasia-logotype-w.svg')}
.footer__family-item a.logo--kedglobal::before {width:clamp(159px,8.46vw,182px); background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-kedglobal-full-w.svg')}
.footer__copyright {padding-top:40px}
.footer__copyright p {color:#fff; font-size:12px}
.btn-top-wrap {position:fixed; bottom:80px; right:20px; opacity:0; z-index:10; transition:opacity ease .3s}
.btn-top-wrap .btn-top {display:flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:100%; width:50px; height:50px; box-sizing:border-box; background:rgba(255, 255, 255, .6); backdrop-filter:saturate(180%) blur(2px); -webkit-backdrop-filter:saturate(180%) blur(2px)}
.btn-top-wrap .btn-top::before {content:''; display:inline-block; width:24px; height:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20.606v-16m0 0-6 6m6-6 6 6'/%3E%3C/svg%3E") no-repeat 50% 50%/contain; vertical-align:top}
.isSticky .btn-top-wrap {opacity:1}

/* ===========================
   Contents
=========================== */
.contents {line-height:1.45}

/* icons */
.icon--attach {display:inline-block; width:18px; height:18px; vertical-align:middle; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m15.864 8.175-6.761 6.761a3.937 3.937 0 1 1-5.569-5.568l6.762-6.762a2.625 2.625 0 1 1 3.712 3.713l-6.496 6.496a1.312 1.312 0 1 1-1.857-1.856l5.702-5.701'/%3E%3C/svg%3E") no-repeat center/contain; vertical-align:top}
.icon-attachment {display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23444' stroke-linecap='round' stroke-linejoin='round' d='m14 7.167-5.647 5.647a4 4 0 0 1-5.657-5.657l5.647-5.647a2.667 2.667 0 0 1 3.772 3.771l-5.65 5.648a1.333 1.333 0 0 1-1.886-1.886l5.178-5.176'/%3E%3C/svg%3E") no-repeat center/contain}
.icon-file {display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' d='M9.334 1.513v2.754c0 .373 0 .56.072.703a.67.67 0 0 0 .292.29c.142.074.329.074.702.074h2.754m-3.82 6h-4m5.333-2.667H5.334m8-2.008v4.808c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874c-.428.218-.988.218-2.108.218H5.867c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874c-.218-.428-.218-.988-.218-2.108V4.534c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.875c.428-.218.988-.218 2.108-.218h2.141c.49 0 .734 0 .964.056a2 2 0 0 1 .578.24c.202.123.375.296.72.642l2.126 2.125c.346.346.52.52.643.72q.165.271.24.579c.055.23.055.475.055.964'/%3E%3C/svg%3E") no-repeat center/contain}
.icon-file-x {display:inline-block; width:clamp(24px,2.5vw,30px); height:clamp(24px,2.5vw,30px); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23707070' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14 2.27V6.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437c.214.109.494.109 1.054.109h4.13M10 18l4-4m-4 0 4 4M14 2H8.8c-1.68 0-2.52 0-3.162.327a3 3 0 0 0-1.311 1.311C4 4.28 4 5.12 4 6.8v10.4c0 1.68 0 2.52.327 3.162a3 3 0 0 0 1.311 1.311C6.28 22 7.12 22 8.8 22h6.4c1.68 0 2.52 0 3.162-.327a3 3 0 0 0 1.311-1.311C20 19.72 20 18.88 20 17.2V8l-6-6'/%3E%3C/svg%3E") no-repeat center/contain}
.icon-download {display:inline-block; flex-shrink:0; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.75 11.25v.9c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.984c-.245-.48-.245-1.11-.245-2.371v-.9m10.5-3.75L9 11.25m0 0L5.25 7.5M9 11.25v-9'/%3E%3C/svg%3E") no-repeat center/contain}

/* page title */
.page-title {display:flex; flex-direction:column; gap:clamp(8px,1.33vw,16px); margin-bottom:clamp(40px,5vw,60px)}
.page-title__heading {font-weight:700; font-size:clamp(30px,3.33vw,40px); line-height:1.35}
.page-title__desc {font-size:clamp(15px,1.33vw,16px); line-height:1.5}

/* pagination */
.pagination {display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.67vw,32px); margin-top:clamp(24px,3.33vw,40px)}
.pagination__btn {display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:100%; transition:background-color 0.2s ease}
.pagination__btn:active:not(:disabled) {background-color:#f5f5f5}
.pagination__btn:disabled {opacity:0.3; cursor:not-allowed}
.pagination__btn--prev::before,
.pagination__btn--next::before {content:''; display:inline-block; width:18px; height:18px; vertical-align:top}
.pagination__btn--prev::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m11.25 13.5-4.5-4.5 4.5-4.5'/%3E%3C/svg%3E") no-repeat center / contain}
.pagination__btn--next::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6.75 13.5 4.5-4.5-4.5-4.5'/%3E%3C/svg%3E") no-repeat center / contain}
.pagination__select-wrap {display:flex; align-items:center; gap:12px}
.pagination__select {padding:12px 40px 12px 16px; border:1px solid #111; border-radius:4px; font-size:14px; line-height:1; appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px; cursor:pointer; outline:none}
.pagination__total {font-size:14px; color:var(--gray-subtle)}

/* vertical card */
.vcard {display:flex; flex-direction:column; width:100%; overflow:hidden; background-color:#fff; border-radius:20px; box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.06); transition:box-shadow 0.2s ease}
.vcard__thumb {overflow:hidden}
.vcard__thumb img {width:100%; height:100%; object-fit:cover}
.vcard__content {display:flex; flex-direction:column; flex:1; gap:12px; padding:20px 20px 32px}
.vcard__title {font-size:20px; font-weight:700}
.vcard__desc {font-size:14px; color:var(--gray-subtle); word-break:keep-all; overflow-wrap:anywhere}

/* tab */
.chip-nav {margin-bottom:clamp(24px,3.33vw,40px)}
.chip-nav:not(.splide) .splide__track {overflow-x:auto}
.chip-nav:not(.splide) .splide__track::-webkit-scrollbar {display:none}
.chip-nav__list {display:flex; gap:8px}
.chip-nav__item:first-child {padding-left:0}
.chip-nav__item:last-child {padding-right:0}
.chip-nav__btn {min-width:80px; padding:10px 16px; border-radius:50rem; background-color:#f5f5f5; color:var(--gray-subtle); font-weight:400; font-size:16px; white-space:nowrap; transition:background-color 0.2s ease, color 0.2s ease}
.chip-nav__btn:not(.on):active {background-color:#EAEAEB}
.chip-nav__btn.on {background-color:var(--gray-base); font-weight:600; color:#fff}

/* table */
.datatable {width:100%; border-top:1px solid #111}
.datatable th,
.datatable td {padding:14px clamp(8px,1vw,12px); font-weight:400}
.datatable thead th {font-size:14px; color:var(--gray-subtle); border-bottom:1px solid #e5e5e5}
.datatable tbody th,
.datatable td {padding-top:16px; padding-bottom:16px; font-size:clamp(15px,1.25vw,16px)}
.datatable tbody tr {border-bottom:1px solid #e5e5e5}
.datatable-responsive th,
.datatable-responsive td {white-space:nowrap}
.datatable-responsive td:has(.line-clamp) {white-space:normal}

/* 주가 등락 표시 */
.stock-up {color:var(--color-up)}
.stock-down {color:var(--color-down)}
.stock-flat {color:var(--color-flat)}
.icon-stock-arrow {display:inline-block; width:16px; height:16px}
.stock-up .icon-stock-arrow {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23b50000' d='M7.168 4.748a1 1 0 0 1 1.664 0l4.131 6.197a1 1 0 0 1-.831 1.555H3.869a1 1 0 0 1-.833-1.555z'/%3E%3C/svg%3E") no-repeat center/contain}
.stock-down .icon-stock-arrow {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.16795 11.2519C7.56377 11.8457 8.43623 11.8457 8.83205 11.2519L12.9635 5.0547C13.4066 4.39015 12.9302 3.5 12.1315 3.5H3.86852C3.06982 3.5 2.59343 4.39015 3.03647 5.0547L7.16795 11.2519Z' fill='%232853B2'/%3E%3C/svg%3E") no-repeat center/contain}
.stock-flat .icon-stock-arrow {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Crect x='3' y='7' width='10' height='2' rx='1' fill='%23585858'/%3E%3C/svg%3E") no-repeat center/contain}

/* ===========================
   Main
=========================== */

/* Main Intro */
.main-intro {position:relative; padding:clamp(40px,6.5vw,78px) 0 clamp(40px,7vw,84px); min-height:auto; background-color:#0d1117; overflow:hidden; line-height:1.45}
.main-intro::before {content:''; position:absolute; top:-50%; right:-50%; width:430px; height:430px; opacity:0.4; background:radial-gradient(50% 50% at 50% 50%, #00D4FF 0%, rgba(0, 212, 255, 0.00) 100%); background-blend-mode:multiply}
@keyframes meshRotate {
    0% {transform:translate(-50%, -50%) rotate(0deg) scale(1)}
    50% {transform:translate(-50%, -50%) rotate(180deg) scale(1.05)}
    100% {transform:translate(-50%, -50%) rotate(360deg) scale(1)}
}
@keyframes meshGlow {
    0%, 100% {opacity:0.6}
    50% {opacity:0.9}
}
@keyframes fadeInUp {
    from {opacity:0; transform:translateY(30px)}
    to {opacity:1; transform:translateY(0)}
}
@keyframes fadeIn {
    from {opacity:0}
    to {opacity:1}
}
@keyframes visualReveal {
    0% {opacity:0; transform:translate(-50%, -50%) scale(0.8)}
    100% {opacity:0.6; transform:translate(-50%, -50%) scale(1)}
}
.main-intro__visual {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:180%; height:180%; max-width:900px; max-height:900px; pointer-events:none; opacity:0; animation:visualReveal 2.5s cubic-bezier(0.4, 0, 0.2, 1) .5s forwards, meshRotate 200s linear 3s infinite, meshGlow 10s ease-in-out 3s infinite; background:url('https://hkstatic.hankyung.com/resource/kedindex/img/visual-intro-mesh.svg') no-repeat center / contain}
.main-intro__visual img {width:100%; height:100%; object-fit:contain}
.main-intro__inner {position:relative; z-index:1; max-width:768px; margin:0 auto; padding:0 20px}
.main-intro__acronym {margin-bottom:clamp(32px,3.33vw,40px)}
.main-intro__acronym-item {opacity:0; animation:fadeInUp 0.6s ease-out forwards}
.main-intro__acronym-item:nth-child(1) {animation-delay:0s}
.main-intro__acronym-item:nth-child(2) {animation-delay:0.15s}
.main-intro__acronym-item:nth-child(3) {animation-delay:0.3s}
.main-intro__acronym-item .acronym-txt {font-size:30px; font-weight:700; line-height:1.3; color:#fff}
.main-intro__acronym-item .acronym-txt strong {display:inline-block; color:#5a7ed8; opacity:0; animation:fadeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards}
.main-intro__acronym-item:nth-child(1) .acronym-txt strong {animation-delay:0.3s}
.main-intro__acronym-item:nth-child(2) .acronym-txt strong {animation-delay:0.5s}
.main-intro__acronym-item:nth-child(3) .acronym-txt strong:first-of-type {animation-delay:0.7s}
.main-intro__acronym-item:nth-child(3) .acronym-txt strong:last-of-type {animation-delay:0.85s}
.main-intro__title {position:static; margin-top:0; margin-bottom:40px; font-size:clamp(24px,4vw,48px); font-weight:700; line-height:1.3; color:#fff; text-align:right; opacity:0; animation:fadeIn 0.8s ease-out 0.5s forwards; word-break:keep-all; overflow-wrap:anywhere}
.main-intro__desc {margin-top:0; opacity:0; animation:fadeIn 0.8s ease-out 0.7s forwards; word-break:keep-all; overflow-wrap:anywhere}
.main-intro__desc p {font-size:clamp(14px,1.67vw,20px); font-weight:400; color:var(--gray-light)}

/* Main Contents */
.main-contents {padding:60px 0}
.main-contents .contents__inner {display:flex; flex-direction:column; gap:40px}
.main-module__title {margin-bottom:16px; font-size:24px; font-weight:700}

/* Main Benchmark */
.main-benchmark__slider {position:relative}
.benchmark-card {display:flex; flex-direction:column; height:100%; border-radius:20px; background:#F5F5F5; overflow:hidden}
.benchmark-card__content {display:flex; flex-direction:column; gap:12px; flex:1; padding:30px; word-break:keep-all; overflow-wrap:anywhere}
.benchmark-card__title {font-size:clamp(20px, 2.67vw, 32px); font-weight:700}
.benchmark-card__desc {font-size:clamp(16px, 1.5vw, 18px)}
.benchmark-card__visual {flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:20px 30px; background:linear-gradient(90deg, #142c67 0%, #142c67 100%)}
.benchmark-card__visual img {width:180px; height:180px; object-fit:contain}
.main-benchmark__pagination {position:static; display:flex; justify-content:center; gap:12px; margin-top:20px; padding:0}
.main-benchmark__pagination li {line-height:0}
.main-benchmark__pagination .splide__pagination__page {width:8px; height:8px; margin:0; padding:0; border-radius:100%; background-color:#ddd; opacity:1; border:none; transition:width 0.3s ease, background-color 0.3s ease}
.main-benchmark__pagination .splide__pagination__page.is-active {width:24px; border-radius:4px; background-color:#111}
.main-benchmark__arrows {position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); pointer-events:none; z-index:10}
.main-benchmark__arrow {opacity:0; position:absolute; display:flex; align-items:center; justify-content:center; width:50px; height:50px; padding:10px; border-radius:100%; background-color:rgba(255, 255, 255, 0.85); box-shadow:0 0 4px rgba(0, 0, 0, 0.08); pointer-events:auto; cursor:pointer; transition:background-color 0.2s ease, box-shadow 0.2s ease}
.main-benchmark__slider:hover .main-benchmark__arrow {opacity:1}
.main-benchmark__arrow:hover {background-color:#fff; box-shadow:0 2px 8px rgba(0, 0, 0, 0.12)}
.main-benchmark__arrow:disabled {opacity:0.5; cursor:not-allowed}
.main-benchmark__arrow.splide__arrow--prev {left:-20px}
.main-benchmark__arrow.splide__arrow--next {right:-20px}
.main-benchmark__arrow::before {content:''; display:inline-block; width:30px; height:30px; vertical-align:top}
.main-benchmark__arrow.splide__arrow--prev::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m18.75 22.5-7.5-7.5 7.5-7.5'/%3E%3C/svg%3E") no-repeat center / contain}
.main-benchmark__arrow.splide__arrow--next::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m11.25 22.5 7.5-7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat center / contain}

/* Main KEDI 지수데이터 */
.main-indexdata__list {display:flex; flex-direction:column; gap:24px}

/* ===========================
   Sub 공통
=========================== */
/* Sub Contents */
.sub-contents {padding:clamp(60px,6.67vw,80px) 0 clamp(60px,8.33vw,100px); word-break:keep-all; overflow-wrap:anywhere}

/* 주가지표 포함 카드 리스트 유형 */
.stock-card-list {display:flex; flex-direction:column; gap:clamp(16px,2vw,24px)}
.stock-card-list > li {min-width:0}
.stock-card-list > li > .stock-card {height:100%}
.stock-card {display:flex; flex-direction:column; border:1px solid #e5e5e5; border-radius:20px; background-color:#fff; overflow:hidden; transition:border-color 0.2s ease, box-shadow 0.2s ease}
.stock-card:active {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.04)}
.stock-card__info {display:flex; flex-direction:column; gap:clamp(24px,2.5vw,30px); width:100%; padding:clamp(24px,3.33vw,40px) clamp(24px,3.33vw,40px)}
.stock-card__title-wrap {display:flex; flex-direction:column; gap:8px}
.stock-card__title {font-weight:700; font-size:clamp(20px,2vw,24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stock-card__desc {display:block; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:clamp(14px,1.33vw,16px); color:var(--gray-subtle)}
.stock-card__price {display:flex; align-items:center; flex-wrap:wrap; gap:8px}
.stock-card__value {font-weight:700; font-size:clamp(18px,2vw,24px); line-height:1.3}
.stock-card__change {display:flex; align-items:center; flex-wrap:wrap; gap:4px; font-weight:400; font-size:16px; line-height:1.3}
.stock-card__data {display:flex; align-items:center; gap:30px; min-height:31px}
.stock-card__badge {display:inline-flex; align-items:center; padding:2px 6px; border:1px solid #ddd; border-radius:4px; font-size:12px; line-height:1.45; color:#707070; letter-spacing:-0.12px}
.stock-card:has(.stock-card__thumb) {align-items:center}
.stock-card__thumb {flex:0 0 auto; padding:24px 24px 0}
.stock-card__thumb img {width:clamp(120px,15vw,180px); height:clamp(120px,15vw,180px); object-fit:contain}

/* 기초지수 */
.index-card-list {display:flex; flex-direction:column; gap:clamp(16px,2vw,24px)}
.index-card {display:flex; gap:clamp(16px,2.5vw,30px); height:100%; padding:clamp(20px,3.33vw,40px) clamp(20px,2.5vw,30px); border:1px solid #e5e5e5; border-radius:clamp(16px,1.67vw,20px); background:#fff; transition:border-color 0.2s ease, box-shadow 0.2s ease}
.index-card:active {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.04)}
.index-card__thumb {flex:0 0 auto; width:clamp(80px,9.17vw,110px); height:clamp(80px,9.17vw,110px); overflow:hidden}
.index-card__thumb img {width:100%; height:100%; object-fit:contain}
.index-card__info {display:flex; flex-direction:column; gap:clamp(8px,1vw,12px); flex:1; min-width:0}
.index-card__title {font-weight:700; font-size:clamp(18px,2vw,24px)}
.index-card__desc {display:block; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:clamp(14px,1.33vw,16px); color:var(--gray-subtle)}

/* KEDI 리서치 */
.research-list {display:flex; flex-direction:column; gap:16px}
.research-card {display:flex; flex-direction:column; gap:8px; padding:clamp(20px,2.5vw,30px); border:1px solid #e5e5e5; border-radius:clamp(16px,1.67vw,20px); background:#fff; transition:border-color 0.2s ease, box-shadow 0.2s ease}
.research-card:active {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.04)}
.research-card__meta {display:flex; align-items:center; flex-wrap:wrap; gap:clamp(12px,1.33vw,16px); font-size:clamp(12px,1.17vw,14px)}
.research-card__category {color:var(--color-primary)}
.research-card__date {color:var(--gray-subtle)}
.research-card__title {font-weight:700; font-size:clamp(16px,1.67vw,20px)}

/* 게시판 목록 공통 */
.board-list__header {display:none}
.board-list__body {display:flex; flex-direction:column}
.board-list__item {border-bottom:1px solid #e5e5e5}
.board-list__item:first-child {border-top:1px solid #e5e5e5}
.board-list__link {display:flex; flex-direction:column; gap:8px; padding:20px 12px}
.board-list__td {min-width:0}
.board-list__td--subject {display:flex; align-items:flex-start; gap:8px}
.board-list__td--date {font-size:12px; line-height:1.45; color:var(--gray-soft)}
.board-list__title {flex:1; min-width:0; min-height:47px; font-weight:500; font-size:16px; line-height:1.45; color:var(--gray-base); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical}
.board-list__badges {display:flex; align-items:center; gap:4px; flex-shrink:0; padding-top:4px}
.board-list__empty {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; padding:30px 24px; border-top:1px solid #e5e5e5}
.board-list__empty p {font-size:14px; line-height:1.45; color:var(--gray-soft); text-align:center}
.icon-new {display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:16px; height:16px}
.icon-new::before {content:''; display:inline-block; width:100%; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Crect width='16' height='16' fill='%23305dcf' rx='8'/%3E%3Cpath fill='%23fff' d='M11.156 4.231v7.542H9.5L6.698 7.7h-.052v4.073h-1.98V4.23h1.688l2.76 4.052h.063V4.231z'/%3E%3C/svg%3E") no-repeat center / contain; vertical-align:top}

/* 게시판 상세 공통 */
.board-view__header {display:flex; flex-direction:column; gap:16px; padding-bottom:30px; border-bottom:1px solid #111}
.board-view__header-top {display:flex; flex-direction:column; gap:12px}
.board-view__index-badge {display:inline-flex; align-items:center; width:fit-content; padding:6px 8px; background:#eff3fa; border-radius:6px; font-size:14px; color:var(--color-primary)}
.board-view__index-badge:active {text-decoration:underline; text-underline-offset:2px}
.board-view__meta {display:flex; align-items:center; gap:16px}
.board-view__category {font-size:clamp(14px,1.33vw,16px); color:var(--color-primary)}
.board-view__date {font-size:clamp(12px,1.17vw,14px); color:var(--gray-soft)}
.board-view__title {font-weight:700; font-size:clamp(28px,2.67vw,32px); line-height:1.35; letter-spacing:-0.02em}
.board-view__body {display:flex; flex-direction:column; gap:16px; padding:clamp(40px,4.17vw,50px) 0; border-bottom:1px solid #e5e5e5}
.board-view__content {font-size:16px; line-height:1.6}

/* 운용체계 공지사항 상세 */
.board-view__sections {display:flex; flex-direction:column; gap:clamp(30px,3.33vw,40px)}
.board-view__section {display:flex; flex-direction:column; gap:clamp(8px,1vw,12px)}
.board-view__section-title {font-weight:700; font-size:18px}
.board-view__section-box {padding:clamp(16px,1.67vw,20px); background:#f5f5f5; border-radius:8px}
.board-view__section-box p {font-size:16px; line-height:1.6}
.board-view__section-content {font-size:16px; line-height:1.6}
.board-view__section-content p {margin:0}
.board-view__index-link {display:inline-flex; align-items:center; gap:4px; font-weight:500; font-size:16px; color:var(--color-primary)}
.board-view__index-link::after {content:''; display:block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23305dcf' stroke-linecap='round' stroke-linejoin='round' d='m6 12 4-4-4-4'/%3E%3C/svg%3E") no-repeat center / contain}
.board-view__feedback {margin-top:40px}
.btn-feedback {display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:40px; padding:8px 16px; background:#142c67; border-radius:6px; font-size:14px; color:#fff; text-decoration:none; line-height:1.45; text-align:left}
.btn-feedback::before {content:''; display:block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' d='M14.333 12 9.905 8m-3.81 0-4.428 4m-.334-7.333 5.444 3.81c.44.308.66.463.9.522.212.053.434.053.646 0 .24-.06.46-.214.9-.522l5.444-3.81M4.533 13.333h6.934c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874c.218-.428.218-.988.218-2.108V5.867c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.875c-.428-.217-.988-.217-2.108-.217H4.533c-1.12 0-1.68 0-2.108.217a2 2 0 0 0-.874.875c-.218.427-.218.987-.218 2.108v4.266c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.428.218.988.218 2.108.218'/%3E%3C/svg%3E") no-repeat center / contain}
.board-view__files {display:flex; flex-direction:column; gap:clamp(8px,0.83vw,10px); padding-top:40px}
.board-view__file {display:flex; align-items:center; gap:8px; padding:12px 16px; background:#f5f5f5; border-radius:clamp(6px,0.67vw,8px); font-size:12px; color:var(--gray-subtle); line-height:1.3; letter-spacing:-0.02em; text-decoration:none}
.board-view__file i {flex:0 0 auto}

/* editor setting */
.board-view__content p {margin-bottom:0}
.board-view__content .image {clear:both; width:auto !important}
.board-view__content .image img,
.board-view__content .image_resized img {height:auto}
.board-view__content .image > figcaption {color:var(--gray-subtle); font-size:.85em}
.board-view__content .media {clear:both; display:block; margin:.9em 0; min-width:15em}
.board-view__content .media .video-wrap {position:relative; height:0; padding-bottom:56.2493%}
.board-view__content .media .video-wrap iframe {position:absolute; top:0; left:0; width:100%; height:100%}
.board-view__content .table {clear:both; width:auto}
.board-view__content table {width:100%; max-width:100%}
.board-view__content th,
.board-view__content td {border:1px solid #E5E5E5; min-width:2em; padding:.4em}
.board-view__content th {background:#F5F5F5; font-weight:600}
.board-view__content ul,
.board-view__content ol {margin:1em 0; padding-left:1.5em}
.board-view__content ul {list-style-type:disc; all:revert}
.board-view__content ol, .board-view__content ol ol, .board-view__content ol li {list-style-type:decimal}
.board-view__content ol ol ol, .board-view__content ol ol li {list-style-type:upper-alpha}
.board-view__content ol ol ol ol, .board-view__content ol ol ol li {list-style-type:lower-alpha}
.board-view__content ol ol ol ol ol, .board-view__content ol ol ol ol li {list-style-type:decimal}
.board-view__content ol ul ul, .board-view__content ol ul li {list-style-type:disc}
.board-view__content ol ul ul ul, .board-view__content ol ul ul li {list-style-type:circle}
.board-view__content ol ul ul ul ul, .board-view__content ol ul ul ul li {list-style-type:square}
.board-view__content ul ul ul, .board-view__content ul ul li {list-style-type:circle}
.board-view__content ul ul ul ul, .board-view__content ul ul ul li {list-style-type:square}
.board-view__content ul ol ol, .board-view__content ul ol li {list-style-type:decimal}
.board-view__content ul ol ol ol, .board-view__content ul ol ol li {list-style-type:upper-alpha}
.board-view__content ul ol ol ol ol, .board-view__content ul ol ol ol li {list-style-type:lower-alpha}
.board-view__content ul ol ol ol ol ol, .board-view__content ul ol ol ol ol li {list-style-type:decimal}
.board-view__content .text-big {font-size:1.4em}
.board-view__content .text-huge {font-size:1.8em}
.board-view__content .ttext-small {font-size:.85em}
.board-view__content .text-tiny {font-size:.7em}
.board-view__content i {font-style:italic}
.board-view__content hr {display:block; height:4px; margin:15px 0; border:none; background:#E5E5E5}
.board-view__content blockquote {margin:0; border-left: 5px solid #E5E5E5; padding-left:1.5em; padding-right:1.5em; font-style:italic}
.board-view__paging {display:flex; flex-direction:column}
.board-view__paging-item {display:flex; align-items:center; gap:16px; padding:clamp(16px,1.67vw,20px) 0; border-bottom:1px solid #e5e5e5}
.board-view__paging-label {flex-shrink:0; min-width:clamp(50px,8.33vw,100px); font-size:14px; color:var(--gray-soft); text-align:center; letter-spacing:-0.02em}
.board-view__paging-link {flex:1; min-width:0; font-size:14px; color:var(--gray-subtle); line-height:1.5; letter-spacing:-0.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none}
.board-view__paging-link:not(a) {color:#888}
.board-view__btn-wrap {display:flex; justify-content:center; padding-top:40px}
.btn-pill {display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:120px; min-height:48px; padding:10px 20px; border:1px solid #111; border-radius:100px; background:#fff; font-size:16px; text-decoration:none; transition:background-color 0.2s ease}

/* 지수 상세 */
.index-view__top {display:flex; flex-direction:column; gap:24px; margin-bottom:30px; padding-bottom:30px; border-bottom:1px solid #111}
.index-view__title-con {display:flex; flex-direction:column; gap:16px}
.index-view__category {font-weight:500; font-size:14px; color:var(--gray-soft)}
.index-view__title {display:flex; flex-direction:column; gap:8px}
.index-view__heading {font-weight:700; font-size:clamp(28px,3vw,36px)}
.index-view__desc {font-size:clamp(15px,1.33vw,16px); line-height:1.5}
.index-view__file {display:flex; gap:8px; flex-wrap:wrap}
.index-view__file-btn {flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; padding:8px 16px; border:1px solid #ddd; border-radius:6px; font-size:14px}
.index-view__file-btn::before {content:''; display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23111' stroke-linecap='round' stroke-linejoin='round' d='M9.334 1.513v2.754c0 .373 0 .56.072.703a.67.67 0 0 0 .292.29c.142.074.329.074.702.074h2.754m-3.82 6h-4m5.333-2.667H5.334m8-2.008v4.808c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874c-.428.218-.988.218-2.108.218H5.867c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874c-.218-.428-.218-.988-.218-2.108V4.534c0-1.12 0-1.68.218-2.108a2 2 0 0 1 .874-.875c.428-.218.988-.218 2.108-.218h2.141c.49 0 .734 0 .964.056a2 2 0 0 1 .578.24c.202.123.375.296.72.642l2.126 2.125c.346.346.52.52.643.72q.165.271.24.579c.055.23.055.475.055.964'/%3E%3C/svg%3E") no-repeat center/contain}
.index-view__contents {display:flex; flex-direction:column; gap:clamp(50px,5vw,60px)}
.index-view__section-header {display:flex; align-items:center; justify-content:space-between; gap:16px}
.index-view__section-header .index-view__section-title {margin-bottom:0}
.index-view__section-title {margin-bottom:clamp(16px,1.67vw,20px); font-size:clamp(20px,2vw,24px); font-weight:700; line-height:1.45; letter-spacing:-0.01em}
.index-view__section-desc {flex-shrink:0; font-size:12px; color:var(--gray-soft)}
.index-view__rank-table .datatable .rank-cont {display:flex; align-items:flex-start; gap:6px}
.index-view__rank-table .datatable .rank-cont .rank {flex-shrink:0; min-width:20px; color:var(--color-primary); font-weight:500; font-size:14px; text-align:center}
.index-view__rank-table .datatable .rank-cont .name {flex:1}
.index-view__rank-table .datatable .line-clamp {-webkit-line-clamp:3; line-clamp:3}
.index-view__rank-table .datatable:has(colgroup) {table-layout:fixed}
.index-view__rank-table .datatable:has(colgroup) th:not(:has(.line-clamp)),
.index-view__rank-table .datatable:has(colgroup) td:not(:has(.line-clamp)) {white-space:nowrap}
/* 구성종목 TOP10 - 티커 포함 (div 버전) */
.rank-grid__head {display:flex; border-top:1px solid #111}
.rank-grid__th {padding:14px 12px; font-size:14px; color:var(--gray-subtle); font-weight:400; border-bottom:1px solid #e5e5e5}
.rank-grid__th--name {flex:1; min-width:0}
.rank-grid__th--ticker {flex:1; min-width:80px; max-width:100px; text-align:center}
.rank-grid__th--weight {flex:1; min-width:80px; max-width:100px; text-align:right}
.rank-grid__row {display:flex; border-bottom:1px solid #e5e5e5}
.rank-grid__name {flex:1; min-width:0; display:flex; align-items:center; gap:6px; padding:16px 12px}
.rank-grid__name .rank {flex-shrink:0; min-width:20px; color:var(--color-primary); font-weight:500; font-size:14px; text-align:center}
.rank-grid__name .name {flex:1; min-width:0; font-weight:600; font-size:clamp(15px,1.25vw,16px); color:var(--gray-base); letter-spacing:-0.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rank-grid__ticker {flex:1; min-width:80px; max-width:100px; padding:16px 12px; font-size:clamp(15px,1.25vw,16px); display:flex; align-items:center; justify-content:center}
.rank-grid__weight {flex:1; min-width:80px; max-width:100px; padding:16px 12px; font-size:clamp(15px,1.25vw,16px); display:flex; align-items:center; justify-content:flex-end}
#chartControl + div,
#kediChartArea {background:#fff !important}

/* 안내사항 */
.index-view__notice-list {display:flex; flex-direction:column; gap:4px}
.index-view__notice-list li {position:relative; padding-left:11px; font-size:clamp(15px,1.33vw,16px); line-height:1.6}
.index-view__notice-list li::before {content:''; position:absolute; left:0; top:10px; width:3px; height:3px; background:#111; border-radius:100%}

/* 문의 */
.index-view__contact-info {font-weight:500; font-size:clamp(15px,1.33vw,16px)}

/* 차트 */
.index-view__chart-section {display:flex; flex-direction:column; gap:16px}
.index-view__price {display:flex; flex-direction:column; gap:8px}
.index-view__price-data {display:flex; align-items:center; flex-wrap:wrap; gap:16px}
.index-view__price-value {font-weight:700; font-size:clamp(28px,2.67vw,32px)}
.index-view__price-change {display:flex; align-items:center; gap:4px; font-size:clamp(14px,1.33vw,16px)}
.index-view__price-meta {font-size:12px; color:var(--gray-soft); line-height:1.3; letter-spacing:-0.01em}

/* 지수 상세: 채권지수 */
.index-view__additional {padding-top:4px}
.index-view__additional-list {display:flex; flex-direction:column; gap:2px}
.index-view__additional-list li {position:relative; padding-left:7px; font-size:14px; color:var(--gray-subtle); line-height:1.45}
.index-view__additional-list li::before {content:''; position:absolute; left:0; top:8px; width:3px; height:3px; background:var(--gray-subtle); border-radius:100%}

/* 채권지수 탭 그리드 (PC) */
.bond-tab__grid {display:grid; grid-template-columns:repeat(6, 1fr)}
.bond-tab__btn {display:flex; align-items:center; justify-content:center; min-height:50px; padding:12px; border:1px solid #ddd; background:#fff; font-size:16px; white-space:nowrap; cursor:pointer; transition:background-color 0.2s ease, border-color 0.2s ease}
.bond-tab__btn:not(:first-child) {margin-left:-1px}
.bond-tab__btn:nth-child(n+7) {margin-top:-1px}
.bond-tab__btn:active:not(.on):not(.is-disabled) {background:#F5F5F5}
.bond-tab__btn.on {position:relative; z-index:1; border-color:#111; font-weight:500}

/* 채권지수 셀렉트박스 (Mobile) */
.bond-tab-select__input {width:100%; min-height:42px; padding:11px 40px 11px 16px; border:1px solid #ddd; border-radius:6px; font-size:14px; color:var(--gray-subtle); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 20px 20px; appearance:none; cursor:pointer}

/* 차트 듀얼 레이아웃 */
.index-view__chart-header {display:flex; flex-direction:column; gap:8px}
.index-view__chart-title {font-weight:700; font-size:clamp(18px,1.67vw,20px)}
.index-view__chart-item {display:flex; flex-direction:column; gap:16px}
.index-view__chart-item + .index-view__chart-item {margin-top:clamp(24px,3.33vw,40px); padding-top:clamp(24px,3.33vw,40px); border-top:1px solid #ddd}

/* 운용체계 */
.contents:has(.governance) .page-title {margin-bottom:30px}
.governance {display:flex; flex-direction:column; gap:clamp(50px,6.67vw,80px)}
.governance__title {padding-bottom:clamp(16px,1.67vw,20px); border-bottom:1px solid #111; font-weight:700; font-size:clamp(20px,2vw,24px)}
.governance__card {display:flex; flex-direction:column; gap:clamp(30px,3.33vw,40px); padding:clamp(24px,3.33vw,40px) clamp(24px,2.5vw,30px); border:1px solid #e5e5e5; border-radius:clamp(16px,1.67vw,20px); background:#fff}
.governance__section {display:flex; flex-direction:column; gap:clamp(12px,1.33vw,16px)}
.governance__section-title {font-weight:700; font-size:clamp(18px,1.67vw,20px); line-height:1.45}
.governance__section-content {display:flex; flex-direction:column; gap:12px}
.governance__section-content p {font-size:clamp(15px,1.33vw,16px); line-height:1.5}
.governance__section-sub {font-size:14px; color:var(--gray-subtle)}
.governance__file-btn {display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:8px 16px; border:1px solid #ddd; border-radius:6px; font-size:14px; text-decoration:none}

/* 운용체계: 지수 산출 방법론 다운로드 목록 */
.governance__methodology {display:flex; flex-direction:column; gap:clamp(24px,2.5vw,30px)}
.governance__download-list {display:flex; flex-direction:column; gap:clamp(12px,1.33vw,16px)}
.governance__download-item {display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:clamp(48px,4.33vw,52px); padding:12px clamp(16px,1.67vw,20px); border:1px solid #ddd; border-radius:8px; font-size:16px; text-align:left; text-decoration:none; transition:background-color 0.2s ease}
.governance__download-item:active {background:#f5f5f5; text-decoration:none}
.governance__download-item span {flex:1; min-width:0}

/* 운용체계: 벤치마크 지수 방법론 변경 */
.governance__changes {display:flex; flex-direction:column; gap:clamp(24px,2vw,24px)}
.governance__changes-content {display:flex; flex-direction:column; gap:clamp(24px,4.17vw,50px)}
.governance__info-box {display:flex; flex-direction:column; gap:16px; padding:clamp(20px,2vw,24px); border:1px solid #e5e5e5; border-radius:16px; background:#fff}
.governance__info-content {display:flex; flex-direction:column; gap:6px}
.governance__info-title {font-weight:600; font-size:clamp(15px,1.33vw,16px); line-height:1.45}
.governance__info-list {display:flex; flex-direction:column; gap:4px}
.governance__info-list li {position:relative; padding-left:10px; font-size:14px; color:var(--gray-subtle); line-height:1.45}
.governance__info-list li::before {content:''; position:absolute; left:0; top:9px; width:4px; height:1px; background:var(--gray-subtle)}
.governance__info-mail a {display:inline-flex; align-items:center; gap:6px; font-style:normal; font-weight:500; font-size:14px; color:var(--color-primary); vertical-align:top}
.governance__info-mail a::before {content:''; display:inline-block; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23305dcf' stroke-linecap='round' stroke-linejoin='round' d='M14.334 12 9.905 8m-3.81 0-4.428 4m-.333-7.333 5.443 3.81c.441.309.661.463.901.523.212.052.433.052.645 0 .24-.06.46-.214.901-.523l5.443-3.81M4.534 13.333h6.933c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874c.218-.427.218-.987.218-2.108V5.867c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874c-.427-.218-.988-.218-2.108-.218H4.534c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874c-.218.428-.218.988-.218 2.108v4.266c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.428.218.988.218 2.108.218'/%3E%3C/svg%3E") no-repeat center/contain}

/* 운용체계: 방법론 변경 지수 리스트 */
.governance__table-section {display:flex; flex-direction:column; gap:16px}
.governance__table-title {font-weight:700; font-size:18px; line-height:1.45}
.governance__list-wrap {border-top:1px solid #ddd; border-bottom:1px solid #ddd}
.governance__list-header {display:none}
.governance__list {display:flex; flex-direction:column}
.governance__list-item {border-top:1px solid #e5e5e5}
.governance__list-item:first-child {border-top:none}
.governance__list-item a {display:flex; flex-direction:column; gap:8px; padding:20px 12px; text-decoration:none}
.governance__list-name {font-size:14px; color:var(--gray-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.governance__list-subject {font-weight:500; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.governance__list-date {font-size:12px; color:var(--gray-soft)}

/* 운용체계: Empty 상태 */
.governance__empty {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:240px; padding:clamp(30px,5vw,60px) 24px; border-top:1px solid #e5e5e5}
.governance__empty p {font-size:14px; color:var(--gray-soft); text-align:center}

/* 에러 페이지 */
.error-page {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(32px,3.33vw,40px); padding:clamp(20px,3.33vw,40px) 0}
.error-page__image {width:clamp(154px,17.92vw,215px); height:clamp(100px,11.67vw,140px)}
.error-page__image img {width:100%; height:100%; object-fit:contain}
.error-page__content {display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; word-break:keep-all; overflow-wrap:anywhere}
.error-page__title {font-weight:700; font-size:clamp(28px,2.67vw,32px); line-height:1.35}
.error-page__desc {font-size:16px; line-height:1.5}
.error-page__action {display:flex; justify-content:center}

/* ===========================
   Responsive
=========================== */

/* Mobile */
@media (max-width: 1023.98px) {
    /* Utility */
    .show-mo {display:var(--display, block)}
    /* Header */
    .header {position:static; height:115px;}
    .header__inner {position:fixed; top:0; left:0; right:0; z-index:250; border-bottom:1px solid #eee}
    .header__gnb {flex:1 1 100%; order:3; margin:16px -20px 0; padding:16px 0; transition:max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease}
    .header__gnb:not(.splide) .splide__track {overflow-x:auto}
    .header__gnb:not(.splide) .splide__track::-webkit-scrollbar {display:none}
    .header__gnb-item:first-child {padding-left:20px}
    .header__gnb-item:last-child {padding-right:20px}
    .isSticky .header__gnb {max-height:0; padding:0; opacity:0; overflow:hidden}
    /* table */
    .datatable-grid__col + .datatable-grid__col .datatable {border-top:none}
    .datatable-grid__col + .datatable-grid__col .datatable thead {display:none}
    /* table(div version) */
    .index-view__rank-grid .datatable-grid {flex-direction:column; gap:0}
    .rank-grid__head {display:none}
    .rank-grid__body .rank-grid__row:first-child {border-top:1px solid #e5e5e5}
    .datatable-grid__col + .datatable-grid__col .rank-grid__body .rank-grid__row:first-child {border-top:none}
    .rank-grid__row {flex-wrap:wrap; padding:16px 8px; gap:4px 8px}
    .rank-grid__name {width:100%; flex:none; padding:0; align-items:flex-start}
    .rank-grid__name .name {font-size:15px}
    .rank-grid__ticker {max-width:none; flex:1; min-width:80px; padding:0 0 0 26px; justify-content:flex-start; font-size:15px}
    .rank-grid__weight {max-width:none; flex:1; min-width:80px; padding:0; font-size:15px}
}
@media (max-width: 767.98px) {
    /* tab */
    .chip-nav {margin-left:-20px; margin-right:-20px}
    .chip-nav .chip-nav__item:first-child {padding-left:20px}
    .chip-nav .chip-nav__item:last-child {padding-right:20px}
    /* table */
    .datatable-responsive {padding-bottom:16px; overflow-x:auto; -webkit-overflow-scrolling:touch}
    .datatable-responsive::-webkit-scrollbar {width:4px; height:4px; display:inherit}
    .datatable-responsive::-webkit-scrollbar-track {background:#e5e5e5; border-radius:4px}
    .datatable-responsive::-webkit-scrollbar-track-piece {background:transparent}
    .datatable-responsive::-webkit-scrollbar-button {width:0; height:0}
    .datatable-responsive::-webkit-scrollbar-thumb {background:#111; border-radius:4px}
    /* Sub: KEDI 리서치 */
    .research-card {position:relative}
    .research-card__meta {padding-right:24px}
    .research-card__title {display:block; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
    .research-card__title .icon--attach {position:absolute; top:22px; right:22px; width:16px; height:16px}
    /* Sub: 채권지수 */
    .index-view__section-header {margin-bottom:16px}
}

/* Tablet & Desktop */
@media screen and (min-width: 768px) {
    /* Contents */
    .vcard {flex-direction:row}
    .vcard__thumb {flex:0 0 24%}
    /* Main */
    .main-intro::before {width:610px; height:610px; right:auto; left:50%; top:-60%; opacity:.2}
    .benchmark-card {flex-direction:row; justify-content:space-between}
    .benchmark-card__content {flex:1; gap:16px; padding:40px 30px}
    .benchmark-card__visual {flex-shrink:0; width:40.5%; height:100%; padding:40px 30px}
    .index-card-list {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
    .index-card {flex-direction:column}
    /* Sub: KEDI 리서치 */
    .research-card {align-items:flex-start}
    .research-card__title {display:inline-block; position:relative; max-width:100%; padding-right:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
    .research-card__title .icon--attach {position:absolute; top:.2em; right:0}
    /* Sub: 기초지수 */
    .stock-card__price {align-items:flex-end}
    .stock-card-list.type-col-2 {display:grid; grid-template-columns:repeat(2, 1fr); gap:24px}
    .stock-card-list.type-col-2 .stock-card:has(.stock-card__price) .stock-card__desc {min-height:70px}
    .stock-card {min-width:0}
    .stock-card:has(.stock-card__thumb) {flex-direction:row;}
    .stock-card:has(.stock-card__thumb) .stock-card__thumb {width:30.6%; max-width:368px; padding:24px; text-align:center}
    .stock-card:has(.stock-card__thumb) .stock-card__info {flex:1}
    /* Sub: 지수 상세 */
    .index-view__file-btn {flex:0 0 auto; min-height:40px}
    /* Sub: 채권지수 */
    .index-view__section-header {margin-bottom:20px}
    .index-view__additional-list {display:grid; grid-template-columns:repeat(2, auto); gap:4px 24px; justify-content:start}
}
@media screen and (min-width: 1024px) {
    /* Utility */
    .show-tablet-up {display:var(--display, block)}
    /* Header */
    .header {border-bottom:1px solid #eee}
    .header__inner {padding-bottom:24px}
    .header__gnb-list {gap:32px}
    .allmenu {display:none}
    /* board-list */
    .board-list {--board-cols:1fr 100px}
    .board-list__header {display:grid; grid-template-columns:var(--board-cols); align-items:center; padding:14px 12px; background:#f5f5f5; border-top:1px solid #ddd; border-bottom:1px solid #ddd}
    .board-list__th {font-size:14px; line-height:1.45; color:#444}
    .board-list__th:last-child {text-align:center}
    .board-list__item:first-child {border-top:none}
    .board-list__link {display:grid; grid-template-columns:var(--board-cols); align-items:center; flex-direction:row; gap:0; padding:20px 12px}
    .board-list__td--subject {align-items:center; gap:8px}
    .board-list__td--date {font-size:14px; text-align:center}
    .board-list__title {display:block; flex:unset; min-height:unset; white-space:nowrap; text-overflow:ellipsis; -webkit-line-clamp:unset; line-clamp:unset}
    .board-list__badges {padding-top:0}
    .board-list__empty {padding:50px 24px; border-top:none}
    .board-list__empty i {font-size:30px}
    .board-list .icon-new {width:18px; height:18px}
    .board-list .icon--attach {width:18px; height:18px}
    /* table */
    .datatable-grid {display:flex; gap:24px}
    .datatable-grid__col {flex:1; min-width:0}
}
@media screen and (min-width: 1200px) {
    a:hover {text-decoration:underline; text-underline-offset:3px}
    /* Utility */
    .show-pc {display:var(--display, block)}
    /* Header */
    .header__gnb {transform:translateX(-92px)}
    .header__logo > a {width:234px; height:20px; background-image:url('https://hkstatic.hankyung.com/resource/common/img/logo/logo-kedi-full.svg')}
    .header__gnb-item a:hover {color:var(--color-primary); text-decoration:none}
    /* Footer */
    .footer__inner {padding-bottom:40px}
    .footer__info {flex-direction:row; justify-content:space-between}
    .footer__notice {flex:0 0 792px; gap:32px}
    .footer__contact {flex-shrink:0; width:282px}
    .footer__family {flex-direction:row; align-items:center; gap:40px; padding:32px 0}
    .footer__family-label {flex:0 0 auto}
    .footer__family-list {gap:60px}
    /* Contents */
    .vcard {flex-direction:column; border-radius:20px; height:100%}
    .vcard:hover {box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.06), 0 8px 24px 0 rgba(0, 0, 0, 0.08); text-decoration:none}
    .vcard__thumb {flex:0 0 auto; width:100%; height:240px}
    .vcard__content {gap:12px; padding:24px 24px 40px}
    .vcard__title {font-size:24px; font-weight:700}
    .vcard__desc {font-size:16px}
    .chip-nav__btn:not(.on):hover {background-color:#EAEAEB; text-decoration:none}
    /* pagination */
    .pagination__btn:hover:not(:disabled) {background-color:#f5f5f5}
    /* Main */
    .main-intro {min-height:520px}
    .main-intro__visual {background-image:url('https://hkstatic.hankyung.com/resource/kedindex/img/visual-intro-mesh-ani.svg')}
    .main-intro__inner {max-width:1240px}
    .main-intro__acronym-item .acronym-txt {font-size:48px}
    .main-intro__title {position:absolute; top:140px; right:24px; margin-top:0; margin-bottom:0; text-align:right}
    .main-intro__desc {margin-top:180px}
    .main-contents {padding:100px 0 120px}
    .main-contents .contents__inner {gap:80px}
    .main-module__title {margin-bottom:24px; font-size:32px}
    .benchmark-card__content {padding:56px 64px}
    .benchmark-card__visual {flex-shrink:0; width:486px; height:100%; padding:40px 56px}
    .benchmark-card__visual img {width:260px; height:260px}
    .main-benchmark__pagination {margin-top:24px}
    .main-indexdata__list {display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
    .index-card:hover {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.04); text-decoration:none}
    .index-card:active {box-shadow:none}
    /* Sub */
    .stock-card__change {transform:translateY(-4px)}
    /* Sub: 기초 지수 */
    .stock-card:hover {text-decoration:none}
    .stock-card:not(:has(.stock-card__badge)):hover {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.04), 0 0 4px 0 rgba(0, 0, 0, 0.04)}
    .stock-card:active {box-shadow:none}
    /* Sub: 지수 상세 */
    .index-view__chart-section {gap:24px}
    .index-view__price {flex-direction:row; align-items:flex-end; justify-content:space-between}
    .index-view__price-data {flex-direction:row; align-items:baseline}
    .index-view__rank-table .datatable .rank-cont .rank {align-items:baseline}
    .index-view__rank-table .datatable .line-clamp {-webkit-line-clamp:1; line-clamp:1}
    .index-view__file-btn:hover {text-decoration:underline}
    /* Sub: 채권지수 */
    .bond-tab__btn:hover:not(.on):not(.is-disabled) {background:#F5F5F5; text-decoration:none}
    .bond-tab-select {display:none}
    /* 차트 듀얼 레이아웃 */
    .index-view__chart-header {gap:4px}
    .index-view__chart-item {flex:1; min-width:0}
    .index-view__chart-item .index-view__price {flex-direction:row; align-items:flex-end; justify-content:space-between; gap:16px}
    .index-view__chart-item .index-view__price-data {flex-direction:row; align-items:baseline}
    .index-view__chart-grid {display:flex; gap:40px}
    .index-view__chart-grid .index-view__chart-item + .index-view__chart-item {margin:0; padding:0; border:none}
    /* Sub: KEDI 리서치 */
    .research-card:hover {border-color:var(--color-primary); box-shadow:0 8px 16px 0 rgba(0, 0, 0, 0.06), 0 0 4px 0 rgba(0, 0, 0, 0.04); text-decoration:none}
    .research-card:active {box-shadow:none}
    a.board-view__paging-link:hover {text-decoration:underline; text-underline-offset:3px}
    /* Sub: 운용체계 */
    .governance__section-content {align-items:flex-start}
    .governance__download-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
    .governance__list-wrap {border-bottom:none}
    .governance__list-header {display:flex; align-items:center; gap:24px; padding:14px 12px; background:#f5f5f5; border-bottom:1px solid #ddd}
    .governance__list-header .governance__list-name,
    .governance__list-header .governance__list-subject,
    .governance__list-header .governance__list-date {font-weight:400; font-size:14px; color:var(--gray-subtle)}
    .governance__list-item {border-bottom:1px solid #e5e5e5; border-top:none}
    .governance__list-item a {flex-direction:row; align-items:center; gap:24px; padding:20px 12px}
    .governance__list-name {flex:0 0 30%; max-width:30%; min-width:0}
    .governance__list-subject {flex:1; min-width:0}
    .governance__list-date {flex:0 0 100px; font-size:14px; text-align:center}
    .governance__list-item a:hover {text-decoration:none}
    .governance__list-item a:hover .governance__list-subject {text-decoration:underline}
    .governance__file-btn:hover {text-decoration:underline}
    .governance__download-item:hover {background:#f5f5f5; text-decoration:none}
    .board-view__index-badge:hover {text-decoration:underline; text-underline-offset:2px}
    /* board-list */
    .board-list__link:hover {text-decoration:none}
    .board-list__link:hover .board-list__title {text-decoration:underline}
}
@media screen and (min-width: 1370px) {
    /* Footer */
    .btn-top-wrap {position:fixed; bottom:0; left:50%; right:auto; width:1px; height:0; opacity:0; z-index:10; transition:opacity ease .3s}
    .btn-top-wrap .btn-position {position:absolute; bottom:80px; right:-670px}
}

/* ===========================
   Modal
=========================== */
.modal {position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; background:rgba(0,0,0,0.6);  width:100%; height:100%; overflow-x:hidden; overflow-y:auto; outline:0; box-sizing:border-box}
.modal[hidden] {display:none}
.modal > .modal__inner {display:flex; align-items:center; justify-content:center; min-height:calc(100dvh - 40px); margin:16px}
.modal .modal__container {position:relative; max-width:720px; box-sizing:border-box; background:#fff; border-radius:16px; padding:clamp(24px,2.67vw,32px) clamp(20px,2vw,24px)}
.modal__header {display:flex; gap:16px; padding-bottom:20px; border-bottom:1px solid #111}
.modal__title-wrap {flex:1; display:flex; flex-direction:column; gap:4px}
.modal__title {font-weight:700; font-size:20px; line-height:1.35; letter-spacing:-0.02em}
.modal__subject {display:flex; gap:4px; font-size:14px; line-height:1.45}
.modal__subject span {flex-shrink:0; color:#444}
.modal__close {flex-shrink:0; 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='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center/contain}
.modal__body {display:flex; flex-direction:column; gap:20px; padding-top:20px}
.modal__notice {padding:16px; background:#eff3fa; border-radius:6px}
.modal__notice p {font-size:12px; line-height:1.45; letter-spacing:-0.01em; color:var(--color-primary)}
.modal__form {display:flex; flex-direction:column; gap:20px}
.modal__form-grid {display:grid; grid-template-columns:1fr; gap:12px}
.form-group {display:flex; flex-direction:column; gap:8px}
.form-group--full {grid-column:1/-1}
.form-label {display:flex; align-items:center; gap:2px; font-weight:500; font-size:14px; line-height:1.45; letter-spacing:-0.01em}
.form-label .required {color:#e41818}
.form-input {width:100%; min-height:42px; padding:10px 16px; border:1px solid #ddd; border-radius:6px; font-size:14px; line-height:normal; letter-spacing:-0.01em; outline:none; transition:border-color 0.2s ease}
.form-input::placeholder {color:#707070}
.form-input:focus {border-color:#444}
.form-textarea {width:100%; min-height:120px; padding:16px; border:1px solid #ddd; border-radius:6px; font-size:14px; line-height:normal; letter-spacing:-0.01em; resize:vertical; outline:none; transition:border-color 0.2s ease}
.form-textarea::placeholder {color:#707070}
.form-textarea:focus {border-color:#444}
.form-counter {display:flex; justify-content:flex-end; font-size:12px; line-height:1.45; letter-spacing:-0.01em; color:#444}
.form-counter span {color:#444}
.form-checkbox {display:flex; align-items:center; gap:4px}
.form-checkbox__input {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0}
.form-checkbox__label {position:relative; display:inline-flex; align-items:center; gap:4px; padding-left:22px; font-size:12px; line-height:1.45; letter-spacing:-0.01em; color:#444; cursor:pointer}
.form-checkbox__label::before {content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Crect x='2.25' y='2.25' width='13.5' height='13.5' rx='2.25' stroke='%23707070' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain}
.form-checkbox__input:checked + .form-checkbox__label::before {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Crect x='2.25' y='2.25' width='13.5' height='13.5' rx='2.25' fill='%23111' stroke='%23111' stroke-width='1.5'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5.625 9 2.25 2.25 4.5-4.5'/%3E%3C/svg%3E") no-repeat center/contain}
.form-checkbox__input:focus-visible + .form-checkbox__label::before {outline:2px solid var(--color-primary); outline-offset:2px}
.form-checkbox__label--agreement {padding-left:22px}
.form-checkbox__label--agreement strong {font-weight:500}
.form-agreement {display:flex; flex-direction:column; gap:4px; padding:16px; background:#f5f5f5; border:1px solid #e5e5e5; border-radius:6px}
.form-agreement__desc {padding-left:22px; font-size:12px; line-height:1.45; letter-spacing:-0.01em; color:#707070}
.modal__actions {display:flex; justify-content:center; gap:24px; padding-top:4px}
.btn-submit {min-height:40px; padding:10px 20px; border:1px solid #e5e5e5; border-radius:100px; background:#fff; font-size:14px; line-height:normal; letter-spacing:-0.01em; color:#ddd; cursor:not-allowed; transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}
.btn-submit:not(:disabled) {background:#111; border-color:#111; color:#fff; cursor:pointer}
.btn-submit:not(:disabled):hover {opacity:0.9}

/* Modal: PC */
@media screen and (min-width: 768px) {
    .modal {padding:40px 20px}
    .modal__container {max-width:720px; padding:32px 24px 24px}
    .modal__header {flex-direction:column; gap:4px; padding-bottom:24px}
    .modal__title-wrap {flex-direction:column; gap:12px}
    .modal__close {position:absolute; top:32px; right:24px}
    .modal__body {gap:20px; padding-top:24px}
    .modal__form-grid {grid-template-columns:repeat(2, 1fr); gap:16px}
    .form-group--full {grid-column:1}
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* gray scale */
        --gray-base: #fff;
        --gray-subtle: #bdbdbd;
        --gray-soft: #bdbdbd;
        /* semantic colors */
        --color-primary: #8DABEC;
        --color-up: #ff5f5f;
        --color-down: #5897ff;
        --color-flat: #bdbdbd;
    }
    html {background: #000}
    .header__logo > a,
    .header__lang::before,
    .header__allmenu-btn::before,
    .allmenu__close::before,
    .index-view__file-btn::before,
    .icon--attach,
    .icon-attachment,
    .icon-file,
    .icon-file-x,
    .pagination__btn--prev::before,
    .pagination__btn--next::before,
    .icon-download {filter:invert()}
    .main-benchmark__pagination .splide__pagination__page {background-color:#555}
    .main-benchmark__pagination .splide__pagination__page.is-active {background-color:#fff}
    .header,
    .header__inner {border-bottom-color:#323235}
    .header__inner::before {background:rgba(0, 0, 0, .8)}
    .allmenu__inner {background:#000}
    .benchmark-card,
    .vcard {background:#1c1c1e}
    .index-card,
    .stock-card,
    .index-view__file-btn,
    .research-card,
    .governance__card,
    .governance__info-box,
    .pagination__btn:hover:not(:disabled) {border-color:#1c1c1e; background:#1c1c1e}
    .btn-pill {border:none; background:#444}
    .governance__file-btn {border:none; background:#000}
    .chip-nav__btn {background-color:#444}
    .chip-nav__btn:not(.on):active {background-color:#707070}
    .chip-nav__btn.on {color:#111}
    .stock-up .icon-stock-arrow {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23ff5f5f' d='M7.168 4.748a1 1 0 0 1 1.664 0l4.131 6.197a1 1 0 0 1-.831 1.555H3.869a1 1 0 0 1-.833-1.555z'/%3E%3C/svg%3E")}
    .stock-down .icon-stock-arrow {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.16795 11.2519C7.56377 11.8457 8.43623 11.8457 8.83205 11.2519L12.9635 5.0547C13.4066 4.39015 12.9302 3.5 12.1315 3.5H3.86852C3.06982 3.5 2.59343 4.39015 3.03647 5.0547L7.16795 11.2519Z' fill='%235897ff'/%3E%3C/svg%3E")}
    .stock-flat .icon-stock-arrow {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Crect x='3' y='7' width='10' height='2' rx='1' fill='%23bdbdbd'/%3E%3C/svg%3E")}
    .pagination__select {border:none; background-color:#1c1c1e; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E")}
    .datatable,
    .board-view__header,
    .index-view__top,
    .rank-grid__head {border-color:#707070}
    .rank-grid__th,
    .rank-grid__row,
    .rank-grid__body .rank-grid__row:first-child {border-color:#323235}
    .datatable thead th,
    .datatable tbody tr,
    .board-view__body,
    .board-view__paging-item,
    .board-view__content th,
    .board-view__content td,
    .board-view__content blockquote,
    .governance__list-wrap,
    .governance__list-item,
    .governance__empty,
    .governance__title,
    .index-view__chart-item + .index-view__chart-item,
    .board-list__item,
    .board-list__empty,
    .board-list__item:first-child {border-color:#323235}
    .governance__list-header {background:#1c1c1e; border-color:#323235}
    .board-view__content hr {background:#323235}
    .board-view__section-box {background:#1c1c1e}
    .btn-feedback {background:#fff; color:#111}
    .btn-feedback::before {filter:invert()}
    .governance__download-item {border:none; background:#1c1c1e}
    .governance__download-item:hover {background:#444}
    .board-view__content th {background:#444}
    .board-view__file {background:#1c1c1e}
    .board-view__index-badge {background:#0D1D44}
    .board-list__header {background:#1c1c1e; border-color:#323235}
    .board-list__th {color:#fff}
    .governance__info-mail a::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%238DABEC' stroke-linecap='round' stroke-linejoin='round' d='M14.334 12 9.905 8m-3.81 0-4.428 4m-.333-7.333 5.443 3.81c.441.309.661.463.901.523.212.052.433.052.645 0 .24-.06.46-.214.901-.523l5.443-3.81M4.534 13.333h6.933c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874c.218-.427.218-.987.218-2.108V5.867c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874c-.427-.218-.988-.218-2.108-.218H4.534c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874c-.218.428-.218.988-.218 2.108v4.266c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.428.218.988.218 2.108.218'/%3E%3C/svg%3E")}
    .bond-tab__btn {border-color:#323235; background:#000}
    .bond-tab__btn:active:not(.on):not(.is-disabled) {background:#1c1c1e}
    .bond-tab__btn.on {border-color:#fff}
    .bond-tab-select__input {border:none; background:#1c1c1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 20px 20px; appearance:none; cursor:pointer}
    .board-view__index-link::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%238dabec' stroke-linecap='round' stroke-linejoin='round' d='m6 12 4-4-4-4'/%3E%3C/svg%3E")}
    /* Modal dark mode */
    .modal__container {background:#1c1c1e}
    .modal__header {border-color:#707070}
    .modal__close {filter:invert()}
    .modal__notice {background:#0D1D44}
    .form-input,
    .form-textarea {border-color:#323235; background:#000}
    .form-input:focus,
    .form-textarea:focus {border-color:#707070}
    .form-agreement {background:#000; border-color:#323235}
    .btn-submit {border-color:#323235; background:#000}
    .btn-submit:not(:disabled) {background:#fff; border-color:#fff; color:#111}
    .stock-card__badge {border-color:#323235; color:#fff}
    #chartControl + div,
    #kediChartArea {background:#000 !important}
    @media (max-width: 767.98px) {
        .datatable-responsive::-webkit-scrollbar-track {background:#1c1c1e}
        .datatable-responsive::-webkit-scrollbar-thumb {background:#707070}
    }
    @media screen and (min-width: 768px) {
        .chip-nav__btn:not(.on):hover {background-color:#707070}
        .bond-tab__btn:hover:not(.on):not(.is-disabled) {background:#1c1c1e}
    }
}