:root{ color-scheme: light; --fg:#22262e; --muted:#5e6473; --bg:#f4f5f7; --card:#ffffff; --border:#e5e7ec; --subtle:#f8f9fb; --soft:#eef0f4; --soft-h:#e3e6ed; --field:#ffffff; --field-bd:#c8cdd8; /* --primary = 글자·테두리용(카드 위 7.7:1) · --primary-bg = 흰글자 얹는 채움용(11.3:1) */ --primary:#1f4fa8; --primary-d:#16294a; --on-primary:#ffffff; --danger:#a23545; --primary-bg:#1f3a66; --primary-bg-h:#16294a; /* 사이드바(네이비 프리미엄) - 브랜드 골드가 가장 살아나는 자리 */ --side-bg:#182740; --side-bd:#182740; --side-fg:#d9dfeb; --side-dim:#9fb0c9; --side-hover:#21344f; --side-on-bg:#24375c; --side-on-fg:#f0d9ad; --gold:#d4ab66; --gold-ink:#8a5a12; /* gold=네이비 위 · gold-ink=밝은 배경 위 */ --ok-bg:#e3f2e7; --ok-fg:#1b6b38; --wait-bg:#f8ecd9; --wait-fg:#8a5a12; --info-bg:#e7edf9; --info-fg:#1f4fa8; --no-bg:#f9e7e9; --no-fg:#a23545; --no-bd:#eec3c8; --alert-bg:#f9e7e9; --alert-fg:#a23545; --alert-bd:#eec3c8; --warn-bg:#fff7e6; --warn-bd:#f3d9b0; --warn-fg:#8a5a12; } /* 다크 모드 - 사이드바 테마 스위치(시스템/라이트/다크)가 로 적용. '시스템'은 JS가 OS 설정을 읽어 data-theme=dark/light로 해석해 넣음. */ :root[data-theme="dark"]{ color-scheme: dark; --fg:#e6e8ec; --muted:#a0a7b4; --bg:#191b1f; --card:#23262b; --border:#31343b; --subtle:#282b31; --soft:#31343b; --soft-h:#3a3e46; --field:#17191d; --field-bd:#3b3f48; --primary:#8fb0e8; --primary-d:#3a63a8; --on-primary:#ffffff; --danger:#e9909b; --primary-bg:#2d5089; --primary-bg-h:#3a63a8; /* 다크에선 캔버스보다 더 깊은 남색으로 사이드바를 구분 */ --side-bg:#131c2e; --side-bd:#1e293d; --side-fg:#ccd6e6; --side-dim:#93a3ba; --side-hover:#1b273e; --side-on-bg:#1f2f4d; --side-on-fg:#ecd3a4; --gold:#d4ab66; --gold-ink:#d4ab66; --ok-bg:#16331f; --ok-fg:#5fd089; --wait-bg:#352a17; --wait-fg:#e3b15f; --info-bg:#1e2c46; --info-fg:#9db8f2; --no-bg:#3a1f24; --no-fg:#f08a96; --no-bd:#5a2f36; --alert-bg:#3a1f24; --alert-fg:#f08a96; --alert-bd:#5a2f36; --warn-bg:#352a17; --warn-bd:#5a4a2a; --warn-fg:#e3b15f; } /* 본문 폰트 = Wanted Sans 가변(400~1000) 로컬 번들. @font-face는 vendor/wanted-sans/wanted-sans.css. (구 Pretendard 동적 서브셋은 vendor/pretendard에 남겨둠 - PDF·롤백용) */ *{box-sizing:border-box} /* 스크롤바 자리를 항상 확보(scrollbar-gutter) - 페이지마다 세로 스크롤 유무가 달라 클래식 스크롤바(윈도우·'항상 표시' 맥)에서 폭이 15px 오락가락하며 좌우로 튀던 현상 제거. 오버레이 스크롤바(기본 맥)에선 자동으로 무효(공백 안 생김). */ html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable} body{ margin:0; font-family:'Wanted Sans','Pretendard',system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-size:17px; line-height:1.6; color:var(--fg); background:var(--bg); word-break:keep-all; overflow-wrap:break-word; /* 한글은 단어(띄어쓰기) 단위로만 줄바꿈 - 낱말 중간 절단 금지. 칸보다 긴 이메일·URL만 예외로 접힘 */ } h1{font-size:26px; margin:0 0 8px} a.link{color:var(--primary); text-decoration:none} a.link:hover{text-decoration:underline} .muted{color:var(--muted)} .container{max-width:2000px; margin:0 auto; padding:38px 40px 44px} .card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px} /* ═══ 표 「줄 전체」를 눌러 열기 - PC·모바일 동일(2026-07-28 나쿤 요청) ═══ 제목 칸에 링크가 있으면 그 줄(모바일에선 카드) 어디를 눌러도 같은 곳으로 간다. ⚠️ 줄이 통째로 버튼이므로 제목 글자에는 링크 표시(파란 글씨·밑줄)를 하지 않는다. 줄 안의 다른 링크·버튼·입력칸은 위로 올려 원래대로 눌린다. */ .tbl tbody tr:has(td.card-title > a){cursor:pointer} .tbl tbody tr:has(td.card-title > a):hover{background:var(--subtle)} .tbl tbody tr{position:relative} .tbl td.card-title > a{color:inherit; text-decoration:none} .tbl td.card-title > a:hover{text-decoration:none} .tbl td.card-title > a::after{content:''; position:absolute; inset:0; z-index:1} .tbl td:not(.card-title) a, .tbl td .btn, .tbl td button, .tbl td input, .tbl td select, .tbl td label{position:relative; z-index:2} /* 카드 전체를 눌러 열기(2026-07-28 나쿤 요청) - 제목에 .card-open을 주면 카드 어디를 눌러도 같은 곳으로 간다. 카드 안의 다른 링크·버튼·입력칸은 위로 올려 원래대로 눌린다. ⚠️ 카드가 통째로 버튼이므로 안쪽 글자에는 링크 표시(파란 글씨·밑줄)를 하지 않는다 - 대신 카드에 손 모양 커서와 hover 강조를 준다. */ .card{position:relative} .card .card-open{color:inherit; text-decoration:none} .card .card-open:hover{text-decoration:none} .card .card-open::after{content:''; position:absolute; inset:0; z-index:1} .card:has(> * .card-open), .card:has(> .card-open){cursor:pointer; transition:border-color .15s, box-shadow .15s} .card:has(> * .card-open):hover, .card:has(> .card-open):hover{border-color:var(--primary); box-shadow:0 2px 10px rgba(0,0,0,.06)} .card a:not(.card-open), .card .btn, .card button, .card input, .card select, .card textarea, .card label, .card summary, .card details{position:relative; z-index:2} /* ⚠️ 위 규칙이 「표 제목 링크」까지 잡으면 덮개(::after)의 기준이 그 글자가 되어 줄 전체를 못 덮는다. 표 제목 링크는 기준을 잡지 않도록 되돌린다(덮개의 기준은 줄=tr). */ .card .tbl td.card-title > a, .tbl td.card-title > a{position:static} /* ═══ 본문 세로 리듬 - 여기 한 곳에서만 정한다(2026-07-27 전면 통일) ═══ 그동안 블록마다 제각각 margin을 들고 있어 화면마다 간격이 0·8·12·14·16·17·18·20·24·36·40px로 갈렸다. 디자인시스템 §4(간격은 4의 배수 · 카드 사이 16 · 구역 사이 40)대로 아래 4개 값만 쓴다. PC·모바일 동일. ⚠️ 새 블록을 main 바로 아래 넣을 때 개별 margin을 주지 말 것 - 여기 규칙이 알아서 맞춘다. 개별 margin(클래스든 인라인이든)이 이겨서 다시 어긋나지 않도록 !important로 못 박는다. */ main.container > *{margin-top:16px !important; margin-bottom:0 !important} /* 블록과 블록 사이 */ main.container > *:first-child{margin-top:0 !important} main.container > h1 + p, main.container > h1 + .muted{margin-top:8px !important} /* 제목과 그 설명은 한 덩어리 */ main.container > .sec-title{margin-top:40px !important} /* 구역 나눔 */ main.container > .sec-title + *{margin-top:12px !important} /* 구역 제목 → 첫 내용 */ main.container > .sec-title:first-child, main.container > h1 + .sec-title{margin-top:24px !important} /* ===== 앱 셸: 좌측 사이드바 ===== */ .layout{display:flex; min-height:100vh} .sidebar{flex:0 0 230px; width:230px; background:var(--side-bg); border-right:1px solid var(--side-bd); display:flex; flex-direction:column; position:sticky; top:0; height:100vh} .side-brand{display:flex; align-items:center; box-sizing:border-box; min-height:54px; padding:6px 26px; text-decoration:none; border-bottom:1px solid var(--side-hover)} /* 상단바와 높이 맞춰 가로선 정렬 */ /* 워드마크 = 본문과 같은 Wanted Sans 굵게(2026-07-26 필기체에서 교체 - 업무 도구 톤에 맞추고 브랜드 통일·가독성↑) */ .brand-wm{font-family:'Wanted Sans',system-ui,sans-serif; font-weight:800; font-size:23px; line-height:1.35; /* ⚠️ line-height:1이면 'g'의 내려간 꼬리가 글자상자 밖으로 나가는데, 이 워드마크는 그라디언트를 글자 모양으로 잘라 칠하는 방식(background-clip:text)이라 상자 밖은 색이 안 칠해져 잘려 보인다 → 1.35로 상자를 넓힘(2026-07-26) */ letter-spacing:-.5px; color:var(--gold); background:linear-gradient(92deg,#c1934a,#9c6f28); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent} a.side-brand:hover .brand-wm{filter:brightness(1.12)} .side-nav{flex:1; padding:14px 12px; display:flex; flex-direction:column; gap:3px; overflow-y:auto} .side-nav a{display:block; padding:12px 14px; border-radius:10px; color:var(--side-fg); text-decoration:none; font-size:16px; font-weight:500} .side-nav a:hover{background:var(--side-hover)} .side-nav a.active{background:var(--side-on-bg); color:var(--side-on-fg); font-weight:700} .flash-linkrow{display:flex; gap:6px; margin-top:8px; align-items:center} .flash-linkbox{flex:1; min-width:0; font-size:14px; padding:6px 9px; border:1px solid var(--border); border-radius:8px; background:var(--field); color:var(--fg)} .side-foot{padding:16px 18px; border-top:1px solid var(--side-hover); font-size:14px; color:var(--side-dim)} .side-theme{display:flex; align-items:center; gap:1px; flex-wrap:wrap; margin:0 0 10px} .side-theme-lbl{font-size:14px; color:var(--side-dim); margin-right:5px} .side-theme button{flex:0 0 auto; font:inherit; font-size:14px; min-height:36px; padding:6px 10px; cursor:pointer; border:0; background:transparent; color:var(--side-dim); border-radius:8px; transition:background .15s, color .15s} .side-theme button:hover{color:var(--side-fg); background:var(--side-hover)} .side-theme button.is-on{background:var(--side-hover); color:var(--side-fg); font-weight:600} .tabs{display:inline-flex; gap:4px; background:var(--soft); padding:5px; border-radius:14px; margin:0 0 24px; flex-wrap:wrap; max-width:100%} .tab{padding:9px 18px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; white-space:nowrap; transition:background .15s, color .15s} .tab:hover{color:var(--fg)} .tab.active{background:var(--card); color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.10)} .content-area{flex:1; min-width:0} /* 상단바 - 계정(이름·옵션·로그아웃) 우상단. 데스크탑·모바일 공용(모바일은 왼쪽에 햄버거+브랜드도) */ .topbar{display:flex; align-items:center; gap:12px; box-sizing:border-box; min-height:54px; padding:8px 22px; background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:30} .topbar > .hamburger, .topbar > .mb-title{display:none} /* 데스크탑: 브랜드는 사이드바에 있으니 숨김 */ .topbar-acct{margin-left:auto; display:flex; align-items:center; gap:12px} .tb-user{color:var(--muted); font-size:14px; white-space:nowrap} .tb-opt{position:relative} .tb-opt > summary{list-style:none; cursor:pointer; color:var(--fg); font-weight:600; font-size:14px; padding:7px 13px; border:1px solid var(--border); border-radius:10px; background:var(--card); white-space:nowrap} .tb-opt > summary::-webkit-details-marker{display:none} .tb-opt > summary:hover{background:var(--soft)} .tb-opt[open] > summary{background:var(--soft-h)} .tb-logout{background:var(--soft); border:1px solid var(--border); color:var(--fg); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; min-height:36px; padding:7px 13px; border-radius:10px; white-space:nowrap} .tb-logout:hover{background:var(--soft-h)} .nav-overlay{display:none} @media (max-width:900px){ .sidebar{position:fixed; top:0; left:0; z-index:50; transform:translateX(-100%); transition:transform .22s ease; box-shadow:2px 0 16px rgba(0,0,0,.18)} #navtoggle:checked ~ .layout .sidebar{transform:none} #navtoggle:checked ~ .layout .nav-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40} .topbar{padding:9px 16px} .topbar > .mb-title{display:inline-block} /* 모바일: 브랜드 표시 */ .topbar > .hamburger{display:inline-flex} /* 모바일: 햄버거 표시(SVG 중앙정렬) */ /* 햄버거 = SVG 메뉴 아이콘(이모지 ☰ 대체, 2026-07-24) + 터치 44px 확보 */ .hamburger{align-items:center; justify-content:center; width:44px; height:44px; margin:-8px -10px; cursor:pointer; user-select:none; color:var(--text)} .hamburger .ic{width:26px; height:26px; vertical-align:0} .mb-title{font-weight:700; text-decoration:none; cursor:pointer} /* 상단 로고 클릭 = 홈(a로 바뀜, 밑줄 제거) */ .mb-title.brand-wm{font-size:21px; line-height:1.35; color:var(--gold-ink); transform:translateY(6px)} /* line-height 1.35 = 'g' 꼬리까지 그라디언트 칠해짐(1.1이면 잘림) · translateY는 상자가 커진 만큼 재보정 */ /* 상단바는 밝은 배경 → 진한 골드 · translateY=삼선과 눈높이 맞춤(픽셀 실측 -0.2px) */ .tb-user{display:none} /* 모바일: 이름 숨겨 옵션·로그아웃 공간 확보 */ } /* 로그인 */ .auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px} .brand{font-size:22px; margin:0 0 4px} .sub{color:var(--muted); margin:0 0 22px} form label{display:block; margin:0 0 16px; font-weight:500} /* ⚠️ input·select는 글꼴을 물려받지 않는다(브라우저 기본=OS 글꼴). 지정하지 않으면 윈도우에서 본문과 다른 글꼴로 나온다. textarea·button에는 이미 font-family:inherit이 있었는데 이 둘만 빠져 있었음(2026-07-27 나쿤이 윈도우에서 발견). */ input, select{font-family:inherit} /* 코드·경로 표시 - 고정폭은 영문·숫자에만 쓰고 한글은 본문 글꼴이 받게 한다 (한글에 고정폭을 걸면 윈도우에서 굴림체로 떨어져 본문과 확 달라진다) */ code{font-family:ui-monospace,SFMono-Regular,'SF Mono',Consolas,'Liberation Mono',Menlo,'Wanted Sans',monospace} /* ★ 입력칸 높이 = 앱 전체 46px 하나(2026-07-28 나쿤 확정). 입력칸·선택칸·툴바 버튼 전부 46px. ⚠️ 높이를 고정할 땐 위아래 패딩을 0으로 - 남겨두면 내용영역이 줄어 글자가 잘린다. 여러 줄 칸(textarea)만 예외. */ input{ display:block; width:100%; margin-top:7px; padding:0 14px; height:46px; font-size:17px; border:1px solid var(--field-bd); border-radius:10px; background:var(--field); color:var(--fg); } /* 포커스링(선택 테두리) 전면 제거 - 2026-07-27 나쿤 요청. 브라우저 기본 링까지 나오지 않게 전역으로 끈다. 입력칸은 테두리 색만 바뀌어 어디에 쓰는지 보이게 유지 */ :focus, :focus-visible{outline:none !important} input:focus{border-color:var(--primary)} .pw-wrap{position:relative; display:block; margin-top:7px} .pw-wrap input{margin-top:0; padding-right:54px} .pw-wrap .pw-toggle{position:absolute} /* 카드 안 클릭영역 규칙(.card button{position:relative})에 밀려 입력칸 밖으로 떨어지던 것 - 클래스 2개라 그 규칙을 이긴다(2026-07-28) */ .pw-toggle{border-radius:8px; position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); font-size:14px; cursor:pointer; min-height:34px; padding:8px 12px} /* 입력칸(46px) 안에 겹치는 토글 - 규격 예외(34px), 모바일은 아래에서 44px */ .pw-toggle:hover{color:var(--fg)} .btn{ display:inline-flex; align-items:center; justify-content:center; width:auto; min-height:46px; padding:11px 22px; font-size:16px; font-weight:600; border:0; border-radius:10px; cursor:pointer; } a.btn{text-decoration:none} .btn-block{width:100%} .btn-primary{background:var(--primary-bg); color:var(--on-primary)} .btn-primary:hover{background:var(--primary-bg-h)} .alert{ background:var(--alert-bg); color:var(--alert-fg); border:1px solid var(--alert-bd); padding:12px 14px; border-radius:10px; margin-bottom:18px; font-size:16px; } .alert-ok{background:var(--ok-bg); color:var(--ok-fg); border-color:var(--ok-fg)} /* 작업 완료 1회용 알림(플래시) - 모든 페이지 상단 */ .container.flash-wrap{padding-top:22px; padding-bottom:0} .flash-msg{margin:0; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,.08)} /* 일시 알림(저장됨 등)은 레이아웃 위에 떠서 표시 - 나타나고 사라져도 아래 내용이 0px도 안 움직임. 상시 경고 배너(메일 미검증 등)는 페이지 로드 때부터 있어 밀림이 없으므로 흐름 유지. */ .flash-float{position:fixed; top:66px; left:230px; right:0; z-index:1200; padding-top:0; pointer-events:none} .flash-float .flash-msg{pointer-events:auto; box-shadow:0 10px 30px rgba(0,0,0,.22); animation:flash-in .22s ease} @keyframes flash-in{from{transform:translateY(-10px); opacity:0} to{transform:none; opacity:1}} @media (max-width:900px){ .flash-float{left:0} } /* 모바일: 사이드바가 서랍이라 전체 폭 */ /* 대시보드 */ .stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-top:22px} .stat{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px; text-align:center} .stat .num{font-size:34px; font-weight:700; color:var(--primary); line-height:1.1} .stat .lbl{color:var(--muted); margin-top:8px} @media (max-width:900px){ body{font-size:16px} .container{padding:18px 14px} /* 카드 안쪽 여백은 PC와 같은 24px로 통일(2026-07-27 나쿤 요청) - 예전엔 22px이라 화면마다 달라 보였다 */ } /* ===== 공통 폼·표 (온보딩·관리자) ===== */ .row-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap} /* 표 제목(열 머리글) 중앙정렬 - 금액 등 오른쪽정렬 지정 칸은 인라인 style이 우선 */ .tbl thead th{text-align:center} /* ── 표 정렬: 모든 표의 머리글·내용을 가운데로 통일(2026-07-28 나쿤 요청) ────────────── 예전엔 「첫 열(기업·이름)은 왼쪽」·「글자 열(.tl·.th-l)은 왼쪽」 예외가 있었는데, 열마다 정렬이 달라 줄이 들쭉날쭉해 보였다. 일단 전부 가운데로 두고, 써 보다 어색한 열만 아래 세 줄을 center → left 로 바꿔 되살린다. ※ 모바일 카드형(table.tbl-cards)은 라벨+값 구조라 왼쪽 정렬이 맞다 - 아래쪽 블록에서 별도 처리. */ .tbl-mid tbody td{text-align:center} .tbl-mid thead th:first-child, .tbl-mid tbody td:first-child{text-align:center} /* ← 되살리려면 left */ .tbl-mid .tl{text-align:center} /* ← 되살리려면 left */ .tbl thead th.th-l{text-align:center} /* ← 되살리려면 left */ .tbl-mid tbody td.td-c, .tbl-mid thead th.td-c{text-align:center} .tbl tbody td.td-c{text-align:center} /* 카드 머리 아래 정보줄(프로그램·진행일·제출기한) - PC는 한 줄에 · 로 이어서, 모바일은 한 줄씩(2026-07-28 나쿤) */ @media (max-width:900px){ .meta-line > span{display:block} .meta-line .sep{display:none} } /* 카드 안 항목 라벨 - 표 카드형의 data-label과 같은 모양. PC에서도 보인다(표에 머리글이 있는 것과 같은 역할 - 값만 나열하면 무엇인지 모른다) */ .mlab{font-style:normal; color:var(--muted); font-weight:600; font-size:14px; margin-right:3px} /* 최소 14px 규칙(글자 7단) */ /* 모바일 카드에서 줄 리듬을 「진행 중·배정현황」 카드와 똑같이 맞춘다(2026-07-28 나쿤 「줄간격이 다르다」). 그 카드들은 값 16px · 칸 패딩 3px 0 이라 줄높이 32px·중심간격 33px가 된다. 여기만 .small(14px)이라 줄높이 23px로 촘촘하고 뱃지 줄만 30px이라 간격이 30/30/26/26로 들쭉날쭉했다. */ @media (max-width:900px){ .rv-head .meta-line{font-size:16px} .meta-line > span{display:block; padding:3px 0; margin-top:0; min-height:26px} /* 제목↔첫 줄 틈도 카드 표와 같게 - 표에선 제목칸 아래 여백 6px이 전부다(9px 간격이 더 벌어져 보였다) */ .rv-head > .rv-head-txt{gap:0} /* 클래스 2개 - 아래쪽 .rv-head-txt{gap:9px}를 이겨야 한다 */ .rv-head > .rv-head-txt > .rv-name{padding-bottom:3px} } /* 금액 열은 예외로 오른쪽(2026-07-28 나쿤) - 자릿수가 세로로 맞아야 읽힌다. tabular-nums = 숫자 폭을 모두 같게 해 1과 8이 섞여도 자리가 안 흔들린다. */ .tbl thead th.num, .tbl tbody td.num{text-align:right; font-variant-numeric:tabular-nums} /* 넓은 관리 표를 화면 폭에 맞춤(좌우 스크롤 방지) - 고정 레이아웃 + 긴 값 줄바꿈 */ .tbl-fixed{table-layout:fixed} .tbl-fixed th, .tbl-fixed td{overflow-wrap:anywhere} /* 배정현황 표: 긴 값(장소·분야·프로그램)을 줄바꿈해 화면 폭에 맞춤(좌우 스크롤 제거) - .tbl 전역 nowrap을 이 표에서만 해제. 한글은 단어(띄어쓰기) 단위로 끊음. (.tbl.tbl-assign 로 명시도를 .tbl td 보다 높여 뒤늦게 선언된 nowrap을 덮음) */ .tbl.tbl-assign th, .tbl.tbl-assign td{white-space:normal; word-break:keep-all; padding:12px 9px} /* 열이 많아(최대 11) 좌우 패딩을 조밀하게 - 좁은 노트북 폭에서도 스크롤 없이 들어가게 */ .tbl.tbl-assign .row-actions{gap:4px} /* 액션 버튼 간격 축소 */ .tbl.tbl-assign .row-actions .btn-sm{padding:6px 10px; font-size:14px} /* 여백만 조밀하게, 높이는 규격 36px 유지 */ /* 액션 버튼(재발송·관리·삭제)을 조밀하게 해 한 줄 유지 + 표 폭 확보 */ /* 모바일: 좁은 폰 화면에서 고정폭 표가 칸 뭉개져 글자 겹치던 것 방지 - 최소폭 유지해 좌우 스크롤(위 "옆으로 밀면" 힌트). 데스크탑은 영향 없음 */ @media (max-width: 768px){ .tbl-fixed{min-width: 860px} } .sec-title{font-size:19px; margin:40px 0 12px; padding-top:24px; border-top:1px solid var(--border)} .sec-title:first-of-type{border-top:0; padding-top:0; margin-top:14px} .form-card{margin-top:16px} /* 짧은 입력칸은 넓은 본문에서도 늘어지지 않게 폭 제한 */ .form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 18px} /* 가로로 채워 넓은 화면 여백 제거(좁으면 자동 줄바꿈) */ @media (max-width:560px){ .meta-grid{grid-template-columns:1fr} } /* 날짜 + 시간 + 장소/금액 줄 - 윗줄(.form-row-4)과 같은 4등분 격자. 칸마다 폭이 다르면 위아래 줄이 어긋나 보인다(2026-07-29 나쿤). 항목이 5개 이상이면 같은 격자의 다음 줄로 이어진다. */ .dt-row{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 18px; align-items:end} .dt-row > label{margin:0 0 4px; min-width:0} /* 항목이 3개뿐인 줄(심화상담·시간 없는 보고서)은 3등분 - 4등분이면 오른쪽 한 칸이 비어 보인다 */ @media (min-width:1401px){ .dt-row:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} } /* 공용 시간 입력 - 오전/오후 + 시/분(숫자 입력 + 증감 버튼) */ /* 4등분 칸 안에 들어가야 하므로 칸 폭에 맞춰 줄어든다(줄바꿈 금지 - 접히면 아랫줄이 밀린다). 「시」·「분」 글자는 빼고 가운데 「:」로 - 빈 칸엔 placeholder가 시/분을 알려준다(2026-07-29). */ .timepick{display:flex; align-items:center; gap:5px; flex-wrap:nowrap; margin-top:4px; min-width:0} .timepick .tp-ampm{width:auto; min-width:66px; margin:0; flex:0 0 auto} .timepick .tp-sep{color:var(--muted); font-size:17px; flex:0 0 auto} .timepick .stepper{flex:1 1 0} .stepper{display:inline-flex; align-items:stretch; border:1px solid var(--field-bd); border-radius:10px; overflow:hidden; background:var(--field); height:46px; min-width:0} .stepper input[type=number]{width:auto; flex:1 1 0; min-width:32px; text-align:center; border:0; margin:0; padding:0; background:transparent; color:var(--fg); font-size:16px; -moz-appearance:textfield} .stepper input[type=number]::-webkit-outer-spin-button, .stepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0} .stepper button{width:34px; border:0; background:var(--soft); color:var(--fg); font-size:19px; line-height:1; cursor:pointer; padding:0; flex:0 0 auto} .stepper button:hover{background:var(--soft-h)} .stepper .st-dn{border-right:1px solid var(--field-bd)} .stepper .st-up{border-left:1px solid var(--field-bd)} /* 드래그&드롭 업로드 */ [hidden]{display:none !important} /* hidden 속성은 무조건 숨김 - 체크박스 inline-block 규칙(362행대)이 navtoggle 등을 되살리는 회귀 방지 + .form-row-3 등 레이아웃 클래스의 display:grid가 hidden을 이겨 열려버리는 것도 차단(2026-07-21 평가 생성폼) */ .dropzone{border:2px dashed var(--border); border-radius:14px; padding:22px 16px; text-align:center; cursor:pointer; background:var(--subtle); margin-top:7px; transition:border-color .15s, background .15s} .dropzone:hover{border-color:var(--primary)} .dz-over{border-color:var(--primary); background:var(--info-bg)} .dz-msg{color:var(--muted)} .dz-link{color:var(--primary); text-decoration:underline} .dz-files{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; overflow-wrap:anywhere} /* 긴 파일명만 필요할 때 접힘(단어 중간 절단 최소화) */ select,textarea{ display:block; width:100%; margin-top:7px; padding:0 12px; font-size:17px; border:1px solid var(--field-bd); border-radius:10px; background:var(--field); color:var(--fg); } select{height:46px} /* 입력칸과 같은 46px(여러줄칸 textarea는 제외) */ textarea{padding:12px} /* 여러 줄 칸은 위아래 여백 유지 */ select:focus,textarea:focus{border-color:var(--primary)} input[type=file]{padding:10px; background:var(--subtle); cursor:pointer; font-size:16px} .consent-box{ background:var(--subtle); border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-size:16px; line-height:1.7; max-height:230px; overflow:auto; } .consent-box p{margin:0 0 8px} .check-row{display:flex !important; align-items:center; gap:10px; margin:14px 0 6px !important; font-weight:600} .check-row input{width:22px; height:22px; margin:0; flex:0 0 auto} /* 라이트에서 배경과 묻혀 안 보이던 문제(2026-07-23 나쿤) - 테두리를 줘 버튼임이 드러나게. 다크도 같은 토큰이라 자연스러움 */ .btn-secondary{background:var(--soft); color:var(--fg); border:1.5px solid var(--field-bd)} .btn-secondary:hover{background:var(--soft-h); border-color:var(--muted)} .btn-inline{width:auto; height:46px; min-height:44px; padding:10px 18px; font-size:16px} /* 높이 고정 - a와 button의 2px 차이 제거(2026-07-26) */ .btn-sm{width:auto; height:38px; min-height:38px; padding:7px 13px; font-size:14px; min-width:0; margin-top:0} /* 표 안 행 액션용 - 높이 고정(a/button 2px 차이 제거, 2026-07-26) */ /* 접이식 보조 설정 */ .settings-fold{margin-top:40px; border-top:1px solid var(--border); padding-top:10px} .settings-fold > summary{cursor:pointer; font-size:19px; font-weight:700; padding:12px 0; list-style:none} .settings-fold > summary::-webkit-details-marker{display:none} .settings-fold > summary::before{content:'▸ '; color:var(--muted)} .settings-fold[open] > summary::before{content:'▾ '} .small{font-size:14px} .center{text-align:center} .quick{margin-top:18px} /* 표 */ .table-wrap{margin-top:16px; padding:0; overflow:auto} /* 규격 16(4의 배수) - 18px이면 form 안에서 여백이 새어 나와 어긋난다 */ .table-wrap:not(:last-child){margin-bottom:24px} /* 표 다음에 텍스트·다음 표가 오면 여백 확보(디자인 완성도) */ .tbl{width:100%; border-collapse:collapse; font-size:16px} .tbl th,.tbl td{padding:14px 22px; text-align:center; border-bottom:1px solid var(--border); white-space:nowrap} /* 열 간격 통일 + 머리글·내용 모두 가운데(2026-07-28 나쿤 「모든 표 일괄 중앙」) */ .tbl th{background:var(--subtle); color:var(--muted); font-weight:600; font-size:14px} .tbl tr:last-child td{border-bottom:0} .badge{display:inline-block; padding:4px 11px; border-radius:999px; font-size:14px; font-weight:600} .badge.badge-long{min-width:0; white-space:normal; text-align:left; border-radius:14px; line-height:1.5} /* 긴 경고문 뱃지 - 모바일 줄바꿈(.btn,.badge nowrap보다 우선) */ .badge-ok{background:var(--ok-bg); color:var(--ok-fg)} .badge-wait{background:var(--wait-bg); color:var(--wait-fg)} @media (max-width:900px){ .form-grid{grid-template-columns:1fr} } @media (max-width:900px){ /* 모바일·태블릿: 기업표는 고정폭 대신 자동폭+가로스크롤(짓눌림 방지). table.* = 특이도↑로 데스크탑 규칙 이김 */ table.tbl-companies{table-layout:auto} table.tbl-companies th, table.tbl-companies td{white-space:nowrap; word-break:normal} table.tbl-companies colgroup{display:none} } /* ===== 보고서 루프 ===== */ .badge-info{background:var(--info-bg); color:var(--info-fg)} .badge-no{background:var(--no-bg); color:var(--no-fg)} .alert-warn{background:var(--warn-bg); color:var(--warn-fg); border:1px solid var(--warn-bd)} .assign-card{margin-top:16px} .company-name{font-size:19px; font-weight:700} .tbl.mini{margin-top:14px; font-size:16px; table-layout:fixed} /* 카드마다 있는 표라 고정폭이라야 카드끼리 열이 맞음 */ .tbl.mini th,.tbl.mini td{padding:10px 12px; white-space:normal; word-break:keep-all} .tbl.mini td.td-c{white-space:nowrap} /* 일자·상태·버튼은 한 줄 */ .tbl-companies{table-layout:fixed} .tbl-companies th,.tbl-companies td{padding:14px 11px; white-space:normal; word-break:keep-all; overflow-wrap:anywhere; vertical-align:top} /* 단어 단위 줄바꿈 · 긴 이메일·URL만 강제 분할 */ .tbl-notices th,.tbl-notices td{white-space:normal; word-break:keep-all; vertical-align:top} /* 날짜는 한 줄로 - 표 폭이 좁아도 「2026-06-」/「27」처럼 접히면 읽기 어렵다(2026-07-27 나쿤 지적) */ .tbl-notices td:nth-child(4), .tbl-notices th:nth-child(4){white-space:nowrap} .nowrap, td.nowrap, .dl-line{white-space:nowrap} /* 공지 구분 열: 📌 고정폭 슬롯으로 배지 시작점 정렬 + 배지 폭 통일(공지/업데이트 균형) */ .notice-gubun{white-space:nowrap} .notice-gubun .pin-slot{display:inline-block; width:18px; margin-right:6px; text-align:center} /* 아이콘과 알약이 붙어 보여 한 칸 띄움(2026-07-27) */ .badge-gubun{min-width:54px; text-align:center} .badge-gray{background:var(--soft); color:var(--muted)} .prog-ended td{opacity:.55} /* 종료(비활성) 프로그램 행 흐리게 */ /* 서명 위젯: 컨트롤 한 줄 + 현재 서명 미리보기 */ .sig-toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px} .sig-current{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px} .sig-current-img{height:60px; max-width:280px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:4px 10px; object-fit:contain} @media (max-width:900px){ .tbl-notices th:nth-child(n+3), .tbl-notices td:nth-child(n+3){display:none} } .tbl-companies td:nth-child(5){white-space:nowrap} /* 연락처(5번째 열): 전화번호 줄바꿈 방지 */ /* 체크박스 열(첫 칸): 20px 체크박스가 34px 칸을 넘지 않게 패딩 축소·가운데 정렬, 전역 input margin-top(7px) 제거로 옆 칸 글자와 상단 맞춤(겹침·세로 어긋남 방지) */ .tbl-companies th:first-child, .tbl-companies td:first-child{padding-left:6px; padding-right:6px; text-align:center} .tbl-companies th:first-child input[type=checkbox], .tbl-companies td:first-child input[type=checkbox]{display:inline-block; margin:0; vertical-align:top} /* 기업 목록 툴바: 프로그램별 보기·검색·(선택개수)·대상프로그램·복제/이동/삭제를 한 줄로. 긴 프로그램명은 셀렉트 최대폭으로 잘라(…) 한 줄 유지, 좁아지면 flex 줄바꿈(좌우 스크롤 없음) */ .co-toolbar{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin:0 0 12px} .co-toolbar select{width:auto; min-width:140px; max-width:240px; margin:0} /* 검색 툴바(필터·검색칸·그 줄 버튼)도 같은 46px - 한 줄에 나란히 서므로 높이가 어긋나면 안 된다 */ .co-toolbar .btn, .co-toolbar button{ height:46px; min-height:46px } .co-toolbar input:not([type=checkbox]):not([type=radio]), .co-toolbar select, .prog-filter, .date-filter, .search-inp, .co-tb-search{ height:46px; min-height:46px; padding-top:0; padding-bottom:0 } /* 목록 검색칸 통일 - 크기·모양·오른쪽 정렬을 전 페이지 공통으로 */ .search-inp{display:block; width:300px; max-width:100%; margin:0; padding:0 14px; font-size:17px} /* 위 필터 규칙과 같은 44px - 위아래 패딩을 0으로 둬야 글자가 안 잘린다(2026-07-28) */ .search-right{display:flex; justify-content:flex-end; margin:12px 0 0} .co-toolbar .co-tb-search{width:300px; max-width:100%; margin:0 0 0 auto; padding:0 14px; font-size:17px} /* 폭은 .search-inp와 통일(300px), 위치만 오른쪽 · 위아래 패딩 0(44px 규격) */ /* 검색형 콤보박스(멘토 배정 등) - 한 줄 입력 + 아래로 뜨는 목록(레이아웃 높이 안 밀림) */ .mentor-combo{position:relative; margin-top:7px} .mentor-combo > input[type=text]{margin:0} .combo-list{position:absolute; top:calc(100% + 3px); left:0; right:0; z-index:30; background:var(--card); border:1px solid var(--field-bd); border-radius:10px; max-height:260px; overflow:auto; box-shadow:0 10px 28px rgba(0,0,0,.14); padding:4px} .combo-item{padding:9px 11px; border-radius:8px; cursor:pointer; font-size:16px} .combo-item:hover{background:var(--soft)} /* ⚠️ 목록이 뒤 요소에 덮이던 것(2026-07-29 나쿤): 부모