/* ===========================================================================
   타일 — 벤토 그리드 · 사진 타일 · 비교 타일

   Apple이 카드 대신 쓰는 큰 면이다. 테두리가 없고, 모서리가 크게 둥글며
   (34px), 안에 사진이 가득 차거나 거대한 활자 하나가 들어간다.
   =========================================================================== */

/* ── 벤토 그리드 ─────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--nx-sp-5);
}

.bento--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: var(--nx-sp-10);
  border-radius: var(--nx-r-2xl);
  background: var(--nx-bg-sunken);
  color: var(--nx-text);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--nx-t-normal);
}

.section--sunken .tile {
  background: var(--nx-bg-base);
}

.tile--tall {
  grid-row: span 2;
}

.tile--wide {
  grid-column: span 2;
}

.tile--short {
  min-height: 300px;
}

.tile--dark {
  background: var(--nx-s-dark);
  color: var(--nx-text-invert);
}

.section--sunken .tile--dark {
  background: var(--nx-s-dark);
}

.tile--accent {
  background: linear-gradient(150deg, #0071e3 0%, #003f8a 100%);
  color: #ffffff;
}

a.tile:hover {
  transform: translateY(-4px);
}

/* 사진이 가득 찬 타일 */
.tile__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

a.tile:hover .tile__media img {
  transform: scale(1.04);
}

.tile--photo {
  color: var(--nx-text-invert);
  justify-content: flex-end;
}

.tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(2, 8, 12, 0.88) 100%);
}

.tile__eyebrow {
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: currentColor;
  opacity: 0.68;
  margin-bottom: var(--nx-sp-3);
}

/* 큰 숫자가 무엇인지 적는 줄. 숫자 바로 밑에서 본문 크기로 읽힌다. */
.tile__label { font-size: var(--nx-fs-base); font-weight: 500; margin: var(--nx-sp-2) 0 var(--nx-sp-5); }

.tile__title {
  font-size: var(--nx-fs-xl);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--nx-tracking-tight);
  margin-bottom: var(--nx-sp-3);
}

.tile__title--big {
  font-size: var(--nx-fs-2xl);
}

.tile__body {
  font-size: var(--nx-fs-base);
  line-height: 1.5;
  color: currentColor;
  opacity: 0.72;
  max-width: 46ch;
}

.tile__value {
  font-size: var(--nx-fs-callout);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--nx-tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-bottom: var(--nx-sp-4);
}

.tile__value small {
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: 3px;
}

.tile__foot {
  margin-top: auto;
  padding-top: var(--nx-sp-6);
}

.tile--dark .link-arrow { color: var(--nx-accent-dark); }

.tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nx-sp-2);
  margin-top: var(--nx-sp-5);
}

/* ── 비교 타일 ───────────────────────────────────────────
   Apple의 'Mac 더 살펴보기'. 제품을 나란히 놓고 같은 항목을 같은 높이에
   맞춰 비교하게 한다. */

.compare {
  display: grid;
  /* 항목이 2개면 두 칸으로, 3개면 세 칸으로 채운다. 고정 3열로 두면
     제품 상세의 '다른 제품'(2개)이 왼쪽으로 쏠린다. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--nx-sp-5);
}

.compare__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--nx-sp-10) var(--nx-sp-6) var(--nx-sp-8);
  border-radius: var(--nx-r-2xl);
  background: var(--nx-bg-sunken);
  transition: transform var(--nx-t-normal);
}

.section--sunken .compare__item {
  background: var(--nx-bg-base);
}

a.compare__item:hover {
  transform: translateY(-4px);
}

.compare__visual {
  width: 100%;
  height: 168px;
  margin-bottom: var(--nx-sp-6);
  border-radius: var(--nx-r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #e8e8ed 0%, #f5f5f7 100%);
  font-size: 54px;
  color: var(--nx-accent);
}

.compare__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare__name {
  font-size: var(--nx-fs-xl);
  font-weight: 600;
  letter-spacing: var(--nx-tracking-tight);
}

.compare__tag {
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  color: var(--nx-text-muted);
  margin-top: var(--nx-sp-1);
}

.compare__metric {
  margin-top: var(--nx-sp-6);
  font-size: var(--nx-fs-2xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--nx-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.compare__metric small {
  display: block;
  margin-top: var(--nx-sp-2);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--nx-text-2);
}

.compare__specs {
  width: 100%;
  margin-top: var(--nx-sp-6);
  text-align: left;
  font-size: var(--nx-fs-sm);
  color: var(--nx-text-2);
}

.compare__specs li {
  padding-block: var(--nx-sp-3);
  border-top: 1px solid var(--nx-divider);
  line-height: 1.45;
}

.compare__specs b {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--nx-text-muted);
}

.compare__foot {
  margin-top: auto;
  padding-top: var(--nx-sp-6);
}

@media (max-width: 1040px) {
  .bento--3,
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tile {
    padding: var(--nx-sp-8);
    min-height: 360px;
  }
}

@media (max-width: 720px) {
  .bento,
  .bento--3 {
    grid-template-columns: minmax(0, 1fr);
  }
  /* 세로로 쌓으면 2,400px이 된다. 다음 카드가 16% 비치게 옆으로 넘기고, 화살표가 없으니 스크롤바는 남긴다. */
  .compare { display: flex; overflow: auto hidden; scroll-snap-type: x mandatory; gap: 12px; margin-inline: calc(-1 * var(--nx-sp-5)); padding: 8px var(--nx-sp-5) 16px; }
  .compare__item { flex: 0 0 84%; scroll-snap-align: center; }
  .compare__visual { height: 132px; }
  .tile--short:not(.tile--photo) { min-height: 0; }
  .tile--tall,
  .tile--wide {
    grid-row: auto;
    grid-column: auto;
  }
  .tile {
    min-height: 320px;
    padding: var(--nx-sp-6);
  }
}