/* 공통 웹폰트·토큰·리셋·Header·Footer */
/* ---------- 웹폰트: Khand(헤드라인·수치 --font-head), Noto Sans KR·Noto Sans·Noto Sans SC(본문 --font-body, 언어별 전환), Gmarket Sans(히어로 워드마크) ---------- */
@font-face { font-family:'Khand'; font-style:normal; font-weight:500; font-display:swap; src:url(/front/assets/fonts/khand-500.woff2) format('woff2') }
@font-face { font-family:'Khand'; font-style:normal; font-weight:700; font-display:swap; src:url(/front/assets/fonts/khand-700.woff2) format('woff2') }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:400; font-display:swap; src:url(/front/assets/fonts/noto-sans-kr-400.woff2) format('woff2') }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:500; font-display:swap; src:url(/front/assets/fonts/noto-sans-kr-500.woff2) format('woff2') }
@font-face { font-family:'Noto Sans KR'; font-style:normal; font-weight:700; font-display:swap; src:url(/front/assets/fonts/noto-sans-kr-700.woff2) format('woff2') }
@font-face { font-family:'Noto Sans'; font-style:normal; font-weight:400; font-display:swap; src:url(/front/assets/fonts/noto-sans-400.woff2) format('woff2') }
@font-face { font-family:'Noto Sans'; font-style:normal; font-weight:500; font-display:swap; src:url(/front/assets/fonts/noto-sans-500.woff2) format('woff2') }
@font-face { font-family:'Noto Sans'; font-style:normal; font-weight:700; font-display:swap; src:url(/front/assets/fonts/noto-sans-700.woff2) format('woff2') }
@font-face { font-family:'Noto Sans SC'; font-style:normal; font-weight:400; font-display:swap; src:url(/front/assets/fonts/noto-sans-sc-400.woff2) format('woff2') }
@font-face { font-family:'Noto Sans SC'; font-style:normal; font-weight:500; font-display:swap; src:url(/front/assets/fonts/noto-sans-sc-500.woff2) format('woff2') }
@font-face { font-family:'Noto Sans SC'; font-style:normal; font-weight:700; font-display:swap; src:url(/front/assets/fonts/noto-sans-sc-700.woff2) format('woff2') }
@font-face { font-family:'Gmarket Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('/front/assets/fonts/gmarket-sans-bold.woff') format('woff') }

/* ---------- 디자인 토큰 (컬러 · 폰트 · 헤더 높이 등) ---------- */
:root { 
    --color-black:#1c1b29;
    --color-red:#e0323a; 
    --color-gold:#f6ad40; 
    --action-primary:#d82c35; 
    --text-body:#636466; 
    --text-heading:#404041; 
    --text-technical:#3267a6;
    --color-muted:#939598;
    --border:#d9dadd;
    --border-on-dark:#44444b;
    --surface:#f4f5f6;
    --surface-on-dark:#282835;
    --font-body:"Noto Sans KR","Malgun Gothic",sans-serif;
    --font-head:"Khand","Noto Sans KR","Malgun Gothic",sans-serif;
    --content-width:1440px; 
    --gutter:clamp(32px,12.5vw,240px); 
    --header-height:84px;
    --subnav-height:76px;
    --quick-offset:40px;
    --quick-size:var(--top-button-size);
    --top-button-size:52px;
    --section-space:96px;
    --white-60:rgba(255,255,255,.6); 
    --white-40:rgba(255,255,255,.4);
    --white-20:rgba(255,255,255,.2);
    }
/* 언어별 폰트: html lang 값에 따라 전환. Khand에 없는 글자는 뒤의 본문 폰트로 표시 */
:root:lang(de),:root:lang(en) { --font-body:"Noto Sans",sans-serif; --font-head:"Khand","Noto Sans",sans-serif }
:root:lang(zh) { --font-body:"Noto Sans SC","Noto Sans",sans-serif; --font-head:"Khand","Noto Sans SC","Noto Sans",sans-serif }

/* ---------- 리셋 · 기본 요소 ---------- */
*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-height) + 20px) }
body { margin:0; color:var(--color-black); font:400 16px/1.5 var(--font-body); overflow-wrap:break-word }
/* keep-all은 한글 전용: 중국어에 적용하면 문장부호 외 위치에서 줄바꿈되지 않습니다. */
:root:lang(ko) { word-break:keep-all }
body.is-menu-open { overflow:hidden }
h1,h2,h3,h4,p,figure { margin:0 }
h1,h2,h3,h4 { font-weight:700; hyphens:auto; overflow-wrap:break-word }
ul,ol { margin:0; padding:0; list-style:none }
a { color:inherit; text-decoration:none }
button,select { font:inherit; color:inherit }
button,a,select { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
button { border:0; background:none; padding:0 }
img { display:block; max-width:100% }
video { display:block; max-width:100% }
[hidden] { display:none!important }
:focus-visible { outline:3px solid var(--text-technical); outline-offset:5px }
::selection { background:var(--action-primary); color:white }

/* ---------- 접근성 유틸리티: 스크린리더 전용 텍스트, 본문 바로가기 ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.skip-link { position:fixed; left:16px; top:16px; z-index:1000; transform:translateY(-160%); padding:12px 20px; background:white; color:var(--color-black); border:2px solid var(--color-black) }
.skip-link:focus { transform:none }

/* ---------- 레이아웃 · 섹션 공통 제목 ---------- */
.container { width:calc(100% - var(--gutter)*2); max-width:var(--content-width); margin-inline:auto }
.section { padding-block:var(--section-space) }
.eyebrow { font:500 18px/24px var(--font-head); color:var(--text-technical) }
.section-heading { display:flex; flex-direction:column; gap:48px; margin-bottom:48px }
.section-heading h2 { font:700 64px/1.0625 var(--font-head) }
.section-heading__description { margin-top:16px; color:var(--text-body) }

/* ---------- 버튼 ---------- */
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; min-width:min(220px,100%); max-width:100%; padding:12px 24px; font-size:13px; font-weight:500; line-height:20px; border:1px solid transparent; transition:background-color .2s,color .2s,border-color .2s }
.button img { flex:none }
.button--primary { background:var(--action-primary); color:white }
.button--outline { border-color:var(--color-black); color:var(--color-black) }
.button--on-dark { border-color:var(--border-on-dark); color:white }
.button--primary:focus-visible { background:#b9232b }
.button--outline:focus-visible { background:var(--surface) }
.button--on-dark:focus-visible { background:var(--surface-on-dark) }
@media(hover:hover) {
    .button--primary:hover { background:#b9232b }
    .button--outline:hover { background:var(--surface) }
    .button--on-dark:hover { background:var(--surface-on-dark) }
}
/* 새 창 링크 안내 아이콘: 스크린리더 안내는 .sr-only 문구로 함께 제공 */
.icon-external { display:inline-block; flex:none; width:14px; height:14px; margin-left:4px; vertical-align:-2px; fill:none; stroke:currentColor; stroke-width:1.5 }

/* ---------- Header: 스크롤 / 메뉴 열림 시 배경과 로고 전환 ---------- */
.site-header { height:var(--header-height); position:fixed; inset:0 0 auto; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 72px; border-bottom:1px solid #ffffff33; color:white; transition:background-color .25s,color .25s,border-color .25s,transform .35s }
/* .site-header--solid: 히어로 영상이 없는 서브페이지용. 처음부터 흰 배경으로 고정합니다. */
.site-header.is-scrolled,.site-header--solid,.site-header:has(.gnb__trigger[aria-expanded="true"],.language__trigger[aria-expanded="true"]),body.is-menu-open .site-header { background:white; color:var(--color-black); border-bottom-color:var(--border) }
.is-header-hidden .site-header { transform:translateY(-100%) }
.brand { position:relative; display:block; width:150px; height:34px; flex:none }
.brand img { position:absolute; inset:0; object-fit:contain }
.brand__original { opacity:0 }
.site-header.is-scrolled .brand__inverse,.site-header--solid .brand__inverse,.site-header:has(.gnb__trigger[aria-expanded="true"],.language__trigger[aria-expanded="true"]) .brand__inverse,body.is-menu-open .brand__inverse { opacity:0 }
.site-header.is-scrolled .brand__original,.site-header--solid .brand__original,.site-header:has(.gnb__trigger[aria-expanded="true"],.language__trigger[aria-expanded="true"]) .brand__original,body.is-menu-open .brand__original { opacity:1 }

/* ---------- GNB: 데스크톱 메뉴와 서브메뉴 ---------- */
.gnb__list { display:flex; gap:24px }
.gnb__item { position:relative }
.gnb__trigger,.gnb__link { display:flex; align-items:center; justify-content:center; min-width:128px; min-height:44px; padding:4px 12px; font:500 18px/24px var(--font-head); position:relative }
.gnb__trigger::after,.gnb__link::after { content:""; position:absolute; bottom:0; left:12px; right:12px; height:2px; background:var(--color-red); transform:scaleX(0); transition:transform .2s }
/* .is-active: 현재 페이지가 속한 1차 메뉴. 페이지 HTML에서 지정합니다. */
.gnb__trigger:focus-visible,.gnb__link:focus-visible,.gnb__trigger[aria-expanded="true"],.gnb__trigger.is-active,.gnb__link.is-active { color:var(--action-primary) }
.gnb__trigger:focus-visible::after,.gnb__link:focus-visible::after,.gnb__trigger[aria-expanded="true"]::after,.gnb__trigger.is-active::after,.gnb__link.is-active::after { transform:scaleX(1) }
.gnb__toggle-icon { display:none }
.gnb__submenu { position:absolute; top:calc(100% + 20px); left:50%; transform:translateX(-50%); width:230px; padding:12px; background:white; box-shadow:0 12px 24px #1c1b2914; border:1px solid var(--border); color:var(--color-black) }
.gnb__submenu a { display:block; padding:12px; font-size:14px; line-height:22px }
/* 데스크탑: hidden 상태를 투명 처리해 열고 닫을 때 모두 전환됩니다. ::before는 메뉴와 2차 메뉴 사이의 마우스 이동 통로입니다. */
@media(min-width:1200px) {
    .gnb__submenu { transition:opacity .25s ease,transform .25s ease,visibility .25s }
    .gnb__submenu[hidden] { display:block!important; opacity:0; visibility:hidden; transform:translate(-50%,-8px) }
    .gnb__submenu::before { content:""; position:absolute; left:0; right:0; bottom:100%; height:22px }
}
.gnb__submenu a:focus-visible,.gnb__submenu a[aria-current="page"] { background:var(--surface); color:var(--action-primary) }
@media(hover:hover) {
    .gnb__trigger:hover,.gnb__link:hover { color:var(--action-primary) }
    .gnb__trigger:hover::after,.gnb__link:hover::after { transform:scaleX(1) }
    .gnb__submenu a:hover { background:var(--surface); color:var(--action-primary) }
}

/* ---------- Header 도구: 언어 선택, 모바일 메뉴 토글 ---------- */
.header-tools { display:flex; align-items:center; gap:20px; min-width:96px; justify-content:flex-end }
.language { position:relative; font-size:13px; font-weight:500 }
.language__trigger { display:flex; align-items:center; gap:4px; min-height:44px; padding:4px; white-space:nowrap }
.language__trigger svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .2s }
.language__trigger[aria-expanded="true"] { color:var(--action-primary) }
.language__trigger[aria-expanded="true"] svg { transform:rotate(180deg) }
.language__menu { position:absolute; z-index:1; top:calc(100% + 20px); right:0; min-width:160px; padding:12px; background:white; box-shadow:0 12px 24px #1c1b2914; border:1px solid var(--border); color:var(--color-black) }
.language__option { display:block; width:100%; min-height:44px; padding:11px 12px; font-size:14px; line-height:22px; text-align:left }
.language__option[aria-current="true"] { color:var(--action-primary); font-weight:700 }
.language__option:focus-visible { background:var(--surface); color:var(--action-primary) }
@media(hover:hover) {
    .language__option:hover { background:var(--surface); color:var(--action-primary) }
}
.menu-toggle { display:none; width:44px; height:44px; position:relative }
.menu-toggle>span:not(.sr-only) { position:absolute; left:10px; right:10px; top:16px; height:2px; background:currentColor; transition:transform .2s,top .2s }
.menu-toggle>span:nth-child(2) { top:25px }
.menu-toggle[aria-expanded="true"]>span:first-child { top:21px; transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"]>span:nth-child(2) { top:21px; transform:rotate(-45deg) }

/* ---------- Footer ---------- */
.site-footer { background:white; padding:56px 0 32px }
.footer-top { display:flex; justify-content:space-between; gap:32px }
.footer-brand p { font:500 18px/24px var(--font-head); margin-top:16px }
.footer-policies { display:flex; flex-wrap:wrap; align-items:flex-start; padding-top:11px; gap:4px 16px; font-size:14px }
.footer-policies a:focus-visible { text-decoration:underline }
@media(hover:hover) {
    .footer-policies a:hover { text-decoration:underline }
}
.footer-company { display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:center; gap:72px; margin-top:32px; color:var(--text-body); font-size:14px }
.footer-company__registrations { font-size:12px; margin-top:8px }
.family-site { height:52px; position:relative; border:1px solid var(--border); color:var(--color-black) }
.family-site select { appearance:none; border:0; background:transparent; width:100%; height:100%; padding:8px 48px 8px 16px; font:500 18px/24px var(--font-head); cursor:pointer }
.family-site select:focus { outline:none }
.family-site:focus-within { border-color:var(--color-black) }
.family-site img { position:absolute; right:16px; top:13px; pointer-events:none }
.copyright { border-top:1px solid var(--border); padding-top:32px; margin-top:32px; font-size:12px; line-height:20px; color:var(--text-body) }

/* ---------- 공지 다이얼로그 ---------- */
.notice-dialog { padding:0; border:1px solid var(--border); width:440px; max-width:calc(100% - 40px); color:var(--color-black) }
.notice-dialog::backdrop { background:#11111999 }
.notice-dialog__body { padding:32px }
.notice-dialog h2 { font-size:24px; margin:16px 0 }
.notice-dialog #notice-message { color:var(--text-body); margin-bottom:28px }
.notice-dialog .button { width:100% }
/* ---------- Top 버튼: 스크롤 후 우측 하단 고정 노출 (모바일 메뉴 오버레이보다 아래) ---------- */
.top-button { position:fixed; right:var(--quick-offset); bottom:var(--quick-offset); z-index:90; display:grid; place-items:center; width:52px; height:52px; padding:0; border:1px solid #ffffff33; background:var(--color-black); color:white; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .3s,transform .3s,visibility .3s,background-color .2s }
.top-button.is-visible { opacity:1; visibility:visible; transform:none }
.top-button:focus-visible { background:var(--action-primary) }
@media(hover:hover) {
    .top-button:hover { background:var(--action-primary) }
}
.top-button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:square }
body.is-menu-open .top-button { visibility:hidden }

/* ---------- Quick Banner: 정품 인증 · 다운로드 센터 (메인·서브 공통 우측 하단 고정) ---------- */
/* Top 버튼이 나타나면 그 위로 올라가고, --quick-lift는 Final CTA·Footer와 겹치지 않도록 JS가 지정합니다. */
.quick-banner { position:fixed; right:var(--quick-offset); bottom:var(--quick-offset); z-index:90; display:flex; flex-direction:column; align-items:flex-end; gap:12px; transform:translateY(calc(var(--quick-lift,0px)*-1)); transition:bottom .2s ease-out }
.top-button.is-visible~.quick-banner { bottom:calc(var(--quick-offset) + var(--top-button-size) + 12px) }
.quick-banner__item { display:flex; align-items:stretch; background:white; color:var(--color-black); box-shadow:0 4px 16px #00000014; transition:background-color .2s ease-out,color .2s ease-out }
.quick-banner__label { display:flex; align-items:center; max-width:0; padding-inline:0; overflow:hidden; font-size:13px; font-weight:500; line-height:20px; white-space:nowrap; opacity:0; transition:max-width .2s ease-out,padding .2s ease-out,opacity .2s ease-out }
.quick-banner__icon { display:grid; flex:none; place-items:center; width:var(--quick-size); height:var(--quick-size); border:1px solid var(--border) }
.quick-banner__icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round }
.quick-banner__item:focus-visible { background:var(--color-black); color:white; outline-width:2px; outline-offset:2px }
.quick-banner__item:focus-visible .quick-banner__label { max-width:240px; padding-inline:20px; opacity:1 }
.quick-banner__item:focus-visible .quick-banner__icon { border-color:var(--color-black) }
@media(hover:hover) {
    .quick-banner__item:hover { background:var(--color-black); color:white }
    .quick-banner__item:hover .quick-banner__label { max-width:240px; padding-inline:20px; opacity:1 }
    .quick-banner__item:hover .quick-banner__icon { border-color:var(--color-black) }
}
body.is-menu-open .quick-banner { visibility:hidden }

/* ---------- 스크롤 진입 등장(fade-up) 애니메이션 ---------- */
/* JS가 html에 .reveal-ready를 붙인 경우에만 숨김 상태를 적용해, JS 오류/비활성 시에도 내용이 보입니다.
   같은 시점에 화면에 들어온 요소는 JS가 --reveal-delay로 순차 등장시킵니다. */
.reveal-ready [data-reveal] { opacity:0; transform:translate3d(0,48px,0) }
.reveal-ready [data-reveal].is-revealed { opacity:1; transform:none; transition:opacity .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s),transform 1.1s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0s) }

/* ---------- 반응형: 1921px 이상 (와이드) ---------- */
@media(min-width:1921px) {
    :root { --gutter:max(72px,calc((100vw - 1440px)/2)) }
}

/* ---------- 반응형: 1599px 이하 ---------- */
@media(max-width:1599px) {
    :root { --gutter:64px }
    .site-header { padding-inline:40px }
    .section-heading h2 { font-size:56px }
    .gnb__list { gap:12px }
    .gnb__trigger,.gnb__link { min-width:112px }
}

/* ---------- 반응형: 1199px 이하 (태블릿) — GNB를 전체 화면 메뉴로 전환 ---------- */
@media(max-width:1199px) {
    :root { --gutter:40px; --section-space:72px; --quick-offset:24px }
    .site-header { padding-inline:32px }
    .menu-toggle { display:block }
    .header-tools { min-width:0 }
    .gnb { display:none; position:fixed; top:var(--header-height); left:0; right:0; background:white; color:var(--color-black); height:calc(100dvh - var(--header-height)); overflow-y:auto; padding:24px 40px 64px }
    .gnb.is-open { display:block }
    .gnb__list { display:block }
    .gnb__item { border-bottom:1px solid var(--border) }
    .gnb__trigger,.gnb__link { font-size:28px; justify-content:space-between; width:100%; padding:18px 0; min-height:72px }
    .gnb__trigger::after,.gnb__link::after { display:none }
    .gnb__toggle-icon { display:block; flex:none; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.5 }
    .gnb__trigger[aria-expanded="true"] .gnb__toggle-icon-v { display:none }
    .gnb__submenu { position:static; width:100%; transform:none; border:0; box-shadow:none; padding:0 0 20px }
    .gnb__submenu a { padding:12px 0 }
    .section-heading h2 { font-size:48px }
    .section-heading { gap:32px; margin-bottom:40px }
    .footer-company { gap:32px; grid-template-columns:minmax(0,1fr) 220px }
}

/* ---------- 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    :root { --header-height:68px; --subnav-height:60px; --gutter:24px; --section-space:56px; --quick-offset:16px; --top-button-size:44px }
    .site-header { padding:12px 20px; gap:12px }
    .brand { width:150px; transform:scale(.85); transform-origin:left center; margin-right:-22px }
    .header-tools { gap:8px }
    .gnb { padding-inline:24px }
    .language { font-size:12px }
    .language__menu { top:calc(100% + 12px) }
    .section-heading { gap:24px; margin-bottom:32px }
    .section-heading h2 { font-size:clamp(34px,8.8vw,48px); line-height:1.08 }
    .section-heading__description { font-size:14px; line-height:1.75 }
    .eyebrow { font-size:16px; line-height:22px }
    .footer-top { flex-direction:column; gap:24px }
    .footer-policies { padding:0; font-size:13px }
    .footer-company { grid-template-columns:1fr; gap:24px; margin-top:24px; font-size:12px; line-height:1.9 }
    .footer-company__registrations { font-size:11px }
    .family-site { width:100%; max-width:320px }
    .site-footer { padding:40px 0 24px }
    .copyright { margin-top:24px; padding-top:24px; font-size:11px }
    .button { padding-inline:18px }
    .top-button { width:var(--top-button-size); height:var(--top-button-size) }
    /* 터치 환경은 라벨을 펼치지 않고 aria-label로 이름을 제공합니다. */
    .quick-banner__label { display:none }
}

/* ---------- 모션 최소화 설정: 부드러운 스크롤 · 애니메이션 제거 ---------- */
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto }
    *,*::before,*::after { animation:none!important; transition:none!important }
    .reveal-ready [data-reveal] { opacity:1!important; transform:none!important }
}

/* ---------- Lenis 부드러운 스크롤: 라이브러리(1.3.27) 기본 스타일 + 보정 ---------- */
html.lenis,html.lenis body { height:auto }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip }
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch],.lenis [data-lenis-prevent-vertical],.lenis [data-lenis-prevent-horizontal] { overscroll-behavior:contain }
.lenis.lenis-smooth iframe { pointer-events:none }
.lenis.lenis-autoToggle { transition-property:overflow; transition-duration:1ms; transition-behavior:allow-discrete }
html.lenis,html.lenis body { scroll-behavior:auto!important }

/* ---------- 오류 페이지: 404 · 4xx · 5xx ---------- */
.error-page { display:grid; align-items:center; min-height:calc(100vh - var(--header-height)); padding-block:96px; text-align:center }
.error-page__inner { display:grid; justify-items:center; gap:16px }
.error-page__code { font:700 120px/1 var(--font-head); color:var(--action-primary) }
.error-page__title { font-size:36px; line-height:48px; color:var(--text-heading) }
.error-page__description { max-width:640px; text-wrap:balance; font-size:18px; line-height:30px; color:var(--text-body) }
.error-page__actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; margin-top:24px }
@media(max-width:767px) {
    .error-page { padding-block:64px }
    .error-page__code { font-size:88px }
    .error-page__title { font-size:26px; line-height:36px }
    .error-page__description { font-size:16px; line-height:26px }
    .error-page__actions { flex-direction:column; width:100%; max-width:320px }
    .error-page__actions .button { width:100% }
}