/* speclens 공유 디자인 토큰 + Shoelace 매핑 (SSOT: docs/design-tokens.md) 인디고 액센트. 라이트=기본(:root/.sl-theme-light), 다크=.sl-theme-dark 토글. 페이지: shoelace light.css + dark.css 둘 다 로드 + speclens.css + 무플래시 초기화 스크립트. 전환: localStorage 'sl-theme'('light'|'dark') → 에 .sl-theme-dark 유무. 기본 라이트. */ /* ---- 라이트(기본) ---- */ :root, .sl-theme-light { /* 서피스(밝기 계단 = elevation) */ --bg: #f6f7f9; --surface: #ffffff; --raised: #ffffff; --input: #ffffff; --border: #e3e7ee; --border-subtle: #eef1f5; /* 텍스트 */ --text: #1b2027; --muted: #5b6472; --subtle: #8a92a0; /* 인디고 액센트(라이트 대비 조정) */ --accent: #2563eb; --accent-solid: #2563eb; --accent-on: #fff; --accent-weak: #1d4ed8; /* 시맨틱 */ --success: #16a34a; --warning: #d97706; --danger: #e11d48; --info: #0284c7; --claimed: #7c3aed; /* soft = 배지·칩 옅은 배경 */ --accent-soft: #eff6ff; --success-soft: #dcfce7; --warning-soft: #fef3c7; --danger-soft: #ffe4e6; --info-soft: #e0f2fe; --claimed-soft: #f3e8ff; --sl-tooltip-background-color: #1b2027; --sl-tooltip-color: #fff; --sl-overlay-background-color: rgba(15,20,30,.45); } /* ---- 다크(토글) ---- */ .sl-theme-dark { --bg: #0e1117; --surface: #161b22; --raised: #1c2230; --input: #12161d; --border: #2c333d; --border-subtle: #232a33; --text: #e6e8eb; --muted: #9aa4b2; --subtle: #6e7681; --accent: #60a5fa; --accent-solid: #2563eb; --accent-on: #fff; --accent-weak: #93c5fd; --success: #4ade80; --warning: #fbbf24; --danger: #fb7185; --info: #38bdf8; --claimed: #a78bfa; --accent-soft: #0f1e3a; --success-soft: #123c2a; --warning-soft: #3a2e12; --danger-soft: #3a1a24; --info-soft: #1e2a4a; --claimed-soft: #2a1f3a; --sl-tooltip-background-color: #0b0e14; --sl-tooltip-color: var(--text); --sl-overlay-background-color: rgba(0,0,0,.6); } /* ---- 공통(색 무관) ---- */ :root { --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --sl-color-primary-400: #93c5fd; --sl-color-primary-500: #60a5fa; --sl-color-primary-600: #2563eb; --sl-color-primary-700: #1d4ed8; --sl-border-radius-small: var(--r-sm); --sl-border-radius-medium: var(--r-md); --sl-border-radius-large: var(--r-lg); --sl-font-sans: "Pretendard", system-ui, -apple-system, sans-serif; } /* 우리 토큰 → Shoelace 입력/패널 매핑(테마따라 var가 스위치) */ :root, .sl-theme-light, .sl-theme-dark { --sl-input-background-color: var(--input); --sl-input-background-color-hover: var(--input); --sl-input-background-color-focus: var(--input); --sl-input-border-color: var(--border); --sl-input-color: var(--text); --sl-input-label-color: var(--accent-weak); --sl-input-placeholder-color: var(--subtle); --sl-panel-background-color: var(--surface); --sl-panel-border-color: var(--border); --sl-focus-ring-color: var(--accent); } /* 태그(스코프칩 등) primary = 인디고 (accent-weak가 테마따라 전환) */ sl-tag[variant="primary"]::part(base) { background: rgba(59,130,246,.12); border-color: var(--accent-solid); color: var(--accent-weak); } /* ══════════════════════════════════════════════════════════════ 공용 앱셸(App Shell) — 모든 단계 화면 공통 뼈대(SSOT). 상단바(.app-top) · 스텝퍼(.app-stepper) · 본문(.app-page/.app-col) · 섹션(.app-section) · 하단 액션바(.app-actionbar) · 테마토글(.app-themetgl). 각 페이지는 이 클래스만 쓰고 자기 스타일을 재정의하지 않는다(일관성 SSOT). ══════════════════════════════════════════════════════════════ */ .app-top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--raised); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; font-family: var(--sl-font-sans); } .app-top .logo { font-size: 15px; font-weight: 800; letter-spacing: -.3px; } .app-top .logo b { color: var(--accent); } .app-top .sep { width: 1px; height: 20px; background: var(--border); } .app-top .back { font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; } .app-top h1 { font-size: 15px; font-weight: 800; margin: 0; } .app-top .sp { margin-left: auto; } .app-themetgl { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; cursor: pointer; display: grid; place-items: center; line-height: 1; } .app-themetgl:hover { border-color: var(--accent); } /* 공용 버튼(SSOT) — 전 화면 액션 버튼 한 가지 스타일. 네이티브 button(=Shoelace 의존 없음). */ .app-btn { font-size: 13px; font-weight: 700; line-height: 1; border-radius: 9px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .app-btn:hover { border-color: var(--accent); } .app-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .app-btn.primary:hover { filter: brightness(1.06); } .app-btn.ghost { background: transparent; } .app-btn:disabled, .app-btn[disabled] { opacity: .45; cursor: default; border-color: var(--border); filter: none; } .app-btn.sm { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 8px; } .app-btn[hidden] { display: none; } /* 공용 뱃지(SSOT) — 상태·우선순위·티어 등 '라벨 알약'. 색으로 의미 구분(soft 배경). */ .app-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; line-height: 1.5; border-radius: 6px; padding: 2px 7px; white-space: nowrap; } .app-badge.danger { background: var(--danger-soft); color: var(--danger); } .app-badge.warning { background: var(--warning-soft); color: var(--warning); } .app-badge.success { background: var(--success-soft); color: var(--success); } .app-badge.info { background: var(--info-soft); color: var(--info); } .app-badge.accent { background: var(--accent-soft); color: var(--accent-weak); } .app-badge.muted { background: var(--border-subtle); color: var(--muted); } /* 공용 칩(SSOT) — 필터·선택 등 '눌러지는 알약'. 기본 테두리 + .on 강조. */ .app-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 20px; padding: 5px 12px; cursor: pointer; line-height: 1; } .app-chip:hover { border-color: var(--accent); } .app-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-weak); } .app-chip.miss.on { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .app-chip .n { opacity: .7; font-weight: 800; margin-left: 3px; } /* 공용 카드(SSOT) — surface + border + radius 박스. 패딩/내용은 각자. 클릭형은 a.app-card 또는 .app-card.hover. */ .app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); } a.app-card { text-decoration: none; color: inherit; display: block; } a.app-card:hover, .app-card.hover:hover { border-color: var(--accent); } /* 공용 모달(SSOT) — 오버레이 + 카드. 버튼은 .app-btn 재사용. */ .app-overlay { position: fixed; inset: 0; background: var(--sl-overlay-background-color); display: flex; align-items: center; justify-content: center; z-index: 60; } .app-overlay[hidden] { display: none; } .app-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); max-width: 410px; width: 90%; padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,.4); } .app-modal h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; } .app-modal p { font-size: 13.5px; color: var(--muted); line-height: 1.55; } .app-modal p b { color: var(--text); } .app-modal .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* 공용 입력(SSOT) — 네이티브 input/textarea/select 공통 스타일. */ .app-input { width: 100%; background: var(--input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); font-family: inherit; line-height: 1.5; } .app-input:focus { outline: none; border-color: var(--accent); } textarea.app-input { resize: vertical; min-height: 38px; } select.app-input { cursor: pointer; } .app-stepper { background: var(--raised); border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; justify-content: center; } .app-stepper .track { display: flex; align-items: center; max-width: 860px; width: 100%; } .app-step { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .app-step .num { width: 22px; height: 22px; border-radius: 50%; background: var(--border-subtle); color: var(--muted); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; } .app-step .lb { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; } .app-step .lb small { color: var(--subtle); font-weight: 600; } .app-step.on .num { background: var(--accent); color: var(--accent-on); } .app-step.on .lb { color: var(--text); } .app-step.done .num { background: var(--accent-soft); color: var(--accent-weak); } .app-stepper .line { width: 34px; height: 2px; background: var(--border); margin: 0 10px; flex: 0 0 auto; } @media (max-width: 720px) { .app-step .lb { display: none; } .app-stepper .line { width: 16px; margin: 0 6px; } } .app-page { padding: 24px 20px 104px; } .app-col { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; } .app-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; } .app-section > h2 { font-size: 12px; font-weight: 800; color: var(--accent-weak); letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; } .app-section > .desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; } .app-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--raised); border-top: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; } .app-actionbar .inner { max-width: 760px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 10px; } .app-actionbar .msg { font-size: 12.5px; color: var(--muted); flex: 1; min-width: 80px; } /* 설정(⚙️) 드롭다운 메뉴 — 테마 선택 등. shell.js가 #theme 버튼에 붙임(전 화면 동일 UI). */ .app-settings-menu { position: fixed; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 6px; min-width: 150px; } .app-settings-menu[hidden] { display: none; } .app-settings-menu .lbl { font-size: 10px; font-weight: 800; color: var(--subtle); text-transform: uppercase; letter-spacing: .04em; padding: 5px 9px 4px; } .app-settings-menu .opt { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-radius: 7px; padding: 7px 9px; font-size: 13px; color: var(--text); cursor: pointer; font-family: inherit; } .app-settings-menu .opt:hover { background: var(--bg); } .app-settings-menu .opt.on { color: var(--accent); font-weight: 700; } .app-settings-menu .opt::before { content: ""; width: 16px; display: inline-block; font-weight: 800; } .app-settings-menu .opt.on::before { content: "✓"; } /* 페이지 전환 부드럽게(멀티페이지 View Transitions) — 지원 브라우저에서 교차 페이드, 미지원은 무시(점진 향상) */ @view-transition { navigation: auto; }