/* header */
header {background:#fff; position:fixed; left:0; top:0; width:100%; z-index:1000; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 24px; border-bottom:1px solid #EAEAEA;}
header .header-left {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
header .header-left h1 a img {width:35px;}
header .header-left form {padding:0 14px; gap:14px; width:340px; display:flex; flex-wrap:wrap; align-items:center; border-radius:50px; background:#F3F4F6;}
header .header-left form:before {display:inline-block; content:""; width:16px; height:16px; background:url('../images/icon_search.svg') no-repeat center / cover;}
header .header-left form input {flex:1; min-width:0; height:35px; font-size:13px; font-weight:500; background:none;}
header .header-right {display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
header .header-right .home {width:30px; height:30px; font-size:0; background:url('../images/icon_home.svg') no-repeat center / cover;}
header .header-right .bookmark {display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:13px; font-weight:500; color:#000;}
header .header-right .bookmark:before {filter:brightness(0); display:inline-block; content:""; width:15px; height:15px; background:url('../images/icon_star.svg') no-repeat center / cover;}
header .header-right .setting {filter:brightness(0); display:inline-block; font-size:0; width:18px; height:18px; background:url('../images/icon_setting.svg') no-repeat center / cover;}
header .header-right .member {gap:4px; display:flex; flex-wrap:wrap; align-items:center;}
header .header-right .member a {font-size:12px; color:#111; height:30px; border:1px solid; border-radius:5px; padding:0 10px; display:flex; flex-wrap:wrap; align-items:center;}
header .header-right .member a:first-of-type {color:#2F7CF0; border-color:#2F7CF0;}
header .header-right .member a:last-of-type {color:#4A9764; border-color:#4A9764;}
header .header-right .member a:last-of-type:after {display:none;}
header .header-right .dropdown-box {position:relative;}
header .header-right .dropdown-box .dropdown-btn {display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
header .header-right .dropdown-box .dropdown-btn img {width:28px; height:28px; border-radius:50%; object-fit:cover;}
header .header-right .dropdown-box .dropdown-btn span {font-size:13px; font-weight:500; color:#000;}
header .header-right .dropdown-box .dropdown-inner {position:absolute; right:0; top:calc(100% + 5px); white-space:nowrap; min-width:80px; border-radius:10px; background:#fff; border:1px solid #d9d9d9; padding:15px;}
header .header-right .dropdown-box .dropdown-inner ul li {margin:0 0 3px;}
header .header-right .dropdown-box .dropdown-inner ul li:last-of-type {margin:0;}
header .header-right .dropdown-box .dropdown-inner ul li a {font-size:13px; color:#111;}
header .header-right .dropdown-box .dropdown-inner ul li a:hover {text-decoration:underline;}
header .header-right .dropdown-box.active {z-index:100;}
@media (max-width:991px){
header {padding:10px 15px; gap:10px;}
header .header-left {gap:8px; flex:1; min-width:0;}
header .header-left h1 a img {width:28px;}
header .header-left form {flex:1; min-width:0;}
header .header-right {gap:10px;}
header .header-right .home {width:24px; height:24px;}
header .header-right .bookmark {gap:0; font-size:0;}
header .header-right .bookmark:before {width:20px; height:20px;}
header .header-right .setting {width:20px; height:20px;}
header .header-right .member a {font-size:13px;}
header .header-right .dropdown-box .dropdown-btn span {display:none;}
header .header-right .dropdown-box .dropdown-inner ul li a {font-size:12px;}
}

/* footer */
footer {display:none;}
@media (max-width:991px){
footer {position:fixed; left:0; bottom:0; width:100%; background:#fff; border-top:1px solid #d9d9d9; z-index:1000; display:block; padding:10px;}
footer ul {display:flex; flex-wrap:wrap; align-items:center;}
footer ul li {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
footer ul li a {display:block; font-size:0; width:24px; height:24px; background-size:cover; background-position:center;}
footer ul li.menu1 a {background-image:url('../images/icon_menu_01.svg');}
footer ul li.menu2 a {background-image:url('../images/icon_menu_02.svg');}
footer ul li.menu3 a {background-image:url('../images/icon_menu_03.svg');}
footer ul li.menu4 a {background-image:url('../images/icon_menu_04.svg');}
footer ul li.menu5 a {background-image:url('../images/icon_menu_05.svg');}
}

/* section */
@media (max-width:991px){
section {padding:0 0 45px;}
}

/* main-box */
.main-box {display:flex; height:100vh; padding:55px 0 0; overflow:hidden;}
.main-box .main-content {flex:1; min-width:0; height:100%; overflow-y:auto;}
.main-box .main-content .content-inner {padding:10px; min-width:500px; overflow-x:auto;}
.main-box .main-content .content-inner .inner-white {background:#fff; border:1px solid #EDF0F4; padding:20px; border-radius:15px;}
.main-box .main-side {width:375px; height:100%;background:#fff; position:relative; flex-shrink:0; overflow-x:auto;}
.main-box .main-side .box {width:100%; height:100%; min-width:300px; display:flex; flex-direction:column; overflow:hidden;}
.main-box .main-side .side-head {width:100%;}
.main-box .main-side .side-body {width:100%; height:100%; overflow-y:auto; padding:15px;}
.main-box .main-side .side-member {position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:rgba(255,255,255,0.5); backdrop-filter:blur(5px);}
.main-box .main-side .side-member .inner {width:calc(100% - 30px); max-width:270px; border:1px solid #009689; box-shadow:5px 5px 20px rgba(0,0,0,0.15); background:#fff; border-radius:20px; padding:30px;}
.main-box .main-side .side-member .inner > div {padding:25px 15px; border-radius:20px;}
.main-box .main-side .side-member .inner > div.inner-green {background:#F0FDFA;}
.main-box .main-side .side-member .inner > div p {text-align:center; font-size:13px; font-weight:500; word-break:keep-all; margin:0 0 10px;}
.main-box .main-side .side-member .inner > div .button-box {max-width:130px; margin:0 auto;}
.main-box .main-side-button {width:17px; height:100%; font-size:0; cursor:col-resize; flex-shrink:0; background:#f2f2f2 url('../images/img_side_resize.svg') no-repeat center / 7px auto;}
@media (max-width:991px){
.main-box {height:auto; padding:55.5px 0 0;;}
.main-box .main-content .content-inner {min-width:0;}
.main-box .main-content .content-inner .inner-white {padding:0; border-radius:10px;}
.main-box .main-side {display:none;}
.main-box .main-side-button {display:none;}
}

/* 종목 헤더 */
.stock-box {min-width:320px; overflow-x:auto; white-space:nowrap;}
.stock-name { font-size:22px; font-weight:700; color:#111; letter-spacing:-0.5px; }
.stock-name span { font-size:13px; font-weight:400; color:#999; margin-left:8px; }
.stock-price { display:flex; align-items:baseline; gap:10px; margin:6px 0 0; }
.stock-price .price { font-size:28px; font-weight:600; color:#111; }
.stock-price .change { font-size:14px; font-weight:500; padding:3px 8px; border-radius:4px; }
.stock-price .change.up { color:#E22926; background:rgba(226,41,38,0.08); }
.stock-price .change.down { color:#2563EB; background:rgba(37,99,235,0.08); }

/* 기간 탭 */
.period-tabs { display:flex; gap:4px; margin:0 0 12px; background:#EDEEF0; border-radius:8px; padding:3px; }
.period-tabs button { flex:1; padding:8px 0; border:none; background:transparent; color:#888; font-size:13px; font-weight:500; border-radius:6px; cursor:pointer; transition:all 0.2s; font-family:'Noto Sans KR',sans-serif; }
.period-tabs button.active { background:#fff; color:#111; box-shadow:0 1px 4px rgba(0,0,0,0.08); }
.period-tabs button:hover:not(.active) { color:#555; }

/* 차트 컨테이너 */
.chart-wrap { background:#fff; border-radius:12px; overflow:hidden; border:1px solid #E5E7EB; margin:0 0 20px; }
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid #F0F0F0; }
.chart-type-tabs { display:flex; gap:2px; }
.chart-type-tabs button { padding:5px 12px; border:none; background:transparent; color:#999; font-size:12px; font-weight:500; border-radius:4px; cursor:pointer; transition:all 0.2s; font-family:'Noto Sans KR',sans-serif; }
.chart-type-tabs button.active { background:#F0F4FF; color:#2563EB; }
.chart-indicators { display:flex; gap:6px; }
.chart-indicators button { padding:5px 10px; border:1px solid #E5E7EB; background:transparent; color:#999; font-size:11px; font-weight:500; border-radius:4px; cursor:pointer; transition:all 0.2s; font-family:'Noto Sans KR',sans-serif; }
.chart-indicators button.active { border-color:#2563EB; color:#2563EB; background:rgba(37,99,235,0.04); }
#chart-container { width:100%; height:400px; }
#volume-container { width:100%; height:100px; border-top:1px solid #F0F0F0; }

/* 호가 테이블 */
.orderbook-row { display:flex; align-items:center; padding:7px 16px; position:relative; }
.orderbook-row .bar { position:absolute; top:0; height:100%; opacity:0.07; }
.orderbook-row .bar.ask { right:0; background:#2563EB; }
.orderbook-row .bar.bid { left:0; background:#E22926; }
.orderbook-row .price { flex:1; font-size:13px; font-weight:500; position:relative; z-index:1; }
.orderbook-row .price.ask { color:#2563EB; text-align:right; }
.orderbook-row .price.bid { color:#E22926; }
.orderbook-row .qty { width:80px; font-size:12px; color:#999; text-align:right; position:relative; z-index:1; }
.orderbook-center { padding:10px 16px; text-align:center; font-size:16px; font-weight:600; color:#111; border-top:1px solid #F0F0F0; border-bottom:1px solid #F0F0F0; background:#FAFAFA; }

/* 체결 테이블 */
.trade-row { display:flex; align-items:center; padding:7px 16px; border-bottom:1px solid #F8F8F8; }
.trade-row .time { width:70px; font-size:12px; color:#999; }
.trade-row .t-price { flex:1; font-size:13px; font-weight:500; }
.trade-row .t-price.up { color:#E22926; }
.trade-row .t-price.down { color:#2563EB; }
.trade-row .t-qty { width:80px; font-size:12px; color:#999; text-align:right; }

@media (max-width:640px) {
    .summary-grid { grid-template-columns:repeat(2,1fr); }
    #chart-container { height:300px; }
    .stock-price .price { font-size:22px; }
}