/* 회사 홈페이지 메인 전용 (samsung.com/sec 톤) — 공통은 site.css. 스펙: docs/specs/homepage.md */

/* ---------- 히어로 ---------- */
.hp-hero { position: relative; overflow: hidden; }
.hp-hero__track { position: relative; height: clamp(520px, 62vw, 720px); }
.hp-hero__slide {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    padding: 0 max(var(--hp-gutter), calc((100% - var(--hp-container)) / 2 + var(--hp-gutter)));
    opacity: 0; visibility: hidden; transition: opacity .7s var(--hp-ease), visibility .7s;
}
.hp-hero__slide.is-active { opacity: 1; visibility: visible; }
.hp-hero__slide--tape { background: var(--hp-bg-tape); }
.hp-hero__slide--chem { background: var(--hp-bg-chem); }
.hp-hero__slide--dark { background: var(--hp-bg-dark); color: var(--hp-white); }

.hp-hero__content { max-width: 600px; transform: translateY(16px); transition: transform .8s var(--hp-ease); }
.hp-hero__slide.is-active .hp-hero__content { transform: none; }
.hp-hero__eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; margin-bottom: 16px; }
.hp-hero__title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.18; font-weight: 800; letter-spacing: -.03em; margin-bottom: 20px; }
.hp-hero__desc { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; opacity: .8; margin-bottom: 36px; }
.hp-hero__visual { display: flex; justify-content: center; }
.hp-hero__visual svg { width: min(100%, 460px); height: auto; }
.hp-hero__slide.is-active .hp-hero__visual svg { animation: hp-float 6s ease-in-out infinite; }
@keyframes hp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hp-hero__controls {
    position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.75); backdrop-filter: blur(8px);
}
.hp-body .hp-hero__arrow { width: 32px; height: 32px; font-size: 24px; line-height: 1; border-radius: 50%; }
.hp-hero__arrow:hover { background: rgba(0,0,0,.06); }
.hp-hero__dots { display: flex; gap: 6px; }
.hp-hero__dot { width: 28px; height: 32px; display: flex; align-items: center; }
.hp-hero__dot span { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(0,0,0,.2); overflow: hidden; position: relative; }
.hp-hero__dot.is-active { width: 56px; }
.hp-hero__dot.is-active span::after {
    content: ''; position: absolute; inset: 0; background: var(--hp-black);
    transform-origin: left; animation: hp-progress var(--hp-interval, 5s) linear forwards;
}
.hp-hero.is-paused .hp-hero__dot.is-active span::after { animation: none; transform: none; }
@keyframes hp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hp-hero__toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.hp-hero__toggle:hover { background: rgba(0,0,0,.06); }
.hp-hero__icon-pause { width: 10px; height: 12px; border-left: 3px solid var(--hp-black); border-right: 3px solid var(--hp-black); }
.hp-hero.is-paused .hp-hero__icon-pause { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--hp-black); }

/* SVG 일러스트 색상 (토큰 재사용) */
.hp-f-blue { fill: var(--hp-blue); }
.hp-f-yellow { fill: var(--hp-yellow); }
.hp-f-yellow-dark { fill: var(--hp-yellow-dark); }
.hp-f-white { fill: var(--hp-white); }
.hp-f-graphite { fill: var(--hp-graphite); }
.hp-s-yellow-line { stroke: var(--hp-yellow-line); }
.hp-s-yellow-dark { stroke: var(--hp-yellow-dark); }
.hp-s-silver { stroke: var(--hp-silver); }
.hp-s-white { stroke: var(--hp-white); }

/* ---------- 퀵 카테고리 ---------- */
.hp-quick { padding: 48px 0 8px; }
.hp-quick__list { display: flex; justify-content: center; gap: clamp(16px, 4vw, 56px); flex-wrap: wrap; }
.hp-body .hp-quick__item { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 104px; text-align: center; }
.hp-quick__icon {
    width: 88px; height: 88px; border-radius: 50%; background: var(--hp-gray);
    display: flex; align-items: center; justify-content: center; color: var(--hp-black);
    transition: background-color .2s, color .2s, transform .2s var(--hp-ease);
}
.hp-quick__icon svg { width: 42px; height: 42px; }
.hp-quick__name { font-size: 15px; font-weight: 700; }
.hp-quick__item:hover .hp-quick__icon { background: var(--hp-blue); color: var(--hp-white); transform: translateY(-4px); }


/* ---------- 탭 & 카드 ---------- */
.hp-tabs { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; }
.hp-tab {
    min-height: 42px; padding: 0 22px; border-radius: var(--hp-radius);
    font-size: 15px; font-weight: 700; color: var(--hp-muted);
    border: 1px solid var(--hp-line); transition: all .2s;
}
.hp-tab:hover { color: var(--hp-black); border-color: var(--hp-black); }
.hp-tab.is-active { background: var(--hp-black); border-color: var(--hp-black); color: var(--hp-white); }

.hp-panel { display: none; }
.hp-panel.is-active { display: block; animation: hp-fade .4s var(--hp-ease); }
@keyframes hp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hp-panel__desc { text-align: center; color: var(--hp-subtle); margin-bottom: 24px; }

.hp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-card { background: var(--hp-gray); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s var(--hp-ease), box-shadow .25s; }
.hp-card:hover { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,.08); }
.hp-card__visual { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; color: var(--hp-black); }
.hp-card__visual svg { width: 38%; height: auto; transition: transform .4s var(--hp-ease); }
.hp-card:hover .hp-card__visual svg { transform: scale(1.08); }
.hp-card__visual--tape { background: var(--hp-card-tape); }
.hp-card__visual--adhesive { background: var(--hp-card-adhesive); }
.hp-card__visual--chemical { background: var(--hp-card-chemical); }
.hp-card__visual--lubricant { background: var(--hp-card-lubricant); }
.hp-card__visual--safety { background: var(--hp-card-safety); }
.hp-card__visual--photo { background: var(--hp-white); }
.hp-card__visual--photo { position: relative; }
.hp-card__visual img { position: absolute; inset: 10%; width: 80%; height: 80%; object-fit: contain; transition: transform .4s var(--hp-ease); }
.hp-card:hover .hp-card__visual img { transform: scale(1.05); }
.hp-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.hp-card__name { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.hp-card__desc { font-size: 14px; color: var(--hp-muted); line-height: 1.55; flex: 1; }
.hp-body .hp-card__link { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--hp-black); text-decoration: underline; text-underline-offset: 3px; }
.hp-body .hp-card__link:hover { color: var(--hp-blue); }

/* ---------- 회사소개 ---------- */
.hp-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.hp-about__text p:not(.hp-eyebrow) { font-size: 17px; line-height: 1.8; color: var(--hp-text-2); margin-bottom: 16px; }
.hp-about__facts { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--hp-line-strong); }
.hp-about__facts div { display: grid; grid-template-columns: 80px 1fr; padding: 14px 0; border-bottom: 1px solid var(--hp-line-strong); font-size: 15px; }
.hp-about__facts dt { font-weight: 700; }
.hp-about__facts dd { color: var(--hp-muted); }
.hp-about__visual svg { width: 100%; height: auto; display: block; border-radius: 28px; }

/* ---------- 강점 ---------- */
.hp-strengths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hp-strength { padding: 36px 28px; border-radius: 24px; border: 1px solid var(--hp-line); transition: border-color .2s; }
.hp-strength:hover { border-color: var(--hp-black); }
.hp-strength__value { font-size: clamp(36px, 3.6vw, 52px); font-weight: 900; letter-spacing: -.03em; color: var(--hp-blue); line-height: 1.1; }
.hp-strength__label { font-size: 18px; font-weight: 800; margin: 10px 0 8px; }
.hp-strength__desc { font-size: 15px; color: var(--hp-muted); line-height: 1.6; }

/* ---------- 문의 배너 ---------- */
.hp-contact { background: var(--hp-black); color: var(--hp-white); padding: clamp(56px, 7vw, 88px) 0; }
.hp-contact__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.hp-contact__title { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; margin-bottom: 10px; }
.hp-contact__desc { color: rgba(255,255,255,.72); font-size: 17px; }
.hp-contact__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 오시는 길 ---------- */
.hp-location { max-width: 880px; margin: 32px auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hp-location__table { width: 100%; border-top: 2px solid var(--hp-black); }
.hp-location__table div { display: grid; grid-template-columns: 120px 1fr; padding: 20px 8px; border-bottom: 1px solid var(--hp-line); }
.hp-location__table dt { font-weight: 800; }
.hp-location__table dd { color: var(--hp-text-2); overflow-wrap: anywhere; }
.hp-body .hp-location__table a:hover { color: var(--hp-blue); text-decoration: underline; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    .hp-cards, .hp-strengths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-hero__slide { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 24px; text-align: center; }
    .hp-hero__content { max-width: none; margin: 0 auto; }
    .hp-hero__visual svg { width: min(56vw, 300px); }
    .hp-hero__track { height: clamp(600px, 110vw, 760px); }
}
@media (max-width: 768px) {
    .hp-about { grid-template-columns: 1fr; }
    .hp-contact__inner { flex-direction: column; align-items: flex-start; }
    .hp-location__table div { grid-template-columns: 80px 1fr; }
    .hp-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--hp-gutter) * -1); margin-right: calc(var(--hp-gutter) * -1); padding: 0 var(--hp-gutter); }
    .hp-tabs::-webkit-scrollbar { display: none; }
    .hp-tab { flex: 0 0 auto; }
}
@media (max-width: 480px) {
    .hp-cards { grid-template-columns: 1fr; gap: 12px; }
    .hp-card { flex-direction: row; border-radius: 18px; }
    .hp-card__visual { flex: 0 0 104px; aspect-ratio: auto; }
    .hp-card__visual svg { width: 48px; }
    .hp-card__visual img { inset: 6%; width: 88%; height: 88%; }
    .hp-card__body { padding: 16px 18px; gap: 4px; }
    .hp-card__name { font-size: 16px; }
    .hp-strengths { grid-template-columns: 1fr; }
    .hp-quick__item { width: 72px; }
    .hp-quick__icon { width: 64px; height: 64px; }
    .hp-quick__icon svg { width: 32px; height: 32px; }
    .hp-quick__name { font-size: 13px; }
}