/*
  상품 페이지에만 쓰이는 조각. `site.css` 다음에 읽는다.

  색과 모서리와 글꼴 굵기는 전부 site.css 것을 그대로 쓴다. 제품마다 색을 나누지 않는다 -
  실제 제품 아이콘이 모두 같은 파랑이기 때문이다. 제품을 구분하는 것은 색이 아니라
  머리 화면에 놓인 그 제품의 아이콘 하나다.
*/


/* ══════════ 제품 머리 화면 ══════════ */

.phero { position: relative; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
.phero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.5px);
  background-size: 16px 16px; opacity: .5;
  -webkit-mask-image: radial-gradient(80% 70% at 78% 46%, #000 0%, transparent 70%);
          mask-image: radial-gradient(80% 70% at 78% 46%, #000 0%, transparent 70%);
  pointer-events: none;
}

.phero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px; align-items: center;
  padding-top: 48px; padding-bottom: 56px;
}

/* 어디에 있는지 알려 주는 한 줄. 상품 페이지는 대표 페이지를 거치지 않고 바로 열릴 수 있다. */
.crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.crumb a:hover { color: var(--brand); }
.crumb .ico { width: 11px; height: 11px; stroke-width: 2.2; }

.phero .badge { margin-top: 16px; }
.phero .eyebrow { margin-top: 18px; }
.phero .display { margin-top: 3px; }
.phero .lead { max-width: 34em; }

.phero__cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px; }

.spec { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: 12.5px; color: var(--text-3); }
.spec b { color: var(--text-2); font-weight: 600; }

.phero__art { display: grid; place-items: center; }
.pshot__icon { width: 148px; height: 148px; }


/* ══════════ 장점 ══════════ */

/* 이 페이지의 중심이다. 제품마다 여섯 개. 더 늘리지 않는다 - 장점을 다 적으면 하나도 남지 않는다. */
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.point {
  display: flex; gap: 14px;
  padding: 22px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .16s ease;
}
.point:hover { border-color: var(--line-strong); }
.point__icon {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px;
  border-radius: var(--r); background: var(--brand-tint); color: var(--brand);
}
.point__icon .ico { width: 18px; height: 18px; }
.point h3 { font-size: 15.5px; }
.point p { margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--text-2); }


/* ══════════ 단축키 · 기준 표 ══════════ */

.keys { overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
.keys__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px; align-items: center;
  padding: 14px 20px; border-top: 1px solid var(--line-soft);
}
.keys__row:first-child { border-top: 0; }
.keys__row p { font-size: 14.5px; font-weight: 600; }
.keys__row span { font-size: 13px; color: var(--text-3); font-weight: 400; }
.keys__row p span { display: block; margin-top: 2px; }
.keys__keys { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

kbd {
  display: inline-block; padding: 4px 9px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--text);
  white-space: nowrap;
}

/*
  화질·용량처럼 '누르는 키' 가 아닌 값. 모양만 같게 하고 <kbd> 는 쓰지 않는다 -
  키가 아닌 것에 kbd 를 붙이면 읽어 주는 프로그램이 키보드 입력이라고 말한다.
*/
.tag {
  display: inline-block; padding: 4px 9px; border-radius: var(--r);
  background: var(--brand-tint); border: 1px solid #DCE9F6;
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  white-space: nowrap;
}

.keys__note { margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* 글 속에 섞인 키는 한 치수 작게. 줄 높이를 밀어 올리지 않게 한다. */
.point p kbd, .grab p kbd { padding: 2px 6px; font-size: 12px; line-height: 1.4; }
.grab p kbd { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.point p b { font-weight: 600; color: var(--brand); }


/* ══════════ 숫자 셋 ══════════ */

/* 숫자와 단정한 사실만 놓는다. 여기는 설명하는 자리가 아니라 못 박는 자리다. */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.fact { padding: 22px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.fact b { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--brand); }
.fact p { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }


/* ══════════ 마지막 받기 띠 ══════════ */

.grab {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 34px 36px; border-radius: var(--r-lg);
  background: var(--brand); color: #fff;
}
.grab::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.18) 1.4px, transparent 1.5px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(60% 90% at 86% 50%, #000 0%, transparent 72%);
          mask-image: radial-gradient(60% 90% at 86% 50%, #000 0%, transparent 72%);
}
.grab__copy { position: relative; z-index: 1; }
.grab h2 { font-size: clamp(19px, 2vw, 24px); }
.grab p { margin-top: 8px; font-size: 14px; color: rgba(255,255,255,.78); }
.grab .btn { position: relative; z-index: 1; }

/* 다른 제품으로 건너가는 줄 */
.sibling { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 24px; }
.sibling > span { margin-right: 12px; font-size: 13px; color: var(--text-3); }
.sibling a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; font-weight: 600;
}
.sibling a:hover { border-color: var(--line-strong); color: var(--brand); }
.sibling img { width: 20px; height: 20px; }


/* ══════════ 상품 페이지 전체 ══════════ */

/* 상품 페이지는 섹션이 짧다. 대표 페이지와 같은 여백을 주면 사이가 비어 보인다. */
body.product .section { padding: 60px 0; }
body.product .section--tight { padding: 30px 0; }


/* ══════════ 넓은 화면 ══════════ */

/* 대표 페이지의 히어로와 같은 이유로 키운다. */
@media (min-width: 1000px) {
  .pshot__icon { width: 180px; height: 180px; }
}


/* ══════════ 좁은 화면 ══════════ */

@media (max-width: 900px) {
  .phero__inner { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 44px; }
  .phero__art { place-items: start; }
  .points { grid-template-columns: 1fr; }
  .grab { padding: 28px 24px; }
  body.product .section { padding: 44px 0; }
  body.product .section--tight { padding: 24px 0; }
}

@media (max-width: 620px) {
  .facts { grid-template-columns: 1fr; }
  .point { flex-direction: column; gap: 12px; padding: 20px; }
  .keys__row { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; }
  .keys__keys { justify-content: flex-start; }
  .pshot__icon { width: 112px; height: 112px; }
}