.search-wrapper
  width: 100%
  >.search-form
    position: sticky
    margin-bottom: 8px
    top: 1rem
    height: 40px
    display: flex
    flex-direction: row
    align-items: center
    transition: 0.38s ease-out
    z-index: 0
    border-radius: $border-bar
    color: var(--text-p0)
    background: var(--alpha50)
    &:has(input:focus)
      background: var(--alpha100)
  .search-input
    width: 100%
    line-height: 16px
    box-sizing: border-box
    font-family: $ff-body
    font-size: $fs-13
    padding: 12px 0
    color: var(--text-p0)
  .search-button 
    border-radius: $border-bar
    line-height: 40px
  .search-icon
    width: 44px
    margin-left: 4px
    color: var(--text-p2)
    margin-bottom: 2px
    path[p-id="1562"]
      color: $color-theme
    
  
  &.noresult[searching='true']
    .search-icon
      path[p-id="1562"]
        color: $c-red

  .search-no-result
    display: none
    color: var(--text-p1)
    text-align: center
    font-size: $fs-14
    padding: 2rem
    background: var(--alpha20)
    border-radius: $border-card


  #search-result
    max-height: 60vh
    overflow: scroll
    border-radius: $border-card
    &:empty
      display: none
    .search-result-list
      padding: 0
      margin: 0
      list-style-type: none
    li a
        display: block
        background: var(--alpha20)
        line-height: 1.2
        padding: 0.75rem 1rem
        border-radius: $border-card
        trans1 background
        &:hover
          background: var(--alpha100)
    li+li
        margin-top: 8px
    .search-result-title
      color: var(--text-p1)
      font-weight: 700

    .search-result-content
      overflow: hidden
      color: var(--text-p3)
      margin: .4em auto
      max-height: 13em
      text-align: justify
      font-size: $fs-12
      display: -webkit-box
      -webkit-box-orient: vertical
      overflow: hidden
      -webkit-line-clamp: 2

    .search-keyword
      color: var(--text-p1)
      border-bottom: 1px dashed var(--text-p1)
      font-weight: bold


.search-wrapper.noresult[searching='true']
  .search-no-result
    display: block
    margin-bottom: 8px