/* 메인 (2026 리디자인). 값은 디자인 캔버스(1440 기준, 좌우 64px)를 그대로 옮겼다.
   클래스는 .hm- 로 시작해 다른 페이지 CSS 와 섞이지 않는다. 헤더도 이 파일에서 메인일 때만 다시 입힌다. */

.hm {
    --hm-blue: #006dbb;
    --hm-ink: #1c2025;
    --hm-text: #333a42;
    --hm-sub: #5b6470;
    --hm-gray: #4a525c;
    --hm-line: #e3e6ea;
    --hm-line-2: #c6ced6;
    --hm-tab-line: #d5dbe1;
    --hm-soft: #f4f5f6;
    --hm-navy: #16202b;
    --hm-en: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    --hm-gutter: 64px;
    font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    color: var(--hm-ink);
    letter-spacing: -0.02em;
    word-break: keep-all;
    line-height: normal;
}
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }
.hm a { color: inherit; text-decoration: none; }
.hm a:hover { color: var(--hm-blue); }
.hm a:focus-visible, .hm button:focus-visible { outline: 2px solid var(--hm-blue); outline-offset: 3px; }
.hm h1, .hm h2, .hm h3, .hm p, .hm table { margin: 0; }
.hm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
::selection { background: #006dbb; color: #fff; }

/* 실제 콘텐츠 폭 1440. 여백(64px)은 그 바깥에 붙는다 → 1568 이상 화면에서 콘텐츠가 정확히 1440 */
.hm .hm-wrap { box-sizing: content-box; max-width: 1440px; margin: 0 auto; padding: 0 var(--hm-gutter); position: relative; }
.hm-num { font-family: var(--hm-en); font-variant-numeric: tabular-nums; }

.hm-link { display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; text-decoration: underline !important; text-underline-offset: 5px; }

/* ── 메인 비주얼 (860) ─────────────────────── */
.hm-hero { position: relative; height: 860px; background: var(--hm-ink); color: #fff; overflow: hidden; }
.hm-slide { position: absolute; inset: 0; background-size: cover; background-position: center 40%; opacity: 0; visibility: hidden; transition: opacity .9s cubic-bezier(.16,1,.3,1), visibility .9s; }
.hm-slide.is-on { opacity: 1; visibility: visible; }
/* 둘째 슬라이드부터의 배경은 페이지가 다 열린 뒤에 받는다(home.js 가 .is-ready). 숨어 있어도 배경 그림은 받아지기 때문에,
   처음 열 때 첫 화면 CSS · 글꼴과 회선을 나눠 쓰던 약 400KB 를 뒤로 미룬다(2026-10-07). 백오피스에서 넣은 배경(style)도 같이. */
.hm-hero:not(.is-ready) .hm-slide:not(.is-on) { background-image: none !important; }
.hm-slide.main_visual01 { background-image: url(/images/main/main_visual01.webp); }
.hm-slide.main_visual02 { background-image: url(/images/main/main_visual02.webp); }
.hm-slide.main_visual03 { background-image: url(/images/main/main_visual03.webp); }
.hm-slide.main_visual04 { background-image: url(/images/main/main_visual04.webp); }
.hm-slide::before { content: ""; position: absolute; inset: 0; background: rgba(14, 22, 32, .5); }
/* 글 묶음은 헤더(96) 아래 ~ 넘김 버튼 위(56+44+56) 사이에서 세로 가운데. 문구 길이가 달라도 처지지 않는다. */
.hm .hm-slide__inner { height: calc(100% - 252px); padding-top: 96px; padding-bottom: 156px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px; }
.hm-slide__inner > * { position: relative; max-width: 780px; }
.hm-slide__inner > .hm-slide__title { max-width: 1000px; }
.hm-slide__kicker { font-size: 16px; opacity: .85; }
.hm-slide__title { font-size: 60px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.hm-slide__title.upp { text-transform: uppercase; font-family: var(--hm-en); letter-spacing: -0.015em; }
.hm-slide__sub { font-size: 19px; line-height: 1.7; font-weight: 300; opacity: .9; }
.hm-slide__sub img { height: 44px; width: auto; vertical-align: middle; margin-left: 10px; }
.hm-slide__body { margin-top: -10px; font-size: 16px; line-height: 1.7; opacity: .78; }
.hm-slide .none_phone { display: inline; }
.hm-slide .hm-slide__cta { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 30px; background: var(--hm-blue); color: #fff; font-size: 16px; font-weight: 500; transition: background .2s; }
.hm-slide .hm-slide__cta:hover { background: #005a9b; color: #fff; }
.hm-slide__inner > .hm-slide__art-wrap { display: contents; } /* 첫 슬라이드 그림의 <picture>: 상자 없이 그림만 예전 자리에 */
.hm-slide__art { position: absolute !important; right: var(--hm-gutter); top: 50%; transform: translateY(-42%); max-height: 520px; width: auto; }

.hm .hm-hero__ctrl { position: absolute; left: 0; right: 0; bottom: 56px; display: flex; align-items: center; gap: 20px; }
.hm-hero__btns { display: flex; align-items: center; gap: 4px; }
.hm-hero__btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; cursor: pointer; transition: background .2s; }
.hm-hero__btn:hover { background: rgba(255,255,255,.15); }
.hm-hero__btn--bare { border: 0; }
.hm-hero__btn--bare svg { width: 16px; height: 16px; stroke-width: 2; }
.hm-hero__btn .i-play, .hm-hero.is-paused .hm-hero__btn .i-pause { display: none; }
.hm-hero.is-paused .hm-hero__btn .i-play { display: block; }
.hm-hero__count { display: flex; align-items: center; gap: 14px; font-family: var(--hm-en); font-size: 15px; }
.hm-hero__count > span:first-child { font-weight: 600; }
.hm-hero__count > span:last-child { opacity: .7; }
.hm-hero__bar { position: relative; width: 120px; height: 2px; background: rgba(255,255,255,.3); }
.hm-hero__bar > span { position: absolute; left: 0; top: 0; height: 2px; background: #fff; transition: transform .6s cubic-bezier(.16,1,.3,1); }

/* ── 인증 로고 (124) ─────────────────────── */
.hm-certi { border-bottom: 1px solid var(--hm-line); }
.hm-certi__row { height: 124px; display: flex; align-items: center; justify-content: space-between; }
.hm-certi__item { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.4; color: var(--hm-gray); }
.hm-certi__item img { height: 43px; width: auto; }

/* ── 제품소개 ─────────────────────── */
.hm-product { padding: 104px 0 112px; text-align: center; }
.hm-product__title { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; }
.hm-product__lead { margin-top: 16px !important; font-size: 17px; line-height: 1.7; color: var(--hm-sub); }
.hm-tabs { margin-top: 48px; display: flex; justify-content: center; gap: 44px; border-bottom: 1px solid var(--hm-tab-line); }
.hm-tab { height: 60px; margin-bottom: -1px; padding: 0 2px; background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 17px; letter-spacing: inherit; color: var(--hm-sub); cursor: pointer; white-space: nowrap; }
.hm-tab:hover { color: var(--hm-ink); }
.hm-tab.is-on { font-weight: 700; color: var(--hm-ink); border-bottom-color: var(--hm-blue); }
.hm-stage { margin-top: 40px; background: var(--hm-soft); }
/* 탭 아래: 전체 목록 · 모델 비교로 */
.hm-product__more { margin-top: 32px; display: flex; justify-content: center; gap: 12px; }
.hm .hm-more { height: 52px; padding: 0 26px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--hm-line-2); font-size: 15px; font-weight: 500; color: var(--hm-ink); transition: border-color .2s, color .2s; }
.hm .hm-more:hover { border-color: var(--hm-blue); color: var(--hm-blue); }
.hm .hm-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-panel { min-height: 520px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; text-align: left; }
/* 여섯 판을 한 칸에 겹쳐 두어 회색 판 높이가 가장 긴 판에 맞춰 고정된다. 숨긴 판은 자리만 차지한다. */
.hm-stage { display: grid; }
.hm-stage > .hm-panel { grid-area: 1 / 1; }
/* bootstrap 의 [hidden]{display:none !important} 를 이겨야 자리를 차지한다 */
.hm-stage > .hm-panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; }
/* 탭 전환 페이드 (home.js FADE 와 같은 0.25s) */
.hm-panel { transition: opacity .25s ease; }
.hm-panel.is-fading { opacity: 0; }
.hm-panel__pic { grid-column: span 7; display: flex; align-items: center; justify-content: center; }
.hm-panel__pic img { width: auto; max-width: 100%; object-fit: contain; }
.hm-panel__text { grid-column: 8 / span 5; padding: 56px 72px 56px 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 20px; }
.hm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hm-badge--plain { color: var(--hm-text) !important; font-family: var(--hm-en); letter-spacing: 0; }
.hm-points { align-self: stretch; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hm-line-2); }
.hm-points li { padding: 12px 0; border-bottom: 1px solid var(--hm-line-2); font-size: 15px; line-height: 1.5; color: var(--hm-sub); }
.hm-points strong { font-weight: 700; color: var(--hm-ink); }
.hm-badge { height: 32px; padding: 0 12px; display: flex; align-items: center; background: #fff; border: 1px solid var(--hm-line-2); font-size: 14px; font-weight: 500; color: var(--hm-blue); }
.hm-panel__text h3 { font-size: 36px; line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; }
.hm-panel__desc { font-size: 18px; line-height: 1.7; color: var(--hm-text); }
.hm-panel__note { font-size: 16px; line-height: 1.75; color: var(--hm-sub); }
.hm-panel__act { display: flex; gap: 10px; margin-top: 12px; }
.hm .hm-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; background: var(--hm-ink); color: #fff; font-size: 15px; font-weight: 500; transition: background .2s; }
.hm .hm-btn:hover { background: var(--hm-blue); color: #fff; }
.hm .hm-btn svg { width: 16px; height: 16px; }
.hm .hm-panel__cat { height: 52px; padding: 0 22px; color: var(--hm-text); }

/* ── D-Brain (580) ─────────────────────── */
.hm-dbrain { background: var(--hm-navy); color: #fff; }
.hm-dbrain__row { height: 580px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.hm-dbrain__text { grid-column: span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hm-dbrain__text h2 { font-family: var(--hm-en); font-size: 44px; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
.hm-dbrain__text p { max-width: 34em; font-size: 17px; line-height: 1.85; font-weight: 300; color: #d3dbe3; }
.hm .hm-link--light { height: 44px; color: #fff; text-underline-offset: 6px; }
.hm .hm-link--light:hover { color: #9fd0f2; }
.hm-dbrain__pic { grid-column: 6 / span 7; display: flex; justify-content: flex-end; }
.hm-dbrain__pic img { width: 780px; max-width: 100%; height: auto; }

/* ── 회사 (420) ─────────────────────── */
.hm-company { background: #eef0f2 url(/images/main/history_bg.webp) center / cover no-repeat; }
.hm-company__row { height: 420px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.hm-company__text { grid-column: span 6; display: flex; flex-direction: column; gap: 20px; }
.hm-company__text h2 { font-size: 34px; line-height: 1.45; font-weight: 700; letter-spacing: -0.035em; }
.hm-company__text p { max-width: 36em; font-size: 17px; line-height: 1.8; color: var(--hm-gray); }
.hm-company__nav { grid-column: 8 / span 5; border-top: 2px solid var(--hm-ink); }
.hm-company__nav a { display: flex; justify-content: space-between; align-items: center; height: 62px; border-bottom: 1px solid var(--hm-line-2); font-size: 17px; font-weight: 500; }
.hm-company__nav svg { width: 16px; height: 16px; }

/* ── 공지 · 고객센터 · 바로가기 ─────────── */
.hm-info { padding: 100px 0; }
.hm-info__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.hm-notice { grid-column: span 7; display: flex; flex-direction: column; }
.hm-cs { grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-start; }
.hm-info__head { align-self: stretch; display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 20px; border-bottom: 2px solid var(--hm-ink); }
.hm-info__head h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.hm .hm-info__more { font-size: 15px; color: var(--hm-gray); text-decoration: underline; text-underline-offset: 5px; }
.hm-notice__row { display: flex; align-items: center; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--hm-line); }
.hm-notice__t { flex: 1; min-width: 0; font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-notice time { font-family: var(--hm-en); font-size: 15px; color: var(--hm-sub); font-variant-numeric: tabular-nums; }
.hm .hm-cs__tel { margin-top: 24px; font-family: var(--hm-en); font-size: 46px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--hm-blue); }
.hm-cs table { margin-top: 16px; border-collapse: collapse; font-size: 15px; color: var(--hm-text); }
.hm-cs th { text-align: left; font-weight: 500; padding: 8px 24px 8px 0; }
.hm-quick { grid-column: 1 / span 12; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.hm-quick a { display: flex; align-items: center; gap: 16px; height: 108px; padding: 0 32px; border-right: 1px solid var(--hm-line); font-size: 17px; font-weight: 500; }
.hm-quick a:last-child { border-right: 0; }
.hm-quick svg { width: 28px; height: 28px; stroke-width: 1.4; }
.hm-quick a:hover svg { stroke: var(--hm-blue); }

/* ── 1300 이하: 메뉴가 햄버거로 (layout.css 와 같은 지점) ─────────── */
@media (max-width: 1300px) {
    .hm-certi__row { height: auto; flex-wrap: wrap; justify-content: center; gap: 20px 36px; }
    .hm .hm-certi__row { padding-top: 28px; padding-bottom: 28px; }
    .hm-tabs { justify-content: flex-start; gap: 32px; overflow-x: auto; scrollbar-width: none; }
    .hm-tabs::-webkit-scrollbar { display: none; }
    .hm-slide__art { display: none; }
}

/* ── 태블릿 ─────────── */
@media (max-width: 900px) {
    .hm { --hm-gutter: 32px; }
    .hm-hero { height: 720px; }
    .hm .hm-slide__inner { height: calc(100% - 212px); padding-top: 72px; padding-bottom: 140px; }
    .hm-slide__title { font-size: 42px; }
    .hm-panel { height: auto; grid-template-columns: 1fr; }
    .hm-panel__pic, .hm-panel__text { grid-column: auto; }
    .hm-panel__pic { padding: 48px 24px 24px; }
    .hm-panel__pic img { max-height: 300px; }
    .hm-panel__text { padding: 0 32px 48px; }
    .hm-dbrain__row, .hm-company__row { height: auto; grid-template-columns: 1fr; row-gap: 40px; }
    .hm .hm-dbrain__row, .hm .hm-company__row { padding-top: 80px; padding-bottom: 80px; }
    .hm-dbrain__text, .hm-dbrain__pic, .hm-company__text, .hm-company__nav { grid-column: auto; }
    .hm-dbrain__pic { justify-content: center; }
    .hm-info { padding: 80px 0; }
    .hm-info__grid { grid-template-columns: 1fr; row-gap: 56px; }
    .hm-notice, .hm-cs, .hm-quick { grid-column: auto; }
    .hm-quick { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hm-quick a:nth-child(2) { border-right: 0; }
    .hm-quick a:nth-child(-n+2) { border-bottom: 1px solid var(--hm-line); }
}

/* ── 폰 ─────────── */
@media (max-width: 480px) {
    .hm { --hm-gutter: 20px; }
    .hm-hero { height: 640px; }
    .hm .hm-slide__inner { height: calc(100% - 182px); padding-top: 72px; padding-bottom: 110px; gap: 18px; }
    .hm-slide__kicker { font-size: 14px; }
    .hm-slide__title { font-size: 30px; }
    .hm-slide__sub { font-size: 16px; }
    .hm-slide__body { font-size: 14px; margin-top: -4px; }
    .hm-slide .none_phone { display: none; }
    .hm-slide .hm-slide__cta { height: 50px; padding: 0 24px; font-size: 15px; margin-top: 6px; }
    .hm .hm-hero__ctrl { bottom: 28px; }
    .hm-certi__item { font-size: 13px; }
    .hm-product { padding: 72px 0 80px; }
    .hm-product__title { font-size: 30px; }
    .hm-product__lead { font-size: 15px; }
    .hm-tabs { margin-top: 32px; gap: 24px; }
    .hm-tab { font-size: 15px; height: 52px; }
    .hm-stage { margin-top: 24px; }
    .hm-product__more { margin-top: 24px; gap: 8px; }
    .hm .hm-more { flex: 1; justify-content: center; padding: 0 12px; }
    .hm-panel__pic img { max-height: 220px; }
    .hm-panel__text { padding: 0 20px 32px; gap: 14px; }
    .hm-panel__text h3 { font-size: 24px; }
    .hm-panel__desc { font-size: 15px; }
    .hm-panel__note { font-size: 14px; }
    .hm-dbrain__text h2 { font-size: 32px; }
    .hm-dbrain__text p, .hm-company__text p { font-size: 15px; }
    .hm-company__text h2 { font-size: 24px; }
    .hm-info__head h2 { font-size: 22px; }
    .hm-notice__row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 0; }
    .hm-notice__t { font-size: 16px; white-space: normal; }
    .hm .hm-cs__tel { font-size: 36px; }
    .hm-quick a { height: 84px; padding: 0 16px; gap: 12px; font-size: 15px; }
    .hm-quick svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-slide, .hm-hero__bar > span, .hm-panel { transition: none; }
}