/* legal-widget.css — 11.legal-safety v1.0 */ /* ── 2026-08-04 · 법무 푸터·쿠키 배너 대비 교정 (여섯 사이트 공통, 해시 동일) ── #ls-footer 는 legal-widget.js 가 document.body 에 붙인다. 스스로는 background:transparent 라서 뒤에 깔리는 것은 body 배경이다. 이 여섯 사이트의 body 는 전부 이고 onae-themes.css 가 .onae-themed{ background:var(--onae-bg) } 로 칠한다. 즉 이 푸터의 배경은 테마를 탄다 — 기본 #FFFFFF · 반전 #0E1117 · 파스텔 #FFF8FB. (#ls-footer 를 부르는 페이지 중 body.legal-doc 인 것은 없다. 전수 확인함.) 배경이 테마를 타므로 글자색도 테마를 타야 한다. 그래서 고정 회색 #8a8f98 을 테마의 보조 글자 토큰으로 바꾼다. 계열은 그대로 회색이고 명도만 올라간다. 기본 #55606f on #FFFFFF = 6.39 : 1 (전 3.25 : 1) 반전 #A7B2C2 on #0E1117 = 8.81 : 1 (전 5.82 : 1) 파스텔 #6D4A60 on #FFF8FB = 7.17 : 1 (전 3.11 : 1) .ls-biz / .ls-copy 는 opacity 로 더 흐려 2.1~2.6 : 1 이었다. 흐림을 .9 로 낮춘다. 기본 5.03 : 1 · 반전 7.32 : 1 · 파스텔 5.60 : 1 #ls-banner 는 스스로 배경을 칠한다(.ls-banner-in background:#fff, 다크에서 #1d2129). 배경이 고정색이므로 글자색도 고정색으로 짝짓는다. 아래 .ls-disabled 참고. */ #ls-footer{margin-top:48px;padding:20px 16px 28px;border-top:1px solid rgba(128,128,128,.25);font-size:12.5px;line-height:1.7;color:var(--onae-text-muted,#55606f);background:transparent} #ls-footer .ls-footer-in{max-width:1080px;margin:0 auto} #ls-footer a{color:inherit;text-decoration:none} #ls-footer a:hover{text-decoration:underline} #ls-footer .ls-links a b{font-weight:700} #ls-footer .ls-sep{margin:0 7px;opacity:.5} #ls-footer .ls-biz{margin-top:6px;opacity:.9} /* 5.03 : 1 (전 2.63) */ #ls-footer .ls-copy{margin-top:2px;opacity:.9} /* 5.03 : 1 (전 2.15) */ @media (max-width:780px){#ls-footer .ls-links a{min-height:32px;display:inline-flex;align-items:center;padding:6px 2px}} #ls-banner{position:fixed;left:0;right:0;bottom:0;z-index:99999;padding:12px;pointer-events:none} #ls-banner .ls-banner-in{pointer-events:auto;max-width:560px;margin:0 auto;background:#fff;color:#222;border:1px solid #e3e6ea;border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:18px 20px;font-size:14px;line-height:1.6} #ls-banner .ls-banner-title{font-weight:700;font-size:15px;margin-bottom:6px} #ls-banner .ls-banner-desc{margin:0 0 10px;font-size:13px;color:#555} #ls-banner .ls-banner-desc a{color:#2563eb} #ls-banner .ls-check{display:block;margin:4px 0;font-size:13.5px;cursor:pointer} #ls-banner .ls-check input{margin-right:7px;accent-color:#2563eb} /* 필수 동의 라벨(비활성). #999 on #fff = 2.85 : 1 이었다. 배너 바탕이 고정 #fff 이므로 글자도 고정색으로 짝짓고 같은 회색 계열에서 명도만 내린다. #6B7076 on #fff = 4.99 : 1 */ #ls-banner .ls-disabled{color:#6B7076;cursor:default} #ls-banner .ls-banner-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap} #ls-banner .ls-btn{border-radius:9px;padding:8px 14px;font-size:13.5px;cursor:pointer;border:1px solid #d6dae0;background:#fff;color:#333} #ls-banner .ls-btn:hover{background:#f4f6f8} #ls-banner .ls-btn-primary{background:#2563eb;border-color:#2563eb;color:#fff} #ls-banner .ls-btn-primary:hover{background:#1d4fd7} @media (max-width:600px){#ls-banner .ls-banner-btns{justify-content:stretch}#ls-banner .ls-btn{flex:1}#ls-banner .ls-banner-desc a{min-height:32px;display:inline-flex;align-items:center;padding:6px 2px}} @media (prefers-color-scheme:dark){ #ls-banner .ls-banner-in{background:#1d2129;color:#e6e8ec;border-color:#333a45} #ls-banner .ls-banner-desc{color:#aab1bb} #ls-banner .ls-btn{background:#262c36;border-color:#3a424e;color:#dbe0e7} #ls-banner .ls-btn:hover{background:#2e3542} #ls-banner .ls-btn-primary{background:#3b82f6;border-color:#3b82f6;color:#fff} /* 배너 바탕이 #1d2129 로 바뀌므로 비활성 라벨도 그 배경에 맞춰 짝을 다시 맞춘다. #9AA1AA on #1d2129 = 6.19 : 1 */ #ls-banner .ls-disabled{color:#9AA1AA} }