:root {
  --ink: #4c4c4c;
  --muted: #858585;
  --pink: #666;
  --line: #e1e1e1;
}

html {
  background: #f5f5f5;
}

body {
  width: min(430px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px #e7e7e7;
}

.wrap {
  width: calc(100% - 36px);
}

nav {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

/* 데스크톱에서도 모바일 카드 규격을 그대로 사용한다. */
#grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 13px;
}

.thumbnail {
  border-radius: 12px;
}

.meta {
  gap: 4px;
  font-size: 10px;
}

.card h3 {
  gap: 5px;
  font-size: 14px;
}

.logo,
.footer-logo {
  color: #595959;
}

.featured-slide,
.search-toggle:hover,
.product-actions a:hover,
.details .cta,
.device-actions .cta {
  background: #f5f5f5;
}

.featured-slide {
  box-shadow: 0 4px 12px #0000000b;
}

.search-panel #search-clear,
.search-panel .search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.search-panel #search-clear > span,
.search-panel .search-close > span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.search-panel #search-clear {
  background: #eeeeee;
  color: #666;
}

/* 모달을 열 때 모바일 브라우저가 닫기 버튼에 넣는 원형 강조 표시를 숨긴다. */
.close,
.close:focus-visible {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  outline: 0;
}

.search-panel .search-close,
.search-panel input::placeholder {
  color: #8c8c8c;
}

/* 휴대폰 브라우저가 검색 입력창을 자동 확대하지 않도록 한다. */
.search-panel input {
  font-size: 16px;
}