:root{
    --bg-dark:#0d1117;
    --card-bg:#161b22;
    --card-hover:#1c2128; /* hover 시 배경색 */

    /* ✅ 은은한 샴페인 골드 톤으로 변경 (똥색 탈출) */
    --accent-gold:#f3e5ab;
    --accent-gold-dim:rgba(243, 229, 171, 0.7);

    --text-white:#f0f6fc;
    --text-soft:#e6edf3;
    --text-gray:#8b949e;
    --border:#30363d;
    --line:rgba(255,255,255,.07);
    --shadow:0 10px 26px rgba(0,0,0,.25);
    --r:12px;
    --chg-hot:#ffb3b3;
    --chg-normal:#e6edf3;
}

body{
    background:var(--bg-dark);
    color:var(--text-white);
    font-family:'Pretendard', -apple-system, sans-serif;
    margin:0;
    padding:16px;
}

.section{
    max-width:1200px;
    margin:100px auto 0;
    border:1px solid var(--line);
    border-radius:calc(var(--r) + 6px);
    padding:20px;
    /* 메인 배경 그라데이션도 골드 톤으로 은은하게 */
    background: linear-gradient(180deg, rgba(243,229,171,.02), rgba(0,0,0,0));
}

/* 📂 상단 메뉴 */
.menu-container { position: relative; display: inline-block; margin-bottom: 6px; cursor: pointer; }
.title-wrap { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; transition: all 0.2s; }
.title-wrap:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(243,229,171,.4); }
.title{ font-size:1.5rem; font-weight:900; }
.arrow-icon { font-size: 0.9rem; color: var(--accent-gold); background: rgba(243,229,171,.1); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform 0.3s; }

.update-time { font-size: 0.95rem; color: var(--text-gray); margin-bottom: 22px; padding-left: 14px; }

.dropdown-menu { position: absolute; top: 110%; left: 0; z-index: 100; background: #21262d; border: 1px solid var(--border); border-radius: 10px; width: 260px; box-shadow: 0 12px 28px rgba(0,0,0,0.5); display: none; overflow: hidden; }
.dropdown-menu.show { display: block; animation: slideIn 0.2s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.menu-item { padding: 14px 16px; font-size: 1.05rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.menu-item:hover { background: var(--card-hover); color: var(--accent-gold); }
.menu-item.active{ background: rgba(243,229,171,.08); color: var(--accent-gold); }

.grid{ display:grid; gap:18px; grid-template-columns:1fr; }
@media(min-width:850px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* ✅ 카드 디자인 최적화 (버튼 역할 + 미세 배경색) */
.card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:22px;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow);
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
    position: relative;

    /* ✅ 눈에 거의 안 띄는 미세한 청회색 테두리 그라데이션 */
    background-image: linear-gradient(135deg, rgba(50, 60, 70, 0.05) 0%, rgba(16, 21, 26, 0) 60%);
}

/* ✅ 상위 3개 은은한 골드 테두리 */
.card:nth-child(-n+3) { border-color: rgba(243, 229, 171, 0.15); }

/* ✅ 마우스 호버 효과: 배경색 변경 + 테두리 골드로 은은하게 강조 + 살짝 떠오름 */
.card:hover {
    border-color: rgba(243, 229, 171, 0.5); /* 은은한 골드 테두리 */
    background-color: var(--card-hover); /* ✅ 바탕색 변경 */
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,.3);
    /* 호버 시 미세 배경 패턴 강화 */
    background-image: linear-gradient(135deg, rgba(60, 75, 90, 0.1) 0%, rgba(16, 21, 26, 0) 70%);
}

.card-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; position: relative; z-index: 2; }
.stock-name{ font-size:1.4rem; font-weight:900; color:var(--text-soft); }
.chg{ font-size:1.8rem; font-weight:950; font-variant-numeric:tabular-nums; color: var(--text-white); }
.chg.hot{ color: var(--chg-hot); }

.meta-row { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
/* ✅ 메타 정보도 은은한 골드로 */
.meta{ font-size:1.05rem; color: var(--accent-gold-dim); font-weight:650; }
.new-high{ font-size:0.95rem; font-weight:800; color:var(--text-soft); }
/* ✅ 아이콘도 은은한 골드로 */
.new-high .icon{ color: var(--accent-gold); margin-right:4px; }

/* ✅ 상세 내용 (클릭 시 펼쳐짐) */
.desc-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    position: relative; z-index: 1;
}

.card.open .desc-container {
    max-height: 250px; /* 상세 내용 높이에 맞춰 자동 조절됨 */
}

.desc{
    margin-top: 20px;
    background: rgba(0,0,0,0.15);
    border-left: 3px solid var(--accent-gold); /* ✅ 상세창 왼쪽 줄도 은은한 골드 */
    padding: 14px;
    border-radius: 0 8px 8px 0;
    font-size: 1.05rem;
    line-height: 1.6;
}
.desc ul{ margin:0; padding-left:18px; }
.desc li{ margin-bottom:6px; color: #e6edf3; list-style-type: disc; }

@media(max-width:600px){
    body { padding: 0; }
    .section { padding: 15px 0; border: none; border-radius: 0; }
    .card { padding: 20px 15px; border-left: none; border-right: none; border-radius: 0; }
    .meta-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}