/* ⚠️ 페이지가 참조하는 배포본은 이 파일이 아니라 *.min.css — 수정 후 반드시 `python3 tools/minify.py` 로 재생성해 함께 커밋할 것 */ /* [N1] @font-face 선언은 /static/lib/css/fonts.css 로 옮겼다. unicode-range 로 조각낸 서브셋이라 선언이 길고, 메인(renewal.css)과 V2 하위 페이지(renewal-chrome.css)가 같은 폰트를 쓰므로 한 벌만 두고 공유한다. ★ 두 셸(head) 모두 이 CSS 보다 '먼저' fonts.css 를 링크해야 한다. */ /* ============================================================ * renewal-chrome.css — 리뉴얼 공용 헤더/푸터 전용 스타일 * * 누가 쓰나 * · V2 페이지 (head_v2.php) — 구 style.css 와 함께 로드되는 환경 * · 외부 앱 (/mdai 등) — 이 파일 하나만 로드. style.css 없이도 완결된다. * · renewal 메인은 renewal.css(전체판)를 쓴다 — 아래 '두 파일' 항목 참고. * * 단독 로드해도 되는 이유 * 헤더/푸터 스코프(.hdr / .ftr) 안에서만 리셋을 걸기 때문에 바깥 UI 를 건드리지 않는다. * 페이지 전역에 영향을 주는 규칙은 아래 3개뿐이며, 전부 의도된 것이다. * 1) @media(max-width:1024px) body{ padding-bottom: 58px + safe-area } * — 하단 고정 탭바에 콘텐츠가 가리지 않도록. 탭바를 안 쓰면 무시해도 된다. * 2) a,span,font,b,em,... { vertical-align: baseline } * — 구 style.css 의 vertical-align:middle 전역 지정을 되돌린다. * CSS 기본값이라 style.css 가 없는 환경에서는 사실상 무해. * 3) @media(max-width:820px) html,body{ overflow-x:hidden; max-width:100% } * — 모바일 가로 스크롤 차단. * 파일 말미의 'V2 시맨틱 복구' 블록은 전부 :where(body.v2) 스코프라 외부 앱에는 * 적용되지 않는다(구 style.css 를 함께 로드하는 V2 페이지 전용 처방). * 반대로 renewal.css 에는 *{box-sizing} / html / body / a / button / img,svg 같은 * 전역 리셋이 들어 있다. 외부 앱은 renewal.css 를 로드하면 안 된다. * * 두 파일을 유지하는 이유와 안전장치 * 전역 리셋을 메인에만 적용해야 해서 한 파일로 합치지 못했다. 그래서 헤더/푸터 규칙이 * renewal.css 와 이 파일에 같은 내용으로 두 벌 존재한다. 한쪽만 고치면 조용히 어긋나므로 * `php tools/check_chrome_parity.php` 로 대조한다(의도된 차이는 그 스크립트에 등재). * → 헤더/푸터 스타일을 고칠 땐 두 파일 모두 고치고 위 스크립트를 돌릴 것. * * 마크업은 단일 소스: application/views/renewal/_header.php / _footer.php * 동작(JS)도 단일 소스: static/lib/js/renewal-chrome.js * ============================================================ */ /* ---- 구 style.css 전역 룰 방어 (12px 리셋·footer 전역 스타일 등) ---- :where() 로 명시도를 0으로 낮춰, 아래 컴포넌트 클래스 룰(.nav-btn 등)이 항상 이기게 한다. */ .hdr, .ftr { font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.6; color: var(--fg); } .hdr :where(*, *::before, *::after), .ftr :where(*, *::before, *::after) { box-sizing: border-box; } .hdr :where(ul, ol), .ftr :where(ul, ol) { margin: 0; padding: 0; list-style: none; } .hdr :where(a), .ftr :where(a) { color: inherit; text-decoration: none; } .hdr :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; margin: 0; } .hdr :where(input) { font: inherit; } .hdr :where(svg), .ftr :where(svg) { display: block; } .hdr :where(p), .ftr :where(p), .ftr :where(address) { margin: 0; font-style: normal; } footer.ftr { margin: 0; clear: both; } .hdr :where(h1, h2, h3), .ftr :where(h1, h2, h3) { margin: 0; } /* ---- 구 style.css 의 main{padding-top:10px;width:1200px;margin:auto} 방어 ---- V2 고객센터/커뮤니티 래퍼(
)에 요소 셀렉터가 그대로 적중해 모바일에서도 1200px 고정폭이 되던 문제. style.css 는 라이브 페이지(
사용: 회원가입·사이트이용안내 등)가 의존하므로 절대 수정하지 않고, style.css "다음"에 로드되는 이 파일에서 V2 래퍼만 무력화한다. - 폭/마진 해제: 센터링·최대폭은 내부 .cbv2-inner(max-width:1200px;margin:0 auto)가 이미 담당 → 데스크톱 렌더 픽셀 동일, 모바일은 유동. - padding-top:10px 는 유지해 기존 데스크톱 룩 보존. */ /* 위 방어는 main.cbv2 한 곳뿐이었다. 같은 구 규칙(width:1200px)을 그대로 맞고 있던 나머지 V2 화면(gdv2 계열 — 순위·기업검색·BAP·가이드·이용요금·약관·통합검색 등)은 좁은 화면에서도 main 이 1200px 로 고정돼, 카드·표·칩이 화면 밖으로 밀려났다(360px 화면에서 카드 1200px). 고정폭을 상한으로 바꿔 데스크톱 모양(1200px 가운데 정렬)은 그대로 두고 좁은 화면에서만 줄어들게 한다. cbv2 는 아래 줄이 계속 우선한다. */ body.v2 main{ width:auto; max-width:1200px; margin-left:auto; margin-right:auto; } /* [폭 넘침] renewal.css(메인)에는 있는 전역 box-sizing:border-box 리셋이 이 파일에는 없어, V2 서브페이지의 폼 컨트롤이 width:100% + padding 만큼 컨테이너를 넘쳤다 (BAP 발주처 조회 입력칸: 컨테이너 340px 인데 340+28=370px 로 카드 밖으로 삐져나감). 레이아웃 전반을 건드리지 않도록 폼 컨트롤에만 적용한다 — 이 요소들은 UA 기본도 border-box 라 되돌리는 성격의 변경이다. */ body.v2 input, body.v2 select, body.v2 textarea, body.v2 button{ box-sizing:border-box; } main.cbv2 { width: auto; margin: 0; padding-top: 10px; } /* style.css 전역 section{margin-top:20px} 이 cbv2-main 에 겹여백(10+20px)을 만든다 → 본문 마진 제거 */ main.cbv2 section.cbv2-main { margin-top: 0; } /* style.css .plist{height:50px;line-height:50px} — 모바일에서 페이지 버튼이 랩되면 고정높이가 겹침 유발 */ .cbv2 .plist { height: auto; line-height: normal; } /* ==== 전역 타이포 리셋 중화(V2 컨테이너) ====================================== style.css(수정금지) 전역 td,th,a,span{font-size:12px;color:#232323} 는 요소 직격이라 컨테이너의 font-size "상속"을 이긴다 → 게시글 본문(.vbody)·약관·안내문처럼 DB/마크업이 span·td·font 로 감싼 텍스트가 전부 12px 로 렌더되던 원인. .cbv2 :where(...) = (0,1,0) 로 전역(0,0,1)만 이기고, 클래스 규칙·인라인 style 은 그대로 우선하므로 개별 디자인은 불변. [3차] 이 규칙은 컨테이너 6종(span·a·td·th·font·p·li)만 다룬다. b·strong·div·h2 등 나머지 요소는 파일 말미 'V2 시맨틱 복구' 블록에서 body.v2 전역으로 한 번에 처리한다. */ .cbv2 :where(span, a, td, th, font, p, li), #mlv2 :where(span, a, td, th, font, p, li), .gdv2 :where(span, a, td, th, font, p, li){font-size:inherit} .cbv2 :where(span, font, p, li), #mlv2 :where(span, font, p, li), .gdv2 :where(span, font, p, li){color:inherit} /* [#7·#20] style.css(수정금지) 전역 vertical-align:middle 이 인라인 강조 span(.em 등)을 baseline 에서 띄워 한 줄 안에서 글자가 위/아래로 어긋나던 문제 중화. 인라인 텍스트 요소만(span·a·font·b·em·strong·small·mark) — 아이콘 i, 셀 td·th, img 는 제외해 안전. */ .cbv2 :where(span, a, font, b, em, strong, small, mark), #mlv2 :where(span, a, font, b, em, strong, small, mark), .gdv2 :where(span, a, font, b, em, strong, small, mark){vertical-align:baseline} /* ==== V2 페이저 통일(필형·A안) ================================================== head_v2(V2 전용)에서만 로드되므로 라이브 .plist/.pageBtn/.pager 무영향. - style.css .pageBtn(각진 보더)/.pageSet(color:red!important) 재정의(상세도 우위) - bidroom.css .pager(파란 활성 #2f6df6)는 .mbl-bidlist 스코프로 재정의 활성 = 36px 원형 레드 채움(칩 탭바와 동일 문법), 숫자 = 고스트, 이전/다음 = 텍스트 */ .plist{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;height:auto;line-height:normal} .plist .pageBtn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px; border:0;border-radius:999px;background:transparent;font-size:13px;font-weight:600;color:#4a5568;cursor:pointer;line-height:1; text-align:center;text-decoration:none;transition:background .12s,color .12s} .plist .pageBtn:hover{background:#fbeaea;color:#c0392b;text-decoration:none} /* 회색 틴트는 페이지 배경과 미구분 → 레드 틴트 */ .plist .pageBtn.pageSet{background:#d64545;color:#fff!important;font-weight:800;border:0;box-shadow:0 3px 10px rgba(214,69,69,.25)} .plist .pageBtn:first-child,.plist .pageBtn:last-child{padding:0 13px;color:#8a93a2;font-weight:700} .plist .pageBtn:first-child:hover,.plist .pageBtn:last-child:hover{background:#fbeaea;color:#c0392b;text-decoration:none} .mbl-bidlist .pager{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:16px} .mbl-bidlist .pager a{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 6px; border:0;border-radius:999px;background:transparent;font-size:13px;font-weight:600;color:#4a5568;cursor:pointer;line-height:1; text-decoration:none;transition:background .12s,color .12s} .mbl-bidlist .pager a:hover{background:#fbeaea;color:#c0392b;text-decoration:none} /* [모바일 공통] 페이저 한 줄 — 이전/1~10/다음이 두 줄로 꺾이던 것 수정. [v4.8] 균등 축소(flex:1 min-width:0)만으로는 버튼이 12개를 넘는 페이저(조달업체목록 등)에서 글자보다 좁게 짜부라졌다 — 버튼에 최소폭(34px)을 보장하고, 그래도 넘치면 컨테이너가 가로 스크롤한다(짜부라뜨리는 대신 밀어서 보는 쪽이 눌리기라도 한다). */ @media (max-width:768px){ .plist{flex-wrap:nowrap;width:100%;gap:2px;justify-content:stretch; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .plist::-webkit-scrollbar{display:none} .plist .pageBtn{flex:1 1 0;min-width:34px;padding:0;font-size:12.5px;height:38px;white-space:nowrap} .plist .pageBtn:first-child,.plist .pageBtn:last-child{padding:0 6px;flex:1.15 1 auto;min-width:44px} .plist .pageBtn.pageSet{box-shadow:0 2px 7px rgba(214,69,69,.25)} .mbl-bidlist .pager{flex-wrap:nowrap;width:100%;gap:2px; overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch} .mbl-bidlist .pager::-webkit-scrollbar{display:none} .mbl-bidlist .pager a{flex:1 1 0;min-width:34px;padding:0;font-size:12.5px;height:38px;white-space:nowrap} } .mbl-bidlist .pager a.pageSet{background:#d64545;border-color:#d64545;color:#fff!important;font-weight:800;box-shadow:0 3px 10px rgba(214,69,69,.25)} .mbl-bidlist .pager a:first-child,.mbl-bidlist .pager a:last-child{padding:0 13px;color:#8a93a2;font-weight:700} .mbl-bidlist .pager a:first-child:hover,.mbl-bidlist .pager a:last-child:hover{background:#fbeaea;color:#c0392b;text-decoration:none} /* [#28] 모바일: 페이지 버튼(이전 1 2 … 다음)이 2줄로 감기지 않고 한 줄로 — 넘치면 가로 스크롤 */ @media (max-width:640px){ .plist,.mbl-bidlist .pager{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none} .plist::-webkit-scrollbar,.mbl-bidlist .pager::-webkit-scrollbar{height:0;width:0} .plist .pageBtn,.mbl-bidlist .pager a{flex:0 0 auto} /* [버그픽스] 좌측 치우침 — 버튼이 폭 안에 다 들어가면 가운데, 넘치면 왼쪽부터 스크롤. justify-content:center 는 overflow 시 왼쪽 끝이 잘려 못 쓴다(고전 문제) → 양끝 auto 마진. (auto 마진은 남는 공간에서만 벌어지고 overflow 상태에선 0 으로 접힌다) */ .plist > :first-child,.mbl-bidlist .pager > :first-child{margin-left:auto} .plist > :last-child,.mbl-bidlist .pager > :last-child{margin-right:auto} } :root{ --canvas:#ffffff; --surface:#f9fafb; --surface-2:#f3f4f6; --bd:#e5e7eb; --bd-strong:#d1d5db; --fg:#111827; --fg-sub:#4b5563; --fg-muted:#6b7280; --fg-placeholder:#5f6673; --brand:#ca1111; --brand-dark:#a90d0d; --on-brand:#ffffff; --band-ic-bg:#fdeeed; --glass:rgba(255,255,255,.85); --ring-brand:0 0 0 3px rgba(202,17,17,.16); --shadow-glass:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(17,24,39,.04),0 8px 24px rgba(17,24,39,.06); --sh-1:0 1px 2px rgba(17,24,39,.05); --sh-2:0 2px 8px rgba(17,24,39,.06),0 12px 32px rgba(17,24,39,.08); --sh-3:0 4px 12px rgba(17,24,39,.06),0 24px 64px rgba(17,24,39,.12); --sh-user:0 4px 12px rgba(17,24,39,.08),0 2px 4px rgba(17,24,39,.04); --ease-spring:cubic-bezier(0.2, 0.8, 0.2, 1); --dur-spring:.32s; --ls-tight:-0.01em; --srf1:#11141b; --line-2:rgba(255,255,255,.16); --ink:#f4f6f8; --body:#e8ecf0; --mut:#9aa3ad; --red:#ff4d42; --red-hover:#ff6157; --red-deep:#ca1111; --on-accent:#0b0d12; --glow-a:radial-gradient(760px 560px at 12% 6%,rgba(255,77,66,.16),transparent 64%); --l-bg:#f6f7f9; --l-card:#ffffff; --l-ink:#171a1f; --l-mut:#565e6a; --l-line:#e4e7ec; --l-line-strong:#8b95a1; --le2:0 2px 8px rgba(23,26,31,.07),0 14px 36px rgba(23,26,31,.08); --mint:#00d4a4; --violet:#7c5cff; --violet-tint:rgba(124,92,255,.12); --r-pill:9999px; --r-chat:16px; --r-bubble:14px; --font-sans:"Pretendard Variable",Pretendard,-apple-system,system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace; --fs-2xs:11.5px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:15px; --fs-h3:17px; --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:40px; --sp8:56px; --sp9:72px; --sp10:96px; --r1:6px; --r2:10px; --r3:16px; --r4:22px; --r-full:999px; --dur-1:.16s; --dur-2:.28s; --ease:cubic-bezier(.2,.7,.2,1); --container:1320px; --pad:40px; } .container{max-width:var(--container); margin-inline:auto; padding-inline:var(--pad)} /* ============================================================================ [레이어 순서 규약] 새 오버레이는 반드시 이 표에서 값을 받아 온다. 70 .dd GNB 드롭다운 300 .hdr 헤더(스태킹 컨텍스트를 만든다 — 자손 fixed 의 기준점이 될 수 있으니 backdrop-filter 를 켠 채로 fixed 자손을 두지 말 것) 350 .tabbar 모바일 하단 탭바 360 .tabbar-toast 탭바 토스트 400 .acct-panel 계정(프로필) 패널 1200 .mega(모바일) 전체메뉴 시트 — 탭바까지 덮어야 해서 유일하게 네 자리 같은 스태킹 컨텍스트(.hdr) 안에서는 이 숫자가 그대로 위아래가 된다. 서로 겹치면 안 되는 레이어는 숫자로 겨루지 말고 JS 에서 상호배제할 것 (계정 ↔ 전체메뉴가 그렇게 되어 있다). ========================================================================== */ /* ========================================================================== [앱/웹뷰] 상단 세이프에어리어 head_v2/head 의 viewport 메타가 `viewport-fit=cover` 라 페이지를 화면 끝까지 그린다. 일반 브라우저는 주소창이 상태바 자리를 가려 주지만, APK 웹뷰에는 주소창이 없어 페이지 최상단(헤더·`.page-h` 페이지 타이틀)이 상태바에 덮였다. 아래 인셋은 브라우저·데스크톱에서 항상 0 이라 화면 변화가 없고, 상태바 위로 그려지는 환경에서만 그만큼 내려 준다. ========================================================================== */ body{ padding-top:env(safe-area-inset-top, 0px); } .sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .logo-sub{font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:500; color:var(--mut); letter-spacing:.08em} .skip{ position:fixed; top:-64px; left:16px; z-index:200; background:var(--brand); color:var(--on-brand); font-weight:700; font-size:var(--fs-sm); padding:10px 18px; border-radius:var(--r2); transition:top var(--dur-1) var(--ease); } .skip:focus{top:12px} /* ============ HEADER ============ */ /* [V2 서브페이지] 헤더는 스크롤 시 "따라오지 않는다"(비고정). - 이유: 상세페이지들의 자체 .toolbar/.qjump 가 top:0 sticky 라서, 헤더까지 sticky(z:60 동일)면 서로 겹쳐 레이아웃이 깨진다. 헤더를 문서 흐름에 두면 스크롤 시 페이지 툴바가 자연스럽게 화면 상단(top:0)을 차지한다. - 모바일도 동일: 화면이 작을수록 세로공간이 귀해 헤더 상시고정은 손해. 메뉴 접근은 최상단 스크롤(또는 페이지 툴바의 뒤로가기)로. renewal 메인만 renewal.css 에서 sticky 유지. - z-index 300: 헤더가 문서 위쪽에 보일 때 드랍다운/메가가 서브페이지의 sticky 툴바(z:60)·qjump(z:55) 위에 뜨도록. 페이지 모달(z:100000±)보다는 낮음. */ .hdr{ /* relative(문서 흐름 유지=스크롤 시 사라짐) + z-index 적용 가능 상태 */ position:relative; z-index:300; background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(180%); backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--bd); box-shadow:var(--shadow-glass); letter-spacing:var(--ls-tight); font-weight:500; } .hdr::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"); pointer-events: none; } /* ============================================================ 상위 1% 초프리미엄 유틸리티 바 (t1) 정밀 튜닝 ============================================================ */ .t1-in { display: flex; align-items: center; gap: var(--sp6); height: 58px; } /* 1. 로고 타이포그래피 마스터 튠 */ .logo { display: inline-flex; align-items: center; gap: 10px; flex: none; font-size: 17px; font-weight: 800; color: var(--fg); letter-spacing: -0.03em; } /* [#19] 모노그램('입') → 실제 로고 이미지. 배경/글자 스타일을 비우고 이미지만 꽉 채운다. */ /* 2. 글로벌 테크 스타업 스타일의 검색창 튜닝 */ .search-wrap { position: relative; flex: 1; max-width: 320px; } .search { position: relative; display: block; } .search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-muted); pointer-events: none; transition: color 0.2s var(--ease); } #gq { width: 100%; height: 38px; padding: 0 var(--sp4) 0 38px; background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--fg); caret-color: var(--brand); transition: background 0.24s var(--ease), border-color 0.24s var(--ease), box-shadow 0.24s var(--ease); } #gq:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } #gq:focus { outline: 0; background: var(--canvas); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(202, 17, 17, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03); } #gq:focus + .search-ic { color: var(--brand); } #gq::placeholder { color: var(--fg-placeholder); font-weight: 400; } /* 3. 우측 버튼 그룹 스케일 및 정렬 최적화 */ .auth { display: flex; align-items: center; gap: var(--sp4); flex: none; margin-left: auto; } .login-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--sp2); font-size: 13.5px; font-weight: 600; color: var(--fg-sub); transition: color 0.2s var(--ease); } .login-link:hover { color: var(--fg); } .cta { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; flex: none; background: var(--brand); color: var(--canvas); font-size: 13.5px; font-weight: 600; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); white-space: nowrap; transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .cta:hover { background: var(--red); box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-1px); } /* ---- 나의메뉴(계정 드롭다운) — 로그인 시 로그아웃 링크 대체. 상위 1% 패턴 차용: 아바타 칩(우측 끝) + hover/클릭 플로팅 패널, 패널은 프로필 헤더 → 회원형태/만료일 메타 → 메뉴 → 로그아웃 순. hover 는 CSS(:hover/:focus-within), 터치·클릭 토글은 renewal-chrome.js 가 .open 부여 ---- */ .acct{ position:relative; display:flex; align-items:center; } .acct-btn{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:3px 8px 3px 4px; border:1px solid transparent; border-radius:var(--r-full); background:transparent; cursor:pointer; transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .acct.open .acct-btn, .acct-btn:focus-visible{ background:var(--surface); border-color:var(--bd); } .acct-avatar{ width:30px; height:30px; border-radius:50%; flex:none; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--brand), #e2574c); color:#fff; font-size:13.5px; font-weight:800; letter-spacing:0; user-select:none; } .acct-avatar--lg{ width:40px; height:40px; font-size:17px; } .acct-name{ max-width:132px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--fg); } .acct-caret{ width:14px; height:14px; flex:none; color:var(--fg-muted); transition:transform var(--dur-2) var(--ease-spring); } .acct.open .acct-caret{ transform:rotate(180deg); } .acct-panel{ position:absolute; top:calc(100% + 10px); right:0; width:284px; background:var(--canvas); border:1px solid var(--bd); border-radius:14px; box-shadow:0 4px 10px rgba(17,24,39,.06), 0 24px 48px rgba(17,24,39,.16); opacity:0; visibility:hidden; transform:translateY(6px) scale(.98); transform-origin:top right; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-spring), visibility 0s var(--dur-2); z-index:400; } /* hover 브리지 — 버튼↔패널 10px 공백만. 12px 는 헤더 행을 2px 침범해(z 400) AI·전체메뉴 쪽으로 이동하는 커서를 가로채 깜빡임·클릭 실종을 만들었다 */ .acct-panel::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; } .acct.open .acct-panel{ opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-spring), visibility 0s; } /* hover 오픈은 데스크톱(정밀 포인터)만 — 터치는 :hover 잔존으로 패널이 안 닫히는 문제 방지. 터치/키보드는 renewal-chrome.js 의 클릭 토글(.open)로 동작 */ @media (hover:hover) and (pointer:fine){ .acct:hover .acct-btn{ background:var(--surface); border-color:var(--bd); } .acct:hover .acct-caret{ transform:rotate(180deg); } /* [hover intent] 열림에 120ms 지연 — 이웃 버튼으로 지나가며 스치는 호버(120ms 미만)로는 패널이 뜨지 않아 경계 깜빡임이 사라진다. 닫힘 유예(visibility 지연)는 기본 규칙이 담당. */ .acct:hover .acct-panel{ opacity:1; visibility:visible; transform:none; transition:opacity var(--dur-2) var(--ease) .12s, transform var(--dur-2) var(--ease-spring) .12s, visibility 0s .12s; } } .acct-hd{ display:flex; align-items:center; gap:11px; padding:15px 16px 13px; border-bottom:1px solid var(--surface-2); } .acct-who{ min-width:0; display:flex; flex-direction:column; gap:2px; } .acct-who strong{ font-size:14px; font-weight:800; color:var(--fg); letter-spacing:-.2px; line-height:1.35; /* 긴 업체명: 패널에서는 2줄까지 랩 후 말줄임(칩은 132px 한 줄 말줄임 + title 툴팁) */ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; white-space:normal; word-break:break-all; } .acct-who span{ font-size:12px; color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-meta{ padding:10px 16px; border-bottom:1px solid var(--surface-2); display:flex; flex-direction:column; gap:7px; } .acct-m{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:22px; } .acct-m .k{ font-size:12px; font-weight:600; color:var(--fg-muted); flex:none; } .acct-m .v{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--fg); font-variant-numeric:tabular-nums; } .acct-badge{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:var(--r-full); background:var(--surface-2); color:var(--fg-sub); font-size:11.5px; font-weight:800; } .acct-badge--pri{ background:var(--band-ic-bg); color:var(--brand); } .acct-dday{ font-style:normal; font-size:11px; font-weight:800; color:var(--fg-sub); background:var(--surface-2); border-radius:var(--r-full); padding:2px 7px; } .acct-dday.hot{ color:#b42318; background:#fdeeed; } /* 만료 임박(D-7 이하)·만료: 연장 유도 배너 — 결제 전환 패턴 */ .acct-renew{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:3px; padding:9px 12px; border-radius:10px; background:#fdeeed; color:#b42318; font-size:12px; font-weight:700; transition:background var(--dur-1) var(--ease); } .acct-renew .a{ flex:none; display:inline-flex; align-items:center; gap:4px; font-weight:800; white-space:nowrap; } .acct-renew .a svg{ width:13px; height:13px; } .acct-renew:hover{ background:#fbdcda; } /* 회원 등급별 주 작업 공간 바로가기(분석실/분석지원/나의입찰) — 헤더 CTA 를 패널 안으로 이동 */ .acct-go{ padding:12px 14px; border-bottom:1px solid var(--surface-2); } .acct-cta{ display:flex; align-items:center; justify-content:center; gap:7px; height:40px; border-radius:10px; background:var(--brand); color:var(--on-brand); font-size:13.5px; font-weight:800; box-shadow:0 3px 10px rgba(202,17,17,.22); transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .acct-cta svg{ width:14px; height:14px; transition:transform var(--dur-2) var(--ease-spring); } .acct-cta:hover{ background:var(--brand-dark); box-shadow:0 5px 14px rgba(202,17,17,.3); transform:translateY(-1px); } .acct-cta:hover svg{ transform:translateX(2px); } .acct-cta:active{ transform:translateY(0); box-shadow:none; } .acct-menu{ padding:6px; display:flex; flex-direction:column; } .acct-menu a{ display:flex; align-items:center; gap:8px; min-height:38px; /* 좌측 여백을 그룹 라벨('빠른메뉴')보다 한 단 더 들여쓴다 — 항목이 라벨에 종속된 하위 목록이라는 게 들여쓰기로 드러난다(라벨과 같은 선에 있으면 나란한 형제로 읽힌다). */ padding:0 10px 0 20px; border-radius:9px; font-size:13px; font-weight:600; color:var(--fg-sub); transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } /* 메뉴 그룹 라벨(나의 업무 / 계정 관리) */ .acct-gl{ margin:7px 10px 2px; font-size:10.5px; font-weight:800; letter-spacing:.05em; color:var(--fg-muted); } .acct-gl:first-child{ margin-top:3px; } .acct-menu a:hover, .acct-menu a:focus-visible{ background:var(--surface); color:var(--fg); } .acct-up{ margin-left:auto; font-size:10.5px; font-weight:800; color:var(--brand); background:var(--band-ic-bg); border-radius:var(--r-full); padding:2px 8px; } .acct-ft{ padding:6px; border-top:1px solid var(--surface-2); } .acct-logout{ display:flex; align-items:center; gap:8px; min-height:38px; padding:0 10px; border-radius:9px; font-size:13px; font-weight:700; color:var(--fg-sub); transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .acct-logout svg{ width:15px; height:15px; } .acct-logout:hover, .acct-logout:focus-visible{ background:#fdeeed; color:#b42318; } /* ---- 2단 Menu Bar ---- */ /* 모바일 전용 컨트롤(검색 아이콘·검색 취소): 데스크톱 기본 숨김 → ≤1024 에서 노출 */ .srch-btn, .srch-close{ display:none; } /* 하단 고정 탭바(패턴C): 데스크톱 기본 숨김 → ≤1024 에서 노출(renewal/_footer.php) */ .tabbar{ display:none; } .t2{position:relative; height:48px; border-top:1px solid var(--bd); transition:height var(--dur-spring) var(--ease-spring),border-top-color var(--dur-spring) var(--ease-spring)} .t2--anim{overflow:clip} .hdr--fold .t2{height:0; border-top-color:transparent; border-bottom:0} .hdr--fold .mega { top: 100%; } .nav-item.open > .mega { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.16s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s; } .t2-in{height:47px; transition:transform var(--dur-spring) var(--ease-spring),opacity var(--dur-spring) var(--ease-spring)} .hdr--fold .t2-in{transform:translateY(-100%); opacity:0} .hdr--fold .t2:focus-within {height:48px; border-top-color:var(--bd)} .hdr--fold .t2:focus-within .t2-in{transform:none; opacity:1} .rnw-gnb{height:100%} .gnb-list{display:flex; align-items:stretch; height:100%; margin-left:calc(var(--sp4) * -1); width:100%} .nav-item{position:relative; display:flex} .nav-btn{ position:relative; display:inline-flex; align-items:center; gap:6px; height:100%; padding:0 var(--sp4); font-size:14px; font-weight:700; color:var(--fg-sub); white-space:nowrap; transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease); } .nav-btn::after{ content:""; position:absolute; left:var(--sp4); right:var(--sp4); bottom:0; height:2px; border-radius:var(--r-full); background:var(--brand); opacity:0; transform:translateY(3px); transition:opacity var(--dur-2) var(--ease-spring),transform var(--dur-2) var(--ease-spring); } .nav-btn:hover,.nav-item.open>.nav-btn{color:var(--fg)} .nav-btn:hover::after,.nav-item.open>.nav-btn::after{opacity:1; transform:none} .nav-btn:active{background:var(--surface-2)} /* ---- 모두입찰AI (드랍다운 없는 단일 링크) ---- GNB 우측 정렬의 기준점 — 이 항목이 남는 공간을 먹고, 전체메뉴가 그 뒤에 붙는다. nav-btn 의 밑줄 인디케이터 대신 필(pill)로 구분한다(메뉴가 아니라 목적지라서). ≤1024 에서는 .gnb-list > .nav-item:not(--mega) 규칙에 함께 숨는다(모바일은 하단 탭바). */ .nav-item--ai{margin-left:auto} .nav-item--ai + .nav-item--mega{margin-left:0} .nav-ai{ gap:5px; height:32px; margin:auto 0; padding:0 13px; border-radius:var(--r-full); border:1px solid rgba(202,17,17,.18); color:var(--brand); background:var(--band-ic-bg); transition:color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease); } .nav-ai::after{content:none} .nav-ai .nav-ai-ic{color:inherit} /* 부모까지 붙여 (0,3,0) — 같은 무게인 .nav-item.open>.nav-btn{color:var(--fg)} 보다 뒤에 있어 이긴다. .open 은 renewal-chrome.js 가 드롭다운 항목에만 붙이도록 고쳤지만(패널 .dd 있는 것만), 혹시 다시 붙더라도 필 색이 검정으로 새지 않도록 .open 케이스도 함께 잡아 둔다. */ .nav-item--ai > .nav-ai:hover, .nav-item--ai.open > .nav-ai, .nav-item--ai > .nav-ai[aria-current="page"]{color:var(--on-brand); background:var(--brand); border-color:var(--brand)} /* position:static — .nav-item 의 relative 를 무효화해, absolute 메가가 44px 짜리 li 가 아니라 .t2(전체 폭)에 앵커되게 한다(메가 안보임 버그 수정) */ .nav-item--mega{margin-left:auto; border-left:0; padding-left:0; position:static} .nav-btn--mega svg {color:var(--fg); transition:color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease)} .nav-btn--mega:hover svg {color:var(--brand); transform:scale(1.05)} /* ---- 드롭다운 UI ---- */ .dd { position: absolute; top: calc(100% + 12px); left: 0; min-width: 170px; z-index: 70; background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--r3); box-shadow: 0 12px 32px rgba(17, 24, 39, 0.08), 0 4px 8px rgba(17, 24, 39, 0.03); padding: 8px; visibility: hidden; opacity: 0; translate: 0 8px; transition: opacity var(--dur-2) var(--ease-spring), translate var(--dur-2) var(--ease-spring), visibility 0s var(--dur-2); } /* [hover 브리지] 버튼↔패널 12px 갭만 덮는다. 이전 16px 는 헤더 행 안쪽까지 4px 침범해, 열린 패널의 투명 브리지(z 70)가 이웃 버튼(모두입찰AI 등) 위 커서·클릭을 가로채며 경계에서 열림/닫힘이 반복되는 깜빡임을 만들었다. */ .dd::before {content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px} .nav-item.open > .dd {visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s} .dd a { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--r2); font-size: 14px; font-weight: 600; color: var(--fg-sub); /* 절대배치 shrink-to-fit 기준이 좁은 li 라 min-width(170px)에서 패널이 안 늘어난다. nowrap 으로 min-content 를 한 줄 폭으로 만들어 긴 항목(특허분석입찰컨설팅)에 맞게 넓힌다 */ white-space: nowrap; transition: all var(--dur-1) var(--ease); } .dd a:hover {background: var(--surface); color: var(--brand); transform: translateX(4px)} /* ---- 와이드 메가메뉴 ---- */ .mega { /* 비고정 헤더 기준: 뷰포트(fixed) 대신 .t2(position:relative) 하단에 앵커. 스크롤 위치와 무관하게 항상 메뉴바 바로 아래에 붙는다. */ position: absolute; left: 0; right: 0; width: 100%; top: 100%; z-index: 50; background: var(--canvas); border-bottom: 1px solid var(--bd); box-shadow: var(--sh-3); visibility: hidden; opacity: 0; transform: translateY(4px); transition: opacity 0.15s cubic-bezier(0.16, 1, 0.3, 1), transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.15s; } .hdr--fold .mega { top: 100%; } .nav-item.open>.mega{visibility:visible; opacity:1; translate:0 0;} .mega-in{display:grid; grid-template-columns:repeat(8,1fr) 200px; gap:var(--sp5); padding-block:var(--sp6) var(--sp7)} /* [혜택 열] 메가 우측 프로모 트랙(9번째) — 링크 목록이 아니라 전환 카드 + SNS */ .mega-promo{display:flex; flex-direction:column; gap:10px; padding-left:18px; border-left:1px solid #edf0f5} .mp-card{display:block; padding:12px 14px; border-radius:11px; border:1px solid #ecdcdc; background:#fdf7f7; text-decoration:none; transition:border-color var(--dur-1) var(--ease)} .mp-card b{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:#c0392b} .mp-card span{display:block; margin-top:3px; font-size:11.5px; line-height:1.5; color:#8a7676} .mp-card:hover{border-color:#d64545} .mp-sns{display:flex; gap:8px; margin-top:2px} .mp-sns a{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:1px solid #dbe1ea; background:#fff; color:#5b6b86; transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease)} .mp-sns a:hover{color:#c0392b; border-color:#e0a3a3} /* [도구 레일] 메가 하단 계산기·자료 모음(전 열 가로 스팬) */ .mega-tools{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:14px; border-top:1px solid #edf0f5} .mega-tools .mt-t{font-size:12px; font-weight:800; color:#8a93a2; margin-right:2px} .mega-tools a{display:inline-flex; align-items:center; height:32px; padding:0 13px; border-radius:999px; border:1px solid #dbe1ea; background:#fff; font-size:12.5px; font-weight:700; color:#4a5568; text-decoration:none; transition:border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease)} .mega-tools a:hover{border-color:#e0a3a3; color:#c0392b} /* 외부(나라장터 등) 링크 표식 */ .ext-mark{margin-left:4px; font-size:10px; color:#9aa3b2} /* 푸터 SNS(유튜브·인스타그램·페이스북) */ .ftr-sns{display:flex; gap:8px; margin:10px 0 2px} .ftr-sns a{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:1px solid var(--l-line); color:var(--l-mut); transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease)} .ftr-sns a:hover{color:var(--l-ink); border-color:#c8cfda} /* ============================================================ 상위 1% 초프리미엄 메가 메뉴 호버 인터랙션 (Fluid Indicator) ============================================================ */ .mega-col a { position: relative; display: flex; align-items: center; padding: 8px 12px; margin-left: -12px; font-size: var(--fs-sm); font-weight: 500; color: var(--fg-sub); border-radius: var(--r1); transition: color 0.22s var(--ease), padding-left 0.22s var(--ease); } .mega-col a:hover { color: var(--brand); padding-left: 22px; } .mega-col a::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scaleY(0); width: 2px; height: 12px; background-color: var(--brand); opacity: 0; transform-origin: center; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); } .mega-col a:hover::before { opacity: 1; transform: translateY(-50%) scaleY(1); } .mega-col .mega-col-title { display: flex; align-items: baseline; gap: 9px; font-size: 14px; font-weight: 800; color: var(--fg); letter-spacing: var(--ls-tight); padding-bottom: var(--sp2); margin-bottom: var(--sp2); border-bottom: 1px solid var(--bd); } .mega-col .mega-col-title .idx { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--brand); flex: none; } .hdr { /* [V2 비고정] 상단 정의(파일 앞부분 .hdr 주석 참조)와 동기화 — sticky 금지 */ position: relative; z-index: 300; background: rgba(248, 249, 250, 0.8); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.03); box-shadow: var(--shadow-glass); letter-spacing: var(--ls-tight); font-weight: 500; } /* ============================================================ ★ [완벽 수정] 상위 1% 초프리미엄 전체화면 폭 푸터 마감 ============================================================ */ .ftr { width: 100%; background: var(--l-card); color: var(--l-ink); border-top: 1px solid var(--l-line); /* 이제 라인이 화면 양끝까지 시원하게 채워집니다 */ padding-block: var(--sp8); color-scheme: light; } /* 내부 요소만 중앙 컨테이너 격리 배치 */ .ftr-in { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); } .ftr-top{display:flex; align-items:center; gap:var(--sp5); padding-bottom:var(--sp5); border-bottom:1px solid var(--l-line)} .ftr-logo{font-size:18px; font-weight:800; color:var(--red-deep); letter-spacing:-.01em} .ftr-logo .logo-sub{color:var(--l-mut)} .ftr-nav{margin-left:auto; display:flex; align-items:center; gap:var(--sp4); font-size:var(--fs-sm)} .ftr-nav a{color:var(--l-mut); padding:6px 2px; transition:color var(--dur-1) var(--ease)} .ftr-nav a:hover{color:var(--l-ink)} .ftr-nav a.strong{color:var(--l-ink); font-weight:700} .ftr-legal{margin-top:var(--sp5); font-size:var(--fs-sm); color:var(--l-mut); font-style:normal; line-height:1.9} .ftr-legal .sep{margin-inline:8px; opacity:.5} .ftr-copy{margin-top:var(--sp4); font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--l-mut)} #gq:hover { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } #gq:focus { outline: 0; background: var(--canvas); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(202, 17, 17, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03); width: 340px; /* 포커스 시 넓어지는 효과 */ } /* ============================================================ RESPONSIVE — full-page reflow to 320px (bp: 1024 / 768 / 480) ============================================================ */ /* ---- <=1024: tablet/phone — 패턴A 단일 바(2단 제거, 로고 좌 + 검색·계정·버거 우) ---- */ @media (max-width:1024px){ .gnb-list > .nav-item:not(.nav-item--mega){ display:none; } .nav-item--mega{ margin-left:auto; } /* 2단(t2)은 시각적으로 제거(높이 0). display:none 이 아닌 이유: .mega 패널이 .t2(position:relative) 하단에 앵커되므로 렌더 트리에는 남아야 한다. */ .t2{ height:0; border-top:0; } .t2-in{ height:0; min-height:0; } .t2, .t2--anim{ overflow:visible; } /* 스크롤 폴드의 overflow:clip 잔존 시 메가 클리핑 방지 */ /* 스크롤 폴드 무효화(sticky 케이스 방어): t2-in transform/opacity 가 내부 .mega 를 숨김 */ .hdr--fold .t2-in{ transform:none; opacity:1; } .hdr--fold .t2:focus-within{ height:0; border-top:0; } .nav-btn--mega{ display:none; } /* 메가 토글은 하단 탭바 '전체' 탭이 대체 */ .mega{ width:100%; max-height:calc(100dvh - 59px); overflow-y:auto; } /* 데스크톱 열(.mega-in)은 모바일 시트(.msheet)가 대체 — 통째로 숨김 */ .mega-in{ display:none; } /* 1단 우측 그룹: [검색 아이콘][계정칩] — 전체메뉴는 하단 탭바로 이동(버거 제거) */ .t1{ position:relative; } .search-wrap{ display:none; } .auth{ gap:6px; } .srch-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; color:var(--fg); } .srch-btn:active{ background:var(--surface-2); } .login-link--remote{ display:none; } /* 원격지원: 메가메뉴 하단으로 */ .acct-name, .acct-caret{ display:none; } /* 계정: 아바타 칩만(업체명은 패널에서) */ .acct-btn{ padding:3px; gap:0; } /* 검색 오버레이: 1단 전체를 덮는 검색바(자동 포커스, 취소/ESC/바깥탭 닫기) */ .hdr.srch-open .search-wrap{ display:block; position:absolute; inset:0; z-index:40; max-width:none; background:var(--canvas); padding:9px var(--pad); } .hdr.srch-open .search{ display:flex; align-items:center; gap:6px; height:100%; } .hdr.srch-open #gq{ flex:1 1 auto; min-width:0; height:40px; font-size:16px; } .hdr.srch-open .srch-close{ display:inline-flex; align-items:center; flex:none; height:40px; padding:0 10px; font-size:14px; font-weight:600; color:var(--fg-sub); } .hero h1{ white-space:normal; } /* 769~1024 태블릿: nowrap 유지 시 우측 클리핑 */ .bento{ grid-template-columns:repeat(2,1fr); } .bento > .card{ grid-column:auto; } .bento > .b12{ grid-column:1 / -1; } .quick-list{ grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); } } /* ============================================================ 하단 고정 탭바 (패턴C · 앱형 내비게이션) — ≤1024 전용 - 마크업: renewal/_footer.php 동작: renewal-chrome.js - 모바일에서 데스크톱 푸터를 숨기고 탭바로 대체(법적 표기는 메가 '전체' 안 유지). ============================================================ */ @media (max-width:1024px){ /* 데스크톱 푸터 숨김 + 탭바 높이만큼 본문 하단 여백(콘텐츠 가림 방지) */ .ftr{ display:none; } body{ padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); } /* 레퍼런스(Center FAB): 순백 바 + 중앙 AI 디스크 둘레의 '진짜 커브(notch)'. 바의 면·그림자를 ::before 로 옮기고 radial-gradient 마스크로 반원 홈을 뚫는다 — 홈 틈으로 뒤 페이지가 그대로 비친다(디스크 테두리 눈속임 아님). 마스크는 요소의 그림자까지 함께 잘라내므로 상단 그림자도 커브를 따라 끊긴다. */ .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:350; height:calc(58px + env(safe-area-inset-bottom, 0px)); padding-bottom:env(safe-area-inset-bottom, 0px); background:transparent; font-family:var(--font-sans); } /* 홈(notch) 절삭 마스크 — 5개 레이어의 합집합(모두 no-repeat): ① 좌측 사각 ② 우측 사각 ③ 중앙 120×44 SVG 타일(홈 곡선 본체) ④ 중앙 44px 아래 사각 ⑤ 바 위쪽 그림자 보존용(홈 입구만 원형 절개) ③ SVG: 홈 원 R36(중심: 바 상단선 아래 4px, 디스크와 동심·틈 8px)이 바 상단 직선과 만나는 뾰족한 모서리를 반경 9px 접원 아크로 라운드. 접원 중심 (60±44.72, 9): 상단선 접점 x=60±44.72, 홈 원 접점 (60±35.78, 8). 고정폭 타일이라 화면 폭이 달라져도 곡선이 늘어나지 않는다. */ .tabbar::before{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:#fff; box-shadow:0 -6px 24px rgba(16,24,40,.08); -webkit-mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200h120v44H0zM15.28%200a9%209%200%200%201%208.94%208a36%2036%200%200%200%2071.56%200a9%209%200%200%201%208.94-8z'/%3E%3C/svg%3E"), linear-gradient(#000,#000), radial-gradient(circle 36px at 50% 64px, transparent 34.5px, #000 36px); mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%3E%3Cpath%20fill-rule='evenodd'%20d='M0%200h120v44H0zM15.28%200a9%209%200%200%201%208.94%208a36%2036%200%200%200%2071.56%200a9%209%200%200%201%208.94-8z'/%3E%3C/svg%3E"), linear-gradient(#000,#000), radial-gradient(circle 36px at 50% 64px, transparent 34.5px, #000 36px); -webkit-mask-size:calc(50% - 60px) 100%, calc(50% - 60px) 100%, 120px 44px, 120px calc(100% - 44px), 100% 60px; mask-size:calc(50% - 60px) 100%, calc(50% - 60px) 100%, 120px 44px, 120px calc(100% - 44px), 100% 60px; -webkit-mask-position:left top, right top, center top, center bottom, 0 -60px; mask-position:left top, right top, center top, center bottom, 0 -60px; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* 상단 테두리 + 커브 경계선 일체화: 좌/우 1px 직선이 라운드 시작점 (중앙 ±44.72px)에서 커브 스트로크와 끊김 없이 이어진다. 커브 패스는 0.5px 내림 + 두께 1로 직선(y 0~1px)과 단면을 맞춤(틈은 계속 완전 투명) */ .tabbar::after{ content:""; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:rgba(16,24,40,.16); pointer-events:none; -webkit-mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%3E%3Cpath%20fill='none'%20stroke='black'%20d='M15.28%20.5a9%209%200%200%201%208.94%208a36%2036%200%200%200%2071.56%200a9%209%200%200%201%208.94-8'/%3E%3C/svg%3E"); mask-image: linear-gradient(#000,#000), linear-gradient(#000,#000), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2044'%3E%3Cpath%20fill='none'%20stroke='black'%20d='M15.28%20.5a9%209%200%200%201%208.94%208a36%2036%200%200%200%2071.56%200a9%209%200%200%201%208.94-8'/%3E%3C/svg%3E"); -webkit-mask-size:calc(50% - 44.72px) 1px, calc(50% - 44.72px) 1px, 120px 44px; mask-size:calc(50% - 44.72px) 1px, calc(50% - 44.72px) 1px, 120px 44px; -webkit-mask-position:left top, right top, center top; mask-position:left top, right top, center top; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* NOTE: 반드시 `.tabbar .tab` 로 스코프 — 메인 입찰정보 카드의 공사/용역/물품 버튼도 `.tab` 클래스라, 비스코프 시 탭바 규칙이 번져 입찰 탭이 뚱뚱해짐 */ .tabbar .tab{ /* [정렬] '전체' 탭만