(upload.html's big status box) on purpose -- several other pages reuse id="result" for a tiny inline next to a button, and a bare #result selector was leaking this boxed/padded look onto those too, stretch-growing whatever button sat next to it. */ pre#result { margin: 14px 0 0; padding: 10px 12px; background: #f9fafb; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; color: var(--text-muted); white-space: pre-wrap; display: none; } pre#result:not(:empty) { display: block; } .status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; } .status-badge.published { background: #eafaf1; color: #1b8a4a; } .status-badge.processing { background: #eaf2fe; color: #2559c7; } .status-badge.failed { background: #fdecec; color: var(--danger); } .row-actions { display: flex; gap: 6px; } /* "그룹 선택"(groups.html) 카드 -- Figma의 "Board" 프레임. 이 패딩/radius나 제목·카운트 타이포그래피를 쓰는 페이지가 여기뿐이라, 공용 .card/.card-fill을 직접 고치지 않고 그 위에 얹는 modifier로 뒀다. */ .card-board { padding: 24px 40px; border-radius: 16px; } .card-board .card-title { margin: 0 0 40px; font-size: 18px; font-weight: 600; line-height: 1.36em; letter-spacing: -0.02em; } .group-grid { display: flex; flex-wrap: wrap; gap: 40px; } .group-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text); } .group-tile:hover { text-decoration: none; } .group-tile:hover .group-avatar { filter: brightness(0.95); } .group-avatar { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; flex-shrink: 0; font-size: 40px; font-weight: 700; } /* With a logo there is no letter to show and no colour to fill with, so the circle becomes a frame: white behind the image (client logos are usually transparent PNGs drawn in dark ink), and the image cropped to a square with object-fit so a non-square upload isn't stretched. */ .group-avatar.has-logo, .sidebar-group-avatar.has-logo { background: #ffffff; border: 1px solid var(--teritary, #e5e7eb); overflow: hidden; padding: 0; } .group-avatar.has-logo img, .sidebar-group-avatar.has-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The monogram is always in the markup, just hidden while a logo covers it. That is what makes the fallback possible: if the image 404s (the file was deleted, the storage share is down), the img element removes itself and drops .has-logo, and the letter underneath is already there to take over. Rendering only one or the other server-side would leave a broken-image icon instead -- on the sidebar, meaning on every single page. */ .avatar-monogram { display: block; } .group-avatar.has-logo .avatar-monogram, .sidebar-group-avatar.has-logo .avatar-monogram { display: none; } .group-name { font-size: 14px; font-weight: 400; line-height: 1.4em; letter-spacing: -0.02em; text-align: center; } .sidebar-group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start; flex: 1; min-height: 0; overflow-y: auto; } .sidebar-group-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; min-width: 0; border-radius: var(--radius); color: var(--text); } .sidebar-group-tile:hover { background: var(--hover); text-decoration: none; } .sidebar-group-tile.active { background: #eaf2fe; } .sidebar-group-avatar { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; font-size: 20px; font-weight: 700; } .sidebar-group-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 14px; line-height: 1.16em; letter-spacing: -0.02em; } .login-card { max-width: 360px; margin: 80px auto 0; } /* Figma Board의 로고-입력폼 gap(64px)을 그대로 따른다. */ .login-brand { margin: 40px 0 64px; } .login-brand img { display: block; margin: 0 auto; } /* 로그인 화면 우측 하단의 벤더 로고. 카드 스크롤/높이와 무관하게 항상 같은 자리에 있어야 해서 뷰포트 기준 고정이다(Figma 기준 여백 40px). */ .login-footer-logo { position: fixed; right: 40px; bottom: 40px; } .error-text { color: var(--danger); font-size: 13px; margin: 0 0 12px; text-align: center; } .toc-layout { display: flex; gap: 23px; align-items: flex-start; } #toc-thumb-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 23px; align-content: start; width: 776px; height: 400px; overflow-y: auto; border: 1.5px solid var(--teritary); border-radius: 8px; padding: 16px 28px; flex-shrink: 0; background: var(--bg-gray); scrollbar-width: thin; scrollbar-color: var(--teritary) transparent; } #toc-thumb-grid::-webkit-scrollbar { width: 6px; } #toc-thumb-grid::-webkit-scrollbar-thumb { background: var(--teritary); border-radius: 3px; } #toc-thumb-grid::-webkit-scrollbar-track { background: transparent; } .toc-thumb { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px; border: 1.5px solid transparent; border-radius: 6px; } .toc-thumb span { font-size: 14px; line-height: 1.4em; letter-spacing: -0.02em; color: var(--text); } .toc-thumb-img { width: 100%; aspect-ratio: 1/1.36; border-radius: 6px; overflow: hidden; } .toc-thumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; } #toc-preview { width: 320px; height: 400px; border: 1.5px solid var(--teritary); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex-shrink: 0; background: var(--bg-gray); color: var(--text-muted); font-size: 12px; } /* 그림 영역. 남는 높이를 전부 쓰되 아래 버튼 자리는 침범하지 않는다. min-height:0 이 없으면 flex 항목의 기본 최소 높이 때문에 줄어들지 못하고 버튼을 상자 밖으로 밀어낸다. */ #toc-preview-body { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; } #toc-preview-body img { width: 100%; height: 100%; object-fit: contain; } /* table-layout:fixed가 있어야 th의 width가 실제로 열 너비를 정한다(기본 auto 레이아웃에선 내용물 크기에 따라 무시됨). 2열(라벨)은 값을 안 주면 나머지 80%를 그대로 가져간다. */ #toc-table { table-layout: fixed; } #toc-table th:nth-child(1), #toc-table td:nth-child(1) { width: 10%; } #toc-table th:nth-child(3), #toc-table td:nth-child(3) { width: 10%; } .toc-add-row { display: flex; gap: 8px; align-items: center; margin-top: 12px; } input[type=color] { width: 40px; height: 40px; padding: 0; border: none; border-radius: 6px; cursor: pointer; background: none; } input[type=color]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; } input[type=color]::-webkit-color-swatch { border: none; border-radius: 6px; } input[type=color]::-moz-color-swatch { border: none; border-radius: 6px; } #toc-status { font-size: 12px; color: var(--text-muted); } /* ── 링크 관리 ────────────────────────────────────────────────────────── */ /* 썸네일 캡션 오른쪽의 클립 표시. 이 페이지에 링크가 걸려 있다는 것을 목록에서 바로 알 수 있게 한다 -- 없으면 페이지를 하나씩 열어봐야 한다. */ .toc-thumb-caption { display: inline-flex; align-items: center; gap: 4px; } .link-clip { display: inline-flex; align-items: center; color: var(--text-muted); } .link-clip svg { display: block; } /* 버튼이 없을 때도 높이를 유지한다 -- 썸네일을 고를 때마다 그림 크기가 들썩이면 눈이 피곤하다. */ #toc-preview-actions { display: flex; justify-content: flex-end; width: 100%; min-height: 32px; flex-shrink: 0; } /* ── 모달 ─────────────────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 24px; } .modal-panel { background: var(--white, #fff); border-radius: 10px; width: 100%; max-width: 1400px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--line, #e5e5e5); } .modal-head h4 { margin: 0; font-size: 16px; } .modal-body { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px; overflow: auto; flex: 1; min-height: 0; align-items: flex-start; } .modal-foot { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--line, #e5e5e5); } /* ── 카탈로그 선택 모달(공유 링크) ─────────────────────────────────────── */ /* 링크 모달은 페이지 이미지를 띄워야 해서 1400px 까지 벌어지지만, 여기 들어 있는 것은 목록 하나뿐이다. 그 폭이면 제목 한 줄이 허허벌판에 놓인다. */ .modal-panel.is-narrow { max-width: 560px; } .picker-body { flex-direction: column; flex-wrap: nowrap; gap: 12px; } .picker-filter { width: 100%; min-width: 0; } .picker-list { width: 100%; border: 1px solid var(--border); border-radius: 6px; overflow: auto; /* 그룹이 몇 개든 모달 높이는 그대로 두고 안에서 스크롤한다. */ max-height: 46vh; } .picker-group { border-bottom: 1px solid var(--border); } .picker-group:last-child { border-bottom: 0; } .picker-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; } .picker-group > summary:hover { background: var(--hover); } .picker-group[open] > summary { background: var(--hover); } .picker-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-group-count { flex-shrink: 0; font-size: 12px; font-weight: 400; color: var(--text-teritary); } /* 그룹 안의 한 줄. 체크박스 모양은 .checkbox-box 를 그대로 쓰고 여기서는 줄 배치만 정한다. */ .picker-item { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 28px; font-size: 13px; cursor: pointer; /* 이미 공유 중인 줄. 눌러도 아무 일이 없는 이유가 화면에 있어야 한다. */ } .picker-item:hover { background: var(--bg-gray); } .picker-item.is-shared { color: var(--text-teritary); cursor: default; } .picker-item.is-shared:hover { background: transparent; } .picker-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .picker-tag { flex-shrink: 0; padding: 1px 6px; border-radius: 4px; font-size: 11px; background: var(--bg-gray); color: var(--text-teritary); } .picker-tag.is-on { background: rgba(47, 111, 237, 0.1); color: var(--blue); } .picker-empty { margin: 0; padding: 24px; font-size: 13px; text-align: center; color: var(--text-teritary); } /* 버튼은 오른쪽에 붙어 있어야 하니 개수는 왼쪽 끝으로 밀어낸다 (.modal-foot 가 flex-end 정렬이다). */ .picker-count { margin-right: auto; font-size: 13px; color: var(--text-teritary); } /* ── 모달 안의 이미지와 링크 영역 ──────────────────────────────────────── */ /* 이미지와 오버레이가 같은 상자를 공유해야 좌표가 맞는다. 이미지를 블록으로 두고 래퍼를 딱 그 크기로 만들기 위해 width:fit-content 를 쓴다 -- 래퍼가 더 넓으면 0~1 비율이 여백까지 포함해 계산돼 박스가 밀린다. */ .link-canvas { position: relative; width: fit-content; /* 줄어들 수 있어야 한다. flex-shrink:0 으로 두면 원본 폭이 넓은 페이지에서 캔버스가 패널 전체를 차지하고 오른쪽 표가 한 글자 폭으로 찌그러진다. */ flex: 0 1 auto; min-width: 0; max-width: 100%; user-select: none; cursor: crosshair; } .link-canvas img { display: block; max-width: 100%; max-height: 70vh; } .link-rect { position: absolute; border: 2px solid #2f6fed; background: rgba(47, 111, 237, 0.12); box-sizing: border-box; cursor: move; } .link-rect.is-active { box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.35); } .link-rect.is-manual { border-color: #e0761a; background: rgba(224, 118, 26, 0.12); } /* 드래그 중에만 나타나는 예비 사각형. 실제 항목이 아니라서 번호가 없다. pointer-events 를 꺼야 한다 -- 커서 밑에 깔린 이 사각형이 이벤트를 먹으면 그리는 도중에 대상이 바뀐다. */ .link-rect.is-drawing { border-style: dashed; background: rgba(47, 111, 237, 0.08); pointer-events: none; cursor: crosshair; } /* 네 모서리 손잡이. 옮기기만 되고 크기를 못 바꾸면, PDF 에서 뽑힌 영역이 조금 어긋났을 때 지우고 다시 그리는 수밖에 없다. */ .link-handle { position: absolute; width: 10px; height: 10px; border-radius: 2px; background: #fff; border: 2px solid #2f6fed; box-sizing: border-box; } .link-rect.is-manual .link-handle { border-color: #e0761a; } .link-handle[data-corner=nw] { left: -6px; top: -6px; cursor: nwse-resize; } .link-handle[data-corner=ne] { right: -6px; top: -6px; cursor: nesw-resize; } .link-handle[data-corner=sw] { left: -6px; bottom: -6px; cursor: nesw-resize; } .link-handle[data-corner=se] { right: -6px; bottom: -6px; cursor: nwse-resize; } .link-rect-no { position: absolute; /* nw 손잡이와 겹치지 않도록 사각형 위쪽 바깥에 둔다. */ top: -24px; left: -2px; width: 22px; height: 22px; border-radius: 50%; background: #2f6fed; color: #fff; font-size: 12px; line-height: 22px; text-align: center; } .link-rect.is-manual .link-rect-no { background: #e0761a; } .link-side { /* 320px 아래로는 표가 읽히지 않으므로 그때는 이미지 아래로 내려간다 (modal-body 의 flex-wrap). */ flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; } /* 열이 여섯이라 좁은 화면에서는 표만 따로 가로로 넘긴다. 패널 전체가 가로 스크롤되면 이미지까지 같이 밀려 드래그 좌표를 잡기 어려워진다. */ .link-table-scroll { overflow-x: auto; } .link-hint { font-size: 13px; color: var(--text-muted); line-height: 1.6; } .link-table { width: 100%; border-collapse: collapse; font-size: 13px; } .link-table th, .link-table td { padding: 8px 6px; border-bottom: 1px solid var(--line, #e5e5e5); text-align: left; vertical-align: middle; } .link-table th { font-weight: 500; color: var(--text-muted); white-space: nowrap; } .link-table input[type=text] { width: 100%; min-width: 120px; } /* 체크박스 한 칸짜리 열. 표의 나머지는 왼쪽 정렬이지만 여기는 값이 글자가 아니라 상자 하나뿐이라, 왼쪽에 붙이면 머리글과 따로 노는 것처럼 보인다. 머리글까지 같이 가운데로 맞춘다. */ .link-table .link-newwin-cell { text-align: center; } .link-table .link-newwin { margin: 0; cursor: pointer; } .link-table tr.is-active > td { background: #f5f8ff; } .link-source-tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: #eef3fd; color: #2f6fed; white-space: nowrap; } .link-source-tag.is-manual { background: #fdf1e6; color: #b25c0f; } .link-empty { padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 13px; } @media (max-width: 1024px) { .topbar-menu-btn { display: flex; } .sidebar { position: fixed; top: 56px; left: 0; bottom: 0; width: min(290px, 85vw); z-index: 900; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); overflow-y: auto; transform: translateX(-100%); transition: transform 0.25s ease-in-out; } .sidebar.is-open { transform: translateX(0); } .sidebar-backdrop { display: block; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 899; background: rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.25s ease-in-out; } .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; } .card { padding: 16px; } .page { padding: 16px 0; } #toc-thumb-grid { width: 100%; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); } .table-scroll { overflow-x: visible; } table, thead, tbody, tr, td { display: block; width: 100%; } thead { display: none; } tbody tr { margin-bottom: 12px; border: 1px solid var(--teritary); border-radius: 8px; overflow: hidden; } tbody tr:hover { background: none; } tbody td { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-bottom: 1px solid var(--teritary); } tbody td:first-child { flex-direction: row; align-items: center; gap: 8px; padding-left: 12px; } tbody td:last-child { padding-right: 12px; border-bottom: none; } tbody td::before { content: attr(data-label); font-size: 12px; color: var(--text-teritary); } .flex-row { flex-wrap: wrap; } input[type=text], input[type=email], input[type=password], input[type=number], textarea, .select, .file-field-box, .flexWrap { max-width: 100% !important; } .toc-layout { flex-direction: column; } #toc-preview { width: 100%; flex-shrink: 1; } .toc-add-row { flex-wrap: wrap; } #toc-table th:nth-child(1), #toc-table td:nth-child(1), #toc-table th:nth-child(3), #toc-table td:nth-child(3) { width: auto; } } /*# sourceMappingURL=admin.css.map */