/* ── 글꼴 ─────────────────────────────────────────────── */ @font-face{font-family:"SBS Creative"; src:url(assets/sbs-creative-xb-CpEVvWmf.ttf) format("truetype"); font-weight:800; font-display:swap} @font-face{font-family:"SBS Trust"; src:url(assets/sbs-trust-l-PXAS7Rt2.ttf) format("truetype"); font-weight:300; font-display:swap} @font-face{font-family:"SBS Trust"; src:url(assets/sbs-trust-r-BRuaOmSE.ttf) format("truetype"); font-weight:400; font-display:swap} @font-face{font-family:"SBS Trust"; src:url(assets/sbs-trust-b-B0b6ZwoE.ttf) format("truetype"); font-weight:700; font-display:swap} @font-face{font-family:"SBS Trust"; src:url(assets/sbs-trust-xb-xqaRDd9x.ttf) format("truetype"); font-weight:800; font-display:swap} /* D.AIA 목업 v2 — 우리 층 * * 색은 dmc-tokens.css · gradients.css(시안 C 에서 그대로 가져옴)가 정한다. * 이 파일은 그 위에 뜻을 붙이고, 글꼴·간격·뼈대만 정한다. CI 값은 여기서 바꾸지 않는다. * * 대비를 흰 바탕 기준으로 재서 적어 둔다. 4.5 아래면 본문 글자로 쓰지 않는다. */ /* ── 뜻 붙이기 ─────────────────────────────────────────── */ :root{ --bg: var(--n-50); /* #F7F8F9 페이지 — 운영 화면과 같은 값 */ --surface: var(--n-0); /* #FFFFFF 카드·표·상단바. 흰 면은 이 이름 하나다 — --card 라고 쓴 곳이 다섯 군데 있었는데 그 이름은 어디에도 없어 조용히 투명으로 칠해지고 있었다. 없는 변수는 오류를 내지 않는다 */ --sunken: var(--n-100); /* #EFF1F2 눌린 자리 */ --line: var(--n-200); /* #E1E3E5 면을 가르는 선 */ --line-strong: var(--n-300); /* #C9CBCE 입력칸 */ --ink: var(--n-800); /* #26282B 13.6 : 본문 */ --dim: var(--n-500); /* #6D6E71 4.9 : 보조. MEDIA 워드마크 회색 */ --faint: var(--n-400); /* #A3A6AA 2.9 : 글자에 쓰지 않는다. 읽으라고 있는 글자는 아무리 작아도 --dim(4.9) 이 아래한계다. 여기 남은 것은 아이콘·꺾쇠·자리표시자뿐이다 */ --accent: var(--dmc-blue-600); /* #0074BD 4.96 : 조작 */ --accent-ink: var(--dmc-blue-700); /* #005A96 7.05 : 눌림 */ --accent-bg: var(--dmc-blue-50); /* #EDF6FC 지금 자리 */ --accent-b: var(--dmc-blue-100); /* #D6EBF7 그 테두리 */ /* 상태 — CI 값은 그대로 두되, 글자로 쓸 것만 한 단계 진하게 잡는다. 초록 #009F4F 는 3.46, 앰버 #F9A01B 는 2.08 이라 글자로 못 쓴다. */ --ok: var(--dmc-green-700); /* #007C3E 4.83 */ --ok-bg: var(--status-success-bg); --warn-ink:#8A5100; /* 5.9 — 앰버는 배경으로만 쓰고 글자는 이것 */ --warn-bg: var(--status-warning-bg); --danger: #B3271C; /* CI 밖. #D9382B(4.0)를 5.5 로 낮춤 */ --danger-bg: var(--status-danger-bg); --scrim: rgba(11,13,15,.45); --sh: 0 1px 2px rgba(11,13,15,.06); --sh-2: 0 2px 8px rgba(11,13,15,.08); /* 어두운 상단바 위에서 쓰는 값 */ --top: var(--n-950); /* #0B0D0F */ --top-ink: rgba(255,255,255,.65); --top-line: rgba(255,255,255,.25); --top-on: var(--dmc-amber-300); /* #FFCD07 지금 자리 밑줄 */ --r: 10px; --r-s: 6px; --r-l: 16px; /* 운영 화면과 같은 글꼴 — 로컬 번들이라 CDN 을 타지 않는다 */ --sans:"SBS Trust","Apple SD Gothic Neo","Malgun Gothic",sans-serif; /* 코드 줄에는 한글 주석이 섞인다 — 한글 글꼴을 끼우지 않으면 네모로 깨진다 */ --mono:SFMono-Regular,Menlo,Consolas,"D2Coding","Malgun Gothic","SBS Trust",monospace; --display:"SBS Creative","SBS Trust","Apple SD Gothic Neo",sans-serif; /* 글자 크기는 셋뿐이다 — 제목 · 본문 · 보조 */ --t-title:22px; --t-body: 15px; --t-small:13px; } /* ── 바탕 ─────────────────────────────────────────────── */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} /* hidden 을 못 박는다. 브라우저 기본 [hidden]{display:none} 은 우선순위가 가장 낮아서 .back{display:flex} · .grid{display:grid} 같은 규칙에 늘 진다. 그래서 el.hidden = true 를 걸어도 그대로 보인다 — 팝업이 안 닫히던 이유다 */ [hidden]{display:none !important} body{ margin:0; background:var(--bg); color:var(--ink); font:400 var(--t-body)/1.65 var(--sans); letter-spacing:-.005em; } h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.3} h1{font-size:30px} h2{font-size:var(--t-title)} h3{font-size:16px} p{margin:0} /* dl 도 기본 여백을 갖는다 — 안 지우면 판 안에 흰 띠가 남는다 */ dl,dd{margin:0} a{color:inherit; text-decoration:none} ul{margin:0; padding:0; list-style:none} button{font:inherit; color:inherit} :focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-s)} .num{font-variant-numeric:tabular-nums} /* ── 맨 위 CI 선 ──────────────────────────────────────── */ /* readme 의 규칙 — CI 여섯 색 전체는 머리카락 굵기로만. 큰 면을 채우지 않는다. 이 3px 이 화면에 '머리'를 만들어 준다. 브랜드가 드러나는 유일한 자리다. */ /* 여섯 색 띠는 운영 화면과 같이 2px — 상단바 아래에 깐다 */ .ciline{height:2px; background:var(--grad-ci)} /* ── 상단 ─────────────────────────────────────────────── */ /* 어두운 띠 하나. 본문(흰 카드 · 밝은 바탕)과 확실히 갈려서 메뉴 영역이 어디까지인지 눈으로 바로 잡힌다 */ .gnb{position:sticky; top:0; z-index:100; background:var(--top)} .gnb-in{ max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,32px); min-height:60px; display:flex; align-items:center; gap:16px; } /* 로고 · 구분선 · 워드마크 */ .brand{display:flex; align-items:center; gap:8px; flex:none; white-space:nowrap} .brand img{height:16px; width:auto; display:block} .brand .bar{width:1px; height:15px; background:rgba(255,255,255,.28)} .brand .wm{font-size:18px; font-weight:800; letter-spacing:-.4px; color:var(--n-0)} /* 메뉴 — 글자만. 지금 자리는 흰 글자에 앰버 밑줄 */ .gnav{display:flex; align-items:stretch; min-height:60px; min-width:0; overflow-x:auto} .gnav a{ display:flex; align-items:center; flex:none; padding:0 12px; font-size:13px; color:var(--top-ink); white-space:nowrap; } .gnav a:hover{color:#fff; text-decoration:none} .gnav a.on{color:#fff; font-weight:700; box-shadow:inset 0 -2px 0 var(--top-on)} .gnav .cnt{ margin-left:5px; padding:1px 6px; border-radius:999px; background:var(--top-on); color:var(--n-950); font-size:10px; font-weight:800; line-height:1.6; } /* 스토어에 딸린 유형 셋 — 한 단계 작고 흐리다 */ .gnav .kind{padding:0 8px; font-size:12px; color:rgba(255,255,255,.45)} .gnav .kind.on{color:var(--top-on); font-weight:700; box-shadow:inset 0 -2px 0 var(--top-on)} .gnb-r{display:flex; align-items:center; gap:8px; margin-left:auto} /* ── 상단 메뉴를 왼쪽에 두는 자리(SC-32) ──────────────────── 메뉴를 왼쪽으로 베끼지 않는다. 같은 마크업을 그대로 두고 자리만 바꾼다 — 두 벌을 두면 한쪽만 고쳐져 반드시 어긋난다. 좁은 화면에서는 왼쪽 기둥이 본문을 다 먹으므로 위로 되돌린다 */ @media (min-width:901px){ :root[data-nav="side"] body{padding-left:var(--rail)} :root[data-nav="side"] .gnb{ position:fixed; top:0; left:0; bottom:0; width:var(--rail); overflow-y:auto; overscroll-behavior:contain; } :root[data-nav="side"] .gnb-in{ max-width:none; min-height:100%; flex-direction:column; align-items:stretch; gap:18px; padding:18px 12px 16px; } :root[data-nav="side"] .brand{padding:0 8px} :root[data-nav="side"] .gnav{ flex-direction:column; align-items:stretch; gap:1px; min-height:0; overflow:visible; } /* 위에서는 밑줄로 지금 자리를 알렸지만, 세로로 서면 줄이 글자 아래 숨는다 — 칸을 칠한다 */ :root[data-nav="side"] .gnav a{height:34px; padding:0 10px; border-radius:var(--r-s)} :root[data-nav="side"] .gnav a:hover{background:rgba(255,255,255,.07)} :root[data-nav="side"] .gnav a.on, :root[data-nav="side"] .gnav .kind.on{box-shadow:none; background:rgba(255,255,255,.12)} :root[data-nav="side"] .gnav .cnt{margin-left:auto} /* 검색·올리기·나 는 기둥 맨 아래로 내린다 — 메뉴를 읽는 눈을 가로막지 않는다 */ :root[data-nav="side"] .gnb-r{ flex-direction:column; align-items:stretch; gap:6px; margin:auto 0 0; } :root[data-nav="side"] .gnb-r .me{justify-content:flex-start} :root[data-nav="side"] .g-search{justify-content:flex-start} } /* 통합검색 — 테두리만 */ /* 높이는 padding 이 아니라 height 로 못 박는다 — padding 으로 재면 글꼴 줄높이에 따라 옆 단추와 어긋난다 */ .g-search{ display:flex; align-items:center; gap:8px; white-space:nowrap; height:36px; padding:0 16px; border:1px solid var(--top-line); border-radius:var(--r-s); background:none; color:rgba(255,255,255,.75); font-size:13px; cursor:pointer; } .g-search:hover{color:#fff; border-color:rgba(255,255,255,.45)} .g-search svg{width:14px; height:14px; flex:none} /* 알림 — 상단 종. 안 읽은 것이 있을 때만 배지가 붙는다 */ .g-bell{ position:relative; display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-s); color:rgba(255,255,255,.75); } .g-bell:hover{color:#fff; background:rgba(255,255,255,.1)} .g-bell svg{width:18px; height:18px} .g-bell .bcnt{ position:absolute; top:3px; right:2px; min-width:15px; padding:0 4px; border-radius:999px; background:var(--top-on); color:var(--n-950); font-size:10px; font-weight:800; line-height:15px; text-align:center; font-variant-numeric:tabular-nums; } /* 내 정보 — 머리글자 동그라미와 이름·부서 */ .me{display:flex; align-items:center; gap:8px; white-space:nowrap} .me .av{ display:flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--n-0); font-size:13px; font-weight:700; } .me .nm{color:rgba(255,255,255,.85); font-size:13px} .me:hover{text-decoration:none} .me:hover .nm{color:#fff} .g-out{ display:inline-flex; align-items:center; height:36px; padding:0 12px; border:1px solid var(--top-line); border-radius:var(--r-s); background:none; color:rgba(255,255,255,.75); font-size:12px; cursor:pointer; white-space:nowrap; } .g-out:hover{color:#fff; border-color:rgba(255,255,255,.45)} /* ── 단추 ─────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); color:var(--ink); font-size:var(--t-small); font-weight:700; white-space:nowrap; cursor:pointer; } .btn:hover{background:var(--sunken); text-decoration:none} .btn-p{background:var(--accent); border-color:var(--accent-ink); color:#fff} .btn-p:hover{background:var(--accent-ink); border-color:var(--accent-ink)} .btn-s{height:36px; padding:0 14px} /* 값에 딸린 작은 단추 — 값보다 커 보이면 안 된다 */ .btn-xs{height:26px; padding:0 9px; font-size:11px; border-radius:5px} .btn-q{border-color:transparent; background:none; color:var(--dim)} .btn-q:hover{background:var(--sunken); color:var(--ink)} .btn svg{width:16px; height:16px; flex:none} /* ── 목업 상태 고르개 ─────────────────────────────────── */ /* 실제 화면에는 없는 것이다. 메뉴에 끼워 두면 진짜 기능처럼 읽히므로 오른쪽 아래에 따로 띄운다 — 화면 밖에 있는 도구임이 자리로 드러난다. 화면정의 J열(권한별 차이)을 눈으로 확인하려고 둔다 */ .mock{ position:fixed; right:20px; bottom:16px; z-index:60; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px dashed rgba(255,255,255,.35); border-radius:999px; background:rgba(11,13,15,.88); box-shadow:var(--sh-2); backdrop-filter:blur(6px); } .mock > span{font-size:11px; font-weight:700; color:rgba(255,255,255,.5); white-space:nowrap} .mock select{ padding:4px 8px; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:12px; cursor:pointer; } .mock select option{background:var(--n-900); color:#fff} /* 상태별 보이기·감추기. .gnav > a 처럼 display 를 직접 잡는 규칙이 우선순위에서 이겨 버리므로 감추는 쪽과 드러내는 쪽 모두 못 박는다. 상태 전환은 어느 화면에서나 같게 돌아야 한다. */ .only-in,.only-po,.only-adm,.only-out{display:none !important} body[data-role="in"] .only-in, body[data-role="po"] .only-in, body[data-role="po"] .only-po, body[data-role="adm"] .only-in, body[data-role="adm"] .only-po, body[data-role="adm"] .only-adm, body[data-role="out"] .only-out{display:inline-flex !important} /* 보일 때의 display 는 요소마다 다르다. 위 규칙은 상단 메뉴·단추·배지에 맞춘 inline-flex 다 — 덩어리에 그대로 걸리면 자식이 가로로 늘어선다. 덩어리에는 .blk 를 함께 달아 block 으로 되돌린다 */ body[data-role="in"] .blk.only-in, body[data-role="po"] .blk.only-in, body[data-role="po"] .blk.only-po, body[data-role="adm"] .blk.only-in, body[data-role="adm"] .blk.only-po, body[data-role="adm"] .blk.only-adm, body[data-role="out"] .blk.only-out{display:block !important} /* ── 히어로 ───────────────────────────────────────────── */ /* 상단바와 같은 검정으로 이어 붙인다. 어두운 덩어리 하나가 머리가 되고, 그 아래 CI 2px 를 그어 밝은 본문과 가른다 — 화면에 시작점이 생긴다 */ .hero{background:var(--top); padding:44px 0 40px} .hero .in{max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,32px)} .hero h1{ margin:0; color:var(--n-0); font-family:var(--display); font-size:clamp(32px,7.6vw,56px); font-weight:800; line-height:1.14; letter-spacing:-.02em; } .hero p{margin:8px 0 20px; color:rgba(255,255,255,.8); font-size:17px; line-height:1.5} /* 검은 바탕에서 눈에 걸려야 하는 권유라 흰 알약으로 둔다. 올리면 바탕과 글자가 통째로 뒤집힌다 — 글자색만 바꾸면 흰 바탕에 흰 글자가 된다 */ .hero-ob{ display:inline-flex; align-items:center; margin:0 0 20px; padding:10px 18px; border:0; border-radius:999px; background:var(--n-0); color:var(--accent-ink); font-size:15px; font-weight:700; cursor:pointer; transition:background .12s, color .12s; } .hero-ob:hover{background:var(--accent); color:var(--n-0)} .sbox{ display:flex; align-items:center; gap:10px; max-width:640px; padding:0 16px; height:48px; background:#fff; border:0; border-radius:8px; } .sbox:focus-within{outline:2px solid var(--dmc-blue-600); outline-offset:2px} .sbox svg{width:18px; height:18px; color:var(--dim); flex:none} .sbox input{flex:1; border:0; outline:0; background:none; font:inherit; font-size:14px; min-width:0} .sbox input::placeholder{color:var(--faint)} .sbox kbd{ flex:none; padding:1px 6px; border:1px solid var(--line); border-radius:4px; font:inherit; font-size:11px; color:var(--dim); } /* ── 뼈대 ─────────────────────────────────────────────── */ /* 세로 간격은 8의 배수로만 쓴다 — 24 / 16 / 28 / 40. 눈대중으로 5px, 13px 을 섞으면 줄이 어긋나 보인다. 본문의 덩어리 사이는 예외 없이 24 다 — 하나라도 다르면 그 덩어리만 따로 노는 것으로 읽힌다. 맨 위(CI 선 아래)도 같은 24 를 준다 */ .wrap{max-width:1280px; margin:0 auto; padding:24px clamp(16px,4vw,32px) 48px} /* 왼쪽 기둥 너비 — 본문 밀기와 기둥 너비가 늘 같아야 하므로 한 값으로 둔다 */ :root{--rail:208px} .sec{margin-top:40px} .sec-h{display:flex; align-items:center; gap:10px; margin-bottom:14px} /* 제목 앞의 짧은 파랑 막대 — 구획이 어디서 시작하는지 알린다 */ .sec-h h2{display:flex; align-items:center; gap:9px} .sec-h h2::before{content:""; width:3px; height:17px; border-radius:2px; background:var(--accent)} .sec-h .more{margin-left:auto; font-size:var(--t-small); font-weight:600; color:var(--accent)} .sec-h .more:hover{text-decoration:underline} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)} .grid{display:grid; gap:16px} .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} /* ── 배너 ─────────────────────────────────────────────── */ /* 긴급 공지. 앰버는 배경으로만 쓰고 글자는 --warn-ink 로 얹는다 */ /* 닫으면 위로 밀려 올라가며 자리까지 함께 닫힌다 — 아래 내용이 툭 튀지 않는다. 높이는 자바스크립트가 재서 넣어 준다(auto 는 전환이 안 걸린다) */ .banner{ background:var(--warn-bg); border-bottom:1px solid var(--dmc-amber-100); overflow:hidden; transition:height .24s cubic-bezier(.22,.61,.36,1), opacity .16s linear, transform .24s cubic-bezier(.22,.61,.36,1); } .banner.out{opacity:0; transform:translateY(-100%)} @media(prefers-reduced-motion:reduce){ .banner{transition:none} } .banner .in{ display:flex; align-items:center; gap:10px; max-width:1280px; margin:0 auto; padding:11px clamp(16px,4vw,32px); color:var(--warn-ink); font-size:var(--t-body); } .banner .in .when{flex:none; font-size:var(--t-small); opacity:.72} .banner .in .x{margin-left:auto; display:flex; gap:6px; align-items:center} /* 올리기 권유 — 화면에서 유일하게 채운 단추가 있는 자리 */ .invite{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:24px; padding:22px 28px; background:var(--accent-bg); border-radius:8px; } .invite .t{flex:1; min-width:220px} .invite h3{display:inline; font-size:15px; font-weight:700; color:var(--n-900)} .invite p{display:inline; margin-left:8px; font-size:14px; color:var(--ink)} /* ── 영역 카드 3장 ───────────────────────────────────── */ /* 링크가 아니라 판이다. 이름과 화살표만 두면 눌러 보기 전에는 안에 무엇이 있는지 모른다. 셋의 짜임을 일부러 다르게 둔다 — 같은 틀에 이름만 바꾸면 셋이 같은 것으로 보인다 */ .zone{display:flex; flex-direction:column; gap:8px; min-height:148px; padding:22px; cursor:pointer} .zone:hover{box-shadow:var(--sh-2); border-color:var(--line-strong)} .zone > b{font-size:18px; font-weight:800; color:var(--n-900); letter-spacing:-.3px} .zone > p{font-size:var(--t-small); line-height:1.56; color:var(--ink)} /* 스토어 — 종류 셋을 가로로 */ /* 카드 아랫단 — 지금 형편을 한 줄로만. 목록을 늘어놓으면 홈이 대시보드가 된다 */ .zfoot{ display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; border-top:1px solid var(--n-100); } .zfoot .meta{flex:1; min-width:0; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums; line-height:1.5} .zfoot a{font-size:var(--t-small); font-weight:600; color:var(--accent); white-space:nowrap} .zfoot a:hover{text-decoration:underline} /* ── 업무 기반 추천 띠 ────────────────────────────────── */ /* 업무를 골라 둔 사람에게만 보인다. 고르지 않았으면 히어로의 권유 단추만 있다 */ .obstrip{ margin-bottom:24px; padding:20px 24px; background:var(--n-0); border:1px solid var(--accent); border-radius:var(--r); } .obs-h{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px} .obs-h b{font-size:15px; font-weight:700; color:var(--n-900)} .obs-h .sub{font-size:var(--t-small); color:var(--dim)} .obs-h .re{margin-left:auto; font-size:var(--t-small); font-weight:700; color:var(--accent)} .obs-g{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px} /* 세 장이 같은 짜임이라야 견줘 고를 수 있다 — 이름·하는 일·쓰는 사람 수 */ .obs-g a{ display:flex; flex-direction:column; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-s); } .obs-g a:first-child{border-color:var(--accent)} .obs-g a:hover{box-shadow:var(--sh-2)} .obs-g .n{margin-bottom:4px; font-size:14px; font-weight:700; color:var(--n-900)} .obs-g .d{display:block; font-size:var(--t-small); color:var(--ink); line-height:1.5} .obs-g .w{display:block; margin-top:auto; padding-top:8px; font-size:var(--t-small); color:var(--dim)} /* ── 전사 지표 ────────────────────────────────────────── */ /* 숫자만 한 줄. 홈은 대시보드가 아니라 들머리다 — 자리를 크게 쓰지 않는다 */ /* 글자는 반드시 면 위에 올린다 — 바탕에 직접 얹지 않는다. 다만 영역 카드와 같은 옷을 입히면 안 된다. 카드 셋은 '누르는 판' 이고 이것은 '읽는 판' 이다. 눌러 봐야 아는 차이는 만들지 않는다. 그래서 흰 카드가 아니라 한 톤 눌린 면에, 테두리 없이, 이름을 위에 둔다 */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:24px; padding:16px 0; background:var(--sunken); border-radius:var(--r-s); } .stats span{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 24px; border-left:1px solid var(--line); font-size:11px; font-weight:700; color:var(--dim); text-align:center; } .stats span:first-child{border-left:0} .stats b{ font-family:var(--display); font-size:20px; font-weight:800; color:var(--ink); letter-spacing:-.3px; font-variant-numeric:tabular-nums; } .stats b.g{color:var(--dmc-green-700)} .stats b.b{color:var(--accent)} @media(max-width:860px){ .stats{grid-template-columns:repeat(2,1fr); gap:14px 0} .stats span:nth-child(3){border-left:0} } /* ── 배지 ─────────────────────────────────────────────── */ /* 유형 배지는 색을 쓰지 않는다. 색은 뜻이 있을 때만 */ .tag{ display:inline-block; padding:3px 10px; border-radius:999px; background:var(--sunken); color:var(--dim); font-size:11px; font-weight:700; line-height:1.45; white-space:nowrap; } .tag-new{background:var(--ok-bg); color:var(--ok)} /* 추천 하나에만 붙는다 — 이 화면에서 색을 채운 배지는 여기뿐이다 */ .tag-rec{background:var(--accent); color:var(--n-0)} .tag-w{background:#fff; color:var(--warn-ink)} /* ── 오른쪽 레일 ──────────────────────────────────────── */ /* 본문 칸이 아니다. 발견을 돕는 보조 정보라 본문을 밀지 않는다. 창 너비로 보이고 말고를 가르면 대부분의 화면에서 안 보인다 — 본문 1280 에 레일 220 이면 창이 1760 은 돼야 들어가기 때문이다. 그래서 너비와 상관없이 손잡이로 접고 펼친다. 처음에는 접혀 있다 */ /* 손잡이 — 오른쪽 가장자리 세로 글자 */ .railtab{ position:fixed; top:50%; right:0; transform:translateY(-50%); z-index:55; display:flex; align-items:center; gap:7px; /* 오른쪽 테두리가 없어 안쪽이 1px 오른쪽으로 밀린다 — 왼쪽 여백에서 그만큼 뺀다. 글자는 한 줄로 세운다. 두 줄로 갈라지면 손잡이가 넓어지고 화살표가 딴 데 선다 */ padding:14px 9px 14px 8px; white-space:nowrap; border:1px solid var(--line); border-right:0; border-radius:var(--r) 0 0 var(--r); background:var(--surface); color:var(--ink); font-size:12px; font-weight:700; cursor:pointer; writing-mode:vertical-rl; box-shadow:var(--sh-2); transition:right .22s cubic-bezier(.22,.61,.36,1); } .railtab:hover{background:var(--accent-bg); color:var(--accent-ink)} /* 화살표는 글자가 아니라 그림이다. '\2039' 같은 글자는 좌우 여백이 달라 가운데 두어도 왼쪽으로 치우쳐 보인다 — 실제로 그렇게 보였다. 판이 오른쪽에서 나오므로 접혔을 때는 왼쪽, 펼쳤을 때는 오른쪽을 가리킨다 */ .railtab .cv{ display:block; flex:none; width:15px; height:15px; transition:transform .2s; } /* 접혀 있는 것이 기본이다 — 오른쪽으로 살짝 밀고 감춰 둔다 */ .rail{ position:fixed; top:50%; right:0; z-index:56; width:284px; display:grid; gap:8px; padding:0 14px; max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain; visibility:hidden; opacity:0; transform:translate(16px,-50%); transition:opacity .18s, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s; } body.rail-on .rail{visibility:visible; opacity:1; transform:translate(0,-50%)} /* 284(레일 너비) - 14(레일 옆 여백) — 손잡이 오른쪽 끝이 카드 왼쪽 끝에 닿는다 */ body.rail-on .railtab{right:270px} body.rail-on .railtab .cv{transform:rotate(180deg)} @media(prefers-reduced-motion:reduce){ .rail,.railtab{transition:none} } /* 좁은 창에서는 본문 위에 얹힌다 — 본문을 가리지만, 펼친 사람이 스스로 연 것이다 */ @media(max-width:600px){ .rail{width:calc(100vw - 28px)} body.rail-on .railtab{right:calc(100vw - 42px)} } .rail .card{padding:15px 16px} .rail h3{font-size:var(--t-body)} /* 한 판 안의 두 구획 — 선으로만 가른다. 둘째 구획이 사라지면 가르는 선도 함께 사라진다. 빈 선을 남기지 않는다 */ .rsec + .rsec{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)} /* 카드 머리 — 이름 왼쪽, 유형 탭 오른쪽. 좁으면 탭이 아래로 접힌다 */ .rh{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px} .rtabs{display:flex; margin-left:auto; padding:2px; gap:1px; background:var(--sunken); border-radius:999px} .rtab{ padding:3px 8px; border:0; border-radius:999px; background:none; font-size:11px; font-weight:600; color:var(--dim); cursor:pointer; white-space:nowrap; } .rtab:hover{color:var(--ink)} .rtab.on{background:var(--surface); color:var(--accent-ink); font-weight:700; box-shadow:var(--sh)} /* 순위와 이름만. 하는 일도 지표도 적지 않는다 */ .rk{display:grid; gap:1px} .rk a{ display:flex; align-items:center; gap:9px; padding:6px 7px; margin:0 -7px; border-radius:var(--r-s); font-size:var(--t-small); line-height:1.45; } .rk a:hover{background:var(--sunken)} .rk a .n{ flex:none; width:17px; text-align:center; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; } .rk a .dot{flex:none; width:4px; height:4px; margin:0 6px; border-radius:50%; background:var(--line-strong)} .rk a .t{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* 전체 탭에서만 유형을 단다 — 유형별 탭에서는 되풀이라 적지 않는다 */ .rk a .k{flex:none; font-size:11px; color:var(--dim)} .rail .more{ display:block; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); font-size:var(--t-small); font-weight:600; color:var(--accent); } .rail .more:hover{text-decoration:underline} .rk .none{padding:4px 0 2px; font-size:12px; color:var(--dim)} /* FAQ 의 답 — 제목 바로 아래. 감춰 두면 제목만 남아 무엇이 답인지 알 수 없다 */ .gans{margin:4px 0 0; font-size:var(--t-small); color:var(--dim); line-height:1.6} /* ── 알림 목록(SC-27) ─────────────────────────────────── */ .nfchips{margin-bottom:14px} .nflist{list-style:none; margin:0; padding:0} .nfrow + .nfrow{border-top:1px solid var(--line)} .nfrow > a, .nfrow.off{ display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:var(--t-small); } .nfrow > a:hover{background:var(--sunken)} /* 안 읽은 줄은 바탕으로 가른다 — 점 하나만으로는 목록에서 눈에 띄지 않는다 */ .nfrow.new > a, .nfrow.new.off{background:var(--accent-bg)} .nfrow.new > a:hover{background:var(--accent-bg)} .nfdot{flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent)} .nfrow:not(.new) .nfdot{visibility:hidden} .nft{flex:1; min-width:0; color:var(--n-900); line-height:1.5} .nfrow.new .nft{font-weight:700} /* 갈 곳이 없어진 줄 — 지우지 않고 그 사실을 적는다(NF-02 K) */ .nfgone{display:block; margin-top:3px; font-style:normal; font-size:12px; color:var(--dim)} .nfrow.off{color:var(--dim); cursor:default} .nfat{flex:none; color:var(--dim)} /* ── 화면 머리 ────────────────────────────────────────── */ /* 히어로가 없는 안쪽 화면. 이름과 한 줄 설명만 둔다 */ .phead{margin-bottom:24px} .phead h1{font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.5px} .phead h1 .of{color:var(--dim); font-weight:400} .phead .sub{margin-top:6px; font-size:var(--t-body); color:var(--dim)} /* 본문 안의 검색창 — 히어로 것과 달리 테두리를 갖는다 */ .sbox-l{ max-width:none; height:46px; margin-bottom:24px; border:1px solid var(--line-strong); background:var(--surface); } /* ── 좁혀 보기 ────────────────────────────────────────── */ .filters{padding:16px 20px; display:grid; gap:12px} .frow{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .frow .flab{ flex:none; width:56px; font-size:12px; font-weight:700; color:var(--dim); } .frow + .frow{padding-top:12px; border-top:1px solid var(--n-100)} .chips{display:flex; gap:6px; flex-wrap:wrap} .chip{ display:inline-flex; align-items:baseline; gap:5px; padding:6px 14px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font-size:var(--t-small); cursor:pointer; white-space:nowrap; } .chip:hover{border-color:var(--line-strong)} .chip em{font-style:normal; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums} .chip.on{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700} .chip.on em{color:rgba(255,255,255,.75)} /* 0 이 된 칩은 지우지 않고 흐리게 둔다 — 사라지면 무엇을 뺐는지 알 수 없다 */ .chip.zero{color:var(--dim); border-color:var(--n-100); background:var(--n-50); cursor:default} .chip.zero em{color:var(--dim)} .fsel{ padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); font-size:var(--t-small); cursor:pointer; } /* 적용된 조건 요약 — 몇 개가 남았는지와 무엇으로 좁혔는지 */ .applied{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0} .applied .cnt{font-size:var(--t-small); color:var(--dim)} .applied .cnt b{font-size:16px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums} .applied .atag{ display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 10px; border:1px solid var(--accent-b); border-radius:999px; background:var(--accent-bg); color:var(--accent-ink); font-size:12px; font-weight:600; } .applied .atag button{border:0; background:none; color:inherit; cursor:pointer; font-size:13px; line-height:1} .applied .clear, .fdhead .clear{ margin-left:auto; border:0; background:none; font-size:var(--t-small); font-weight:600; color:var(--accent); cursor:pointer; } .applied .clear:hover, .fdhead .clear:hover{text-decoration:underline} /* ── 자산 카드 ────────────────────────────────────────── */ .cards{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} /* 카드 전체가 상세로 가는 링크다. 제목만 링크로 두면 어디를 눌러야 하는지 알 수가 없다 — 이름 글자 폭이 곧 과녁이 된다. 제목 링크에 카드 전체를 덮는 판을 깔아, 링크의 성질(탭 이동 · 가운데 클릭 · 주소 복사)은 그대로 두면서 과녁만 카드만큼 넓힌다 */ .acard{display:flex; flex-direction:column; padding:18px 20px 16px; position:relative; cursor:pointer} .acard:hover{box-shadow:var(--sh-2); border-color:var(--line-strong)} .acard .an::after{content:""; position:absolute; inset:0; z-index:1; border-radius:inherit} .acard .an:focus-visible::after{outline:2px solid var(--focus-ring); outline-offset:2px} /* 카드 안에서 따로 눌리는 것들은 판 위로 올린다 */ .acard .ah .fav, .acard .af{position:relative; z-index:2} .ah{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:9px} .ah .fav, .obt .fav{ margin-left:auto; border:0; background:none; cursor:pointer; font-size:17px; line-height:1; color:var(--n-300); } .ah .fav.on,.ah .fav:hover, .obt .fav.on,.obt .fav:hover{color:var(--dmc-amber-400)} .acard .an{font-size:16px; font-weight:700; color:var(--n-900); letter-spacing:-.3px} .acard:hover .an{color:var(--accent-ink)} /* 설명은 딱 두 줄. 넘치면 자르고, 모자라도 자리를 비워 둔다 — 카드마다 줄 수가 다르면 아래에 오는 담당자 줄이 들쭉날쭉해진다 */ .acard .ad{ margin-top:5px; font-size:var(--t-small); color:var(--ink); line-height:1.55; height:calc(1.55em * 2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* 주인은 사람이다 — 팀이 아니라 PO 와 기술 담당을 적는다. 둘 다 여럿일 수 있어 줄을 나눈다. 한 줄에 몰면 어디까지가 PO 인지 안 읽힌다. 머리글자 동그라미는 두지 않는다 — 이름이 바로 옆에 있어 같은 말을 두 번 하는 것이다 */ .own{ display:grid; grid-template-columns:auto 1fr; gap:5px 10px; grid-auto-rows:20px; align-content:start; margin-top:12px; font-size:12px; } /* 기술 담당이 없어도 자리는 남긴다 — 카드마다 아랫단이 어긋나지 않게. 아래 여백은 구분선 건너편(.af 의 padding-top)과 같은 14 로 맞춘다 — 한쪽만 좁으면 글자가 선에 딸린 것처럼 보인다 */ .acard .own{min-height:45px; margin-bottom:14px} .own .lb{color:var(--dim); font-weight:700; white-space:nowrap} .own .nm{color:var(--ink); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis} /* 상세에서도 같은 두 줄이되 팀을 옆에 붙인다 */ .dhead .who{margin-top:12px} .dhead .who .own{margin-top:0} .af{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:14px; border-top:1px solid var(--n-100); font-size:12px; color:var(--dim); } .af .dot{color:var(--n-300)} .af .users{font-variant-numeric:tabular-nums} .af .act{margin-left:auto} .mine{background:var(--accent-bg); color:var(--accent-ink)} .tag-ok{background:var(--ok-bg); color:var(--ok)} .tag-wait{background:var(--warn-bg); color:var(--warn-ink)} .tag-stop{background:var(--danger-bg); color:var(--danger)} /* 아직 내지 않은 것 — 좋고 나쁨이 아니라 아무 일도 안 일어난 상태다 */ .tag-off{background:var(--n-100); color:var(--dim)} .morewrap{display:flex; justify-content:center; margin-top:24px} .btn[disabled]{opacity:.45; cursor:not-allowed} /* 빈 자리 — 채우지 않고 무엇이 없는지 적는다. display 를 못 박는다. 안 박으면 다른 곳의 display 가 남아 글자가 가로로 늘어선다 */ .empty{display:block; padding:56px 24px; text-align:center} .empty b{display:block; font-size:16px; font-weight:700; color:var(--n-900)} .empty p{display:block; margin:6px 0 18px; font-size:var(--t-small); color:var(--dim)} .empty .btn{margin:0 4px} /* ── 팝업 ─────────────────────────────────────────────── */ /* 팝업 배경이다. 단추에 붙이지 않는다 — 마법사의 '이전' 에 붙였다가 상단 메뉴를 통째로 덮었다 */ .back{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; background:rgba(11,13,15,.55); backdrop-filter:blur(3px); } .modal{ width:440px; max-width:92vw; padding:26px; background:var(--surface); border-radius:var(--r-l); box-shadow:0 16px 40px rgba(16,24,32,.22); } .modal h2{font-size:19px; font-weight:800; color:var(--n-900)} .modal .who{margin-top:6px; font-size:var(--t-small); color:var(--dim)} .modal label{display:block; margin:18px 0 8px; font-size:var(--t-small); font-weight:700} .modal textarea{ width:100%; min-height:96px; padding:11px 13px; resize:vertical; border:1px solid var(--line-strong); border-radius:var(--r-s); font:inherit; font-size:var(--t-small); } .modal textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)} .modal .mf{display:flex; gap:8px; justify-content:flex-end; margin-top:20px} /* ── 권한 없음 ────────────────────────────────────────── */ /* 메뉴에서 감추는 것과 별개로 경로 자체를 막는다. 목업에서는 되돌리지 않고 이 판을 보여 준다 — 무엇이 막혔는지 눈으로 봐야 하기 때문이다 */ .denied{ max-width:560px; margin:64px auto 96px; padding:40px 32px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); } .denied .ico{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin:0 auto 18px; border-radius:50%; background:var(--sunken); color:var(--dim); } .denied .ico svg{width:24px; height:24px} .denied h1{font-family:var(--display); font-size:22px; font-weight:800; color:var(--n-900)} .denied p{margin-top:10px; font-size:var(--t-body); color:var(--dim); line-height:1.7} .denied .who{font-weight:700; color:var(--ink)} .denied .acts{display:flex; gap:8px; justify-content:center; margin-top:24px} .denied .note{ margin-top:24px; padding-top:18px; border-top:1px solid var(--n-100); font-size:12px; color:var(--dim); line-height:1.7; } /* ── 자산 상세 ────────────────────────────────────────── */ /* 머리 — 배지 · 이름 · 하는 일 · 담당. 단추는 오른쪽에 모은다 */ .dhead{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px} .dhead .l{flex:1; min-width:280px} .dhead .badges{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:10px} .dhead h1{font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.5px} .dhead .p{margin-top:8px; font-size:var(--t-body); color:var(--ink); line-height:1.6} .dacts{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .dacts .fav{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--surface); font-size:17px; color:var(--n-300); cursor:pointer; } .dacts .fav.on,.dacts .fav:hover{color:var(--dmc-amber-400); border-color:var(--dmc-amber-100)} /* 요약 줄 — 읽는 판이라 전사 지표와 같은 옷 */ .sum{ display:grid; grid-template-columns:repeat(6,1fr); margin-bottom:24px; padding:14px 0; background:var(--sunken); border-radius:var(--r-s); } .sum > span{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; padding:0 12px; border-left:1px solid var(--line); font-size:var(--t-small); font-weight:700; color:var(--dim); } .sum > span:first-child{border-left:0} .sum b{font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums} @media(max-width:860px){ .sum{grid-template-columns:repeat(2,1fr) !important; gap:14px 0} .sum > span:nth-child(odd){border-left:0} } /* 왜 못 쓰는지 — 점검중·중단이면 이유를 적는다 */ .whybar{ display:flex; align-items:center; gap:9px; margin-bottom:24px; padding:12px 16px; border-radius:var(--r-s); font-size:var(--t-small); } .whybar.fix{background:var(--warn-bg); color:var(--warn-ink)} .whybar.stop{background:var(--danger-bg); color:var(--danger)} /* 탭 */ .tabs{display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--line)} .tab{ padding:11px 16px; border:0; background:none; cursor:pointer; font-size:var(--t-small); color:var(--dim); font-family:inherit; } .tab:hover{color:var(--ink)} .tab.on{color:var(--accent); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent)} /* 탭 안 내용 */ .pane{display:grid; gap:16px} .blocks{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .blk{padding:20px 22px} .blk h3{margin-bottom:8px; font-size:var(--t-small); font-weight:700; color:var(--dim)} .blk p{font-size:var(--t-small); color:var(--ink); line-height:1.7} /* 목록 표 — 자료 · 배포 이력 */ .rowlist{overflow-x:auto} .rowlist table{width:100%; border-collapse:collapse; font-size:var(--t-small)} .rowlist th{ padding:10px 14px; background:var(--n-50); color:var(--dim); font-weight:700; text-align:left; white-space:nowrap; } .rowlist td{padding:12px 14px; border-top:1px solid var(--n-100); vertical-align:middle} .rowlist td.r{text-align:right; white-space:nowrap} .rowlist .num{font-variant-numeric:tabular-nums; color:var(--dim); white-space:nowrap} /* 주간 추이 — 막대 여덟 개면 충분하다. 그래프 라이브러리를 쓰지 않는다 */ .spark{display:flex; align-items:flex-end; gap:6px; height:90px; margin-top:14px} .spark i{ flex:1; border-radius:3px 3px 0 0; background:var(--dmc-blue-300); min-height:3px; display:block; } .spark i:last-child{background:var(--accent)} .sparkx{display:flex; gap:6px; margin-top:6px; font-size:11px; color:var(--dim)} .sparkx span{flex:1; text-align:center} /* 부서별 사용 — 막대와 수 */ .bars{display:grid; gap:10px; margin-top:12px} .bar{display:flex; align-items:center; gap:10px; font-size:var(--t-small)} .bar .nm{flex:none; width:96px; color:var(--dim)} .bar .t{flex:1; height:8px; border-radius:4px; background:var(--n-100); overflow:hidden} .bar .t i{display:block; height:100%; background:var(--accent); border-radius:4px} .bar .v{flex:none; font-variant-numeric:tabular-nums; font-weight:700} /* 설명문 자리는 하나뿐이다 — .note. 화면에 적는 말은 다 읽으라고 적는 것이다. 곁들이는 말이라고 흐리게 두면 정작 알아야 할 것을 놓친다. 크기와 색을 본문과 같게 두고, 자리만 다르게 쓴다. .tight — 제목 바로 아래 / .after — 판이나 표 뒤 / 그냥 .note — 판 안 */ .note{font-size:var(--t-small); color:var(--ink); line-height:1.75} .note.tight{margin:-6px 0 14px} .note.after{margin-top:10px} .note b{font-weight:700} /* 첨부 이미지 — 없으면 이 영역 자체가 없다 */ .shots{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-top:12px} .shots figure{margin:0} .shots .ph{ display:flex; align-items:center; justify-content:center; height:150px; border:1px dashed var(--line-strong); border-radius:var(--r-s); background:var(--n-50); color:var(--dim); font-size:12px; text-align:center; padding:0 12px; } .shots figcaption{margin-top:7px; font-size:12px; color:var(--dim); line-height:1.5} .blk p + p{margin-top:12px} /* 담당자·관리자에게만 열리는 자리 — 남과 다른 것이 눈에 띄어야 한다 */ .mgr{border-color:var(--accent-b)} .mgr-note{ display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:10px 14px; border-radius:var(--r-s); background:var(--accent-bg); color:var(--accent-ink); font-size:12px; } .dacts .sep{width:1px; height:24px; margin:0 4px; background:var(--line)} /* 구획 제목 — 카드 위에 붙는 작은 제목 */ .section-h{font-size:17px; font-weight:700; color:var(--n-900); letter-spacing:-.3px} /* 머리 왼쪽, 걸어 둔 조건 오른쪽. 좁아지면 조건이 아래로 내려간다. h2 를 감싸는 자리라 '.sect > h2' 의 아래 여백이 안 걸린다 — 여기서 대신 준다 */ .sechead{ display:flex; align-items:baseline; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; margin-bottom:14px; } .sechead > h2{margin-bottom:0} .sechead > .note{margin:0; text-align:right} /* ── 연결·설치 순서 ───────────────────────────────────── */ /* 번호를 매긴 차례. 그림 대신 할 일을 글로 적는다 */ .steps{counter-reset:st; display:grid; gap:0} .steps li{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--n-100); list-style:none; } .steps li:first-child{border-top:0; padding-top:4px} .steps li:last-child{padding-bottom:4px} .steps li::before{ counter-increment:st; content:counter(st); flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--accent-bg); color:var(--accent-ink); font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; } .steps > li > b{display:block; font-size:var(--t-small); font-weight:700; color:var(--n-900)} .steps p b{color:var(--n-900)} .steps p{margin-top:4px; font-size:var(--t-small); color:var(--dim); line-height:1.6} /* 경로·명령을 글 속에 넣을 때. 백틱은 쓰지 않는다 — SBS Trust 는 백틱 자리에 회사 로고를 넣어 두어 글자 대신 로고가 찍힌다 */ code{ padding:1px 5px; border:1px solid var(--line); border-radius:4px; background:var(--n-50); font-family:var(--mono); font-size:.92em; color:var(--n-800); } /* 붙여 넣을 주소 — 단계 안에 둔다 */ .addrbox{ display:flex; align-items:center; gap:8px; margin-top:9px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--n-50); } .addrbox .sz{flex:none; font-size:12px; color:var(--dim); font-variant-numeric:tabular-nums} .addrbox .a{ flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .shot{ margin-top:10px; padding:22px 14px; border:1px dashed var(--line-strong); border-radius:var(--r-s); background:var(--n-50); text-align:center; font-size:12px; color:var(--dim); } /* ── 복사할 덩어리 ────────────────────────────────────── */ .copybox{overflow:hidden} .copybox .h{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; color:var(--dim); } .copybox .h .btn{margin-left:auto} /* :not(.md) — 스킬 본문(.md)은 아래에서 따로 잡는다. 여기서 그냥 pre 를 잡으면 우선순위가 높아 .md 의 값을 덮어 버린다 */ .copybox pre:not(.md){ margin:0; padding:16px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.9; color:var(--n-800); white-space:pre; } .copybox .addr{ padding:12px 16px; border-top:1px solid var(--n-100); font-family:var(--mono); font-size:12.5px; color:var(--accent-ink); word-break:break-all; } .copied{color:var(--ok); font-weight:700} /* ── FAQ ──────────────────────────────────────────────── */ .faq{padding:4px 22px} .faq details{border-top:1px solid var(--n-100)} .faq details:first-child{border-top:0} /* 꺾쇠를 앞에 둔다 — 제목 앞이 비어 있으면 눌러서 펴는 줄임을 알 수 없다. 오른쪽 끝의 + 는 제목에서 멀어 무엇에 딸린 표시인지 읽히지 않았다 */ .faq summary{ display:flex; align-items:baseline; gap:9px; padding:15px 0; cursor:pointer; list-style:none; font-size:var(--t-small); font-weight:700; color:var(--n-900); } .faq summary::-webkit-details-marker{display:none} .faq summary::before{ content:"›"; flex:none; width:12px; text-align:center; color:var(--dim); font-weight:700; transition:transform .15s; } .faq details[open] summary::before{transform:rotate(90deg)} .faq .a{padding:0 0 15px 21px; font-size:var(--t-small); color:var(--ink); line-height:1.7} /* ── SKILL.md 본문 ───────────────────────────────────── */ .md{ margin:0; padding:20px 22px; max-height:420px; overflow:auto; font-family:var(--mono); font-size:12.5px; line-height:1.95; color:var(--n-800); white-space:pre-wrap; word-break:break-word; } .md.all{max-height:none} .mdfoot{ display:flex; align-items:center; gap:10px; padding:11px 16px; border-top:1px solid var(--line); font-size:12px; color:var(--dim); } .mdfoot .btn{margin-left:auto} /* 검수를 거치지 않았다는 안내 — 스킬에만 붙는다 */ .nocheck{ display:flex; align-items:center; gap:9px; margin-bottom:24px; padding:12px 16px; background:var(--warn-bg); color:var(--warn-ink); border-radius:var(--r-s); font-size:var(--t-small); } /* ── 가져가는 두 갈래 ─────────────────────────────────── */ /* 스킬은 받는 길이 둘이다 — 어느 쪽이든 결과는 같다. 나란히 두고 각자 편한 쪽을 고르게 한다. 한쪽을 접어 두면 그 길이 없는 줄 안다 */ .ways{display:grid; gap:16px; align-items:start; grid-template-columns:repeat(auto-fit,minmax(320px,1fr))} .way{display:flex; flex-direction:column; padding:22px} .way > b{font-size:16px; font-weight:700; color:var(--n-900); letter-spacing:-.3px} .way > .lead{margin-top:6px; font-size:var(--t-small); color:var(--dim); line-height:1.6} .way .steps{margin:14px 0 0} .way .steps li{padding:11px 0} .way .act{margin-top:16px} .way .act .btn{width:100%} /* 권하는 쪽만 테두리를 파랑으로 — 비개발자가 첫 번째 길을 고르게 한다 */ .way.pick{border-color:var(--accent)} .way .flag{ display:inline-block; margin-left:7px; padding:2px 8px; border-radius:999px; background:var(--accent-bg); color:var(--accent-ink); font-size:11px; font-weight:700; } /* Claude 에 등록되는 실제 이름. 사람이 읽는 한글 이름과 다르다 — Claude 목록에서 보이는 것은 이쪽이라 둘을 함께 보여 줘야 이어진다 */ .idname{ font-family:var(--mono); font-size:12.5px; color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 값을 다루는 단추는 값이 아니라 이름 옆에 둔다 — 값 옆에 두면 값의 일부처럼 읽히고, 칸마다 값 너비가 달라 자리도 흔들린다 */ .sum .lbrow{display:flex; flex-direction:row; align-items:center; gap:6px; justify-content:center} .sum b.idname{font-family:var(--mono); font-size:15px; color:var(--ink)} .acard .tl{display:flex; align-items:baseline; gap:8px; min-width:0} .acard .tl .an{flex:none} .acard .tl .idname{min-width:0} .cnt-s{margin-left:6px; font-size:13px; font-weight:400; color:var(--dim); font-variant-numeric:tabular-nums} /* ── 담긴 파일 ───────────────────────────────────────── */ .files{overflow:hidden} .files .row{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--n-100); font-size:var(--t-small); } .files .row:first-child{border-top:0} .files .nm{flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .files .sz{flex:none; color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums} .files .top{font-weight:700; color:var(--accent-ink)} .files .btn{flex:none} /* 줄을 펼치면 그 자리에서 본문이 나온다 — 다른 데로 보내지 않는다. 이름을 .fitem 으로 둔다. .frow 는 스토어 필터 줄이 이미 쓰고 있고 그쪽 display:flex 가 걸리면 이름과 본문이 옆으로 붙는다 */ .fitem + .fitem{border-top:1px solid var(--n-100)} .fitem .row{border-top:0} .fitem.on{background:var(--n-50)} .fitem.on .row{border-bottom:1px solid var(--line)} .fitem .body{background:var(--surface)} .fitem .body .md{max-height:340px} /* ── 처리함 ───────────────────────────────────────────── */ /* 아홉 탭이 한 틀을 쓴다. 담긴 것이 있는 탭만 나오고 탭마다 대기 건수를 단다 */ .ibtabs{display:flex; gap:2px; flex-wrap:wrap; margin-bottom:16px; border-bottom:1px solid var(--line)} .ibtab{ display:flex; align-items:center; gap:7px; padding:11px 15px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:var(--t-small); color:var(--dim); white-space:nowrap; } .ibtab:hover{color:var(--ink)} .ibtab.on{color:var(--accent); font-weight:700; box-shadow:inset 0 -2px 0 var(--accent)} .ibtab .cnt{ min-width:18px; padding:1px 6px; border-radius:999px; background:var(--sunken); color:var(--dim); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; } .ibtab.on .cnt{background:var(--accent); color:#fff} /* 비어 있는 탭도 자리를 지킨다 — 숫자만 흐리게 둔다 */ .ibtab .cnt.zero{background:none; color:var(--faint)} .ibtab.on .cnt.zero{background:rgba(255,255,255,.28); color:#fff} /* 정렬 줄 */ .ibsort{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px} .ibsort .lb{font-size:12px; font-weight:700; color:var(--dim)} .ibsort .tot{margin-left:auto; font-size:var(--t-small); color:var(--dim)} .ibsort .tot b{font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums} /* 대기 건 — 접힌 줄과 펼친 몸통 */ .ibitem + .ibitem{border-top:1px solid var(--n-100)} .ibitem.on{background:var(--n-50)} .ibhead{ display:flex; align-items:center; gap:12px; width:100%; padding:15px 20px; border:0; background:none; cursor:pointer; font-family:inherit; font-size:var(--t-small); text-align:left; } .ibhead:hover{background:var(--n-50)} .ibitem.on .ibhead{border-bottom:1px solid var(--line)} .ibhead .nm{flex:1; min-width:0; font-weight:700; color:var(--n-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ibhead .sub{flex:none; color:var(--dim)} .ibhead .arw{flex:none; color:var(--faint); font-size:15px; transition:transform .15s} .ibitem.on .ibhead .arw{transform:rotate(90deg)} /* 기다린 날수 — 7일이 넘으면 눈에 띄게 */ .dplus{ flex:none; padding:2px 8px; border-radius:999px; background:var(--sunken); color:var(--dim); font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; } .dplus.late{background:var(--warn-bg); color:var(--warn-ink)} /* 펼친 몸통 */ .ibbody{padding:18px 20px 20px; background:var(--surface)} .ibgrid{display:grid; gap:10px 18px; grid-template-columns:auto 1fr; font-size:var(--t-small)} .ibgrid dt{color:var(--dim); font-weight:700; white-space:nowrap} .ibgrid dd{margin:0; color:var(--ink); line-height:1.6; min-width:0} .ibquote{ margin-top:14px; padding:13px 16px; border-left:3px solid var(--line-strong); background:var(--n-50); font-size:var(--t-small); color:var(--ink); line-height:1.7; } .ibcols{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:14px} /* 결정 줄 — 맨 아래에 두고, 반려를 누르면 사유 칸이 함께 펼쳐진다 */ .ibact{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--n-100); } .ibact .why{flex:1 1 100%; margin:0 0 4px} .ibact textarea{ width:100%; min-height:74px; padding:11px 13px; resize:vertical; border:1px solid var(--line-strong); border-radius:var(--r-s); font:inherit; font-size:var(--t-small); } .ibact textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)} .ibact .spacer{flex:1} .btn-ok{background:var(--ok); border-color:var(--ok); color:#fff} .btn-ok:hover{background:var(--dmc-green-700); border-color:var(--dmc-green-700)} .btn-no{border-color:var(--danger); color:var(--danger); background:var(--surface)} .btn-no:hover{background:var(--danger-bg)} /* 예외를 줄 수 없는 건 — 승인 단추 자리에 이유를 적는다 */ .noexc{ flex:1; padding:11px 14px; border-radius:var(--r-s); background:var(--danger-bg); color:var(--danger); font-size:var(--t-small); font-weight:700; } .hitline{ margin-top:6px; padding:11px 14px; border-radius:var(--r-s); background:var(--n-950); color:#ffffffd9; font-family:var(--mono); font-size:12.5px; overflow-x:auto; white-space:pre; } /* ── 자산 관리 상세 ───────────────────────────────────── */ /* 배포 네 단계를 가로로. 지금 어디까지 왔는지가 한눈에 보여야 한다 */ .pipe{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:4px} .pstep{padding:16px 18px; border-left:1px solid var(--line)} .pstep:first-child{border-left:0} .pstep .n{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; margin-bottom:9px; background:var(--sunken); color:var(--dim); font-size:11px; font-weight:800; } .pstep b{display:block; font-size:var(--t-small); font-weight:700; color:var(--n-900)} .pstep .at{margin-top:5px; font-size:12px; color:var(--dim); line-height:1.6} .pstep.done .n{background:var(--ok-bg); color:var(--ok)} .pstep.now{background:var(--accent-bg)} .pstep.now .n{background:var(--accent); color:#fff} .pstep.wait .n{background:var(--warn-bg); color:var(--warn-ink)} @media(max-width:860px){ .pipe{grid-template-columns:repeat(2,1fr)} .pstep:nth-child(odd){border-left:0} } /* 담당자 줄 */ .own-row{display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:var(--t-small)} .own-row + .own-row{border-top:1px solid var(--n-100)} .own-row .who{flex:1; min-width:0} .own-row .who b{font-weight:700; color:var(--n-900)} .own-row .who span{margin-left:7px; color:var(--dim)} .own-row .role{ flex:none; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; background:var(--accent-bg); color:var(--accent-ink); } .own-row .role.tech{background:var(--sunken); color:var(--dim)} .own-row .at{flex:none; color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums} /* 줄에서 테두리 있는 것이 이것뿐이라 btn-xs(26) 도 커 보인다. 한 급 더 작게 둔다 */ .own-row .rmown{ flex:none; height:22px; padding:0 8px; border-radius:5px; border:1px solid var(--line); background:#fff; font-size:11px; font-weight:400; color:var(--dim); } .own-row .rmown:hover:not(:disabled){border-color:var(--danger); background:#fff; color:var(--danger)} .own-row .rmown:disabled{color:var(--n-300); border-color:var(--n-100)} /* 문의 — 답이 없는 것이 위로 */ .ask-row{padding:16px 20px; font-size:var(--t-small)} .ask-row + .ask-row{border-top:1px solid var(--n-100)} .ask-row .q{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .ask-row .q b{flex:1; min-width:0; font-weight:700; color:var(--n-900)} .ask-row .meta{color:var(--dim); font-size:12px} .ask-row .a{ margin-top:10px; padding:12px 15px; border-left:3px solid var(--accent-b); background:var(--n-50); color:var(--ink); line-height:1.7; } /* 검증에 걸린 항목 */ .chk{padding:18px 20px} .chk + .chk{border-top:1px solid var(--n-100)} .chk .top{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:9px} .chk .file{font-family:var(--mono); font-size:12px; color:var(--dim)} /* ── 검수 상세 ────────────────────────────────────────── */ /* 신청 내용 — 항목 이름과 값을 두 칸으로 나란히. 라벨 칸을 고정폭으로 둔다 — auto 로 두면 표마다 폭이 달라져 값이 어긋난 자리에서 시작한다. 담는 카드에는 .spec-card 를 붙인다 — 회색 라벨 칸이 둥근 모서리 밖으로 삐져나오지 않게 */ .spec-card{overflow:hidden} .spec{display:grid; grid-template-columns:150px 1fr; font-size:var(--t-small)} .spec dt{ padding:13px 20px; border-top:1px solid var(--n-100); color:var(--dim); font-weight:700; white-space:nowrap; background:var(--n-50); } .spec dd{ margin:0; padding:13px 20px; border-top:1px solid var(--n-100); color:var(--ink); line-height:1.6; min-width:0; word-break:break-word; } .spec dt:first-of-type, .spec dd:first-of-type{border-top:0} @media(max-width:600px){ .spec{grid-template-columns:1fr} .spec dd{border-top:0; padding-top:0} } /* 이미 처리된 건 — 결정 줄 자리에 결과가 온다 */ .result{padding:20px 22px; border-radius:var(--r); background:var(--ok-bg)} .result.no{background:var(--danger-bg)} .result .top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px} .result .top b{font-size:16px; font-weight:800; color:var(--ok)} .result.no .top b{color:var(--danger)} .result .who{font-size:var(--t-small); color:var(--dim)} .result p{font-size:var(--t-small); color:var(--ink); line-height:1.7} /* 결정 줄 셋 — 승인 · 보완 요청 · 반려 */ .rvact{display:grid; gap:10px; margin-top:24px; padding:20px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r)} .rvact > b{font-size:var(--t-small); font-weight:700; color:var(--n-900)} .rvpick{display:flex; gap:8px; flex-wrap:wrap} .rvpick .btn{flex:1; min-width:130px} .rvact textarea{ width:100%; min-height:88px; padding:11px 13px; resize:vertical; border:1px solid var(--line-strong); border-radius:var(--r-s); font:inherit; font-size:var(--t-small); } .rvact textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)} .rvsend{display:flex; gap:8px; justify-content:flex-end} .btn-p.on,.btn-no.on,.btn-warn.on{outline:2px solid var(--focus-ring); outline-offset:2px} .btn-warn{border-color:var(--dmc-amber-600); color:var(--warn-ink); background:var(--surface)} .btn-warn:hover{background:var(--warn-bg)} /* ── LLM 키 관리 ──────────────────────────────────────── */ /* 게이트웨이가 준 숫자라는 것을 늘 함께 적는다 — 허브가 센 것이 아니다 */ /* 화면 안 탭. 위의 중메뉴 띠(.subtabs)와 층이 다르므로 한 단계 작고 밑줄을 두지 않는다 — 같은 모양으로 두면 어느 것이 화면을 옮기는 띠인지 알 수 없다. 오른쪽에는 그 탭에 딸린 고르개가 온다(기간은 사용 현황에만 딸린다) */ .ktabs{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 18px; } .ktabs > .row{display:flex; gap:6px; flex-wrap:wrap} .ktab{ padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:var(--t-small); color:var(--dim); cursor:pointer; } .ktab:hover{border-color:var(--dmc-blue-300); color:var(--ink)} .ktab.on{border-color:var(--accent); background:var(--accent-bg); color:var(--accent-ink); font-weight:700} .ktabs > .pick{display:flex; align-items:center; gap:8px} .ktabs > .pick > .lb{font-size:12px; font-weight:700; color:var(--dim)} /* 찾기 칸이 탭 오른쪽에 올 때는 늘어나지 않게 둔다 — 늘어나면 탭을 다음 줄로 밀어낸다 */ .ktabs > .srch{flex:0 1 300px} /* 탭에 붙는 수. 셋 중 밀린 일이 있는 탭만 달아 탭을 열지 않고도 보이게 한다 */ .ktab > .n{ min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--n-100); color:var(--dim); display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; } .ktab > .n.no{background:var(--danger); color:#fff} .ktab.on > .n{background:var(--accent); color:#fff} /* 탭 하나에 판 하나만 오는 화면. 탭 이름을 제목으로 한 번 더 적지 않으므로 .sect 의 제목 자리가 없다 — 딸린 설명이 띠 바로 아래에서 시작한다 */ .apane{margin-top:0} .apane > .note{margin:0 0 14px} /* 목록에 든 사람 — 하나씩 뺄 수 있게 × 를 붙인다. 빼는 것이 되돌릴 수 있어야 하므로 같은 자리에서 다시 넣는다 */ .chipx{ display:inline-flex; align-items:center; gap:2px; padding:2px 2px 2px 0; border-radius:var(--r-s); background:var(--sunken); } .chipx > .kurl{margin-right:0; background:none} .chipx > .x, .fdrow > .x{ width:20px; height:20px; padding:0; border:0; border-radius:var(--r-s); background:none; color:var(--dim); font-size:13px; line-height:1; cursor:pointer; } .chipx > .x:hover, .fdrow > .x:hover{background:var(--danger-bg); color:var(--danger)} /* 찾기 칸 — 자산 이름 · 사람 이름 · 사번을 한 칸으로 찾는다 */ .srch{display:flex; align-items:center; gap:8px; flex:1 1 320px} .srch > input{ flex:1 1 auto; max-width:420px; height:36px; padding:0 12px; border:1px solid var(--line); border-radius:var(--r-s); font:inherit; font-size:var(--t-small); color:var(--ink); } .srch > input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)} /* 줄을 펼쳐 고르고 확인받는 자리. 확인 없이 바꾸면 되돌릴 수 없다 */ .vbox{padding:14px 16px} .vrow{display:flex; align-items:center; gap:8px; flex-wrap:wrap} .vrow > .lb{font-size:12px; font-weight:700; color:var(--dim)} .vrow > .spacer{flex:1} .vbox > .note{margin:10px 0 0} .vbox > .note.no{color:var(--danger)} /* 키 줄을 펼쳐 그 키로 열린 주소를 보인다. 표 안의 표라 테두리를 한 겹만 둔다 */ .urlbox{padding:14px 16px 4px} .urlbox > .note{margin:0 0 10px} .urlbox table{width:100%; border-collapse:collapse; font-size:var(--t-small)} .urlbox th{padding:8px 10px; background:var(--surface); color:var(--dim); font-weight:700; text-align:left; white-space:nowrap; border-bottom:1px solid var(--n-100)} .urlbox td{padding:9px 10px; border-bottom:1px solid var(--n-100); vertical-align:middle} .urlbox tr:last-child td{border-bottom:0} .urlbox td .note{display:block; margin:3px 0 0} .urlbox > .note:last-child{margin:10px 0 0} .urlbox td.r{text-align:right} /* 아직 코드를 정하지 않은 부서 줄 — 흐리게 두되 감추지 않는다. 목록에 없으면 그 부서가 빠진 것을 알 수 없다 */ .rowlist tr.dim > td{color:var(--dim)} .rowlist tr.dim > td b{font-weight:600; color:var(--ink)} /* 코드 정하기 폼 — 줄 안에서 편다. 다른 화면으로 보내면 어느 부서였는지 잃는다 */ .cdform{display:flex; flex-wrap:wrap; align-items:center; gap:8px} /* 고르개 바로 아래에 오는 것은 그 고르개가 펼친 판이다. 띄우는 것만으로는 안 됐다 — 고르개가 100% 로 늘어나 있어 아래 줄이 그 고르개의 딸린 줄로 읽힌다. 이 화면이 이미 쓰는 방식대로(.vbox · .urlbox) 눌린 면으로 감싸 판임을 보인다. 맞추는 것은 .sel 이다. select.js 가 원래