body {
    background: #2f4f4f; /* 배경색 */
    font-family: "Poppins", sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}


.sc {
    text-align: center;
    margin-bottom: 20px;
}

.sc .sc-title {
    font-size: 45px;
    font-weight: 600;
    color: #00ffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 10px;
}

.sc .sc-description {
    font-size: 20px;
    font-weight: 500;
    color: #cccccc;
    margin-bottom: 10px;
}

.sc .sc-description-one {
    font-size: 18px;
    font-weight: 500;
    color: #cccccc;
    margin-bottom: 30px;
}


.symbol-chart {
    display: grid;
    grid-template-columns: repeat(13, 70px);
    grid-template-rows: repeat(13, 70px);
    gap: 10px;
    justify-content: center;
    align-items: center;
    grid-template-areas:

      "el1 el2 el3 . . . . . . . el4 . . "
      "el5 . . . . . . . . . el6 . . "
      "el7 el8 el9 . . . . . . . el10 . ."
      ". . el11 . . . . . . . el12 . ."
      "el13 el14 el15 . . . . . . . el16 el17 el18"
      ". . . . . . . . . . . . ."
      "el19 . el20 . . el21 . el22 . . el23 el24 el25"
      "el26 . el27 . el28 . el29 . el30 . el31 . ."
      ". el32 . . el33 . . . el34 . el35 el36 el37"
      ". el38 . . . el39 . el40 . . el41 . ."
      ". el42 . . . . el43 . . . el44 el45 el46"
      ". . . . . . . . . . . . ."
      "el47 el48 el49 el50 el51 el52 el53 el54 . . . . .";




}

.symbol-chart-element {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #3d0042;
    color: white;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
    cursor: pointer;
    border-width: 3px;
    border-style: solid;
}

.symbol-chart-element .symbol-chart-element-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    height: 100%;
    transition: inherit;
    background: inherit;
    color: inherit;
}

.symbol-chart-element .title {
    font: 700 14px "Poppins", sans-serif;
    margin: 0 0 0.15em;
}

.symbol-chart-element .description {
    font: 500 8px "Poppins", sans-serif;
}


.symbol-chart-element:nth-child(1) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #ff4500, #ff8c00) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(2) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #ff4500, #ff8c00) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(3) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #ff4500, #ff8c00) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(4) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #ff4500, #ff8c00) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(5) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #ff4500, #ff8c00) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(6) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(7) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(8) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(9) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(10) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(11) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(12) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(13) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(14) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(15) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(16) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(17) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(18) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(19) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(20) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(21) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(22) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(23) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(24) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(25) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(26) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(27) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(28) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(29) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(30) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(31) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(32) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(33) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(34) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(35) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(36) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(37) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(38) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(39) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(40) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(41) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(42) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(43) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(44) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(45) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(46) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(47) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(48) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(49) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(50) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(51) {
    background: #f4a503;
    border-image: linear-gradient(to bottom right, #ff8c00, #ffa500) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(52) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(53) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}

.symbol-chart-element:nth-child(54) {
    background: #4d8cc6;
    border-image: linear-gradient(to bottom right, #4169e1, #1e90ff) 1;
    color: #00ffff;
}


.symbol-chart-element:hover {
    transform: scale(1.1);
    z-index: 10;
    background: inherit;
}

.symbol-chart-element:hover .symbol-chart-element-inner {
    background: inherit;
}

.symbol-chart-element:hover .title,
.symbol-chart-element:hover .description {
    color: inherit;
}


.popup-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 66%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.popup {
    background: #f2f0d9;
    padding: 110px;
    border-radius: 20px;
    text-align: center;
    max-width: 250px;
    width: 80%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.popup h2 {
    margin: 0 0 15px;
    font-size: 24px;
    color: #333;
}

.popup p {
    font-size: 16px;
    margin: 15px 0;
    color: #333;
    background: #e3eeee;
    padding: 15px;
    border-radius: 10px;
    overflow-y: auto;
    max-height: 150px;
}

.popup button {
    padding: 10px 20px;
    border: none;
    background: #3bac8e;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 10px;
}

.popup button:hover {
    background: #2980b9;
}

.open-popup {
    display: flex; 
}