/* 색은 **전부 여기서만** 정한다. 규칙에 색을 직접 박으면 다크 모드에서 그 자리만 하얗게 남는다 — 예전에 46군데가 그랬다. 이름은 '무엇인가'(파랑·회색)가 아니라 **'어디에 쓰는가'**로 짓는다. 그래야 다크 팔레트에서 값이 뒤집혀도 이름이 거짓말을 하지 않는다. */ :root { color-scheme: light; --bg: #f5f6f8; /* 화면 바탕 */ --card: #fff; /* 카드·상단바 */ --input: #fff; /* 입력칸·선택상자 */ --border: #d8dce2; --divider: #eef0f3; /* 목록 사이 얇은 줄(테두리보다 연하다) */ --surface: #f2f3f5; /* 보조 버튼·배지 바탕 */ --surface-hover: #e6e8ec; --soft: #fafbfc; /* 살짝 눌린 영역(요약 본문·드롭 영역) */ --track: #eceff3; /* 진행 막대 바탕 */ --code-bg: #f0f1f3; --muted-tint: #f1f5f9; /* 알림 띠 바탕 */ --disabled: #b9c2d0; --text: #1f2328; --muted: #6b7280; --accent: #2456a6; --on-accent: #fff; /* accent 위에 올라가는 글자. **--card 와 다르다** — 다크에서 accent 가 밝아지면 이 글자는 어두워진다 */ --accent-tint: #e5efff; /* accent 계열 연한 바탕(배지·호버) */ --ok: #1a7f45; --ok-soft: #e6f5ec; --warn: #b45309; --warn-soft: #fff8ed; --warn-border: #f0d9b5; --err: #b42318; --err-soft: #fdecea; --err-border: #e6c9c6; --snippet-bg: #1f2328; /* 코드 블록은 원래 어둡다 */ --snippet-fg: #e6e8eb; } /* 다크 모드. 기본은 **OS 설정을 따라가고**, 상단바 토글로 바꾸면 그 선택이 이긴다 (base.html 이 를 붙인다). `color-scheme` 을 같이 바꾸는 것이 중요하다 — 스크롤바·체크박스·드롭다운 같은 브라우저 기본 위젯은 CSS 변수가 아니라 이 값을 본다. 없으면 어두운 화면에 흰 스크롤바가 남는다. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14171a; --card: #1b1f24; --input: #22272e; --border: #333a44; --divider: #262b33; --surface: #262b33; --surface-hover: #30363f; --soft: #20242a; --track: #2a2f37; --code-bg: #262b33; --muted-tint: #21262d; --disabled: #3a4048; --text: #e6e8eb; --muted: #9aa3af; /* 어두운 바탕에서는 원래 파랑이 탁해 읽기 힘들다 — 밝은 쪽으로 옮기고, 그 위 글자는 반대로 어둡게 한다. */ --accent: #7aa7f0; --on-accent: #10141a; --accent-tint: #1b2740; --ok: #5bcf8f; --ok-soft: #10301f; --warn: #f0b45e; --warn-soft: #3a2a12; --warn-border: #5a431d; --err: #f08a80; --err-soft: #3a1d1b; --err-border: #6b3430; --snippet-bg: #0f1216; --snippet-fg: #d7dbe0; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; font-size: 15px; line-height: 1.5; } a { color: var(--accent); } .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; text-decoration: none; color: var(--text); } .tagline { color: var(--muted); font-size: .82rem; } .spacer { flex: 1; } .health { font-size: .8rem; color: var(--muted); } .health.ok { color: var(--ok); } .health.bad { color: var(--err); } .topnav { font-size: .82rem; text-decoration: none; } /* 밝기 토글. 로그인 여부와 무관하게 늘 보인다 — 공유 링크로 들어온 사람도 자기 눈에 맞게 바꿀 수 있어야 한다. */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; font-size: .9rem; line-height: 1.2; cursor: pointer; color: var(--muted); } .theme-toggle:hover { background: var(--surface); color: var(--text); } .whoami { font-size: .82rem; color: var(--text); white-space: nowrap; } .tag { font-size: .68rem; background: var(--accent-tint); color: var(--accent); padding: 1px 6px; border-radius: 8px; margin-left: 2px; } .logout { margin: 0; } .logout button { padding: 4px 10px; font-size: .78rem; font-weight: 500; background: var(--surface); color: var(--muted); } .logout button:hover { background: var(--surface-hover); } .wrap { max-width: 1000px; margin: 0 auto; padding: 20px; } /* 로그인 */ .auth-card { max-width: 420px; margin: 40px auto; } .auth-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .auth-form label { display: flex; flex-direction: column; gap: 4px; } .auth-form label > span { font-size: .8rem; color: var(--muted); } .auth-form input[type=text], .auth-form input[type=password], .auth-form select { padding: 8px 10px; font-size: .9rem; border: 1px solid var(--border); border-radius: 6px; font-family: inherit; } .auth-form.inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; } .auth-form.inline button { padding: 6px 14px; font-size: .82rem; } .signup { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--divider); } .signup summary { cursor: pointer; font-size: .84rem; color: var(--accent); } .notice { color: var(--ok); font-size: .85rem; margin: 8px 0 0; background: var(--ok-soft); padding: 8px 10px; border-radius: 6px; } .danger { color: var(--err) !important; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 18px; margin-bottom: 16px; } .card h2 { margin: 0 0 4px; font-size: 1.05rem; } .card h3 { margin: 0 0 10px; font-size: .95rem; color: var(--muted); } .hint, .muted { color: var(--muted); font-size: .84rem; } .muted { font-weight: 400; } /* 업로드 */ .upload { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; } .drop { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px; text-align: center; cursor: pointer; border: 2px dashed var(--border); border-radius: 8px; color: var(--muted); font-size: .88rem; background: var(--soft); } .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); } .drop.has-file { border-style: solid; color: var(--text); } button { padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer; background: var(--accent); color: var(--on-accent); font-size: .9rem; font-weight: 600; } button:disabled { background: var(--disabled); cursor: not-allowed; } /* 업로드 옵션 */ .opt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); } .check { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: .86rem; white-space: nowrap; } .check input { width: 15px; height: 15px; cursor: pointer; } .opt-row select { padding: 5px 8px; font-size: .82rem; border: 1px solid var(--border); border-radius: 5px; background: var(--input); font-family: inherit; max-width: 320px; } .opt-row select:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; } #summary-hint { flex: 1; min-width: 200px; font-size: .78rem; } /* 진행 막대 */ .bar { position: relative; height: 22px; margin-top: 8px; background: var(--track); border-radius: 5px; overflow: hidden; } .bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s ease; } .bar-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .76rem; color: var(--text); } .hidden { display: none; } .error { color: var(--err); font-size: .85rem; margin: 8px 0 0; } /* 공유받은 화면임을 먼저 알린다 — 주인 화면과 같아 보이면 헷갈린다. */ .shared-note { margin: 0 0 10px; padding: 8px 10px; font-size: .82rem; background: var(--muted-tint); border-left: 3px solid var(--muted); border-radius: 4px; } /* 공개 링크 */ .share-box { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--soft); } .share-warn { margin: 0 0 8px; font-size: .82rem; color: var(--text); } .share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .share-row input { flex: 1; min-width: 240px; padding: 6px 8px; font-size: .82rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--border); border-radius: 5px; background: var(--input); } #share-stat { margin: 8px 0 0; font-size: .78rem; } .linkbtn.danger { color: var(--err); } /* 업로드 진행 — 파일마다 한 줄. 여럿을 동시에 올려도 서로 덮어쓰지 않는다. */ .uploads:empty { display: none; } .upload-item { margin-top: 10px; } .upload-item .bar { margin-top: 4px; } .upload-head { display: flex; align-items: center; gap: 8px; } .upload-name { flex: 1; font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 작업 */ .job { padding: 10px 0; border-bottom: 1px solid var(--divider); } .job:last-child { border-bottom: 0; } .job-head { display: flex; align-items: center; gap: 8px; } .job-name { flex: 1; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge { font-size: .74rem; padding: 2px 8px; border-radius: 10px; background: var(--track); } .badge-running { background: var(--accent-tint); color: var(--accent); } .badge-queued { background: var(--surface); color: var(--muted); } .badge-done { background: var(--ok-soft); color: var(--ok); } .badge-error { background: var(--err-soft); color: var(--err); } /* 취소는 실패가 아니다 — 빨강 대신 회색으로, 사용자가 한 일임을 보이게. */ .badge-cancelled { background: var(--surface); color: var(--muted); } /* 결과 표 */ table.results { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .86rem; } table.results th { text-align: left; font-weight: 600; color: var(--muted); font-size: .78rem; border-bottom: 1px solid var(--border); padding: 6px 8px; } table.results td { padding: 7px 8px; border-bottom: 1px solid var(--divider); } table.results tr:last-child td { border-bottom: 0; } .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .name { word-break: break-all; min-width: 180px; } .dim { color: var(--muted); font-size: .78rem; } .links a { margin-right: 8px; white-space: nowrap; } /* 다운로드 링크는 버튼처럼 보이게 해 '보기'와 구분한다. */ .dl a { display: inline-block; margin: 1px 4px 1px 0; padding: 2px 8px; border: 1px solid var(--border); border-radius: 4px; font-size: .78rem; text-decoration: none; background: var(--soft); } .dl a:hover { background: var(--accent-tint); border-color: var(--accent); } /* 결과 상세 */ .back { display: inline-block; margin-bottom: 8px; font-size: .84rem; } .meta-grid { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; } .meta-grid dt { color: var(--muted); font-size: .74rem; } .meta-grid dd { margin: 2px 0 0; font-size: .95rem; font-weight: 600; } .btn { display: inline-block; padding: 7px 16px; border-radius: 6px; background: var(--accent); color: var(--on-accent) !important; text-decoration: none; font-size: .86rem; font-weight: 600; } .btn-alt { background: var(--card); color: var(--accent) !important; border: 1px solid var(--accent); } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; } /* 다운로드 목록: 파일명 + 무엇인지 설명 */ .dl-list { list-style: none; padding: 0; margin: 12px 0 0; } .dl-list li { padding: 7px 0; border-top: 1px solid var(--divider); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; } .dl-list a { font-size: .86rem; word-break: break-all; } .dl-list .muted { font-size: .78rem; } .dl-list code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; font-size: .92em; } .preview iframe { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 6px; /* **다크에서도 흰색으로 둔다.** 이 안은 우리가 만든 회의록 문서이고, 그것은 받아서 어디서나 열리는 산출물이라 항상 밝은 배경이다. 여기를 어둡게 하면 문서가 뜨기 전 한순간만 검게 깜빡였다가 흰 문서로 바뀐다. */ background: #fff; } /* 원본 영상 */ .video-box { margin: 14px 0 4px; } .video-box summary { cursor: pointer; font-size: .88rem; font-weight: 600; padding: 6px 0; } .video-box video { /* 영상 옆 여백(레터박스)은 밝기와 무관하게 검정이 맞다. */ width: 100%; max-height: 55vh; margin-top: 8px; background: #000; border-radius: 6px; } .video-box code { background: var(--code-bg); padding: 0 4px; border-radius: 3px; } /* 요약 */ .summary-form { display: flex; gap: 10px; margin: 12px 0 0; flex-wrap: wrap; } .summary-form select { flex: 1; min-width: 240px; padding: 8px 10px; font-size: .86rem; border: 1px solid var(--border); border-radius: 6px; background: var(--input); font-family: inherit; } .summary-meta { display: flex; align-items: center; gap: 10px; margin: 14px 0 8px; flex-wrap: wrap; font-size: .84rem; } .summary-body { margin: 0; padding: 14px; background: var(--soft); border: 1px solid var(--border); border-radius: 6px; white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: .88rem; line-height: 1.6; max-height: 60vh; overflow-y: auto; } .foot { text-align: center; color: var(--muted); font-size: .78rem; padding: 20px; } @media (max-width: 640px) { .upload { flex-direction: column; } table.results { font-size: .8rem; } } /* API 키 화면 ------------------------------------------------------------ */ /* 알림은 base.html 이 본문 위에 띄운다. 카드 안이 아니라 바깥이라 여백을 준다. */ .flash { margin: 0 0 12px; } /* 새로 발급된 키. 다시 못 보는 값이라 눈에 띄어야 한다. */ .issued { border-color: var(--warn); border-left-width: 4px; } .warn { color: var(--warn); font-size: .88rem; margin: 0 0 10px; } .keybox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--warn-soft); border: 1px solid var(--warn-border); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; } /* 키는 길다 — 줄바꿈을 허용해야 좁은 화면에서 잘리지 않는다. */ .keybox code { flex: 1 1 320px; font-size: .9rem; word-break: break-all; user-select: all; } .copy { border: 1px solid var(--border); background: var(--input); border-radius: 6px; padding: 4px 12px; cursor: pointer; font-size: .85rem; } .copy:hover { background: var(--bg); } /* 사용 예시. 가로로 넘치면 코드 블록 안에서만 스크롤한다. */ .snippet { background: var(--snippet-bg); color: var(--snippet-fg); border-radius: 6px; padding: 12px 14px; font-size: .82rem; line-height: 1.6; overflow-x: auto; margin: 8px 0 0; } /* 폼 안의 버튼을 링크처럼 — 표의 '폐기'는 링크 자리에 있다. */ .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; } /* 작업 목록 정리 ---------------------------------------------------------- */ /* 끝난 작업을 목록에서 치우는 버튼. 결과물은 지우지 않는다. */ .job-x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.05rem; line-height: 1; padding: 0 4px; } .job-x:hover { color: var(--err); } /* 취소는 되돌릴 수 없어 X 보다 눈에 띄어야 하지만, 기본 동작은 아니라 테두리만 준다. */ .job-cancel { border: 1px solid var(--border); background: none; cursor: pointer; color: var(--muted); font: inherit; font-size: .74rem; padding: 1px 7px; border-radius: 5px; margin-left: 2px; } .job-cancel:hover:not(:disabled) { color: var(--err); border-color: var(--err); } .job-cancel:disabled { cursor: default; opacity: .6; } /* 제목 옆 '완료 항목 지우기' 는 본문 크기보다 작게 — 부제처럼 보이게 한다. */ #clear-jobs { margin-left: 10px; font-size: .78rem; color: var(--muted); font-weight: 400; } #clear-jobs:hover { color: var(--accent); } /* 결과 ID — curl·MCP 에 붙여 넣는 값이라 통째로 보여야 한다. */ .meta-grid .wide { grid-column: 1 / -1; } code.rid { font-size: .8rem; word-break: break-all; background: var(--surface); padding: 2px 6px; border-radius: 4px; } #copy-rid { margin-left: 8px; font-size: .78rem; } /* OAuth 승인 화면 --------------------------------------------------------- */ /* 되돌릴 수 없는 결정을 내리는 화면이라, 본문 폭을 좁혀 읽는 데 집중시킨다. */ .consent { max-width: 620px; margin: 0 auto; } .consent .lead { font-size: 1.02rem; line-height: 1.6; } .consent-warn { margin: 14px 0 18px; } .consent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; } @media (max-width: 560px) { .consent-grid { grid-template-columns: 1fr; } } .consent-grid h3 { font-size: .86rem; margin: 0 0 8px; } .consent-grid ul { margin: 0; padding-left: 18px; font-size: .88rem; line-height: 1.7; } .consent-grid .muted-list { color: var(--muted); } .consent-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 18px 0; font-size: .82rem; } .consent-meta dt { color: var(--muted); } .consent-meta dd { margin: 0; word-break: break-all; } .consent-actions { display: flex; gap: 10px; margin-top: 8px; } .consent-actions button { padding: 9px 22px; } /* 연결된 앱 목록 */ .conn { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .conn:last-child { border-bottom: 0; } /* 설정 화면 -------------------------------------------------------------- */ .field { margin-bottom: 18px; } .field > label { display: block; margin-bottom: 6px; font-size: .9rem; font-weight: 600; } .field input[type="password"], .field input[type="text"], .field select { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: var(--input); } /* 선택 상자와 '목록 불러오기' 를 한 줄에. 좁아지면 버튼이 아래로 내려간다. */ .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row select { flex: 1 1 260px; } .field .hint { margin: 6px 0 0; } /* '데이터베이스 만들기' 는 접어 둔다 — 이미 있는 사람에게는 방해다. */ .makedb { margin-top: 6px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--soft); } .makedb > summary { cursor: pointer; font-size: .88rem; color: var(--accent); } .makedb > summary::marker { color: var(--muted); } .makedb .field { margin: 12px 0; } .makedb .row input[type="text"] { flex: 1 1 200px; } /* 설정 화면의 좌측 바로가기 ------------------------------------------------ */ /* 설정이 길어서 위로 되돌아가기 번거롭다. 스크롤을 따라오게 붙여 둔다. */ .settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 20px; align-items: start; } .sidenav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 10px; } .sidenav a { padding: 7px 10px; border-radius: 6px; font-size: .86rem; color: var(--text); text-decoration: none; border-left: 3px solid transparent; } .sidenav a:hover { background: var(--bg); } /* 지금 보고 있는 절을 표시한다 — 어디쯤인지 모르면 목차가 반만 쓸모 있다. */ .sidenav a.active { background: var(--bg); color: var(--accent); font-weight: 600; border-left-color: var(--accent); } /* 앵커로 뛰었을 때 제목이 화면 맨 위에 딱 붙지 않게 여유를 준다. */ .card[id] { scroll-margin-top: 16px; } /* 좁은 화면에서는 가로로 눕히고 위에 붙인다(세로 목차가 본문을 밀어낸다). */ @media (max-width: 820px) { .settings-layout { grid-template-columns: 1fr; } .sidenav { flex-direction: row; flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 5; } .sidenav a { border-left: 0; border-bottom: 2px solid transparent; } .sidenav a.active { border-left: 0; border-bottom-color: var(--accent); } } /* 저장 위치 고르기 — 수천 개일 수 있어 검색으로 좁힌다. */ .row input[type="search"] { flex: 1 1 220px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; } .row select.narrow { flex: 0 0 auto; width: auto; } /* 여러 줄을 한 번에 보여 준다 — 한 줄짜리 드롭다운으로 50개를 훑기는 힘들다. */ select.tall { margin-top: 8px; } select.tall[size] { padding: 4px; } /* 결과 목록 아래 줄: 왼쪽에 개수, 오른쪽에 '더 보기'. */ .listfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; min-height: 26px; } .listfoot .btn-alt { padding: 3px 12px; font-size: .82rem; } /* '주소로 바로 지정' 은 접어 둔다 — 보통은 검색으로 고른다. */ .byid { margin-top: 12px; } .byid > summary { cursor: pointer; font-size: .84rem; color: var(--accent); } .byid > summary::marker { color: var(--muted); } .byid .row { margin-top: 8px; } .byid input[type="text"] { flex: 1 1 280px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; } /* 내 요약 틀 만들기 폼 */ .tplform { margin-top: 14px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg); } .tplform > summary { cursor: pointer; font-size: .88rem; color: var(--accent); font-weight: 600; } .tplform > summary::marker { color: var(--muted); } .tplform .field { margin-top: 14px; } .tplform label em { font-style: normal; font-weight: 400; color: var(--muted); } .tplform textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: .88rem; line-height: 1.6; background: var(--input); resize: vertical; } .tplform .actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; } /* 표 안의 동작 단추 — 밑줄 친 맨 글씨는 누를 수 있는지 알기 어렵다. */ .rowacts { white-space: nowrap; } .rowacts form { display: inline; } .btn-tiny { border: 1px solid var(--border); background: var(--input); color: var(--text); border-radius: 6px; padding: 3px 10px; margin-right: 6px; font: inherit; font-size: .78rem; cursor: pointer; } .btn-tiny:hover { background: var(--bg); } .btn-tiny.danger { border-color: var(--err-border); } .btn-tiny.danger:hover { background: var(--err-soft); } /* 고치는 중임을 폼 안에서 분명히 한다. */ .editing { margin: 12px 0 0; padding: 9px 12px; border-radius: 6px; background: var(--warn-soft); border: 1px solid var(--warn-border); font-size: .84rem; color: var(--warn); } /* 결과 보관함 정렬 — 제목 옆에 작게 붙인다. */ .sortbar { margin-left: 12px; font-size: .78rem; font-weight: 400; } .sortbar a { color: var(--muted); text-decoration: none; margin-right: 10px; padding-bottom: 2px; border-bottom: 2px solid transparent; } .sortbar a:hover { color: var(--text); } .sortbar a.on { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); } /* Swagger UI 는 **남이 만든 밝은 테마**다. 다크에서 우리 카드만 어두워지면 그 위의 검은 글자가 그대로 남아 안 보인다. 남의 CSS 를 통째로 뒤집는 것은 유지가 안 되므로, 이 블록만 '밝은 섬' 으로 둔다 — 문서를 읽는 데는 그편이 낫다. */ :root[data-theme="dark"] #swagger { background: #fff; color: #1f2328; border-radius: 6px; padding: 10px 14px; } /* Swagger UI 를 우리 카드 안에 얹는다. 자체 여백이 커서 조금 줄인다. */ #swagger .swagger-ui .topbar { display: none; } #swagger .swagger-ui .info { margin: 10px 0 20px; } #swagger .swagger-ui .scheme-container { background: none; box-shadow: none; padding: 0 0 12px; }