.armo-detail-button {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 34px;
  margin: -4px 0 -4px 8px;
  padding: 0 10px;
  border: 1px solid #8ba5aa;
  border-radius: 999px;
  background: #edf4f4;
  color: #234c53;
  cursor: pointer;
}

.armo-detail-button::before {
  content: "詳情";
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.armo-detail-button:hover,
.armo-detail-button:focus-visible {
  border-color: #315f66;
  background: #dcebed;
  color: #163a41;
  outline: none;
}

.armo-detail-row:hover > td {
  background-color: rgba(220, 235, 237, 0.35);
}

.armo-detail-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(540px, calc(100vw - 28px));
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid #91a9ad;
  border-radius: 24px 0 0 24px;
  background: #f4f8f8;
  color: #17343a;
  box-shadow: -24px 0 70px rgba(18, 43, 48, 0.24);
}

.armo-detail-sheet[open] {
  animation: armo-detail-enter 220ms ease-out both;
}

.armo-detail-sheet::backdrop {
  background: rgba(17, 38, 43, 0.56);
  backdrop-filter: blur(3px);
}

@keyframes armo-detail-enter {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.armo-detail-sheet__layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.armo-detail-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 25px 26px 20px;
  border-bottom: 1px solid #b7c9cc;
  background: linear-gradient(135deg, #dce9eb 0%, #edf4f4 100%);
}

.armo-detail-sheet__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #486a70;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.armo-detail-sheet__header h2 {
  margin: 0;
  color: #102f36;
  font-size: clamp(1.28rem, 3vw, 1.65rem);
  line-height: 1.28;
}

.armo-detail-sheet__close {
  display: inline-grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 1px solid #90a8ac;
  border-radius: 999px;
  background: #f7fbfb;
  color: #244950;
  font: inherit;
  font-size: 1.32rem;
  cursor: pointer;
}

.armo-detail-sheet__body {
  padding: 22px 26px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.armo-detail-sheet__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 19px;
}

.armo-detail-sheet__tag {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #a7babc;
  border-radius: 999px;
  background: #e8f0f1;
  color: #294f56;
  font-size: 0.78rem;
  font-weight: 800;
}

.armo-detail-sheet__tag.is-warning {
  border-color: #b59148;
  background: #f4e7c4;
  color: #684a0d;
}

.armo-detail-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.armo-detail-sheet__field {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #c3d1d3;
  border-radius: 12px;
  background: #fff;
}

.armo-detail-sheet__field.is-wide {
  grid-column: 1 / -1;
}

.armo-detail-sheet__field dt {
  margin: 0 0 5px;
  color: #557176;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.armo-detail-sheet__field dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #18363d;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.48;
}

.armo-detail-sheet__field.is-masked dd {
  color: #526b70;
  font-weight: 700;
}

.armo-detail-sheet__notice {
  margin-top: 18px;
  padding: 14px 15px;
  border: 1px solid #9db4b8;
  border-radius: 12px;
  background: #e4eef0;
  color: #284e55;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.65;
}

.armo-detail-sheet__notice.is-safety {
  border-color: #c0a467;
  background: #f3ead3;
  color: #5e4719;
}

.armo-detail-sheet__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.armo-detail-sheet__contact {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #678b91;
  border-radius: 10px;
  background: #edf5f5;
  color: #1d4850;
  font-size: 0.85rem;
  font-weight: 850;
  text-decoration: none;
}

.armo-detail-sheet__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 26px;
  border-top: 1px solid #b7c9cc;
  background: #e8f0f1;
}

.armo-detail-sheet__footer button,
.armo-detail-sheet__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #78989d;
  border-radius: 10px;
  background: #f9fbfb;
  color: #1b4148;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.armo-detail-sheet__footer .is-primary,
.armo-detail-sheet__login {
  border-color: #285f66;
  background: #285f66;
  color: #fff;
}

.armo-detail-sheet [hidden] {
  display: none !important;
}

.armo-listing-link-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0;
  padding: 15px 17px;
  border: 1px solid #b69a61;
  border-radius: 13px;
  background: #f3ead5;
  color: #59451c;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
}

.armo-listing-link-alert strong {
  display: block;
  margin-bottom: 2px;
  color: #4d3911;
}

.armo-listing-link-alert button {
  flex: 0 0 auto;
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid #9a7b3e;
  border-radius: 9px;
  background: #fffaf0;
  color: #5c4312;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.armo-recent-trigger.has-history {
  border-color: #527a80 !important;
  background: #e1edef !important;
  color: #173f46 !important;
}

.armo-recent-trigger-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 12px 0;
}

.armo-recent-trigger-wrap .armo-recent-trigger {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #78999e;
  border-radius: 10px;
  background: #f1f6f6;
  color: #183b42;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 850;
  cursor: pointer;
}

.armo-recent-dialog {
  width: min(620px, calc(100vw - 30px));
  max-height: min(78dvh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid #899fa4;
  border-radius: 20px;
  background: #f4f8f8;
  color: #17343a;
  box-shadow: 0 25px 80px rgba(18, 43, 48, 0.28);
}

.armo-recent-dialog::backdrop {
  background: rgba(17, 38, 43, 0.56);
  backdrop-filter: blur(3px);
}

.armo-recent-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid #b7c9cc;
  background: #dce9eb;
}

.armo-recent-dialog__heading span {
  display: block;
  margin-bottom: 4px;
  color: #4d6d72;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.13em;
}

.armo-recent-dialog__heading h2 {
  margin: 0;
  color: #102f36;
  font-size: 1.25rem;
}

.armo-recent-dialog__header-actions {
  display: flex;
  gap: 7px;
}

.armo-recent-dialog button {
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid #829da2;
  border-radius: 9px;
  background: #f8fbfb;
  color: #1d434a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.armo-recent-dialog button.is-danger {
  border-color: #b7918a;
  color: #7a342c;
}

.armo-recent-dialog__body {
  max-height: calc(min(78dvh, 760px) - 80px);
  padding: 18px 22px 24px;
  overflow-y: auto;
}

.armo-recent-dialog__list {
  display: grid;
  gap: 9px;
}

.armo-recent-dialog__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid #c1d0d2;
  border-radius: 12px;
  background: #fff;
}

.armo-recent-dialog__copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.armo-recent-dialog__copy strong {
  overflow: hidden;
  color: #17343a;
  font-size: 0.93rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.armo-recent-dialog__meta {
  color: #557176;
  font-size: 0.76rem;
  line-height: 1.45;
}

.armo-recent-dialog__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.armo-recent-dialog__empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #9db2b6;
  border-radius: 12px;
  background: #eaf1f2;
  color: #3e6066;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.65;
}

.armo-recent-dialog [hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .armo-detail-button {
    min-width: 58px;
  }

  .armo-detail-sheet {
    inset: auto 0 0;
    width: 100vw;
    height: min(88dvh, 780px);
    border-top: 1px solid #91a9ad;
    border-left: 0;
    border-radius: 22px 22px 0 0;
  }

  .armo-detail-sheet[open] {
    animation-name: armo-detail-mobile-enter;
  }

  @keyframes armo-detail-mobile-enter {
    from {
      opacity: 0;
      transform: translateY(38px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .armo-detail-sheet__header,
  .armo-detail-sheet__body,
  .armo-detail-sheet__footer {
    padding-left: 17px;
    padding-right: 17px;
  }

  .armo-detail-sheet__header {
    padding-top: 20px;
  }

  .armo-detail-sheet__grid {
    grid-template-columns: 1fr;
  }

  .armo-detail-sheet__field.is-wide {
    grid-column: auto;
  }

  .armo-detail-sheet__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: max(15px, env(safe-area-inset-bottom));
  }

  .armo-detail-sheet__footer button,
  .armo-detail-sheet__login {
    width: 100%;
  }

  .armo-listing-link-alert {
    align-items: stretch;
    flex-direction: column;
  }

  .armo-listing-link-alert button {
    width: 100%;
  }

  .armo-recent-dialog__header {
    align-items: flex-start;
    padding: 17px 16px;
  }

  .armo-recent-dialog__body {
    padding: 15px 16px 22px;
  }

  .armo-recent-dialog__item {
    align-items: stretch;
    flex-direction: column;
  }

  .armo-recent-dialog__actions button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .armo-detail-sheet[open] {
    animation: none;
  }
}