/* 사이트 공통 (토큰·GNB·메가메뉴·드로어·섹션 제목·푸터) — 모든 공개 페이지가 로드한다 */

:root {
    --hp-black: #000;
    --hp-text: #1a1a1a;
    --hp-muted: #555;
    --hp-subtle: #757575;
    --hp-line: #e5e5e5;
    --hp-gray: #f4f4f4;
    --hp-gray-2: #eaeaea;
    --hp-white: #fff;
    --hp-blue: #1428a0;
    --hp-blue-hover: #0f1f7a;
    --hp-yellow: #f2c94c;
    --hp-text-2: #333;
    --hp-line-strong: #d5d5d5;
    --hp-line-footer: #d9d9d9;
    --hp-sep: #c4c4c4;
    --hp-ink-hover: #333;
    --hp-bg-tape: linear-gradient(120deg, #fbf6e6 0%, #f4ecd2 100%);
    --hp-bg-chem: linear-gradient(120deg, #eef1fb 0%, #dfe5f7 100%);
    --hp-bg-dark: radial-gradient(circle at 75% 40%, #23345f 0%, #0b1020 70%);
    --hp-card-tape: linear-gradient(135deg, #fbf3d9, #f2e3b0);
    --hp-card-adhesive: linear-gradient(135deg, #e9eefb, #d3dcf5);
    --hp-card-chemical: linear-gradient(135deg, #e7f3ef, #cde6dd);
    --hp-card-lubricant: linear-gradient(135deg, #f5ebe3, #ead5c4);
    --hp-card-safety: linear-gradient(135deg, #fbe9e4, #f3cfc4);
    --hp-yellow-dark: #e8bd40;
    --hp-yellow-line: #e0b43a;
    --hp-silver: #d9d9d9;
    --hp-graphite: #222;
    --hp-on-dark-muted: rgba(255, 255, 255, .72);
    --hp-gnb-h: 64px;
    --hp-radius: 20px;
    --hp-container: 1440px;
    --hp-gutter: 24px;
    --hp-ease: cubic-bezier(.4, 0, .2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: var(--hp-gnb-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hp-body {
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
    font-size: 16px;
    color: var(--hp-text);
    background: var(--hp-white);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
    overflow-x: hidden;
}
.hp-body.is-locked { overflow: hidden; }
.hp-body a { color: inherit; text-decoration: none; }
.hp-body ul, .hp-body ol { list-style: none; }
.hp-body button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hp-body :focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; border-radius: 4px; }

.hp-container { max-width: var(--hp-container); margin: 0 auto; padding: 0 var(--hp-gutter); }

.hp-skip { position: absolute; left: 16px; top: -48px; z-index: 300; padding: 10px 16px; background: var(--hp-black); color: var(--hp-white); border-radius: 8px; }
.hp-skip:focus { top: 12px; }

/* ---------- Pill 버튼 ---------- */
.hp-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 26px; border-radius: var(--hp-radius);
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s;
    white-space: nowrap;
}
.hp-body .hp-pill--dark { background: var(--hp-black); color: var(--hp-white); }
.hp-body .hp-pill--dark:hover { background: var(--hp-ink-hover); color: var(--hp-white); }
.hp-body .hp-pill--light { background: var(--hp-white); color: var(--hp-black); }
.hp-body .hp-pill--light:hover { background: var(--hp-gray-2); color: var(--hp-black); }
.hp-body .hp-pill--outline-light { border-color: var(--hp-white); color: var(--hp-white); }
.hp-body .hp-pill--outline-light:hover { background: var(--hp-white); color: var(--hp-black); }

/* ---------- GNB ---------- */
.hp-gnb {
    position: sticky; top: 0; z-index: 100;
    background: var(--hp-white); transition: box-shadow .2s;
}
.hp-gnb.is-scrolled { box-shadow: 0 1px 0 var(--hp-line), 0 6px 16px rgba(0,0,0,.04); }
.hp-gnb__inner {
    max-width: var(--hp-container); margin: 0 auto; padding: 0 var(--hp-gutter);
    height: var(--hp-gnb-h); display: flex; align-items: center; gap: 40px;
}
.hp-logo { display: inline-flex; align-items: baseline; gap: 4px; font-weight: 900; letter-spacing: .02em; }
.hp-logo__mark { font-size: 24px; color: var(--hp-blue); }
.hp-logo__sub { font-size: 24px; color: var(--hp-black); }

.hp-gnb__nav { flex: 1; height: 100%; }
.hp-gnb__menu { display: flex; justify-content: center; gap: 8px; height: 100%; }
.hp-gnb__item { display: flex; align-items: center; }
.hp-body .hp-gnb__link {
    position: relative; display: flex; align-items: center; height: 100%;
    padding: 0 16px; font-size: 16px; font-weight: 700;
}
.hp-gnb__link::after {
    content: ''; position: absolute; left: 16px; right: 16px; bottom: 14px;
    height: 2px; background: var(--hp-black); transform: scaleX(0); transition: transform .2s var(--hp-ease);
}
.hp-gnb__link:hover::after, .hp-gnb__item--mega.is-open .hp-gnb__link::after { transform: scaleX(1); }

.hp-gnb__util { display: flex; align-items: center; gap: 20px; }
.hp-body .hp-gnb__util-link { font-size: 14px; font-weight: 600; color: var(--hp-muted); }
.hp-body .hp-gnb__util-link:hover { color: var(--hp-black); }

.hp-gnb__burger { display: none; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hp-gnb__burger span { display: block; width: 22px; height: 2px; background: var(--hp-black); border-radius: 2px; }

/* 메가메뉴 */
.hp-mega {
    position: absolute; left: 0; right: 0; top: var(--hp-gnb-h); z-index: 110;
    background: var(--hp-white); border-top: 1px solid var(--hp-line);
    box-shadow: 0 16px 24px rgba(0,0,0,.06);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s, transform .2s var(--hp-ease), visibility .2s;
}
.hp-gnb__item--mega.is-open .hp-mega { opacity: 1; visibility: visible; transform: none; }
.hp-mega__inner {
    max-width: var(--hp-container); margin: 0 auto; padding: 36px var(--hp-gutter) 44px;
    display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 24px;
}
.hp-mega__col--all { padding-right: 24px; border-right: 1px solid var(--hp-line); }
.hp-mega__count { font-size: 14px; color: var(--hp-subtle); margin: -6px 0 18px; }
.hp-body .hp-mega__cta { min-height: 38px; padding: 0 18px; font-size: 14px; }
.hp-gnb__link.is-current::after { transform: scaleX(1); }
.hp-body .hp-mega__title { display: block; font-size: 17px; font-weight: 800; margin-bottom: 14px; }
.hp-body .hp-mega__link { display: block; padding: 5px 0; font-size: 14px; color: var(--hp-muted); }
.hp-body .hp-mega__title:hover, .hp-body .hp-mega__link:hover { color: var(--hp-blue); text-decoration: underline; }

/* 드로어 (모바일) */
.hp-drawer {
    position: fixed; inset: 0; z-index: 200; background: var(--hp-white);
    display: flex; flex-direction: column;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s var(--hp-ease), visibility .3s;
}
.hp-drawer.is-open { transform: none; visibility: visible; }
.hp-drawer__head { display: flex; justify-content: space-between; align-items: center; height: var(--hp-gnb-h); padding: 0 var(--hp-gutter); border-bottom: 1px solid var(--hp-line); }
.hp-body .hp-drawer__close { font-size: 32px; line-height: 1; width: 40px; height: 40px; }
.hp-drawer__body { overflow-y: auto; padding: 16px var(--hp-gutter) 40px; }
.hp-drawer__label { margin: 20px 0 8px; font-size: 13px; font-weight: 700; color: var(--hp-subtle); }
.hp-body .hp-drawer__list a { display: block; padding: 12px 0; font-size: 20px; font-weight: 700; border-bottom: 1px solid var(--hp-gray); }


/* ---------- 섹션 공통 ---------- */
.hp-section { padding: clamp(64px, 8vw, 110px) 0; }
.hp-section--gray { background: var(--hp-gray); }
.hp-section__title { font-size: clamp(28px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; text-align: center; margin-bottom: 14px; }
.hp-section__title--left { text-align: left; }
.hp-section__lead { text-align: center; color: var(--hp-muted); font-size: 17px; margin-bottom: 36px; }
.hp-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-blue); margin-bottom: 14px; }

/* ---------- 푸터 ---------- */
.hp-footer { background: var(--hp-gray); padding: 56px 0 40px; font-size: 14px; }
.hp-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 36px; border-bottom: 1px solid var(--hp-line-footer); }
.hp-footer__title { font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.hp-body .hp-footer__link { display: inline-block; padding: 4px 0; color: var(--hp-muted); }
.hp-body .hp-footer__link:hover { color: var(--hp-black); text-decoration: underline; }
.hp-footer__info { padding-top: 28px; color: var(--hp-subtle); line-height: 1.9; font-size: 13px; }
.hp-footer__company { font-weight: 800; color: var(--hp-text); font-size: 15px; margin-bottom: 4px; }
.hp-footer__sep { margin: 0 10px; color: var(--hp-sep); }
.hp-footer__copy { margin-top: 12px; }


/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
    .hp-gnb__nav, .hp-gnb__util-link { display: none; }
    .hp-gnb__inner { justify-content: space-between; }
    .hp-gnb__burger { display: flex; }
}
@media (max-width: 768px) {
    :root { --hp-gutter: 16px; }
    .hp-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .hp-footer__cols { grid-template-columns: 1fr; }
    .hp-footer__sep { display: block; height: 0; overflow: hidden; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-body *, .hp-body *::before, .hp-body *::after { animation: none !important; transition: none !important; }
}