:root {
    --main-black-color: #28282B;
    /*일반 글자 색상*/
    --main-pink-color: #f506ada6;
    /*포인트 색상1*/
    --main-light-pink-color: #ffc0cb;
    /*주요 색상*/
    --main-green-color: #06f5a5a6;
    /*포인트 색상2*/
    --main-light-grey-color: #f3f3f3;
    --main-grey-color: #ccc;
    --main-dark-grey-color: #888888;
    --main-middle-grey-color: #9e9e9e;
    --main-light-light-pink-color: LavenderBlush;
    --main-middle-pink-color:#ff86da;
    --main-gradient-color: linear-gradient(120deg, rgba(255, 218, 225, 1) 0%, rgba(255, 192, 203, 1) 35%, rgba(255, 174, 218, 1) 70%, rgba(255, 134, 218, 1) 100%);
    /* --main-gradient-color:linear-gradient(38deg, rgba(255,194,204,1) 0%, rgba(255,165,189,1) 46%, rgba(255,133,179,1) 73%, rgba(255,117,175,1) 87%, rgba(255,98,173,1) 100%); */
  }

  /* 어비미미체 */
  @font-face {
    font-family: 'UhBeeMiMi-WebSubsetFont';
    src: url('/font/UhBeeMiMi-subset.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

  /* 강원교육모두체 */
  @font-face {
    font-family: 'GangwonEdu_OTF_Light';
    src: url('/font/GangwonEdu_OTF_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
  }

  /* Pretendard Variable */
  @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");



  body {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    font-family: "Pretendard Variable", "Pretendard", "-apple-system", "BlinkMacSystemFont", system-ui, "Roboto", "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    font-weight: 300;
    color: var(--main-black-color);
    word-break: keep-all;
    background: rgb(247,242,232);
    background: -moz-linear-gradient(163deg, rgba(247,242,232,1) 0%, rgba(249,240,242,1) 7%, rgba(249,240,239,1) 15%, rgba(246,247,232,1) 26%, rgba(245,255,250,1) 37%, rgba(247,242,232,1) 48%, rgba(243,243,243,1) 57%, rgba(249,240,242,1) 66%, rgba(246,247,232,1) 77%, rgba(245,255,250,1) 89%, rgba(247,242,232,1) 100%);
    background: -webkit-linear-gradient(163deg, rgba(247,242,232,1) 0%, rgba(249,240,242,1) 7%, rgba(249,240,239,1) 15%, rgba(246,247,232,1) 26%, rgba(245,255,250,1) 37%, rgba(247,242,232,1) 48%, rgba(243,243,243,1) 57%, rgba(249,240,242,1) 66%, rgba(246,247,232,1) 77%, rgba(245,255,250,1) 89%, rgba(247,242,232,1) 100%);
    background: linear-gradient(163deg, rgba(247,242,232,1) 0%, rgba(249,240,242,1) 7%, rgba(249,240,239,1) 15%, rgba(246,247,232,1) 26%, rgba(245,255,250,1) 37%, rgba(247,242,232,1) 48%, rgba(243,243,243,1) 57%, rgba(249,240,242,1) 66%, rgba(246,247,232,1) 77%, rgba(245,255,250,1) 89%, rgba(247,242,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f2e8",endColorstr="#f7f2e8",GradientType=1);
  }


  ul,
  ol,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  ::selection {
    background-color: var(--main-green-color);
    color: var(--main-black-color);
  }

  /* 스크롤바 */
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--main-light-pink-color);
  }

  ::-webkit-scrollbar-track {
    background-color: white;
  }



  /* 푸터 제외한 영역 */
  .without-footer {
    box-shadow: 0px 4px 12px var(--main-grey-color);
  }

  /* 상단에 고정하는 바 */
  .bar {
    width: 100%;
    height: 30px;
    background: var(--main-gradient-color);
    position: sticky;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 0px 0px 14px var(--main-pink-color);
    font-size: 12px;
    font-weight: 700;
    z-index: 1;
  }

  .bar a {
    text-decoration: none;
    color: inherit;
  }


  header {
    text-align: center;
    padding-top: 80px;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
  }

  
  #logo {
    width: 160px;
  }



/* 시인책 소개 */
  .description {
    margin: 0px 0px 20px 0px;
    font-weight: 700;
    font-size: calc(1.125rem);
    line-height: 1.6em;
    font-family: 'GangwonEdu_OTF_Light';
  }

  .description .word-line {
    opacity: 0;
    }

  .word-line {
    display: inline-block;
  }

  .word-line:first-child {
    background: linear-gradient(109.6deg, #30CFD0 11.2%, #76bbdc 91.1%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
  }

  .word-line:nth-child(2) {
    background: linear-gradient(109.6deg, #76bbdc 11.2%, #c29ced 91.1%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
  }

  .word-line:nth-child(3) {
    background: linear-gradient(109.6deg, #c29ced 11.2%, #f787f7 91.1%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;   
  }



  input {
    display: none;
  }



  /* 탭 스타일 */
  nav {
    display: flex;
    align-items: center;
    padding-top: 0x;
    background-color: white;
  }

  .tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--main-grey-color);
    cursor: pointer;
    background-color: transparent;
    border-bottom: solid 3px transparent;
    transition: 0.3s ease;
    }

  .tab i {
    color: var(--main-pink-color);
    /*아이콘 색상*/
  }

  .tab:hover {
    background-color: var(--main-light-grey-color);
    border-bottom: solid 3px transparent;
  }

  /* 선택된 탭 */
  #tab1:checked~nav label[for="tab1"],
  #tab2:checked~nav label[for="tab2"] {
    color: var(--main-dark-grey-color);
    border-bottom: solid 3px transparent;
    /* border-image: linear-gradient(65deg, rgba(255,192,203,1) 0%, rgba(245,132,255,1) 0%, rgba(255,106,209,1) 70%) 1; */
    border-image: linear-gradient(110.4deg, rgb(255, 192, 203) 36%, rgb(255,134,218) 82.4%) 1;
  }

  /* 컨텐트 영역 */
  .tabcontent {
    display: none;
    padding: 40px 20px 40px 20px;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
  }

  #tab1:checked~.tabcontent1,
  #tab2:checked~.tabcontent2 {
    display: block;
  }


  /* 리스트 제목 */
  .list-heading {
    font-size: 18px;
    text-align: center;
    font-family: 'UhBeeMiMi-WebSubsetFont';
    font-weight: 400;
    color: var(--main-dark-grey-color);
  }

  .list-heading::before {
    content: " . ݁₊ ⊹ . ݁˖ . ݁ ";
    color: var(--main-grey-color);
  }

  .list-heading::after {
    content: " . ݁˖ . ݁. ݁⊹ ݁₊ ݁.";
    color: var(--main-grey-color);
  }


  /* 시인목록 */
  .poet-list {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 20px 0px;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    font-family: 'GangwonEdu_OTF_Light', 'GangwonEdu_OTFBoldA';
    font-weight: 300;
    font-size: 20px;
  }

  .poet-list li {
    width: 200px;
    /* Adjust the width as needed */
    height: 60px;
    /* Adjust the height as needed */
    margin: 10px 20px;
    border: 0px dotted var(--main-black-color);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .poet-list li a {
    text-decoration: none;
    color: var(--main-black-color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .poet-list li a:hover {
    color: var(--main-pink-color);
    font-weight: 700;
    transition: all 300ms ease;
    transform: translateY(-0.1rem);
  }

  .poet-list li a:active {
    color: var(--main-green-color);
    font-weight: 700;
  }




  /*
---------------------------------------
hover effect 15
---------------------------------------
*/

  .SMN_effect-15 a:before,
  .SMN_effect-15 a:after {
    display: inline-block;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
    -moz-transition: -moz-transform 0.3s, opacity 0.2s;
    transition: transform 0.3s, opacity 0.2s;
  }

  .SMN_effect-15 a:before {
    margin-right: 10px;
    content: '[';
    display: inline-block;
    font-size: 24px;
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    transform: translateX(20px);
    color: var(--main-green-color);
  }

  .SMN_effect-15 a:after {
    margin-left: 10px;
    content: ']';
    font-size: 24px;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
    color: var(--main-green-color);
  }

  .SMN_effect-15 a:hover:before,
  .SMN_effect-15 a:hover:after,
  .SMN_effect-15 a:focus:before,
  .SMN_effect-15 a:focus:after {
    opacity: 1;
    -webkit-transform: translateX(0px);
    -moz-transform: translateX(0px);
    transform: translateX(0px);
  }






  /* 강연목록 */
  .program-list {
    margin: 50px 0px;
  }
 /* 너비가 800px안될 때(mobile). 기본값 */

  @media (min-width: 800px) {
    .list-margin-plus {
      margin: 50px 20px;
    }
  }
  /* 너비 최소값이 800px이상일 때(PC), program-list에 양옆 마진 추가로 주기 */

  .year-division {
    margin-top:50px
    /*년도별 구분*/
  }

  .year-heading {
    font-size: 16px;
  }

  .accent {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, var(--main-green-color) 40%);
  }

  .program-list-by-year {
    font-size: 20px;
    font-family: 'GangwonEdu_OTF_Light';
  }

  .program-list-by-year {
    margin-left : 20px;
  }

  .program-list-by-year li::marker {
    content: '✦';
    /*리스트의 dot종류 바꾸기*/
    color: pink;
  }

  .program-list-by-year li {
    padding-left: 10px;
    /* li요소와 marker 사이의 여백 */
  }


  /* 아래 링크 수정하기 */

  .program-list a {
    color: var(--main-black-color);
    text-decoration: none;
    display: block;
    /*link클릭영역 확장*/
    padding: 15px 0px;
    /*li요소 사이의 여백*/
  }

  .program-list a:hover {
    color: var(--main-pink-color);
    text-decoration: underline;
    transition: all 200ms ease, opacity 0.2s;
    transform: translateY(-0.1rem);
    font-weight: 700;
  }

  .program-list a:hover::after {
    content: '\f0d9';
    padding-left: 10px;
    font-family: 'fontAwesome';
    color: var(--main-green-color);
    text-decoration: none;
    display: inline-block;
  }

  .program-list a:active {
    color: var(--main-green-color);
    text-decoration: none;
  }





  /* 바닥글 */
  footer {
    margin: 0;
    padding: 40px 0px 50px 0px;
    background-color: transparent;
    font-size: 0.8em;
    color: var(--main-dark-grey-color);
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    /* Add this line to set the spacing */
  }

  /* 뒤로가기 링크버튼 */
  .back-button {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    background: var(--main-gradient-color);
    margin-top: 40px;
  }


  .back-button i {
    margin-right: 8px;
  }

  .info {
    margin-top: 40px;
  }



  /* 링크버튼 안먹히게 하기 */
  .disableClick {
    pointer-events: none;
    text-decoration: none !important;
  }

  /*요소 숨기기*/
  .hidden {
    display: none;
  }