@charset "utf-8"; 


/* ******************** component ******************** */

/* input */ 
@import "../../component/input-style";

/* 컨텐츠 공용 타이틀 */
@import "../../component/title-style";

/* btn-style */ 
@import "../../component/button-style.scss";

/* normal table */ 
@import "../../component/normal-table.scss";


/* ******************** sub-common ******************** */ 

/* sub-common-cont */
@import "../common/_sub-cont";



/* ******************** RSS ******************** */ 
.rss-wrap {
  position: relative; padding-top: 30px;
  .rss-title {
    text-align: center;
    .tit {
      font-size: 3.3rem; font-weight: 600; padding-bottom: 15px;
    }
    .sub-tit {
      font-size: 1.7rem; padding-bottom: 21px; color: #afafaf; font-weight: 100;
    }
    .desc-txt {
      position: relative; padding-top: 21px; font-size: 1.4rem; line-height: 1.9;
      &:after {
        content: ''; position: absolute; top: 0; left: 50%; margin-left: -15px; width: 30px; height: 1px; background: #999; 
      }
    }
  }

  .rss-list-area {
    margin-top: 60px; border-top: 1px solid #999;
    dl {
      .row {
        display: flex; flex-wrap: wrap; align-items: center; padding: 25px 0; border-bottom: 1px solid #ccc;
        dt {
          width: 200px; font-weight: 600; font-size: 1.6rem; padding-left: 20px;
        }
        dd {
          width: calc(100% - 200px); 
          .url-link {
            font-weight: 500; word-break: break-all; line-height: 1.4;
            &:hover {
              text-decoration: underline; color: #2d74cf;
            }
          }
          .rss-btn-wrap {
            padding-top: 20px;
            .clipboard-wrap {
              position: relative; display: inline-block;
              .btn {
                display: inline-block; margin: 0 2px; padding: 0 15px; border-radius: 3px; font-size: 1.1rem; font-weight: 600; line-height: 28px; border: 1px solid #ccc; box-shadow: 1px 2px 0 #e3e3e3; margin-bottom: 5px;
                .material-icons {
                  display: inline-block; font-size: 13px; padding-left: 3px;
                }
                &.url {
                  .material-icons {
                    font-size: 15px; padding-right: 3px; padding-left: 0;
                  }
                }
                &:hover {
                  border-color: #aaa;
                }
              }
              .clipboard-copy {
                display: none; position: absolute; top: -100%; left: 10%; background-color: #15284C; color: #fff; padding: 7px; border-radius: 3px;
                animation: fadeUp;
                animation-duration: 0.7s;
              }
            }
            .btn {
              display: inline-block; margin: 0 2px; padding: 0 15px; border-radius: 3px; font-size: 1.1rem; font-weight: 600; line-height: 28px; border: 1px solid #ccc; box-shadow: 1px 2px 0 #e3e3e3; margin-bottom: 5px;
              .material-icons {
                display: inline-block; font-size: 13px; padding-left: 3px;
              }
              &.url {
                .material-icons {
                  font-size: 15px; padding-right: 3px; padding-left: 0;
                }
              }
              &:hover {
                border-color: #aaa;
              }
            }
          }
        }
      }
    }
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .rss-wrap {
    .rss-title {
      .tit {
        font-size: 2.5rem;
      }
      .sub-tit {
        font-size: 1.5rem;
      }
      .desc-txt {
        font-size: 1.3rem;
        br {
          display: none; 
        }
      }
    }
    .rss-list-area {
      dl {
        .row {
          padding: 20px 0;
          dt {
            width: 150px; padding-left: 5px; font-size: 1.5rem;
          }
          dd {
            width: calc(100% - 150px);
          }
        }
      }
    }
  }
}

@media (max-width: 475px) {
  .rss-wrap {
    .rss-list-area {
      dl {
        .row {
          padding: 20px 5px; gap: 15px; 
          dt {
            width: 100%; padding-left: 0; font-size: 1.6rem;
          }
          dd {
            width: 100%;
          }
        }
      }
    }
  }
}