라서 태그로 집을 수 없다. 그래서 body 에 걸고(상속) 제목만 아래에서 balance 로 되돌린다. */ body { text-wrap: pretty; } /* 제목 · 소제목 — 줄 길이 균등화. letter-spacing 은 건드리지 않는다. body 의 pretty 를 덮어쓴다(둘 다 text-wrap 이라 나중 선언이 이긴다). */ h1, h2, h3, h4, h5, h6, .text-balance { text-wrap: balance; } /* 태그(pill)는 안에서 끊기면 알약 모양이 깨진다 */ .mbanner-chip { white-space: nowrap; } /* ===== 소재 카드 본문 ===== 문장 단위 줄바꿈. 마침표로 끝나는 문장마다 새 줄에서 시작하되, 문장 사이 간격은 일반 줄 간격과 같아야 한다 — 그래서 margin 없이 display:block 만 준다(
을 쓰면 문장이 두 줄로 넘칠 때 들여쓰기가 어긋나고, 문장 단위로 pretty 를 걸 수도 없다). */ .mbanner-desc-ko .sentence { display: block; } /* 한 줄 32~40자에 들어오도록 본문 폭을 잡는다. 13.5px 한글 기준 1자 ≈ 13.5px 이므로 36자 ≈ 486px, 카드 패널 안쪽 폭(372px)이 이미 그보다 좁아 실제로는 28자 안팎으로 떨어진다. 패널을 넓혀 32자 하한을 맞춘다 — 이미지:텍스트 비율은 그대로 두고 상한만 460px → 500px 로 올린다. */ .mbanner-desc-ko { max-width: 40em; } /* ===== 푸터 사업자 정보 ===== "상호 (주)은성" "전화 031-544-7272 · 010-5430-2580" 처럼 각 이 그 자체로 한 항목이다. 항목 안에서 끊기면(특히 전화번호가 하이픈에서 갈리면) 무슨 정보인지 읽히지 않으므로, 줄바꿈은 항목 사이에서만 일어나게 한다. 항목 간격(gap 22px)이 사실상 구분자 역할을 한다. */ .ft-info > span { white-space: nowrap; } /* 주소도 한 덩어리로 둔다. 360px 에서 실측 207px 이라 컨테이너(324px)에 여유 있게 들어가고, 번지수 "356-39" 가 하이픈에서 갈리는 것도 함께 막힌다. */ /* ===== mobile.css ===== */ /* ===== 모바일 / 태블릿 대응 (전 페이지 공통) ===== 원칙: 데스크톱(1280px 이상)은 이 파일이 전혀 개입하지 않는다. 모든 규칙은 max-width 미디어쿼리 안에만 있다. 본문 대부분이 인라인 style 이라 일반 선택자로는 덮이지 않는다. [style*="..."] + !important 로 잡는다. 인라인 스타일을 직접 고치면 데스크톱까지 바뀌므로, 이 방법이라야 "데스크톱 무변경" 을 지킬 수 있다. ⚠ 선택자 작성 규칙 x-dc 가 재렌더하면서 인라인 스타일을 정규화한다. 원본 style="padding:120px 5vw;font:400 13.5px/1.8 'Manrope'" 정규화 style="padding: 120px 5vw; font: 400 13.5px / 1.8 Manrope" 그래서 "padding:120px" 처럼 콜론을 낀 문자열로는 매칭이 안 된다. 양쪽에 공통으로 남는 "값" 조각으로만 매칭한다. (예: "120px 5vw") letter-spacing 은 ".42em" 이 "0.42em" 의 부분 문자열이라 그대로 통한다. ⚠ 브레이크포인트가 769/1025/431 인 이유 서브픽셀 스케일링 환경에서 뷰포트가 768.0x px 로 잡히면서 max-width:768px 가 정확히 768 기기에서 거짓이 된다. 1px 씩 올려 경계값(360/390/430/768/1024)을 확실히 포함시킨다. */ /* ════════ 전역 방어 (전 폭 공통) ════════ */ /* 삼성 인터넷 "글자 크기 확대(가가)" · iOS 가로 회전 시 폰트 부스팅으로 레이아웃이 틀어지는 것을 막는다. 사용자의 브라우저 확대(핀치줌)는 막지 않는다 — 텍스트 자동 인플레이션만 끈다. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* 시스템의 동작 줄이기 설정을 존중한다 — 장식성 애니메이션·전환을 즉시 완료 상태로 보낸다. reveal/메뉴 스태거는 상태 클래스 기반이라 기능은 그대로 동작하고 연출만 생략된다. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; } html { scroll-behavior: auto !important; } } /* ════════ 태블릿 가로 (≤1279px) ════════ 1280 미만은 전부 터치 기기로 본다. 터치 타겟 44px 는 여기서부터 적용. */ @media (max-width: 1279px) { [style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; } .nav-ic, .nav-burger { width: 44px !important; height: 44px !important; } .lang { gap: 3px !important; } .lang b { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; } footer a { min-height: 44px; display: inline-flex; align-items: center; } .brand-logo { min-height: 44px; align-items: center !important; } /* 플로팅 위젯 항목 — 터치 타깃 44px 확보 */ .iw-btn { min-width: 44px !important; min-height: 44px !important; } /* facility 타임라인 사진: 78vw/90vw 가 좌측 레일 오프셋과 겹쳐 넘친다. 페이지 자체 대응이 ≤860px 뿐이라 그 위 구간(861~1279)이 비어 있었다. */ .ft-photo-wrap, .ft-row-lg .ft-photo-wrap { width: 100% !important; max-width: none !important; } .ft-content { max-width: none !important; } } /* ════════ 모바일 풀스크린 메뉴 ════════ 열림 상태는 body.nav-open 하나로 표현하고 mobile-nav.js 가 토글한다. 오버레이(#esMnav)는 JS 가 body 끝에 만든다 — x-dc 재렌더 영역 밖. 페이지 안에 남아 있는 구형 드롭다운 패널(.nav-mobile-panel)은 폐기: 각 페이지의 인라인 helmet CSS 가 body.nav-open 에서 display:flex 를 걸므로 모든 상태에서 !important 로 눌러둔다. */ .nav-mobile-panel, body.nav-open .nav-mobile-panel { display: none !important; } @media (max-width: 1080px) { /* 버튼으로 바뀌면서 기본 스타일이 붙는다. 기존 원형 아이콘 모양을 유지한다. */ button.nav-burger { -webkit-appearance: none; appearance: none; padding: 0; color: inherit; font: inherit; line-height: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } /* ── 오버레이 골격 ── 닫힌 상태에선 visibility:hidden 이라 어떤 폭에서도 화면에 영향이 없다. 버거가 없는 데스크톱(>1080)에서는 열릴 일 자체가 없고, 리사이즈로 1080을 넘으면 JS 가 자동으로 닫는다. */ .mnav { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; color: #0e2440; visibility: hidden; opacity: 0; transition: opacity .45s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s; } body.nav-open .mnav { visibility: visible; opacity: 1; transition: opacity .45s cubic-bezier(.22,1,.36,1); } .mnav-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid #eee; } .mnav-brand { display: flex; align-items: baseline; gap: .5em; text-decoration: none; color: #0e2440; min-height: 44px; align-items: center; } .mnav-brand-en { font: 600 1.15rem 'Cormorant Garamond', serif; letter-spacing: .14em; } .mnav-brand-kr { font: 400 .66rem 'Noto Serif KR', serif; opacity: .55; } /* 닫기 — 헤더 아이콘과 같은 어휘(2026-09 v2): 정지 땐 베어, hover 에 12px 틴트 */ .mnav-close { width: 44px; height: 44px; margin-right: -10px; border-radius: 12px; border: 0; background: transparent; color: #0e2440; display: grid; place-items: center; cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mnav-close:hover { background: rgba(14, 36, 64, .06); } .mnav-close svg { width: 22px; height: 22px; stroke-width: 1.75; stroke-linecap: round; } .mnav-close:focus-visible { outline: 2px solid #2f6fed; outline-offset: -3px; } .mnav-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 28px 28px calc(36px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; } /* ── 메뉴 항목 ── 리듬(2026-09 정돈): 섹션 간격 36px · 섹션 머리(아이브로우/캡션) 아래 12px · 구분선 아래 24px. 한글은 예외 없이 Noto Serif KR 400 — 상단 메뉴와 소재 하위 메뉴는 크기로만 위계를 준다. */ .mnav-eyebrow { font: 600 10px 'Manrope', sans-serif; letter-spacing: .3em; color: #a8763f; margin: 0 0 12px; } .mnav-eyebrow--sub { margin-top: 36px; } /* 영문 소제목은 Manrope 를 유지하되, 뒤에 붙는 한글은 Noto Serif KR 로 — Manrope 에는 한글 글리프가 없어 그대로 두면 기기별 시스템 폰트로 떨어진다. */ .mnav-ko { font-family: 'Noto Serif KR', serif; font-weight: 400; letter-spacing: .04em; } .mnav-list { display: flex; flex-direction: column; } .mnav-link, .mnav-sublink { display: flex; align-items: baseline; gap: 14px; text-decoration: none; color: #0e2440; min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mnav-link { padding: 7px 0; } .mnav-idx { font: italic 400 12px 'Cormorant Garamond', serif; color: #c9a24b; letter-spacing: .08em; min-width: 22px; } .mnav-link .mnav-link-t { font: 400 clamp(23px, 6.2vw, 30px)/1.35 'Noto Serif KR', serif; transition: color .25s ease; } .mnav-sublink { padding: 6px 0 6px 36px; align-items: center; } .mnav-sublink .mnav-link-t { font: 400 17px/1.5 'Noto Serif KR', serif; color: rgba(14, 36, 64, .78); transition: color .25s ease; } .mnav-link.is-current .mnav-link-t, .mnav-sublink.is-current .mnav-link-t { color: #a8763f; } .mnav-link:active .mnav-link-t, .mnav-sublink:active .mnav-link-t { color: #c9a24b; } /* ── 유틸(검색·로그인·언어) ── */ /* ── 유틸 줄(검색 · 로그인 · KO/EN) — 헤더와 같은 어휘(2026-09 v2): 보더 없는 옅은 틴트 필 버튼, 언어는 흰색 필이 미끄러지는 세그먼트 토글 ── */ .mnav-utils { display: flex; align-items: center; gap: 8px; margin-top: 36px; padding-top: 20px; border-top: 1px solid #eee; } .mnav-util { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; margin: 0; border: 0; border-radius: 999px; background: rgba(14, 36, 64, .06); color: #0e2440; /* 한글 라벨(검색·로그인) — 오버레이 안의 한글은 예외 없이 Noto Serif KR 400 */ font: 400 14px 'Noto Serif KR', serif; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mnav-util:hover { background: rgba(14, 36, 64, .10); } .mnav-util svg { width: 17px; height: 17px; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .mnav-util:focus-visible { outline: 2px solid #2f6fed; outline-offset: 2px; } .mnav-lang { position: relative; margin-left: auto; margin-right: 0; display: inline-flex; align-items: stretch; gap: 0; height: 36px; padding: 3px; box-sizing: border-box; border-radius: 999px; background: rgba(14, 36, 64, .06); font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .02em; text-transform: uppercase; color: #0e2440; } .mnav-lang::before { content: ''; position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(14, 36, 64, .14), 0 0 0 .5px rgba(14, 36, 64, .05); transition: transform .35s cubic-bezier(.22, 1, .36, 1); } :root[lang="en"] .mnav-lang::before { transform: translateX(100%); } .mnav-lang b { position: relative; z-index: 1; flex: 1 0 0; min-width: 0; min-height: 0; font-weight: inherit; opacity: .5; display: inline-grid; place-items: center; cursor: pointer; transition: opacity .25s ease; } :root:not([lang="en"]) .mnav-lang b:nth-of-type(1), :root[lang="en"] .mnav-lang b:nth-of-type(2) { opacity: 1 !important; } .mnav-lang .lang-btn { min-width: 50px; height: 100%; margin: 0; padding: 0 12px; } .mnav-lang .lang-btn::after { top: -4px; bottom: -4px; } /* ── 상담 블록 — 유틸 줄과 같은 하이라인·같은 여백으로 한 리듬 ── */ .mnav-contact { margin-top: 36px; padding-top: 24px; border-top: 1px solid #eee; } .mnav-contact-cap { font: 600 10px 'Manrope', sans-serif; letter-spacing: .3em; color: #a8763f; margin-bottom: 12px; } /* 대표번호(위) + 휴대폰(아래) 두 줄 — 각각 개별 tel: 링크 */ .mnav-tels { display: flex; flex-direction: column; align-items: flex-start; } .mnav-tel { display: inline-flex; align-items: center; min-height: 44px; font: 500 clamp(26px, 7vw, 34px) 'Cormorant Garamond', serif; letter-spacing: .04em; color: #0e2440; text-decoration: none; } .mnav-tel--sub { font-size: clamp(20px, 5.4vw, 26px); color: rgba(14, 36, 64, .68); } .mnav-kakao { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 46px; padding: 0 20px; border-radius: 24px; background: #0e2440; color: #ffffff; font: 400 14px 'Noto Serif KR', serif; letter-spacing: .02em; text-decoration: none; } .mnav-kakao svg { width: 15px; height: 15px; } /* ── 열림 스태거 — 항목이 아래에서 순차로 떠오른다 ── 지연(--d)은 JS 가 인라인으로 심는다. 닫힐 때는 지연 없이 즉시 사라져 오버레이 페이드와 어긋나지 않는다. */ .mnav-eyebrow, .mnav-link, .mnav-sublink, .mnav-utils, .mnav-contact { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); } body.nav-open .mnav-eyebrow, body.nav-open .mnav-link, body.nav-open .mnav-sublink, body.nav-open .mnav-utils, body.nav-open .mnav-contact { opacity: 1; transform: none; transition-delay: var(--d, 0ms); } /* ════════ 태블릿 세로 (≤1024px) ════════ */ @media (max-width: 1025px) { [style*="repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ════════ 모바일 · 태블릿 세로 이하 (≤768px) ════════ */ @media (max-width: 769px) { /* ── 1-2 가로 스크롤 차단: 다단 그리드를 1열로 ── */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 26px !important; } /* 세로 여백 축소 */ [style*="120px 5vw"], [style*="130px 5vw"], [style*="110px 5vw"], [style*="100px 5vw"] { padding-top: 64px !important; padding-bottom: 64px !important; } [style*="76px 5vw 110px"] { padding-top: 44px !important; padding-bottom: 64px !important; } /* 데스크톱 기준 큰 고정 높이 완화 */ [style*="460px"][style*="height"], [style*="420px"][style*="height"] { height: auto !important; min-height: 230px !important; aspect-ratio: 4 / 3; } /* ── 1-4 타이포: 본문 16px 이상 ── */ body { font-size: 16px; } [style*="400 13px"], [style*="400 13.5px"], [style*="400 14px"], [style*="400 14.5px"], [style*="400 15px"], [style*="400 15.5px"], [style*="400 12.5px"] { font-size: 16px !important; line-height: 1.75 !important; } [style*="500 13px"], [style*="500 14px"], [style*="600 14px"], [style*="600 14.5px"], [style*="500 13.5px"], [style*="500 12.5px"] { font-size: 16px !important; } /* 오버라인·라벨은 의도적으로 작은 글자다. 위 규칙보다 뒤에 둬서 되돌린다. ".42em" 은 정규화된 "0.42em" 의 부분 문자열이라 양쪽 모두 잡힌다. */ [style*=".42em"], [style*=".34em"], [style*=".32em"], [style*=".3em"], [style*=".28em"], [style*=".２em"], [style*=".2em"], [style*=".18em"], [style*=".16em"], [style*=".14em"], [style*=".12em"] { font-size: 11px !important; line-height: 1.5 !important; } /* ── 1-5 이미지 ── */ img { max-width: 100% !important; height: auto; } img[style*="absolute"] { height: 100% !important; } /* ── 1-3 헤더: 로고 + KO/EN + 버거만 ── 검색·로그인 아이콘은 풀스크린 메뉴 안으로 옮겼다(mobile-nav.js). 360px 에서 터치 타겟 5개가 몰려 로고("은성")와 겹치던 문제의 해법이다. */ .nav-right .nav-ic { display: none !important; } .nav-right { gap: 4px !important; } /* 헤더가 좌우로 꽉 차므로 상하 패딩을 줄여 높이를 유지한다. backdrop blur 는 고정 헤더에서 스크롤 프레임마다 다시 계산되는 가장 무거운 효과라 모바일에선 끄고, 대신 배경 불투명도를 올려 가독성을 유지한다. */ body > div[style*="z-index: 30"], body > div[style*="z-index:30"] { padding-top: 8px !important; padding-bottom: 8px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(251, 250, 250, .95) !important; } /* ── 1-3 푸터: 세로 스택 ── 푸터는 grid 가 아니라 flex 라 전역 grid 규칙에 안 잡힌다. 바깥(브랜드 ↔ 링크 묶음)은 세로로, 링크 3그룹은 2열 그리드로. */ footer > div:first-of-type { flex-direction: column !important; gap: 40px !important; } footer div[style*="64px"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 30px 20px !important; } footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 30px !important; } footer a { min-height: 44px; display: inline-flex; align-items: center; } /* 하단 고정 CTA 바(≤768 전용, inquiry-widget.js)에 가리지 않을 여유 */ footer { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; } /* 사업자 정보 한 줄 나열 → 줄바꿈 */ footer [style*="flex-wrap"] { gap: 6px 14px !important; } } /* ════════ 좁은 모바일 (≤430px) ════════ */ @media (max-width: 431px) { [style*="120px 5vw"], [style*="130px 5vw"], [style*="110px 5vw"], [style*="100px 5vw"], [style*="76px 5vw 110px"] { padding-left: 20px !important; padding-right: 20px !important; } [style*="grid-template-columns"] { gap: 18px !important; } /* 헤더가 로고+KO/EN+버거 3요소로 줄어 360px(폴드 커버 320px 포함)에도 여유가 생겼다 — 로고는 640px 블록의 1.35rem 을 그대로 쓰고, KO/EN 도 가로 44px 터치 타겟을 온전히 지킨다. */ } /* ════════ 플로팅 문의 위젯 ════════ ≤768 에서는 하단 고정 CTA 바(전화·카톡)가 역할을 대신하므로 위젯을 숨긴다 — 규칙은 위젯과 같은 파일(inquiry-widget.css)에 있다. 태블릿(769~1279)은 위젯을 그대로 쓴다. */ /* ===== mobile-overlays.css ===== */ /* ===== 모바일 오버레이/모달 대응 ===== 로그인·회원가입 모달과 검색 오버레이는 login-modal.css / search-overlay.css 에 클래스 기반으로 정의돼 있어 인라인 스타일 문제는 없다. 여기서는 모바일 특유의 문제만 다룬다 — iOS 자동 확대, 키보드 가림, 안전영역. 데스크톱(≥1280)에는 개입하지 않는다. */ @media (max-width: 1279px) { /* ── 2-1 / 2-2 iOS 입력 자동 확대 방지 ── iOS Safari 는 폰트가 16px 미만인 입력에 포커스하면 화면을 확대한다. 확대되면 레이아웃이 어긋나고 되돌아오지 않아, 모든 입력을 16px 로 올린다. */ .lm-input, .so-input, .ct-input, .ct-select, .ct-textarea { font-size: 16px !important; } } @media (max-width: 769px) { /* ── 2-1 로그인 / 회원가입 모달 ── */ .lm-overlay { padding: 0 !important; align-items: flex-end !important; /* 하단 시트 형태가 엄지에 가깝다 */ } .lm-card { max-width: 100% !important; width: 100% !important; /* 오버레이(inset:0) 기준 % 로 잡는다. dvh 는 iOS 주소창·iframe 환경에서 실제 컨테이너 높이와 어긋나 하단이 몇 px 잘리는 경우가 있었다. */ max-height: 92% !important; margin-top: auto !important; border-radius: 20px 20px 0 0 !important; /* 홈 인디케이터 영역만큼 아래 여백 확보 */ padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; /* 데스크톱의 진입 연출(translateY(18px) scale(.97))을 그대로 두면 scale 때문에 카드가 뷰포트 아래로 몇 px 밀려난다. 모바일에서는 하단 시트 슬라이드로 바꿔 어긋남 없이 화면 안에 정확히 수납한다. */ transform: translateY(100%) !important; } .lm-overlay.is-open .lm-card { transform: translateY(0) !important; } .lm-head { padding: 30px 20px 0 !important; } .lm-body { padding: 0 20px 12px !important; /* 키보드가 올라와도 입력칸이 가려지지 않도록 스크롤 여유를 둔다 */ scroll-padding-bottom: 120px; overscroll-behavior: contain; } .lm-title { font-size: 22px !important; } .lm-close { top: 12px !important; right: 12px !important; width: 40px !important; height: 40px !important; } .lm-input { padding: 14px 14px 14px 42px !important; } .lm-submit { padding: 15px 16px !important; font-size: 15px !important; } .lm-social button { height: 50px !important; } .lm-tab { min-height: 44px; font-size: 14px !important; } .lm-seg-opt span { min-height: 50px !important; } .lm-addr-btn { min-height: 46px; padding: 0 14px !important; } .lm-forgot { min-height: 44px; display: inline-flex; align-items: center; } .lm-account-btn { min-height: 44px; } /* 다음 우편번호 embed — 모바일에서 세로 공간을 충분히 준다 */ .lm-daum { border-radius: 20px 20px 0 0 !important; } .lm-daum-box { min-height: 60vh; min-height: 60dvh; } /* ── 2-2 검색 오버레이 ── */ .so-overlay { padding: 0 !important; } .so-panel { max-width: 100% !important; width: 100% !important; max-height: 100% !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; } .so-bar { padding: 14px 14px !important; } .so-input { font-size: 16px !important; } .so-close { width: 44px !important; height: 44px !important; } .so-body { padding: 4px 8px calc(16px + env(safe-area-inset-bottom, 0px)) !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .so-item { padding: 12px 10px !important; min-height: 56px; } .so-empty-btn { min-height: 46px; display: inline-flex; align-items: center; } } /* ===== mobile-pages.css ===== */ /* ===== 페이지별 모바일 대응 (3단계) ===== 데스크톱(≥1280)에는 개입하지 않는다. */ /* ──────────── 3-1 index: 히어로 ──────────── (2026-09) index.html 의