@import "../../assets/common/best-reset.css";
@import "../../assets/common/theme.css";
@import "../../assets/common/a11y.css";
@import "../../assets/common/base.css";

@property --text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #121212;
}

:root {
  --text-color: #121212;
  --text-size: 1rem;
  --m-margin: 1.25rem;
  --browser-siez: 31.25rem;
  --input-height: 3rem;
  --input-base-color: #999;
  --input-font-size: 0.875rem;
  --input-base-boder: #dadada;
  --input-focus-boder: #03cf5d;
  --input-focus-bg: #e9f0fd;
  --error: #ff1414;
}

body * {
  color: var(--text-color);
  box-sizing: border-box;
}
body *:focus {
  outline: 1px solid #24388d;
}

/* CSS를 활용하여 레이아웃 및 스타일링을 완성해주세요 */
/* 단위는 모두 rem */

.brand-area {
  position: relative;
  padding-block-start: 7rem;
  margin-block-end: 3.5rem;
  .logo {
    display: block;
    inline-size: 14.375rem;
    margin: 0 auto;
  }
}

.search-area {
  display: flex;
  flex-flow: row wrap;
  gap: 0.625rem;
  margin: 0 auto;

  [class*="items"] {
    margin: 0 var(--m-margin);
    width: 100%;
  }

  fieldset {
    border: 0;
    margin-block-end: 0.625rem;
  }

  form input {
    width: 100%;
    height: 3rem;
    outline: none;
    border: 1px solid var(--input-base-boder);
    padding: 0.875rem;
    font-size: var(--input-font-size);
    font-weight: 400;
    color: var(--input-base-color);

    &:focus {
      border: 1px solid var(--input-focus-boder);
      background: var(--input-focus-bg);
    }
  }

  button.search-login {
    width: 100%;
    height: 3rem;
    background: var(--input-focus-boder);
    border: 0;
    font-size: var(--text-size);
    font-weight: 500;
    color: #fff;
    margin-block-start: 0.625rem;
  }

  /* 기본적으로 오류 메시지 숨김 */
  .error-message {
    display: none;
    color: var(--error);
    font-size: 12px;
    margin-block-start: 0.3125rem;
    padding-inline-start: 0.625rem;
    font-weight: 500;
  }

  /* 입력값이 없을 때 오류 메시지 표시 */
  input:invalid:not(:placeholder-shown) + .error-message {
    display: block;
  }

  /* 입력하면 오류 메시지 숨김 */
  input:valid + .error-message {
    display: none;
  }

  .search-add {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }

  .search-add .keep-login {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    font-size: var(--text-size);
    font-weight: 400;
    color: #121212;

    input[type="checkbox"] {
      appearance: none;
      margin-inline-end: 0.3125rem;
      inline-size: 1.5rem;
      block-size: 1.5rem;
      background: url(../../assets/svg/unchecked.svg) center/cover no-repeat;
    }

    input[type="checkbox"]:checked {
      background: url(../../assets/svg/checked.svg) center/cover no-repeat;
    }

    /* 기본 포커스 제거 */
    input[type="checkbox"]:focus {
      outline: none;
    }

    /* 키보드 포커스 시 아웃라인 표시 */
    input[type="checkbox"]:focus-visible {
      outline: 0.125rem solid #24388d;
      outline-offset: -0.0625rem;
      /* 아웃라인 간격 조절 */
      border-radius: 0.125rem;
    }

    label {
      position: relative;
      inset-block-start: 0.1rem;
    }
  }

  .search-add .security-tab {
    display: none;

    font-size: var(--text-size);
    font-weight: 400;
    color: #121212;

    button {
      background: transparent;
      border: 0;

      a {
        display: block;
        position: relative;
        inset-block-start: 0.1563rem;
      }
      span {
        color: #999;
      }
    }

    /* 기본 포커스 제거 */
    button:focus {
      outline: none;
    }

    /* 키보드 포커스 시 아웃라인 표시 */
    button:focus-visible {
      outline: 0.125rem solid #24388d;
      border-radius: 0.125rem;
    }

    /* input {
      display: none;
    }

    input:checked + label::after {
      content: "ON";
      color: var(--input-base-color);
    }

    label::after {
      content: "OFF";
      color: var(--input-base-color);
      margin-inline-start: 0.3125rem;
    } */
  }

  @media (min-width: 768px) {
    width: var(--browser-siez);

    .search-add .security-tab {
      display: block;
    }
  }
}