@charset "utf-8"; /* ============================================================================ 20260810 ohy todo 26-0810-0049 탭브라우저(tab_browse) 리뉴얼 CSSPATH='tab3' 인 도메인에서만 로드된다(IBCHeader.append_css_tab3). [적용 범위] 최상위 탭바(#topTab) + 좌측메뉴(aside > .lnb) + 실콘텐츠화면(.sContents) + iframe 안 업무화면의 '큰틀'(제목/경로/본문 래퍼) → 맨 아래 6번 섹션. [이름] 이 파일에서 부르는 이름을 통일한다(20260811 ohy). 좌측메뉴 =

+ 그 안의 .lnb (메뉴/즐겨찾기 트리, 챗봇 밴드) 실콘텐츠화면 = .sContents (탭바 #topTab + 본문 #tCon1/.tabContents + iframe) 두 영역이 .subContents 안에서 나란히 놓인 flex row 다. [스코프] 이 파일은 tab3 도메인의 '모든' 페이지에서 로드된다. 업무화면은 iframe 안에서 역시 IBCHeader 를 타므로 여기 규칙이 같이 실린다. 그래서 1~5 섹션(껍데기)은 모든 선택자를 .tab3ui (탭브라우저 페이지 body 에만 붙는 클래스) 아래로 가둔다. 이 접두어를 빼면 업무화면 안쪽까지 오염된다. 반대로 6번 섹션은 업무화면을 노린 것이므로 `body:not(.tab3ui)` 로 '껍데기만' 제외한다. 둘은 정확히 상보 관계다 — 새 규칙을 쓸 때 둘 중 어느 쪽인지 먼저 정하고 접두어를 붙일 것. [선택자 길이] 기존 css/ibc/tab_browse.css 가 `.subContents .lnb .tabCont .subMenu > li.on h3 a` 처럼 매우 긴 선택자를 쓰고 일부는 !important 까지 건다. 상속이 아니라 '명시도'로 이겨야 하므로 여기서도 같은 길이 + .tab3ui 한 겹을 더 얹는다. 짧게 줄이면 조용히 안 먹는다. [로드 순서 — 중요] 이 파일은 css/ibc/tab_browse.css 보다 **먼저** 로드된다. MyJSP.getIBCHeader() 가 getHeader() ← 여기서 이 파일이 나간다 + getStyle() + get_css_link() ← tab_browse_basic.jsp 의 myJSP.css_link() 들 순서로 이어붙이기 때문이다. 즉 '나중에 쓴 쪽이 이긴다'가 통하지 않는다. 명시도가 같으면 저쪽이 이긴다. → 모든 규칙에 .tab3ui 를 붙여 항상 한 겹 높게 유지할 것. [인라인 style] 폭 계산(JS)과 body 배경은 인라인 style 이라 !important 로만 이긴다. 아래 '0. 레이아웃' 참고. ========================================================================== */ /* ── 토큰 ──────────────────────────────────────────────────────────────── :root 가 아니라 .tab3ui 에 둔다. iframe 업무화면까지 토큰이 새면 나중에 누가 var() 를 참조했을 때 예상 못 한 곳이 따라 바뀐다. */ .tab3ui { --t3-font: var(--ibc-font-sans, 'Pretendard', 'Malgun Gothic', sans-serif); --t3-accent: #1f5fd0; /* 상단바(header.css)의 --tab3-accent 와 같은 값 */ --t3-accent-weak: #eaf0fc; --t3-page-bg: #eaedf2; --t3-surface: #ffffff; --t3-line: #dfe3ea; --t3-line-soft: #eef1f5; /* 좌측메뉴 스크롤 영역 배경. 20260811 ohy todo 26-0810-0049 */ --t3-lnb-bg: #e9edf3; --t3-card-line: #e4e8ef; /* 카드 테두리 — 본문 --t3-line 보다 한 톤 옅게 */ /* ── 탭 색 (크롬식). 20260811 ohy todo 26-0810-0049 ────────────────── */ --t3-tabbar-bg: #dde3ec; /* 탭바 바닥 */ --t3-tab-bg: transparent; /* 비활성 탭 = 바닥이 비친다 */ --t3-tab-bg-hover: rgba(255,255,255,.45); --t3-tab-line: #c6cede; /* 비활성 탭 사이 세로 구분선 */ --t3-tab-fg: #5a6577; --t3-tab-fg-on: #16233a; /* 활성 탭. 면은 흰색(아래 본문 흰 면과 이어져 크롬 탭처럼 읽힌다), 포인트는 글자 색이 맡는다. 옅은 하늘색 면(#e9f0fd)은 대봤다가 뺐다. ※ --t3-tab-on-bg 의 !important 는 값이 흰색이라도 유지할 것 — 원본 tab_browse.css:187 이 #fff !important 라 빼면 우리 값이 조용히 무시된다. */ --t3-tab-on-bg: #ffffff; --t3-tab-on-fg: #1a4fb0; --t3-fg: #2b3648; --t3-fg-dim: #6b7686; /* 활성 탭 위 모서리. 20260811 ohy todo 26-0810-0049 0 → 10px 로 되돌렸다. 예전 10px 라운드가 별로였던 건 위만 둥글고 아래는 그냥 끊겨서였고, 아래 --t3-tab-curl 이 붙으면서 해결됨. 둘은 세트다. */ --t3-tab-radius: 10px; /* 활성 탭 '아래 바깥' 곡선(크롬 특유의 이음). --t3-tab-radius 와 같은 값 권장. */ --t3-tab-curl: 10px; --t3-tab-h: 44px; /* 챗봇 카드 캐릭터 '높이'. 20260811 ohy todo 26-0810-0049 */ --t3-aibot-h: 44px; /* 좌측메뉴 폭. */ --t3-lnb-w: 240px; } /* 본문 배경. tab_browse_basic.jsp 가 로 인라인 지정하므로 인라인을 이기려면 !important 가 불가피하다. */ body.tab3ui { background: var(--t3-page-bg) !important; } /* 상단바 리뉴얼(header.css)과 같은 폰트. base.css 가 button/strong/b/input 등 '요소 선택자'에 font-family 를 직접 걸어두어(직접 지정 > 상속) 자식까지 명시해야 한다. */ .tab3ui .subContents, .tab3ui .subContents * { font-family: var(--t3-font); } /* ══════════════════════════════════════════════════════════════════════════ 0. 레이아웃 — 화면을 꽉 채운다 (여백 제거) ──────────────────────────────────────────────────────────────────────── 기존 구조는 폭을 JS 가 픽셀로 계산해 인라인 style 로 박는다. .subContents width = wWidth - 70, margin:0 auto → 좌우 35px 씩 빈 공간 aside > .lnb 210px float:left .sContents width = wWidth - 290, float:right → lnb 와 사이 10px 틈 같은 계산이 네 군데에 흩어져 있다. · tab_browse_basic.jsp $(document).ready (wWidth-70 / wWidth-290) · js/ibc_slider.js browser_resize_adjust() / leftmenu_close() / leftmenu_open() 그 값을 하나씩 고치는 대신 tab3 에서는 픽셀 계산 자체를 빼고 flex 로 채운다. CSS 의 !important 는 (important 아닌) 인라인 style 을 이기므로 위 네 곳이 무슨 값을 넣든 전부 무력화된다. → JS 는 손대지 않아도 되고 다른 스킨도 무영향. ════════════════════════════════════════════════════════════════════════ */ /* ── 세로: 한 화면 고정(앱셸) ────────────────────────────────────────── 기존은 "iframe 을 6000px 로 키우고 바깥(#tCon1)이 스크롤" 하는 구조라 페이지 전체가 스크롤되고, .tabContents 는 min-height(670px)를 JS 가 height 로 박아(tab_browse_basic.jsp:1162) 화면이 크면 아래가 회색으로 남았다. 신규는 뷰포트를 넘지 않는 앱셸이다. body.tab3ui 100vh + overflow:hidden (페이지 스크롤 없음) .wrap flex column #ibctop 고정 66px section flex:1 → .container → .subContents 가 남은 높이를 전부 차지 aside 자체 스크롤 .sContents flex column .topTab 고정 .tabContents flex:1 → iframe height:100% (업무화면 안에서만 스크롤) min-height/height/overflow 는 JS 가 인라인으로 박으므로 !important 로 이긴다. ※ .tabContents 의 height 를 !important 로 고정하면서 ToggleTopMenu22 의 .uptab/.downtab(621/714px 하드코딩) 어긋남도 같이 사라진다. ※ html 에는 절대 규칙을 걸지 말 것. 이 파일은 업무화면(iframe 안)에서도 로드되므로 html{height:100%} 같은 건 그쪽까지 번진다. body.tab3ui + 100vh 로 가둔다. */ body.tab3ui { height: 100vh; overflow: hidden; } /* ★ 높이 체인이 끊기는 지점 ★ 마크업이 body > form#myform > .wrap 이다. form 은 높이가 auto 라서 .wrap 에 height:100% 를 줘도 "부모 높이가 확정 안 됨"으로 해석돼 auto 로 폴백한다. 그러면 아래 flex 사슬 전체가 내용 높이로 주저앉는데, 이때 .subContents 가 align-items:stretch 인 flex row 라서 '가장 키 큰 자식 = 좌측메뉴' 가 전체 높이를 정해버린다(좌측메뉴 챗봇 이미지 때문에 약 410px). 화면 아래는 그대로 빈다. 여기서 %가 아니라 vh 를 쓰는 이유 : % 는 또 부모(body) 높이에 의존한다. vh 는 뷰포트 기준이라 위쪽 사슬이 어떻든 항상 확정값이다. → 이 블록이 빠지면 앱셸이 통째로 무효가 된다. */ .tab3ui > form { height: 100vh; display: flex; flex-direction: column; min-height: 0; } /* overflow:hidden 금지 — 상단바의 알림/퀵메뉴/계정 드롭다운(.tab3-pop)이 66px 헤더 밖으로 흘러내리는 구조라 조상에 overflow:hidden 이 있으면 잘린다. 페이지 스크롤은 body 쪽 overflow:hidden 으로 이미 막았으므로 여기선 불필요. */ .tab3ui .wrap { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; } .tab3ui #ibctop { flex: 0 0 auto; } .tab3ui .wrap > section { flex: 1 1 auto; min-height: 0; /* 이게 없으면 flex 자식이 안 줄어들어 넘친다 */ min-width: 0; display: flex; } /* 좌측메뉴 원본을 담아두는 보관함. JS 가 ready 에서 hide() 하지만 그 전 한 프레임 동안 flex 아이템으로 폭을 먹는다. 처음부터 숨긴다(innerHTML 읽기는 display:none 이어도 된다). */ .tab3ui #leftmenuHolder { display: none !important; } .tab3ui .container { flex: 1 1 auto; min-height: 0; min-width: 0; /* 위 section 과 같은 이유 */ display: flex; background: var(--t3-page-bg); } .tab3ui .subContents { flex: 1 1 auto; min-height: 0; min-width: 0; /* 위 section 과 같은 이유 */ display: flex; align-items: stretch; height: auto; width: auto !important; /* JS 인라인 width(wWidth-70) 무력화 */ margin: 0 !important; /* 좌우 auto 여백(35px) 제거 */ padding: 0; } /* 폭은 .lnb 가 --t3-lnb-w 로 정하고 aside 는 거기에 맞춰 따라간다(flex:0 0 auto). 흰 배경과 경계선은 .lnb 가 아니라 aside 가 들고 있어야 메뉴가 짧아도 패널이 화면 아래까지 이어진다(flex stretch). 20260811 ohy todo 26-0810-0049 스크롤 주체를 aside 에서 .tabCont(메뉴 목록)로 내렸다. #chabot 이 .lnb 안 '맨 끝'에 있어서, aside 가 스크롤하면 메뉴가 길 때 챗봇도 같이 흘러 내려가 화면에서 사라진다. 아래처럼 층을 나눠야 .lnbTab / #chabot 은 고정 밴드로 남고 가운데 목록만 스크롤한다. aside flex column (스크롤 없음) .lnb flex column, flex:1 .lnbTab 고정 .invt-search-menu 고정 .tabCont flex:1 + overflow-y:auto ← 여기서만 스크롤 #chabot 고정(바닥) ※ aside 에 overflow 를 걸면 안 된다 — INVT 검색 드롭다운(absolute)이 잘린다. 한 축만 hidden 으로 둬도 CSS 규칙상 다른 축의 visible 이 auto 로 승격되므로 (overflow-x:hidden + overflow-y:visible → auto) 통째로 뺀다. */ /* ── 좌측메뉴 ↔ 실콘텐츠화면 경계 : 선이 아니라 '층' ────────────────────── 20260811 ohy todo 26-0810-0049 [고치기 전] aside 에 border-right 1px 이 있었는데, 그 왼쪽 8px 안에 · 메뉴 카드(li)의 오른쪽 테두리(--t3-card-line) · .tabCont 의 scrollbar-gutter:stable 이 비워둔 8px 띠 가 나란히 서서 "가는 선 + 빈 띠 + 또 가는 선" 이 한 덩어리로 보였다. 좌측메뉴 바닥도 실콘텐츠(흰색)와 거의 같은 밝기라 선에만 경계를 의존했다. [고친 방식] 경계선을 지우고 '바닥 색 단차' 하나만 남긴다. · 좌측메뉴(aside) = 회색 바닥(--t3-lnb-bg #eef1f6). 선 없음 · 실콘텐츠화면(.sContents) = 흰 본문. 선도 그림자도 없음 간격(빈 여백)은 1px 도 늘지 않으면서 이중선이 사라진다. [폐기] 중간에 .sContents 왼쪽에 옅은 그림자를 드리워 "메뉴 위에 화면이 올라와 있다" 로 읽히게 하는 안(C)을 넣어봤으나 빼기로 했다. 되살릴 때는 --t3-panel-shadow 토큰과 아래 .sContents 의 주석 블록 둘 다 해제. ※ 되살린다면 조상에 overflow:hidden 이 없어야 한다 — .wrap / section / .container / .subContents 전부 없음(위 0. 레이아웃 참고). */ .tab3ui .subContents aside { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; background: var(--t3-lnb-bg); /* 카드가 떠 보이도록 한 단 내린 바닥 */ } /* 남는 폭을 전부 본문이 가져간다. 좌측메뉴를 접으면(aside hide) 자동으로 100%. */ .tab3ui .subContents .sContents { display: flex; flex-direction: column; flex: 1 1 auto; width: auto !important; /* JS 인라인 width(wWidth-290 / w1200) 무력화 */ min-width: 0; /* flex 자식이 안 줄어드는 문제 방지 */ min-height: 0; float: none !important; } /* ══════════════════════════════════════════════════════════════════════════ 1. 탭바 (#topTab) ════════════════════════════════════════════════════════════════════════ */ /* 기존: overflow:hidden + li 고정폭 170px + float:left. 신규: flex + 가로 스크롤. 탭이 넘치면 잘리는 대신 스크롤된다. (개수 제한 alert 은 tab_browse.js 쪽에서 tab3 일 때만 해제) */ .tab3ui .sContents .topTab { /* 탭 폭 기준. 여기 숫자만 바꾸면 "몇 개까지 기본 크기로 보일지"가 정해진다. 20260811 ohy todo 26-0810-0049 */ --t3-tab-per-view: 9; /* 이 개수까지는 기본 크기, 넘으면 줄어든다 */ --t3-tab-gap: 0px; --t3-tab-min: 56px; /* 더는 못 줄어드는 하한. 여기 닿으면 가로 스크롤 */ --t3-tab-max: 240px; /* 초광폭 모니터에서 탭이 과하게 넓어지는 것 방지 */ display: flex; align-items: flex-end; gap: var(--t3-tab-gap); width: 100%; background: var(--t3-tabbar-bg); /* 위 여백 0 — 탭이 상단바에 그대로 붙는다(브라우저 탭 방식). 오른쪽 38px 은 .allClose(상단바 접기) 자리. 왼쪽은 첫 탭의 하단 곡선이 li 밖 --t3-tab-curl 만큼 나가므로 그 자리를 비운다. 안 비우면 overflow-x 에 잘려 첫 탭만 곡선이 없다(왼쪽 오버플로는 스크롤도 안 된다). 20260811 ohy todo 26-0810-0049 */ padding: 0 38px 0 var(--t3-tab-curl); box-sizing: border-box; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE */ scroll-behavior: smooth; } .tab3ui .sContents .topTab::-webkit-scrollbar { height: 0; } /* 좌측메뉴가 접힌 상태(.w1200)에선 왼쪽 .lnbOpen 버튼 자리를 비워준다. 기존 규칙은 first-child 에 margin-left:40px 를 걸었는데 flex + 스크롤에선 첫 탭만 밀려 스크롤 계산이 어긋난다 → 컨테이너 padding 으로 처리. */ .tab3ui .sContents.w1200 .topTab { padding-left: 38px; } .tab3ui .sContents.w1200 .topTab li:first-child { margin-left: 0; } .tab3ui .sContents .topTab li { position: relative; float: none; /* 기존 float:left 무력화 */ display: flex; /* 크롬식 축소. 20260811 ohy todo 26-0810-0049 `flex: 1 1 0` = 탭바 폭을 탭 개수로 균등분할. 고정 basis(구 188px)와 달리 탭바의 '내용 폭'이 개수에 비례해 커지지 않으므로, 조상 flex 계산에 휘둘리지 않고 항상 컨테이너 안에서 나눠 갖는다. 개수↑ = 폭↓ 이 그대로 성립. max-width 로 상한을 (탭바폭 ÷ 9) 로 잡아서 9개까지는 기본 크기로 꽉 차고, 10개째부터 상한 아래로 내려가며 줄어든다. min-width 하한(56px)에 닿으면 그때부터 가로 스크롤. */ flex: 1 1 0; min-width: var(--t3-tab-min); max-width: var(--t3-tab-max); /* min() 미지원 구형 브라우저 폴백 */ max-width: min(var(--t3-tab-max), calc((100% - var(--t3-tab-gap) * (var(--t3-tab-per-view) - 1)) / var(--t3-tab-per-view))); margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none; /* 탭 드래그 재정렬 중 글자 선택 방지 */ } /* 탭 본체. 배경·라운드는 예나 지금이나 a 가 들고 있다(.on 도 a 에 붙는다). */ .tab3ui .sContents .topTab li a { position: relative; flex: 1 1 auto; min-width: 0; /* ellipsis 가 동작하려면 필수 */ display: flex; align-items: center; height: var(--t3-tab-h); padding: 0 27px 0 13px; /* 오른쪽 = 닫기 버튼 자리 */ box-sizing: border-box; border-radius: var(--t3-tab-radius) var(--t3-tab-radius) 0 0; background: var(--t3-tab-bg); color: var(--t3-tab-fg); font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; text-decoration: none; /* 기존엔 없어서 긴 제목이 탭 밖으로 흘러넘쳤다 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .14s ease, color .14s ease; } .tab3ui .sContents .topTab li a:hover { background: var(--t3-tab-bg-hover); color: var(--t3-tab-fg-on); } /* ── 탭 사이 세로 구분선 (크롬식) ──────────────────────────────────────── 20260811 ohy todo 26-0810-0049 간격(gap)을 0 으로 없앤 대신, 비활성 탭끼리 한 덩어리 회색으로 뭉치지 않도록 각 탭의 오른쪽 끝에 짧은 세로선을 하나 둔다. ※ li::after 는 드래그 재정렬 표시(li.t3-drop-before/after)가 이미 쓰고 있어 겹치면 안 된다. a::before 는 파란 포인트 라인을 걷어내면서 비었으므로 여기 쓴다. ※ a 는 overflow:hidden 이지만 선이 박스 안(right:0)이라 잘리지 않는다. */ .tab3ui .sContents .topTab li a::before { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 46%; background: var(--t3-tab-line); transition: opacity .12s ease; } /* 자기 자신이 활성/호버면 선을 지운다(크롬과 같은 동작). 맨 오른쪽 탭은 그 뒤에 나눌 게 없으므로 항상 지운다. */ .tab3ui .sContents .topTab li:last-child a::before, .tab3ui .sContents .topTab li:hover a::before, .tab3ui .sContents .topTab li a.on::before { opacity: 0; } /* 오른쪽 이웃이 활성/호버여도 지운다 — 선은 '앞 탭' 이 들고 있기 때문. ※ :has() 미지원 브라우저에서 위 규칙까지 통째로 무효가 되지 않도록 반드시 분리할 것. 선택자 목록 중 하나라도 파싱 못 하면 규칙 전체가 버려진다. */ .tab3ui .sContents .topTab li:has(+ li:hover) a::before, .tab3ui .sContents .topTab li:has(+ li a.on) a::before { opacity: 0; } /* ── 활성 탭 ───────────────────────────────────────────────────────────── ★ 파란 상단 포인트 라인은 제거했다. 20260811 ohy todo 26-0810-0049 상단바(header.css)의 GNB 활성 표시가 이미 '밑줄' 이다 — 그라데이션 버전은 흰 줄, 흰배경 버전은 파란 줄. 탭에도 파란 줄을 그으면 세로로 20px 사이에 강조선이 두 번 겹쳐 지저분해진다. → 구분은 선이 아니라 '면' 이 맡는다. 비활성은 바닥이 비치고, 활성만 색 있는 면으로 떠오른다. ★ 원본 css/ibc/tab_browse.css:187 이 `background:#fff !important` 를 건다. 예전엔 못 이긴다고 봤지만 그건 !important 없이 명시도만 올렸을 때 얘기다. !important 끼리는 명시도로 겨루므로, .tab3ui 한 겹이 더 있는 우리 쪽이 (0,4,2) vs (0,3,2) 로 이긴다. → 활성 탭 색을 토큰으로 자유롭게 바꿀 수 있다. */ .tab3ui .sContents .topTab li a.on { background: var(--t3-tab-on-bg) !important; color: var(--t3-tab-on-fg); font-weight: 700; } /* ── 활성 탭 아래 바깥 곡선 (크롬 특유의 '본문으로 이어지는' 이음) ───────── 20260811 ohy todo 26-0810-0049 탭이 본문에서 솟아오른 것처럼 보이는 정체는 위쪽 라운드가 아니라 '아래 바깥에 붙은 역(逆)라운드' 다. 탭 좌우 바닥에서 흰색이 오목한 곡선으로 흘러나와 본문 면과 한 덩어리가 된다. 위 라운드만 있고 이게 없으면 각진 상자가 그냥 끊긴 것처럼 보인다 — 둘은 세트다. [왜 이렇게 그리나] · clip-path: path() 는 픽셀 고정이라 가변폭 탭에 못 쓴다. · 가상요소 자리가 없다 : li::after = 드래그 재정렬 표시, a::before = 탭 구분선, .tabClose::before/::after = ✕ 두 획. a::after 는 a 가 overflow:hidden 이라 바깥으로 못 나간다. → 비어 있는 li::before 하나에 좌우 곡선을 '한꺼번에' 그린다. li 폭 + 좌우 --t3-tab-curl 만큼 넓은 띠를 깔고, 양 끝에만 radial-gradient 타일을 놓는다(가운데는 투명 — 어차피 활성 탭의 흰 면). [원리] 10x10 타일 안에서 모서리를 중심으로 반지름 10px 원을 그리고 원 '안'을 투명, '밖'을 흰색으로 둔다 → 딱 오목한 1/4 곡선이 남는다. 투명 stop 을 0.5px 앞당겨 계단현상을 없앤다. 투명색을 `transparent`(= rgba(0,0,0,0)) 로 쓰면 보간 중 회색 테가 생기므로 반드시 흰색 알파 0(#ffffff00)을 쓴다. ※ --t3-tab-on-bg 를 흰색 아닌 값으로 바꾸면 이 0.5px 구간 색도 같이 바꿀 것. [겹침] 곡선이 양옆 탭 영역까지 넘어가므로 활성 li 를 형제보다 위로 올린다. [폴백] :has() 미지원이면 이 규칙만 통째로 무시되고 위 라운드는 그대로 남는다. */ .tab3ui .sContents .topTab li:has(a.on) { z-index: 2; } .tab3ui .sContents .topTab li:has(a.on)::before { content: ""; position: absolute; bottom: 0; left: calc(var(--t3-tab-curl) * -1); right: calc(var(--t3-tab-curl) * -1); height: var(--t3-tab-curl); pointer-events: none; /* 옆 탭 클릭을 가로채지 않게 */ background: radial-gradient(circle var(--t3-tab-curl) at 0 0, #ffffff00 calc(var(--t3-tab-curl) - 0.5px), var(--t3-tab-on-bg) var(--t3-tab-curl)) left bottom / var(--t3-tab-curl) var(--t3-tab-curl) no-repeat, radial-gradient(circle var(--t3-tab-curl) at 100% 0, #ffffff00 calc(var(--t3-tab-curl) - 0.5px), var(--t3-tab-on-bg) var(--t3-tab-curl)) right bottom / var(--t3-tab-curl) var(--t3-tab-curl) no-repeat; } /* ── 닫기 버튼 ────────────────────────────────────────────────────────── */ .tab3ui .sContents .topTab li .tabClose { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; margin: 0; background: none; /* GIF 제거 */ border-radius: 5px; text-indent: 0; /* 기존 -9999em 해제 */ font-size: 0; /* "닫기" 글자 숨김 */ opacity: 0; transition: opacity .14s ease, background .14s ease; cursor: pointer; } /* 기존 `a.on + .tabClose` 가 배경 GIF 를 다시 깔기 때문에 별도로 죽인다. */ .tab3ui .sContents .topTab li a.on + .tabClose { background-image: none; } /* ✕ 두 획 */ .tab3ui .sContents .topTab li .tabClose::before, .tab3ui .sContents .topTab li .tabClose::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; margin: -0.75px 0 0 -4.5px; border-radius: 1px; background: currentColor; } .tab3ui .sContents .topTab li .tabClose::before { transform: rotate(45deg); } .tab3ui .sContents .topTab li .tabClose::after { transform: rotate(-45deg); } /* 활성 탭이거나 마우스를 올린 탭에서만 닫기 버튼을 보인다. ✕ 획은 currentColor 라 여기 color 가 그대로 획 색이 된다. */ .tab3ui .sContents .topTab li:hover .tabClose { opacity: .55; color: var(--t3-tab-fg); } /* 활성 탭은 바탕이 옅은 파랑이라 회색 ✕ 가 탁해 보인다 → 글자와 같은 계열로. 20260811 ohy todo 26-0810-0049 */ .tab3ui .sContents .topTab li a.on + .tabClose { opacity: .6; color: var(--t3-tab-on-fg); } /* .tab3ui 를 한 번 더 붙여 명시도를 (0,6,1)로 올린다. 20260811 ohy todo 26-0810-0049 바로 위 `li a.on + .tabClose` 가 (0,5,2)라 이걸 안 하면 (0,5,1)인 이 규칙이 져서 '활성 탭의 ✕ 만' 호버해도 빨개지지 않는다(예전부터 그랬다). */ .tab3ui.tab3ui .sContents .topTab li .tabClose:hover { opacity: 1; background: rgba(20,35,60,.10); color: #d43b30; } /* tab_browse_basic.jsp 인라인