/* =========================================================================
   HeatSol — Product page (제품소개)
   flex-inspired light design system. Reuses shared tokens in main.css.
   ========================================================================= */
.pr-root {
  font-family: Pretendard, system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  background: var(--hs-bg); color: var(--hs-fg);
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}

/* ---- Hero + branch toggle ---------------------------------------------- */
.pr-hero {
  position: relative; min-height: 32vh; display: flex; align-items: center;
  overflow: hidden; background: var(--hs-bg2); color: var(--hs-fg); padding: 92px 0 34px;
}
.pr-hero__img { position: absolute; inset: 0; background-image: url('/assets/product/heatsink/D15BCEDF-93E9-44DD-837B-6880370C8197_1_105_c.jpeg'); background-size: cover; background-position: center; transform: scale(1.05); }
.pr-hero__grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247,248,250,.97) 0%, rgba(247,248,250,.88) 45%, rgba(247,248,250,.45) 100%), linear-gradient(0deg, rgba(247,248,250,.9) 0%, transparent 50%); }
.pr-hero__inner { position: relative; }
.pr-hero h1 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 18px 0 0; color: var(--hs-fg); }
.pr-hero p { max-width: 600px; margin: 22px 0 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.75; color: var(--hs-body); }
.pr-branch { margin-top: 34px; display: inline-flex; gap: 6px; background: var(--hs-bg2); border: none; padding: 6px; border-radius: 999px; }
.pr-branch button {
  appearance: none; cursor: pointer; border: none; background: transparent; color: var(--hs-muted);
  font-weight: 600; font-size: 14.5px; padding: 11px 24px; border-radius: 999px; transition: all .25s;
}
.pr-branch button:hover { color: var(--hs-fg); }
.pr-branch button.is-active { background: #fff; color: var(--hs-fg); font-weight: 700; box-shadow: var(--hs-shadow-sm); }

/* ---- Sticky category tabs ---------------------------------------------- */
.pr-tabs { position: sticky; top: 68px; z-index: 40; background: var(--hs-header); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--hs-line); }
.pr-tabs__inner { max-width: var(--hs-max); margin: 0 auto; padding: 0 var(--hs-pad); height: 58px; display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.pr-tabs__inner::-webkit-scrollbar { height: 0; }
.pr-tab {
  flex: 0 0 auto; appearance: none; cursor: pointer; border: none; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--hs-muted);
  padding: 9px 16px; border-radius: 999px; white-space: nowrap; transition: all .2s; display: flex; align-items: center; gap: 7px;
}
.pr-tab:hover { color: var(--hs-fg); background: var(--hs-bg2); }
.pr-tab.is-active { background: var(--hs-fg); color: #fff; font-weight: 700; }
.pr-tab__soon { font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: .02em; opacity: .7; border: 1px solid currentColor; border-radius: 4px; padding: 1px 4px; }

.pr-subtabs {
  position: sticky;
  top: 126px;
  z-index: 35;
  margin: 0 0 34px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px;
  border: none;
  border-radius: var(--hs-r-md);
  background: var(--hs-bg);
  box-shadow: var(--hs-shadow-md);
}
.pr-subtabs::-webkit-scrollbar { height: 0; }
.pr-subtab {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--hs-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
  white-space: nowrap;
  transition: all .2s;
}
.pr-subtab:hover { color: var(--hs-fg); background: var(--hs-bg2); }
.pr-subtab.is-active { background: var(--hs-fg); color: #fff; font-weight: 700; }

/* ---- Product panel ------------------------------------------------------ */
.pr-panel { padding: 32px 0 96px; min-height: 60vh; }
.pr-panel__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.pr-eyebrow { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--hs-accent); }
.pr-title { font-size: clamp(34px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 14px 0 0; color: var(--hs-fg); }
.pr-title--nowrap { font-size: 42px; letter-spacing: -.02em; white-space: nowrap; }
.pr-desc { margin: 24px 0 0; font-size: 16px; line-height: 1.75; color: var(--hs-body); }
.pr-desc + .pr-desc { margin-top: 16px; }
.pr-figure { aspect-ratio: 4/3; border-radius: var(--hs-r-lg); overflow: hidden; background: var(--hs-card); border: none; }
.pr-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* advantages / structure grid */
.pr-block { margin-top: 64px; }
.pr-block__label { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--hs-accent); }
.pr-block__title { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: -.025em; margin: 10px 0 0; color: var(--hs-fg); }
.pr-cards { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pr-cards--3 { grid-template-columns: repeat(3, 1fr); }
.pr-card { background: var(--hs-card); border: none; border-radius: var(--hs-r-md); padding: 24px 22px; min-height: 170px; display: flex; flex-direction: column; gap: 10px; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s; }
.pr-card:hover { transform: translateY(-4px); box-shadow: var(--hs-shadow-md); }
.pr-card__n { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--hs-accent); }
.pr-card__title { font-size: 18px; font-weight: 700; color: var(--hs-fg); }
.pr-card__desc { font-size: 14px; line-height: 1.65; color: var(--hs-muted); margin: 0; }

/* process steps (horizontal) */
.pr-steps { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.pr-step { position: relative; padding: 22px; border: none; border-radius: var(--hs-r-md); background: var(--hs-card); }
.pr-step__n { width: 34px; height: 34px; border-radius: 999px; background: var(--hs-accent); color: #fff; font-family: inherit; font-size: 13px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pr-step__title { font-size: 16px; font-weight: 700; margin: 14px 0 8px; color: var(--hs-fg); }
.pr-step__desc { font-size: 13.5px; line-height: 1.6; color: var(--hs-muted); }

/* highlight band */
.pr-highlight { margin-top: 64px; background: var(--hs-ink); color: #fff; border-radius: var(--hs-r-lg); padding: 44px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.pr-highlight__label { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--hs-accent); }
.pr-highlight__title { font-size: clamp(24px, 3vw, 38px); font-weight: 700; letter-spacing: -.02em; margin: 10px 0 0; color: #fff; }
.pr-highlight__desc { margin: 16px 0 0; font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.78); }
.pr-highlight__stats { display: flex; gap: 28px; }
.pr-hstat__v { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--hs-accent); }
.pr-hstat__label { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.72); }

/* spec stats row */
.pr-specs { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 40px; }
.pr-spec__v { font-size: clamp(28px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.02em; color: var(--hs-accent); line-height: 1; }
.pr-spec__label { margin-top: 10px; font-size: 14px; color: var(--hs-muted); }

/* gallery */
.pr-gallery { margin-top: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pr-gallery--3 { grid-template-columns: repeat(3, 1fr); }
.pr-gitem { border-radius: var(--hs-r-md); overflow: hidden; background: var(--hs-card); border: none; aspect-ratio: 4/3; position: relative; }
.pr-gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.pr-gitem:hover img { transform: scale(1.06); }
.pr-gitem__tag { position: absolute; left: 10px; bottom: 10px; font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: #fff; background: rgba(23,24,28,.55); padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(4px); }
.pr-gallery-groups { margin-top: 30px; display: grid; gap: 34px; }
.pr-gallery-group { padding-top: 28px; border-top: 1px solid var(--hs-line); }
.pr-gallery-group:first-child { padding-top: 0; border-top: 0; }
.pr-gallery-group__head { display: grid; gap: 10px; margin-bottom: 16px; }
.pr-gallery-group__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--hs-fg); }
.pr-gallery-group__desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--hs-muted); }
.pr-gallery-group__meta { font-size: 12px; font-weight: 700; color: var(--hs-accent); letter-spacing: .02em; }
.pr-gallery--group { margin-top: 0; grid-template-columns: repeat(4, 1fr); }
.pr-gallery--group .pr-gitem { aspect-ratio: 960 / 610; }

/* coming soon */
.pr-soon { padding: 90px 40px; text-align: center; border: 1px dashed var(--hs-line); border-radius: var(--hs-r-lg); background: var(--hs-card); margin-top: 8px; }
.pr-soon__badge { font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--hs-accent); }
.pr-soon__title { font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -.02em; margin: 16px 0 0; color: var(--hs-fg); }
.pr-soon__desc { margin: 16px auto 0; max-width: 460px; font-size: 15px; line-height: 1.7; color: var(--hs-muted); }

/* CTA */
.pr-cta { background: var(--hs-bg2); border-top: 1px solid var(--hs-line); padding: 96px 0; text-align: center; }
.pr-cta h2 { font-size: clamp(28px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.025em; color: var(--hs-fg); }
.pr-cta p { margin: 18px auto 0; max-width: 520px; font-size: 16px; line-height: 1.75; color: var(--hs-body); }
.pr-cta a { display: inline-block; margin-top: 32px; background: var(--hs-accent); color: #fff; font-weight: 700; font-size: 16px; padding: 15px 26px; border-radius: var(--hs-r-sm); box-shadow: var(--hs-shadow-sm); transition: filter .2s, transform .2s; }
.pr-cta a:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pr-cta a:active { transform: translateY(1px); }

/* fade for panel switch */
.pr-panel[hidden] { display: none; }
.pr-panel.is-enter { animation: hsFadeUp .5s cubic-bezier(.16,1,.3,1) both; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .pr-panel__head { grid-template-columns: 1fr; gap: 28px; }
  .pr-title--nowrap { font-size: 34px; }
  .pr-cards { grid-template-columns: repeat(2, 1fr); }
  .pr-steps { grid-template-columns: repeat(2, 1fr); }
  .pr-highlight { grid-template-columns: 1fr; gap: 24px; }
  .pr-gallery { grid-template-columns: repeat(3, 1fr); }
  .pr-gallery--group { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pr-tabs { top: 68px; }
  .pr-subtabs { top: 126px; margin-bottom: 22px; }
  .pr-panel { padding: 24px 0 64px; }
  .pr-title--nowrap { font-size: 26px; }
  .pr-cards, .pr-cards--3, .pr-steps { grid-template-columns: 1fr; }
  .pr-gallery, .pr-gallery--3 { grid-template-columns: repeat(2, 1fr); }
  .pr-gallery--group { grid-template-columns: repeat(2, 1fr); }
  .pr-highlight { padding: 30px; }
  .pr-specs { gap: 26px; }
}