/* =========================
   common.css
========================= */

/* accessibility */
legend,
caption,
.blind {
  position: absolute !important;
  overflow: hidden !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;

  clip: rect(0 0 0 0);
}

/* hidden */
[hidden] {
  display: none !important;
}

/* form */
input,
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  background: #fff;
  color: #1f1f1f;
}

input::placeholder,
textarea::placeholder {
  color: #CACACA;
}

/* ie clear button */
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* search cancel button */
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

/* number input */
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none;}

/* select arrow */
select::-ms-expand { display: none;}

/* disabled */
button:disabled { cursor: default;}

/* focus */
button:focus-visible, a:focus-visible { outline: 2px solid #2563eb;	outline-offset: 2px;}

/* etc */
em, i, var { font-style: normal;}
hr { display: none;}
pre { overflow-x: auto;}
button span { pointer-events: none;}
label { cursor: pointer;}

.text-left { text-align: left !important;}

.btn {	display: inline-flex; align-items: center; justify-content: center; height: var(--form-height); padding: 0 2rem; border-radius: var(--radius-sm); font-size: var(--font-size-md); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease,	border-color 0.2s ease,	color 0.2s ease;}
.btn-dark {  background: var(--color-secondary); color: #fff;}
.btn-dark:hover {background-color: #4A4A4A;}
.btn-primary { min-width: 12rem; background: var(--color-primary); color: #fff; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;}
.btn-primary:hover { background: #386390;}

.form-input,.form-select {  height: var(--form-height); border: 1px solid var(--form-border); border-radius: var(--radius-sm); background: #fff; padding: 0 1.6rem; font-size: var(--font-size-md);}
.form-input { width: 28rem;}
.form-input:focus, .form-select:focus, .write-textarea:focus { outline: none; border-color: #666666; box-shadow: none;}

.badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.2rem 0.8rem; border-radius: var(--radius-sm); background: #E7F4FD; color: var(--color-primary); font-size: var(--font-size-xsm); font-weight: 600; }