/* AOI */
.pro-page { position: relative; width: 100%; color: var(--text-white); }
.pro-hero { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; min-height: 720rem; max-height: 1080rem; overflow: hidden; background: var(--bg-primary-dark-2); z-index: 0; }
.pro-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.pro-hero__bg-img { width: 100%; height: 100%; object-fit: cover; }
.pro-hero__highlight { position: absolute; top: 50%; left: 50%; width: 641rem; height: 316rem; border-radius: 641rem; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); filter: blur(250rem); pointer-events: none; }
.pro-hero__title-group { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: var(--sp-600); color: var(--text-white); text-align: center; z-index: 2; }
.pro-hero__sub { display: flex; flex-direction: column; align-items: center; gap: var(--sp-200); font-weight: var(--fw-regular); }
/* 서브내비 — 히어로 하단에 겹치고 스크롤 시 상단 고정 (2026-08-24 수정) */
.pro-subnav { position: sticky; top: 120rem; z-index: 20; width: 100%; margin-top: -95rem; border-top: 1rem solid rgba(255, 255, 255, 0.15); transition: background var(--transition-base); }
.pro-subnav.is-stuck { background: var(--bg-black); border-top-color: transparent; }
.pro-subnav__list { display: flex; justify-content: center; align-items: stretch; gap: 60rem; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--side-padding); }
.pro-subnav__item { position: relative; display: flex; align-items: center; justify-content: center; }
.pro-subnav__link { display: flex; align-items: center; justify-content: center; height: 100%; padding: 32rem 0; color: var(--text-white); text-decoration: none; white-space: nowrap; transition: color var(--transition-fast); }
.pro-subnav__item--active .pro-subnav__link { position: relative; }
.pro-subnav__item--active .pro-subnav__link::after { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; background: var(--line-white); }
.pro-subnav__link:hover, .pro-subnav__link:focus-visible { color: var(--color-gb-blue-300); outline: none; }
.pro-main { position: relative; width: 100%; background-color: var(--bg-black); z-index: 1; }
.pro-main__inner { position: relative; width: 100%; max-width: 1424rem; margin: 0 auto; padding: 200rem 0; }
.pro-overview { display: flex; align-items: flex-end; justify-content: space-between; gap: 40rem; width: 100%; color: var(--text-white); }
.pro-overview__title { white-space: nowrap; }
.pro-overview__sub { width: 640rem; }
.pro-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 210rem; width: 100%; margin-top: 80rem; }
.pro-intro__slogan { flex: 1; min-width: 0; color: var(--text-white); }
.pro-intro__desc { margin-top: 60rem; color: var(--text-lowest); }
.pro-intro__demo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-200); min-width: 96rem; height: 60rem; margin-top: 60rem; padding: 0 var(--pd-600); color: var(--btn-text-white); background: var(--btn-default-primary); border: 1rem solid var(--btn-default-primary); border-radius: var(--rd-50); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast); }
.pro-intro__demo-btn img { flex-shrink: 0; width: 20rem; height: 20rem; }
.pro-categories { flex-shrink: 0; display: flex; flex-direction: column; gap: 40rem; width: 640rem; }
.pro-categories__divider { display: block; width: 100%; background: var(--line-white); }
.pro-categories__divider--top { height: 2rem; margin-bottom: 20rem; }
.pro-categories__divider--bottom { height: 1rem; margin-top: 40rem; }
.pro-categories__group { display: flex; flex-direction: column; gap: 20rem; }
.pro-categories__label { color: var(--text-point-secondary); text-transform: uppercase; }
.pro-categories__cols { display: flex; justify-content: space-between; gap: 40rem; width: 100%; }
.pro-categories__cols .pro-categories__col:last-child { width: 320rem; }
.pro-categories__col { display: flex; flex-direction: column; gap: 12rem; }
.pro-categories__col-title { color: var(--text-lowest); }
.pro-categories__col-title--point { color: var(--text-point-secondary); }
.pro-keyword-list { display: flex; flex-wrap: wrap; gap: 4rem; }
.pro-keyword { display: inline-flex; align-items: center; justify-content: center; padding: 8rem 19rem; color: var(--text-white); background: transparent; border: 1rem solid var(--line-high); border-radius: var(--rd-100); box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.25); white-space: nowrap; }
.pro-keyword--point { color: var(--text-point-secondary); border-color: var(--bd-info); }
.pro-product { width: 100%; margin-top: 100rem; }
.pro-product__title { color: var(--text-white); }
.pro-product__content { display: flex; align-items: flex-start; justify-content: space-between; gap: 80rem; margin-top: 60rem; }
.pro-catalog { flex: 1; min-width: 0; max-width: 698rem; display: flex; flex-direction: column; }
.pro-catalog__label { color: var(--text-point-secondary); }
.pro-tabs { display: flex; margin-top: 40rem; padding: 0; }
.pro-catalog__desc { margin-top: 40rem; color: var(--text-white); }
.pro-tab { display: flex; align-items: center; justify-content: center; height: 70rem; padding: 0 40rem; color: var(--text-white); background: var(--bg-neutral-dark-1); text-decoration: none; transition: background var(--transition-fast); }
.pro-tab--active { background: var(--bg-secondary-dark-4); border-radius: var(--rd-100); }
.pro-subtabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; margin-top: 40rem; }
.pro-subtabs[hidden] { display: none; }
.pro-subtab { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-300); height: 74rem; padding: 20rem 24rem; color: var(--text-low); background: transparent; border: 1rem solid var(--line-medium); cursor: pointer; font-weight: var(--fw-regular); transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.pro-subtab__text { text-align: left; }
.pro-subtab__icon { flex-shrink: 0; display: inline-block; width: 20rem; height: 20rem; background: url("../../images/pro-sub-tab-arrow-ico.svg") center / contain no-repeat; }
.pro-subtab--active .pro-subtab__icon, .pro-subtab[aria-selected="true"] .pro-subtab__icon { background-image: url("../../images/pro-sub-tab-arrow-ico-active.svg"); }
.pro-subtab--active, .pro-subtab[aria-selected="true"] { color: var(--text-point-secondary); border: 1.6rem solid var(--btn-hover-outline-stroke); font-weight: var(--fw-semibold); }
.pro-subtab:hover:not(.pro-subtab--active), .pro-subtab:focus-visible:not(.pro-subtab--active) { color: var(--text-white); border-color: var(--line-white); outline: none; }
.pro-panel { margin-top: 120rem; }
.pro-panel[hidden] { display: none; }
.pro-panel__title { color: var(--text-point-secondary); }
.pro-panel__empty { margin-top: 40rem; color: var(--text-lowest); }
.pro-spec-table { width: 100%; margin-top: 40rem; border-collapse: separate; border-spacing: 0; color: var(--text-lowest); }
.pro-spec-table thead th { padding: 16rem; background: var(--color-blue-900); border: 1px solid var(--line-low); border-right: none; font-weight: var(--fw-semibold); text-align: center; }
.pro-spec-table thead th:first-child { width: 240rem; }
.pro-spec-table thead th:last-child { border-right: 1px solid var(--line-low); }
.pro-spec-table thead tr + tr th { border-top: none; }
#pro-panel-extreme .pro-spec-table th:first-child { width: 130rem; }

.pro-defect__item.scroll-motion { transition-delay: 0s; }
.pro-defect__item.scroll-motion:nth-child(2) { transition-delay: 0.2s; }
.pro-defect__item.scroll-motion:nth-child(3) { transition-delay: 0.4s; }

/* AOR */
.pro-highlights { gap: 0; }
.pro-highlights__list { display: flex; flex-direction: column; gap: 40rem; width: 100%; padding: 40rem 0; }
.pro-highlights__item { display: flex; flex-direction: column; gap: 20rem; }
.pro-highlights__label { color: var(--text-point-secondary); text-transform: uppercase; }
.pro-highlights__title { color: var(--text-white); }
.pro-product__title--switch { transition: opacity var(--transition-fast); }
.pro-repair { width: 100%; margin-top: 120rem; }
.pro-repair__label { color: var(--text-point-secondary); }
.pro-repair__list { display: flex; align-items: center; justify-content: space-between; gap: 24rem; margin-top: 40rem; }
.pro-repair__item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16rem; padding: 40rem; background: rgba(0, 0, 0, 0.1); border: 1rem solid var(--line-high); border-radius: 20rem; }
.pro-repair__card { display: flex; flex-direction: column; align-items: center; gap: 20rem; margin: 0; }
.pro-repair__thumb { position: relative; width: 284rem; height: 284rem; overflow: hidden; border-radius: var(--sp-300); background: #002a5d; }
.pro-repair__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro-repair__name { color: var(--text-white); text-transform: uppercase; text-align: center; }
.pro-repair__arrow { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20rem; height: 20rem; color: var(--text-white); }
.pro-defect { width: 100%; margin-top: 120rem; }
.pro-defect__label { color: var(--text-point-secondary); }
.pro-defect__list { position: relative; height: 541rem; margin-top: 80rem; }
.pro-defect__item { position: absolute; width: 400rem; display: flex; flex-direction: column; border: 1rem solid var(--line-high); border-radius: var(--rd-500); overflow: hidden; padding: 20rem; background: rgba(0, 0, 0, 0.1); }
.pro-defect__item--mono { left: 0; top: 0; }
.pro-defect__item--color { left: 512rem; top: 80rem; }
.pro-defect__item--uv { left: 1024rem; top: 0; }
.pro-defect__head { display: flex; align-items: center; justify-content: flex-start; padding: 20rem 20rem 120rem; }
.pro-defect__name { color: var(--text-white); text-transform: uppercase; text-align: center; }
.pro-defect__thumb { position: relative; width: 100%; height: 230rem; overflow: hidden; border-radius: var(--rd-200); }
.pro-defect__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro-banner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 220rem; margin-top: 80rem; padding: 0 120rem; background: var(--bg-black) url("../../images/pro-banner-bg.jpg") center / cover no-repeat; border: 1rem solid var(--line-high); border-radius: var(--rd-300); overflow: hidden; }
.pro-banner__title, .pro-banner__btn { position: relative; z-index: 1; }
.pro-banner__title { color: var(--text-white); }
.pro-banner__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-300); min-width: 120rem; height: 52rem; padding: 0 24rem; color: var(--btn-text-white); background: transparent; border: 1rem solid var(--btn-default-ghost-stroke); border-radius: var(--rd-50); text-decoration: none; font-weight: var(--fw-medium); transition: background var(--transition-fast), color var(--transition-fast); }
.pro-banner__icon { flex-shrink: 0; }

.pro-repair__item.scroll-motion { transition-delay: 0s; }
.pro-repair__item.scroll-motion:nth-child(2) { transition-delay: 0.2s; }

/* VRS */
.pro-vrs-product .pro-catalog { max-width: 753rem; }

/* FA */
.pro-fa-product .pro-catalog { max-width: 565rem; }
.pro-spec-table--single thead th { width: auto !important; border-left: 1rem solid var(--line-white); }
.pro-spec-table--single tbody td { width: auto; border-left: 1rem solid var(--line-high); }
.pro-spec-table tbody th, .pro-spec-table tbody td { padding: 16rem; background: rgba(0, 0, 0, 0.3); border-bottom: 1rem solid var(--line-high); text-align: center; font-size: 18rem; font-weight: var(--fw-regular); line-height: 160%; }
.pro-spec-table tbody:nth-of-type(1) tr:last-child th,
.pro-spec-table tbody:nth-of-type(1) tr:last-child td {
  border-bottom: none;
}
.pro-spec-table tbody th { width: 240rem; font-weight: var(--fw-semibold); }
.pro-spec-table tbody td { border-left: 1rem solid var(--line-high); }
.pro-spec-table tbody td p { font-size: 12rem; line-height: 150%; }
.pro-spec-table--single thead th:last-child { border-left: 1px solid var(--line-white); }
.pro-spec-table--single tbody td { border-left: none; }
.pro-catalog__visual { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; width: 640rem; }
.pro-product-img { position: relative; width: 100%; height: 720rem; margin: 0; overflow: hidden; }
.pro-product-img__bg { position: absolute; width: 100%; height: 100%; background: url("../../images/pro-insmart-nano-bg.png") center / cover no-repeat; }
.pro-product-img__src { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6rem 18rem 42rem rgba(0, 0, 0, 0.1)); }

/* SS */
.pro-ss-product .pro-catalog { max-width: 732rem; }

@media (max-width: 1024px) {
  .pro-hero__title-group { width: 100%; }
  .pro-hero { min-height: 600rem; max-height: 100vh; }
  .pro-intro__headline { word-break: break-all; }
  .pro-subnav { top: 60rem; margin-top: -65rem; } /* 2026-08-24 수정 */
  .pro-subnav__list { overflow-x: auto; justify-content: flex-start; gap: 40rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pro-subnav__list::-webkit-scrollbar { display: none; }
  .pro-subnav__link { padding: 20rem 0; font-size: 16rem; }
  .pro-subnav__item--active .pro-subnav__link::after { top: 0; }
  .pro-main__inner { padding: 120rem var(--side-padding); }
  .pro-overview, .pro-intro, .pro-product__content { flex-direction: column; align-items: stretch; gap: 60rem; }
  .pro-overview { gap: 20rem; }
  .pro-overview__sub, .pro-categories, .pro-catalog, .pro-catalog__visual { width: 100%; max-width: 100%; }
  .pro-intro { margin-top: 60rem; }
  .pro-hero__highlight { width: 100%; height: 400rem; }
  .pro-intro__desc { font-size: 20rem; }
  .pro-categories__divider--bottom { margin-top: 20rem; }
  .pro-product { margin-top: 60rem; }
  .pro-categories__cols { flex-direction: column; gap: 20rem; }
  .pro-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pro-tabs::-webkit-scrollbar { display: none; }
  .pro-tab { flex: 0 0 auto; white-space: nowrap; }
  .pro-spec-table-wrap { width: 100%; margin-top: 40rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pro-spec-table-wrap::-webkit-scrollbar { display: none; }
  .pro-spec-table-wrap .pro-spec-table { margin-top: 0; min-width: 600rem; }
  #pro-panel-extreme .pro-spec-table { min-width: 720rem; }
  .pro-panel { margin-top: 60rem; }
  .pro-product-img { height: 480rem; }
  .pro-defect { margin-top: 108rem; }
  .pro-defect__thumb { height: 198rem; }
  .pro-defect__list { height: auto; display: flex; flex-direction: column; gap: 24rem; margin-top: 40rem; }
  .pro-defect__item, .pro-defect__item--mono, .pro-defect__item--color, .pro-defect__item--uv { position: static; width: 100%; }
  .pro-highlights__list { padding: 32rem 0; gap: 32rem; }
  .pro-repair__list { flex-direction: column; gap: 16rem; }
  .pro-repair__item { width: 100%; padding: 40rem; }
  .pro-repair__thumb { width: 270rem; height: 270rem; }
  .pro-banner { flex-direction: column; justify-content: center; align-items: flex-start; gap: 52rem; height: auto; padding: 40rem; text-align: center; margin-top: 60rem; }
}

@media (max-width: 600px) {
  .pro-product-img { height: 360rem; }
  .pro-subtabs { grid-template-columns: 1fr; }
  .pro-repair__item { flex-wrap: wrap; flex-direction: column; }
  .pro-repair__arrow { transform: rotate(90deg); }
}

/* 시연 영상 레이어 */
.pro-video-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.pro-video-modal[hidden] { display: none; }
.pro-video-modal__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.pro-video-modal__popup { position: relative; display: flex; flex-direction: column; align-items: center; width: 960rem; max-width: calc(100vw - 80rem); }
.pro-video-modal__header { display: flex; justify-content: flex-end; align-items: flex-start; width: 100%; height: 44rem; }
.pro-video-modal__close { display: inline-flex; align-items: center; justify-content: center; width: 24rem; height: 24rem; padding: 0; color: var(--text-white); background: none; border: none; cursor: pointer; }
.pro-video-modal__close:hover, .pro-video-modal__close:focus-visible { opacity: 0.7; outline: none; }
.pro-video-modal__close svg { width: 100%; height: 100%; }
.pro-video-modal__content { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 540rem; overflow: hidden; }
.pro-video-modal__media { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) {
  .pro-video-modal__popup { width: 100%; max-width: calc(100vw - 40rem); }
  .pro-video-modal__content { height: 0; padding-top: 56.25%; }
  .pro-video-modal__media { position: absolute; inset: 0; }
}

/* 카탈로그 */
.cat-page { padding-top: 240rem; padding-bottom: 200rem; }
.cat-page__top-wrap { padding: 0 248rem; }
.cat-page__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40rem; margin-bottom: 48rem; }
.cat-page__head-text { display: flex; flex-direction: column; gap: 20rem; }
.cat-page__title { color: var(--text-highest); }
.cat-search { flex-shrink: 0; width: 432rem; }
.cat-search__field-wrap { display: flex; align-items: center; gap: 8rem; width: 100%; height: 60rem; padding: 15rem 20rem; background: var(--bg-white); border: 1rem solid var(--bd-disabled); border-radius: var(--rd-50); transition: border-color var(--transition-fast); }
.cat-search__field-wrap:focus-within { border-color: var(--bd-focused); }
.cat-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; font-size: 16rem; font-weight: var(--fw-regular); line-height: 1.5; color: var(--text-highest); background: transparent; border: none; outline: none; }
.cat-search__input::placeholder { color: var(--text-lowest); }
.cat-search__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24rem; height: 24rem; padding: 0; cursor: pointer; background: none; border: none; }
.cat-search__btn img { width: 20rem; height: 20rem; }
.cat-tabs { margin: 0 -248rem 60rem; padding: 0 248rem; border-bottom: 1rem solid var(--line-low); }
.cat-tabs__list { display: flex; align-items: center; gap: 32rem; }
.cat-tabs__btn { position: relative; display: inline-flex; align-items: center; gap: 10rem; padding: 30rem 0; color: var(--text-low); background: none; border: none; cursor: pointer; transition: color var(--transition-fast); }
.cat-tabs__btn:hover, .cat-tabs__btn:focus-visible { color: var(--text-highest); outline: none; }
.cat-tabs__btn--active, .cat-tabs__btn[aria-selected="true"] { color: var(--text-highest); font-weight: var(--fw-semibold); }
.cat-tabs__btn--active::after, .cat-tabs__btn[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1rem; height: 2rem; background: var(--line-highest); }
.cat-page__list-wrap { padding: 0 248rem; }
.cat-list__grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24rem; row-gap: 24rem; }
.cat-card { width: 100%; }
.cat-card[hidden] { display: none; }
.cat-card__link { display: flex; align-items: flex-start; justify-content: space-between; gap: 16rem; width: 100%; padding: 40rem; background: var(--bg-white); border: 1px solid var(--line-low); border-left: 4px solid var(--primary-gb-blue); box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.60); color: inherit; text-decoration: none; transition: border-color var(--transition-fast), background var(--transition-fast); }
.cat-card__link:hover, .cat-card__link:focus-visible { border-color: var(--bd-info); outline: none; }
.cat-card__txt-area { display: flex; flex-direction: column; justify-content: space-between; gap: 12rem; }
.cat-card__title { flex: 1; min-width: 0; color: var(--text-highest); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card__txt { color: var(--text-lowest); }
.cat-card__download { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24rem; height: 24rem; color: var(--text-highest); transition: transform var(--transition-fast); }
.cat-card__download img { width: 100%; height: 100%; }
.cat-list .pagination { margin-top: 60rem; }

@media (max-width: 1024px) {
  .cat-page { padding-top: 180rem; padding-bottom: 100rem; }
  .cat-page__top-wrap,
  .cat-page__list-wrap { padding: 0 var(--side-padding); }
  .cat-page__head { flex-direction: column; align-items: stretch; gap: 32rem; margin-bottom: 32rem; }
  .cat-search { width: 100%; }
  .cat-search__field-wrap { height: 48rem; padding: 0 16rem; }
  .cat-tabs { margin: 0 calc(-1 * var(--side-padding)) 32rem; padding: 0 var(--side-padding); }
  .cat-tabs__list { gap: 24rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cat-tabs__list::-webkit-scrollbar { display: none; }
  .cat-tabs__btn { flex-shrink: 0; padding: 16rem 4rem; font-size: 16rem; }
  .cat-list__grid { grid-template-columns: 1fr; gap: 12rem; }
  .cat-card__link { padding: 20rem 24rem; }
  .cat-list .pagination { margin-top: 48rem; }
}

@media (max-width: 600px) {
  .cat-page__top-wrap,
  .cat-page__list-wrap { padding: 0 var(--side-padding); }
  .cat-tabs__list { gap: 20rem; }
  .cat-tabs__btn { font-size: 15rem; }
  .cat-card__link { padding: 18rem 20rem; }
}