.container {display:flex; justify-content:center;margin-top : 10px;}
.inner-container {display:flex; flex-wrap:wrap; gap:20px; width:100%; max-width:960px;}
.left-panel {flex:2; background:#fff; padding:20px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.08); display:flex; flex-direction:column;}
.panel-header {display:flex; justify-content:space-between; align-items:flex-start;}
.left-panel h2 {margin:0; font-size:1.2rem;}
.left-panel .price {font-size:1.8rem; font-weight:bold; margin-top:5px;}
.left-panel .change {font-size:1rem; margin-left:10px;}
.left-panel .change.up {color:#e74c3c;}
.left-panel .change.down {color:#3498db;}
.left-panel #companyName a {position: relative;padding-right: 14px;font-weight: bold;}
.left-panel #companyName a::after {content: '›';position: absolute;right: 0;top: 50%;transform: translateY(-50%);}

.button-group {display:flex; gap:5px; flex-wrap:wrap;}
.button-group button {padding:5px 12px; border:none; border-radius:5px; font-weight:bold; cursor:pointer; font-size:0.85rem;}
.button-group button.buy {background:#e74c3c; color:#fff;}
.button-group button.sell {background:#3498db; color:#fff;}
.button-group button.time-btn {background:#ddd; color:#333;}
.button-group button.time-btn.active {background:#3498db; color:#fff;}

#chart-container {position:relative; width:100%; height:302px; margin-top:10px;border: 1px solid #ccc;box-sizing: border-box;}
.info-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin: 0 0 15px 0;}
.info-card {background:#f9f9f9; padding:10px; border-radius:6px; text-align:center; font-size:0.85rem; box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.info-card span {display:block; font-weight:bold; margin-top:5px;}

.right-panel {flex:1; background:#fff; padding:15px; border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.08);}

.right-panel .stock-filter {display: inline-flex;gap: 4px;padding: 4px;border-radius: 12px;background: #f2f4f6;margin-bottom: 10px;}
.right-panel .stock-filter button {min-width: 56px;padding: 6px 14px;border: none;border-radius: 10px;background: transparent;font-size: 13px;font-weight: 600;color: #555;cursor: pointer;}
.right-panel .stock-filter button.active {background: #ffffff;color: #111;box-shadow: 0 1px 3px rgba(0,0,0,0.08);}

.stock-list {display:flex; flex-direction:column; gap:8px; max-height: 1100px; overflow-y:scroll;}
.stock-item {position: relative;display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:6px; background:#f9f9f9; cursor:pointer; transition:background 0.2s;}
.stock-item.my {border: 1px solid lightblue}
.stock-item.view {background:#ececec;border: 1px solid #000}
.stock-item:hover {background:#ececec;}
.stock-item .badge-new {position: absolute;top: 1px;left: 1px;padding: 2px 5px;font-size: 9px;font-weight: 700;line-height: 1;color: #fff;background: #ff3b30;border-radius: 6px;pointer-events: none;}
.stock-name {font-weight:bold; font-size:0.9rem;}
.stock-name div {font-size:0.6rem;font-weight: 400;}
.stock-price {display:flex; flex-direction:column; align-items:flex-end; font-size:0.9rem;}
.price {font-weight:bold;}
.change {font-size:0.8rem;text-align: right;}
.price.up, .change.up {color:#e74c3c;}
.price.down, .change.down {color:#3498db;}

/* 종목명 + 매물수 묶음 */
.title-wrap {display: flex;align-items: center;gap: 10px;}

/* 매물수 카드 */
.order-card {display: flex;align-items: center;padding: 4px 10px;background: #f5f6f8;color: #000;border-radius: 6px;font-size: 12px;line-height: 1;white-space: nowrap;}

/* 상세 정보 헤더 */
.info-header {display: flex;justify-content: space-between;align-items: center;margin: 12px 0 6px;font-weight: 600;}
.info-toggle {font-size: 12px;border: none;background: none;cursor: pointer;color: #666;}

/* 추가 정보 */
.add-info {margin-top: 20px;}
.add-info h3 {margin-bottom: 12px;}

/* 내주식 */
.add-info.my-ownnum {background: #fff;border-radius: 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);padding: 20px;}
.add-info.my-ownnum .card-header h3 {margin: 0 0 16px 0;font-size: 16px;font-weight: 600;}
.add-info.my-ownnum .card-body {display: flex;flex-direction: column;gap: 16px;}

.add-info.my-ownnum .my-stock-item {display: flex;justify-content: space-between;align-items: center;}
.add-info.my-ownnum .my-stock-item .stack {display: flex;flex-direction: column;gap: 6px;width: 100%;}
.add-info.my-ownnum .my-stock-item .row {display: flex;justify-content: space-between;align-items: center;}
.add-info.my-ownnum .my-stock-item .row #stockMyTotal {font-size: 12px;}
.add-info.my-ownnum .my-stock-item .row .up {color:#e74c3c;}
.add-info.my-ownnum .my-stock-item .row .down {color:#3498db;}

.add-info.my-ownnum .label {font-size: 13px;color: #777;}
.add-info.my-ownnum .value {font-size: 15px;font-weight: 600;color: #111;}

.add-info .info-tabs {display: flex;gap: 6px;margin-bottom: 12px;background: #f9f9f9;padding: 5px;border-radius: 6px;}
.add-info .tab-btn {flex: 1;padding: 8px 0;border : 0;border-radius: 6px;cursor: pointer;font-size: 13px;text-align: center;font-weight: bold;}
.add-info .tab-btn:hover,
.add-info .tab-btn.active {background: #fff;}

/* 증권, 거래 소식 */
.add-info .tab-content {display: none;}
.add-info .tab-content.active {display: block;}
.add-info .news-list {list-style: none;padding: 0;margin: 0;}
.add-info .news-list li {display: flex;justify-content: space-between;align-items: center;padding: 8px 4px;border-bottom: 1px solid #eee;font-size: 13px;}
.add-info .news-time {flex: 0 0 55px;color: #999;font-size: 12px;text-align: right;align-items: center;justify-content: flex-end;}

/* 주주목록 */
.add-info .shareholders-list {list-style: none;padding: 0;margin: 0;}
.add-info .shareholders-list li {display: grid;grid-template-columns: 2fr 1fr 1fr;align-items: center;padding: 10px 8px;border-radius: 6px;font-size: 0.9rem;transition: background 0.15s ease;background:#f9f9f9}
.add-info .shareholders-list li + li {margin-top: 4px;}
.add-info .shareholders-list li:hover {background: #f5f6f8;}
.add-info .shareholders-list .name {font-weight: 500;}
.add-info .shareholders-list .ratio {text-align: right;font-weight: 600;color: #e74c3c;}
.add-info .shareholders-list .count {text-align: right;color: #666;}


@media (max-width:960px) and (min-width:801px){
    .inner-container {flex-direction:row;}
}
@media (max-width:800px){
    .inner-container {flex-direction:column;}
    .left-panel, .right-panel {width:100%;}
    .stock-list {max-height: 100%;overflow-y: unset;}
}

/* 다크모드 */
body.dark .left-panel, body.dark .right-panel {background:#1f2430; box-shadow:none;}
body.dark .left-panel .change.up, body.dark .add-info.my-ownnum .my-stock-item .row .up {color:#ff6b6b;}
body.dark .left-panel .change.down, body.dark .add-info.my-ownnum .my-stock-item .row .down {color:#4dabf7;}
body.dark .button-group button.buy {background:#ff6b6b;}
body.dark .button-group button.sell {background:#4dabf7;}
body.dark .info-card {background:#3a3a3a;}
body.dark .stock-item {background:#161a20;}
body.dark .stock-item.view {background:#3a3a3a;border: 1px solid #eee}
body.dark .stock-item:hover {background:#3a3a3a;}

body.dark .right-panel .stock-filter {background: #161a20;}
body.dark .right-panel .stock-filter button {color: #aaa;}
body.dark .right-panel .stock-filter button.active {background: #3a3f45;color: #fff;box-shadow: none;}

body.dark .add-info.my-ownnum {background: #161a20;color:#eee;}
body.dark .add-info.my-ownnum .label,
body.dark .add-info.my-ownnum .value{color:#eee;}
body.dark .add-info .info-tabs {background: #161a20;}
body.dark .add-info .news-list li {border-bottom: 1px solid #474747;}
body.dark .add-info .tab-btn:hover,
body.dark .add-info .tab-btn.active {background: #3a3f45;}
body.dark .add-info .shareholders-list li {background: #161a20;}
body.dark .add-info .shareholders-list li:hover {background: #2a2a2a;}
body.dark .add-info .shareholders-list .count {color: #aaa;}