/* 濃い線画に、一色の面を一枚だけ重ねる描き方です。線は文字色に追従し、面は淡い黄で固定します。
   ベースはスマートフォン幅です。 */
:root {
  --icon-accent: #e8c56a;
  /* 白抜きは「地の色で抜く」ため、置かれる場所の背景に合わせます。 */
  --icon-hole: #f7f4eb;
}

/* 濃い地の上では、白抜きをその地の色に合わせます。紙色のままだと、そこだけ切り紙のように浮きます。 */
.store {
  --icon-hole: #1e3a30;
}

.room-links,
.glass-button {
  --icon-hole: #17362c;
}

.primary,
.brand-mark {
  --icon-hole: #244e43;
}

.toast {
  --icon-hole: #173b32;
}

/* 線はいちばん上に乗せます。太さと端の形は全アイコンで共通です。 */
.icon-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
  pointer-events: none;
}

.icon > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-move {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 220ms ease, stroke-dashoffset 420ms ease;
}

.icon-move-swing {
  transform-origin: left center;
}

:is(.is-moving, button:hover, a:hover) .icon-move-slide {
  transform: translateY(3px);
}

:is(.is-moving, button:hover, a:hover) .icon-move-swing {
  transform: scaleX(.68);
}

:is(.is-moving, button:hover, a:hover) .icon-move-turn {
  transform: rotate(32deg);
}

.icon-move-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

:is(.is-moving, button:hover, a:hover) .icon-move-draw path {
  animation: icon-draw 420ms ease both;
}

@keyframes icon-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.shelf-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.shelf-count > .icon {
  width: 32px;
  height: 32px;
}

.other-people > p > .icon,
.toast > .icon {
  margin-right: 8px;
}

/* 動きのある操作も、指で確実に押せる広さを保ちます。 */
:is(button, a):has(.icon-move) {
  min-width: 44px;
  min-height: 44px;
}

@media (prefers-reduced-motion: reduce) {
  .icon-move { transition: none; }
  .icon-move-draw path { animation: none !important; stroke-dashoffset: 0; }
}

.brand-mark .icon {
  width: 24px;
  height: 26px;
}

.brand-mark.large .icon {
  width: 32px;
  height: 36px;
}

/* 狭い画面ではナビの文字数を優先し、アイコンを出しません。 */
.site-header .nav-link {
  gap: 0;
}

.site-header .nav-link .icon {
  display: none;
  width: 17px;
  height: 17px;
}

.button,
.text-link,
.glass-button,
.privacy-badge {
  gap: 8px;
}

.glass-button,
.privacy-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-button .icon {
  width: 22px;
  height: 22px;
}

.shelf-slot.empty > .icon {
  width: 24px;
  height: 24px;
}

.note-mark .icon {
  width: 13px;
  height: 13px;
}

.picker-book > img {
  width: 38px;
  height: 51px;
}

.picker-book > .icon {
  width: 18px;
  height: 18px;
}

.stick-up .icon,
.stick-left .icon,
.stick-right .icon {
  width: 17px;
  height: 17px;
}

.guide-list button .icon {
  margin-left: auto;
}

.room-links a,
.room-links button {
  gap: 6px;
}

.room-links .icon {
  width: 20px;
  height: 20px;
}

.shelf-navigation button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.shelf-invite-icon .icon {
  width: 18px;
  height: 18px;
}

.guide-list button > span:not(.icon) {
  flex: 1;
}

.guide-list small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.look-controls > div button .icon {
  width: 24px;
  height: 24px;
}

.shelf-slot .note-mark .icon {
  display: block;
}

.shelf-slot .slot-title {
  width: 100%;
}

@media (min-width: 680px) {
  .site-header .nav-link {
    gap: 6px;
  }

  .site-header .nav-link .icon {
    display: inline-grid;
    width: 17px;
    height: 17px;
  }

}

@media (max-width: 679px) {
  .site-header nav .nav-link .icon,
  .site-header nav .wishlist-button .icon {
    display: inline-grid;
    width: 19px;
    height: 19px;
  }
}