.life-ui {
  color: #24202d;
  font:
    13px/1.5 Dotum,
    "돋움",
    sans-serif;
}
.native-skin #interact {
  display: none !important;
}
.life-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
}
.life-section {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #86808e;
  background: #dedce1;
}
.life-section h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #4b356a;
}
/* Missing original server HTML is a reconstructed web document inside the
 * source CExHtmlView border. Avoid presenting newly invented grey cards as art.
 * This does not establish the original job/trade/quest document's layout. */
.source-html-window .life-section {
  padding: 0;
  border: 0;
  background: transparent;
}
.life-ui button,
.life-ui select,
.life-ui input {
  box-sizing: border-box;
  min-height: 36px;
  max-width: 100%;
  margin: 3px;
  border: 1px solid #6a6178;
  color: #25202e;
  background: #eae8ed;
  font: inherit;
}
.life-ui button {
  padding: 6px 10px;
  cursor: pointer;
  box-shadow:
    inset 1px 1px white,
    inset -1px -1px #928c9b;
}
.life-ui button:disabled {
  color: #777;
  cursor: default;
}
.life-ui input {
  width: 105px;
  padding: 5px;
  background: #fff;
}
.life-ui select {
  padding: 5px;
}
.life-note {
  margin: 6px 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.life-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #b7b0bf;
  padding: 5px 0;
}
.life-item img {
  object-fit: contain;
  image-rendering: pixelated;
}
.life-item select {
  flex: 1;
  min-width: 120px;
}
.life-item small {
  color: #625a6b;
}
.life-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.life-cards button {
  min-height: 48px;
  font-size: 22px;
}
.life-ui progress {
  display: block;
  width: 100%;
  height: 18px;
  accent-color: #6b518d;
}
.life-needle {
  border: 1px solid #777;
  padding: 8px;
}
.life-needle progress {
  accent-color: #c73636;
}
@media (max-width: 700px),
  (max-width: 1000px) and (max-height: 520px),
  (pointer: coarse) {
  .life-ui button,
  .life-ui input,
  .life-ui select {
    min-height: 44px;
  }
  .life-section {
    padding: 8px;
  }
}