:root{ color-scheme: light; --fg:#1a1d22; --muted:#5b6470; --bg:#f4f6f9; --card:#ffffff; --border:#e4e8ee; --subtle:#f7f9fc; --soft:#eef1f6; --soft-h:#e3e8f0; --field:#ffffff; --field-bd:#ccd2db; --primary:#2f6bff; --primary-d:#2253e8; --on-primary:#ffffff; --danger:#b23a48; --ok-bg:#e3f6e9; --ok-fg:#1b7a3d; --wait-bg:#fdeede; --wait-fg:#a86413; --info-bg:#e6eefc; --info-fg:#2253e8; --no-bg:#fde8ea; --no-fg:#b23a48; --no-bd:#f3c2c8; --alert-bg:#fde8ea; --alert-fg:#b23a48; --alert-bd:#f3c2c8; --warn-bg:#fff7e6; --warn-bd:#f3d9b0; --warn-fg:#8a5a12; } /* 다크 모드 — 사이드바 테마 스위치(시스템/라이트/다크)가 로 적용. '시스템'은 JS가 OS 설정을 읽어 data-theme=dark/light로 해석해 넣음. */ :root[data-theme="dark"]{ color-scheme: dark; --fg:#e7e9ee; --muted:#9aa3b2; --bg:#181a20; --card:#21242b; --border:#282c34; --subtle:#2b2f37; --soft:#32363f; --soft-h:#3a3e48; --field:#16181d; --field-bd:#30343e; --primary:#5b8cff; --primary-d:#74a0ff; --on-primary:#ffffff; --danger:#f08a96; --ok-bg:#16331f; --ok-fg:#5fd089; --wait-bg:#352a17; --wait-fg:#e3b15f; --info-bg:#1b2a48; --info-fg:#8fb4ff; --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; } /* Pretendard 가변폰트 — 동적 서브셋(unicode-range 92조각)으로 로컬 번들. 실제 화면에 쓰는 글자 조각만 내려받아 첫 접속 속도↑ (@font-face는 pretendard-subset.css) */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-family:'Pretendard',system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif; font-size:17px; line-height:1.6; color:var(--fg); background:var(--bg); } 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:28px} /* ===== 앱 셸: 좌측 사이드바 ===== */ .layout{display:flex; min-height:100vh} .sidebar{flex:0 0 230px; width:230px; background:var(--card); border-right:1px solid var(--border); 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 22px; text-decoration:none; border-bottom:1px solid var(--border)} /* 상단바와 높이 맞춰 가로선 정렬 */ @font-face{font-family:'Menbridge Script'; font-style:normal; font-weight:700; src:url('/static/vendor/dancing-script.woff2') format('woff2'); font-display:swap} .brand-wm{font-family:'Menbridge Script','Dancing Script',cursive; font-weight:700; font-size:29px; line-height:1; letter-spacing:.3px; color:#a9772e; 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(--fg); text-decoration:none; font-size:16px; font-weight:500} .side-nav a:hover{background:var(--soft)} .side-nav a.active{background:var(--info-bg); color:var(--info-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:12px; padding:6px 9px; border:1px solid var(--border); border-radius:7px; background:var(--field); color:var(--fg)} .side-foot{padding:16px 18px; border-top:1px solid var(--border); font-size:14px} .side-theme{display:flex; align-items:center; gap:1px; flex-wrap:wrap; margin:0 0 10px} .side-theme-lbl{font-size:11px; color:var(--muted); margin-right:5px} .side-theme button{flex:0 0 auto; font:inherit; font-size:11px; padding:2px 7px; cursor:pointer; border:0; background:transparent; color:var(--muted); border-radius:6px; transition:background .15s, color .15s} .side-theme button:hover{color:var(--fg); background:var(--soft)} .side-theme button.is-on{background:var(--soft-h); color:var(--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)} .side-user{color:var(--muted); margin-bottom:8px; line-height:1.4} .side-logout{color:var(--primary); text-decoration:none; font-weight:600} .side-logout:hover{text-decoration:underline} .side-link{display:inline-block; color:var(--muted); text-decoration:none; font-size:13px; margin-right:12px} .side-link:hover{color:var(--fg)} .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:9px; 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-menu{position:absolute; right:0; top:calc(100% + 6px); min-width:172px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; z-index:60} .tb-menu a{display:block; padding:10px 12px; color:var(--fg); text-decoration:none; border-radius:8px; font-size:14px} .tb-menu a:hover{background:var(--soft)} .tb-logout{background:var(--soft); border:1px solid var(--border); color:var(--fg); font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; padding:7px 13px; border-radius:9px; white-space:nowrap} .tb-logout:hover{background:var(--soft-h)} .nav-overlay{display:none} @media (max-width:820px){ .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 > .hamburger, .topbar > .mb-title{display:inline-block} /* 모바일: 햄버거+브랜드 표시 */ .hamburger{font-size:24px; cursor:pointer; line-height:1; user-select:none} .mb-title{font-weight:700} .mb-title.brand-wm{font-size:24px; line-height:1.1} /* 모바일 상단바도 필기체 워드마크(사이드바와 통일) */ .tb-user{display:none} /* 모바일: 이름 숨겨 옵션·로그아웃 공간 확보 */ } /* 로그인 */ .auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px} .auth-card{width:100%; max-width:400px} .brand{font-size:24px; margin:0 0 4px} .sub{color:var(--muted); margin:0 0 22px} form label{display:block; margin:0 0 16px; font-weight:500} input{ display:block; width:100%; margin-top:7px; padding:14px 14px; font-size:17px; border:1px solid var(--field-bd); border-radius:10px; background:var(--field); color:var(--fg); } input:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary)} .pw-wrap{position:relative; display:block; margin-top:7px} .pw-wrap input{margin-top:0; padding-right:54px} .pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--muted); font-size:13px; cursor:pointer; padding:6px 10px} .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); color:var(--on-primary)} .btn-primary:hover{background:var(--primary-d)} .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:15px; } .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)} /* 대시보드 */ .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:36px; font-weight:700; color:var(--primary); line-height:1.1} .stat .lbl{color:var(--muted); margin-top:8px} @media (max-width:480px){ body{font-size:16px} .container{padding:18px 14px} .card{padding:22px} } /* ===== 공통 폼·표 (온보딩·관리자) ===== */ .row-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap} /* 표 제목(열 머리글) 중앙정렬 — 금액 등 오른쪽정렬 지정 칸은 인라인 style이 우선 */ .tbl thead th{text-align:center} /* 짧은 값 위주 표(.tbl-mid): 데이터도 머리글처럼 중앙, 단 첫 열(이름/기업)은 왼쪽(가독) — 머리글과 데이터가 어긋나 보이는 문제 해소 */ .tbl-mid tbody td{text-align:center} .tbl-mid thead th:first-child, .tbl-mid tbody td:first-child{text-align:left} .tbl-mid .tl{text-align:left} /* tbl-mid에서 추가로 왼쪽 둘 글자 열(th·td) */ /* 열 단위 정렬(머리글 전역 중앙 기준): 글자 열은 좌/좌, 짧은값 열은 중/중 */ .tbl tbody td.td-c{text-align:center} /* 짧은 값 데이터칸을 머리글 아래 가운데로 */ .tbl thead th.th-l{text-align:left} /* 글자 열 머리글을 왼쪽으로(데이터와 맞춤) */ /* 넓은 관리 표를 화면 폭에 맞춤(좌우 스크롤 방지) — 고정 레이아웃 + 긴 값 줄바꿈 */ .tbl-fixed{table-layout:fixed} .tbl-fixed th, .tbl-fixed td{overflow-wrap:anywhere} .sec-title{font-size:18px; 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} /* 가로로 채워 넓은 화면 여백 제거(좁으면 자동 줄바꿈) */ .meta-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0 16px; max-width:900px} @media (max-width:560px){ .meta-grid{grid-template-columns:1fr} } /* 드래그&드롭 업로드 */ input[hidden]{display:none} .dropzone{border:2px dashed var(--border); border-radius:12px; 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:8px; word-break:break-all} select,textarea{ display:block; width:100%; margin-top:7px; padding:13px 12px; font-size:17px; border:1px solid var(--field-bd); border-radius:10px; background:var(--field); color:var(--fg); } select:focus,textarea:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary)} input[type=file]{padding:10px; background:var(--subtle); cursor:pointer; font-size:15px} .consent-box{ background:var(--subtle); border:1px solid var(--border); border-radius:10px; padding:16px 18px; font-size:15px; 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} .btn-secondary{background:var(--soft); color:var(--fg)} .btn-secondary:hover{background:var(--soft-h)} .btn-inline{width:auto; min-height:44px; padding:10px 18px; font-size:16px} .btn-sm{width:auto; min-height:34px; padding:6px 13px; font-size:14px; min-width:0; margin-top:0} /* 표 안 행 액션용 컴팩트 버튼 */ /* 접이식 보조 설정 */ .settings-fold{margin-top:40px; border-top:1px solid var(--border); padding-top:10px} .settings-fold > summary{cursor:pointer; font-size:18px; 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:18px; padding:0; overflow:auto} .tbl{width:100%; border-collapse:collapse; font-size:16px} .tbl th,.tbl td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap} .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:13px; font-weight:600} .badge-ok{background:var(--ok-bg); color:var(--ok-fg)} .badge-wait{background:var(--wait-bg); color:var(--wait-fg)} @media (max-width:640px){ .form-grid{grid-template-columns:1fr} } @media (max-width:640px){ /* 모바일: 기업표는 고정폭 대신 자동폭+가로스크롤(짓눌림 방지). 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:15px} .tbl.mini th,.tbl.mini td{padding:10px 12px} .tbl-companies{table-layout:fixed} .tbl-companies th,.tbl-companies td{padding:14px 11px; white-space:normal; word-break:break-word; vertical-align:top} .tbl-notices th,.tbl-notices td{white-space:normal; word-break:break-word; vertical-align:top} /* 공지 구분 열: 📌 고정폭 슬롯으로 배지 시작점 정렬 + 배지 폭 통일(공지/업데이트 균형) */ .notice-gubun{white-space:nowrap} .notice-gubun .pin-slot{display:inline-block; width:18px; text-align:center} .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:640px){ .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} .co-toolbar .co-tb-search{width:210px; max-width:100%; margin:0} .co-toolbar .co-tb-sep{width:1px; align-self:stretch; background:var(--border); margin:2px 4px} /* 목록 필터 칩(역할·상태 등) */ .chip-group{display:inline-flex; gap:4px; flex-wrap:wrap} .chip{font:inherit; font-size:13px; padding:5px 12px; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:999px; cursor:pointer; white-space:nowrap} .chip:hover{background:var(--soft); color:var(--fg)} .chip.is-on{background:var(--info-bg); color:var(--info-fg); border-color:var(--info-fg); font-weight:600} /* 기업 등록 폼: 4열 채움(2줄). 넓은 화면 여백 제거, 좁으면 2열→1열 */ .co-reg-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 18px} @media (max-width:1024px){ .co-reg-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .co-reg-grid{grid-template-columns:1fr} } .btn:disabled, .btn[disabled]{opacity:.45; cursor:not-allowed} select:disabled{opacity:.55; cursor:not-allowed} @media (max-width:820px){ .co-toolbar .co-tb-sep{display:none} } /* 모바일: 구분선 숨김 */ .btn-row{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap} .btn-row .btn{width:auto; min-width:130px; margin-top:0} /* 폼 작업 버튼 고정 바 — 스크롤해도 상단 우측에 항상 보이게(저장·제출 놓치지 않게) */ .form-actions{position:sticky; top:54px; z-index:22; display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 20px; padding:12px 0; background:var(--card); border-bottom:1px solid var(--border)} .form-actions .fa-hint{margin-right:auto; color:var(--muted); font-size:14px; font-weight:600} .form-actions .btn{width:auto; min-width:118px; margin-top:0} @media(max-width:980px){ .form-actions .fa-hint{display:none} } .char-count{margin:-8px 0 14px; text-align:right; font-weight:600} .tab b{margin-left:4px} .kv{display:flex; gap:12px; padding:8px 0; border-bottom:1px dashed var(--border)} .kv span{width:110px; color:var(--muted); flex:0 0 auto} .report-text{white-space:pre-wrap; line-height:1.8; background:var(--subtle); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin:0} .thumbs{display:flex; gap:10px; flex-wrap:wrap} .thumbs img{width:120px; height:120px; object-fit:cover; border:1px solid var(--border); border-radius:10px; display:block} .pending-banner{display:block; margin:16px 0; padding:16px 18px; background:var(--warn-bg); border:1px solid var(--warn-bd); border-radius:12px; color:var(--warn-fg); font-weight:600; text-decoration:none} .reject-form{margin-top:12px} /* 검토 액션바 — 보고서 열자마자 상단 고정(확정·반려). 작성폼의 .form-actions와 같은 결 */ .review-bar{position:sticky; top:54px; z-index:22; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px; padding:12px 16px; background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:0 3px 14px rgba(0,0,0,.08)} .review-bar .rb-hint{margin-right:auto; color:var(--fg); font-weight:600; font-size:14.5px} .review-bar .rb-reject{display:flex; gap:8px; align-items:center; margin:0} .review-bar .rb-reject input{width:230px; margin:0} .review-bar .btn{margin-top:0; min-width:92px} @media(max-width:980px){ .review-bar{padding:12px 14px} .review-bar .rb-hint{margin-right:0; flex-basis:100%; font-size:13.5px} .review-bar .rb-reject{flex:1 1 100%} .review-bar .rb-reject input{flex:1; width:auto} } /* 설정 탭 — 조직 설정 | 내 계정 사이 구분선 */ .settings-tabs{align-items:center} .settings-tabs .tab-div{flex:0 0 auto; align-self:stretch; width:1px; min-height:24px; background:var(--border); margin:4px 8px} @media (max-width:640px){ .settings-tabs .tab-div{display:none} } /* 연도 선택기 — 전 목록 공용(전역 기억) */ .year-pick{display:inline-block; margin:0} .year-pick select{width:auto; margin:0; padding:9px 34px 9px 13px; font-weight:700; font-size:15px; border-radius:10px; min-height:46px} /* ===== UI/UX 다듬기(2026-07-03 분석 반영) ===== */ .btn, .badge{white-space:nowrap} /* '수정'·'제출'이 세로로 꺾이지 않게 */ input[type=radio], input[type=checkbox]{width:20px; height:20px; accent-color:var(--primary); flex:0 0 auto} /* 고연령 사용자 클릭 편의 */ a.todo{transition:border-color .15s, transform .1s} a.todo:hover{border-color:var(--primary); transform:translateY(-1px)} /* 대시보드 카드 = 클릭 가능함을 전달 */ /* 표가 옆으로 넘칠 때: '밀어서 보기' 힌트(JS가 has-scroll 부여) */ .table-wrap{position:relative} .table-wrap.has-scroll::before{content:'⇠ 옆으로 밀면 더 보여요'; position:sticky; left:0; top:0; display:block; width:max-content; margin-left:auto; padding:3px 10px; font-size:12px; font-weight:600; color:var(--muted); background:var(--subtle); border-radius:0 0 0 8px; pointer-events:none} @media (max-width:640px){ .tbl.mini th:nth-child(3), .tbl.mini td:nth-child(3){display:none} /* 내 멘토링: 장소 숨겨 수정 버튼 확보 */ .tbl-progress th:nth-child(2), .tbl-progress td:nth-child(2){display:none} /* 검토 진행중·확정: 프로그램 숨김 */ } /* ===== 검토 보드 (보고서 검토 한 페이지) ===== */ .rv-chips{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 4px} .rv-chip{display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:15px; color:var(--muted); text-decoration:none} .rv-chip b{color:var(--fg)} .rv-chip:hover{border-color:var(--primary); color:var(--fg)} .rv-sec{font-size:18px; font-weight:700; margin:28px 0 10px; scroll-margin-top:112px} .rv-card{background:var(--card); border:1px solid var(--border); border-radius:12px; margin:10px 0; overflow:hidden} .rv-head{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:13px 15px; cursor:pointer} .rv-head:hover{background:var(--subtle)} .rv-name{font-weight:700; font-size:16px} .rv-chev{margin-left:auto; background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:4px 6px; line-height:1; flex:0 0 auto} .rv-chev span{display:inline-block; transition:transform .18s} .rv-card.col .rv-chev span{transform:rotate(-90deg)} .rv-act{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:11px 15px; background:var(--subtle); border-top:1px solid var(--border)} .rv-hint{margin-right:auto; color:var(--muted); font-size:13.5px} .rv-reject{display:flex; gap:8px; align-items:center; margin:0} .rv-reject input{width:210px; margin:0} .rv-body{padding:4px 15px 15px} .rv-meta{font-size:14px; color:var(--muted); border-bottom:1px solid var(--border); padding:9px 0; margin-bottom:4px} .rv-meta b{color:var(--fg); font-weight:600} .rv-fl{font-size:13px; font-weight:700; color:var(--muted); margin:13px 0 3px} .rv-fl.rv-h{font-size:15px; color:var(--fg); border-bottom:1px solid var(--border); padding-bottom:5px; margin-top:16px} .rv-fl b{color:var(--primary)} .rv-tv{font-size:15px; line-height:1.65; white-space:pre-wrap; margin:0} .rv-swot{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:14px; line-height:1.55; margin-top:4px} .rv-card.col .rv-act, .rv-card.col .rv-body{display:none} .rv-arch{margin:26px 0 0} .rv-arch > summary{cursor:pointer; list-style:none; display:block} .rv-arch > summary::-webkit-details-marker{display:none} .rv-arch > summary .rv-sec{display:inline-block; margin:0} .rv-arch > summary .rv-sec::before{content:'▸ '; color:var(--muted)} .rv-arch[open] > summary .rv-sec::before{content:'▾ '} @media(max-width:640px){ .rv-reject{flex:1 1 100%} .rv-reject input{flex:1; width:auto} .rv-swot{grid-template-columns:1fr} } textarea{font-family:inherit; line-height:1.7; resize:vertical} .inline-form{margin:0} .inline-form select{margin-top:0; padding:8px 10px; font-size:15px; min-width:120px} .checkbox-list{display:flex; flex-wrap:wrap; gap:10px 18px; margin:4px 0 6px} .chk{display:flex !important; align-items:center; gap:7px; margin:0 !important; font-weight:400} .chk input{width:20px; height:20px; margin:0; flex:0 0 auto} /* 배정 기업 고르기 — 검색되는 표(체크박스+기업명+아이템+대표자), 스크롤+헤더고정 */ .copick-tbl{max-height:340px; overflow:auto; margin:4px 0 8px} .copick-tbl thead th{position:sticky; top:0; background:var(--card); z-index:1} .copick-tbl tbody tr{cursor:pointer} .copick-tbl tbody tr.on{background:var(--info-bg)} .copick-tbl tbody td{vertical-align:middle} .copick-tbl input[type=checkbox]{width:20px; height:20px} .linkbtn{background:none; border:0; padding:0; color:var(--primary); cursor:pointer; font:inherit} .linkbtn:hover{text-decoration:underline} .field-label{font-weight:500; margin:10px 0 4px} .co-card{background:var(--subtle); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin:8px 0 20px} .co-card-top{font-size:16px} .co-card-meta{margin-top:5px; line-height:1.65} /* ===== 대시보드 ===== */ .todo-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:18px 0} .todo{display:block; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:18px; text-decoration:none; color:var(--fg)} .todo-n{font-size:30px; font-weight:700; line-height:1} .todo-l{color:var(--muted); margin-top:6px; font-size:15px} .todo-on{border-color:var(--primary); box-shadow:inset 0 0 0 1px var(--primary)} .todo-on .todo-n{color:var(--primary)} .todo-warn{background:var(--warn-bg); border-color:var(--warn-bd)} .todo-warn .todo-n{color:var(--warn-fg)} .todo-danger{background:var(--no-bg); border-color:var(--no-bd)} .todo-danger .todo-n{color:var(--no-fg)} /* 마감 임박 카드 클릭 → '확인 필요' 표로 점프 + 깜빡여 눈에 띄게(이미 보이는 경우도 반응 보이게) */ #alerts{scroll-margin-top:16px} @keyframes flashcard{0%,100%{border-color:var(--border)}25%,75%{border-color:var(--no-fg); box-shadow:0 0 0 2px var(--no-bd)}} #alerts:target{animation:flashcard 1.3s ease-in-out 2} .dash-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px} .card-title{font-size:17px; margin:0 0 14px} .prog-line{margin-bottom:14px} .prog-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:15px; gap:10px} .bar{height:10px; background:var(--soft); border-radius:999px; overflow:hidden} .bar-fill{height:100%; background:var(--primary); border-radius:999px} .recent-item{display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); text-decoration:none; color:var(--fg)} .recent-item:last-child{border-bottom:0} .recent-co{font-weight:600} .card-overdue{border-color:var(--no-bd)} .card-urgent{border-color:var(--warn-bd)} @media (max-width:680px){ .dash-grid{grid-template-columns:1fr} } /* ===== 유형별 보고서 양식 ===== */ .req{color:var(--danger); font-weight:700} .score-field input{max-width:130px} .score-line{margin:6px 0 12px} .score-head{display:flex; justify-content:space-between; font-size:15px; margin-bottom:5px; gap:10px} /* 진단 — 지표 한 줄 + SWOT 2x2 */ .indicator-row{display:grid; grid-template-columns:108px 76px 1fr; gap:10px; align-items:start; margin:0 0 12px} .ind-label{font-weight:600; padding-top:13px} .indicator-row input.ind-score, .indicator-row textarea.ind-desc{margin-top:0} .ind-score{text-align:center} .indicator-row.view{grid-template-columns:108px 70px 1fr; align-items:start} .indicator-row.view .ind-label{padding-top:14px} .ind-score-v{font-weight:700; padding-top:14px; white-space:nowrap} .swot-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 6px} .swot-cell{margin:0 !important} .swot-cell textarea{margin-top:6px; min-height:160px} .swot-h{font-weight:600; margin-bottom:6px} .swot-cell .report-text{min-height:130px} @media (max-width:560px){ .indicator-row, .indicator-row.view{grid-template-columns:1fr} .ind-label, .indicator-row.view .ind-label, .ind-score-v{padding-top:0} .ind-score{max-width:120px} .swot-grid{grid-template-columns:1fr} }