/* jira-bridge — Utility & component classes Faithful port of the design-handoff console CSS. This IS the brand's component layer (framework-free): :root tokens + utility classes. All values copied verbatim from design_handoff/index.html. */ /* ---------- base ---------- */ body.jb, body.jb *, body.jb *::before, body.jb *::after { box-sizing:border-box; } body.jb { background:var(--bg); color:var(--text); font-family:var(--font); font-size:var(--fs-body); line-height:1.5; -webkit-font-smoothing:antialiased; transition:background .15s, color .15s; margin:0; } .jb a { color:var(--accent); text-decoration:none; } .jb a:hover { color:var(--accent-hover); text-decoration:underline; } .jb h1,.jb h2,.jb h3 { margin:0; letter-spacing:-.01em; } .jb button { font-family:var(--font); } /* ---------- layout ---------- */ .wrap { max-width:var(--maxw); margin:0 auto; } /* padding 이 없어서 호출부가 매번 인라인으로 채웠다 — card 41개 중 37개가 style= 를 달고 패딩 값이 9종으로 갈렸다. --sp-6/--sp-9 주석이 이미 "card padding (compact/roomy)" 라고 선언해 두었는데 정작 .card 가 쓰지 않고 있었다. 기본을 여기로 되돌린다. 기존 인라인은 특이도상 그대로 이기므로 이 변경만으로는 화면이 바뀌지 않는다. */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:var(--sp-6); } /* ⚠ **자식이** 스스로 패딩을 갖는 카드에만 쓴다 (.state 를 감싼 카드, 표 full-bleed 등). 같은 요소에 패딩 클래스가 함께 붙은 경우(.auth-card ·.twofa-grid)에 쓰면 안 된다 — .card.is-flush (0,2,0) 가 .auth-card (0,1,0) 를 이겨 **패딩이 통째로 사라진다**. 2026-08-28 실제로 로그인·2FA 화면이 이렇게 깨져 배포됐다. 그 둘은 클래스 자체가 더 뒤에 선언돼 .card 기본값을 정상적으로 덮으므로 is-flush 가 애초에 필요 없다. */ .card.is-flush { padding:0; } .card.is-roomy { padding:var(--sp-9); } .muted { color:var(--text-2); } .row { display:flex; align-items:center; } .between { justify-content:space-between; } .gap8 { gap:8px; } .gap10 { gap:10px; } /* ---------- form ---------- */ .label { display:block; font-size:var(--fs-label); font-weight:600; color:var(--text-2); margin-bottom:6px; } .input { width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--text); font-size:var(--fs-body); font-family:inherit; } .input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .input.mono { font-family:var(--mono); } /* .input 과 같은 규격 — 한 줄에 섞일 때(필터 바 등) 높이·톤이 어긋나지 않게 */ .select { padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--surface-2); color:var(--text); font-size:var(--fs-body); font-family:inherit; cursor:pointer; } /* ---------- button ---------- */ .btn { padding:8px 14px; border-radius:var(--radius); font-size:var(--fs-table); font-weight:600; cursor:pointer; font-family:inherit; border:1px solid transparent; white-space:nowrap; } .btn-primary { background:var(--accent); color:var(--on-accent); } .btn-primary:hover { background:var(--accent-hover); } /* 앵커 버튼: .jb a (0,1,1) 가 .btn-* (0,1,0) 색을 이겨 primary 글자가 배경색과 같아지던 것 */ .jb a.btn { text-decoration:none; } .jb a.btn:hover { text-decoration:none; } .jb a.btn-primary, .jb a.btn-primary:hover { color:var(--on-accent); } /* secondary 도 같은 함정에 있었다 — .jb a (0,1,1) 가 .btn-secondary (0,1,0) 를 이겨 앵커 버튼만 글자가 액센트색으로 나왔다. 같은 클래스가