/* cloud/public/new/app/styles.css — 새 셸 디자인 토큰 (설계도 v3 §4.4) · 서체 Noto Sans KR · 숫자 tabular-nums · 라이트/다크 2모드 · 근거 색 의미(--iv-*): teal=자체 실측, orange=외부, amber=합성 */ :root { /* ★메인 화면(로그인 전) 바탕 — bg.js 의 GROUND_LIGHT / GROUND_DARK 와 같은 값이다. canvas 를 못 쓸 때 이 단색이 남는다. 셸 다크 --bg(#101214)와 «다른» 토큰이며, 어두운 테마에서 두 값이 다른 것은 의도다(design/tokens.json intendedDifferences). */ --main-ground: #f7f7f5; --main-glow: 0 0 28px rgba(94,234,212,.30), 0 0 70px rgba(129,140,248,.22); /* 강조색 바탕 위 글자 — 어두운 테마의 강조색은 밝아서 흰 글자가 4.5:1 에 못 미친다 */ --on-teal: #fff; --backdrop: rgba(0,0,0,.35); --bg: #f7f7f5; --fg: #17191c; --mute: #6b7078; --line: #e3e4e0; --card: #ffffff; --teal: #0f766e; --orange: #c2410c; --amber: #b45309; --teal-soft: #e6f4f2; --radius: 12px; --rail-h: 56px; --rail-w: 64px; --max: 960px; --max-wide: 1200px; --ease: cubic-bezier(.2,.8,.2,1); /* 지금 단계 점의 반채움(◐) — 강조색·옅은 강조색만 쓰므로 테마·STEP 강조색이 :root 에서 바뀌면 함께 따라간다 */ --dot-now: linear-gradient(to right, var(--teal) 0 50%, var(--teal-soft) 50% 100%); /* 모션 토큰 — 설계도 D1-8 이 값을 준 것은 페이지 전환 240ms 하나다 */ --dur-page: 240ms; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --main-ground: #06070b; --on-teal: #101214; --bg: #101214; --fg: #e8e9e6; --mute: #9aa0a6; --line: #262a2e; --card: #171a1d; --teal: #2dd4bf; --orange: #fb923c; --amber: #fbbf24; --teal-soft: #0f2a27; } } :root[data-theme="dark"] { --main-ground: #06070b; --on-teal: #101214; --bg: #101214; --fg: #e8e9e6; --mute: #9aa0a6; --line: #262a2e; --card: #171a1d; --teal: #2dd4bf; --orange: #fb923c; --amber: #fbbf24; --teal-soft: #0f2a27; } /* ── STEP 별 강조색 (설계도 §4.7-1 팔레트) — shell.js render() 가 페이지 전환마다 을 붙이면 --teal 이 그 단계 색이 되어 레일 점·연결선·버튼·칩·포커스·배너가 한꺼번에 따라간다. 8색은 입자 팔레트(48단, 가까운 청록 → 먼 보라)에서 같은 간격으로 뽑은 것 — STEP 0 이 가장 가깝고 STEP 7 이 가장 멀다. 밝은 테마는 같은 색상(hue)에서 밝기만 낮춰 바탕(#f7f7f5) 대비·흰 글자 대비가 모두 4.5:1 을 넘는 값이다. --teal-soft 는 기존 쌍과 같은 혼합비(어두운 12% · 밝은 9%)로 바탕에 섞은 값이다. 로그인 전 메인 화면과 My 화면에는 data-step 이 없어 기본 청록이 남는다. ── */ :root[data-step="0"] { --teal: #11806e; --teal-soft: #e2ece9; } :root[data-step="1"] { --teal: #1c7d7b; --teal-soft: #e3ecea; } :root[data-step="2"] { --teal: #1e7b88; --teal-soft: #e3eceb; } :root[data-step="3"] { --teal: #1e7a9e; --teal-soft: #e3eced; } :root[data-step="4"] { --teal: #1d75bc; --teal-soft: #e3ebf0; } :root[data-step="5"] { --teal: #1f6ce3; --teal-soft: #e4eaf3; } :root[data-step="6"] { --teal: #3866ed; --teal-soft: #e6eaf4; } :root[data-step="7"] { --teal: #5160f5; --teal-soft: #e8e9f5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"])[data-step="0"] { --teal: #5eead4; --teal-soft: #192c2b; } :root:not([data-theme="light"])[data-step="1"] { --teal: #63dcd9; --teal-soft: #1a2a2c; } :root:not([data-theme="light"])[data-step="2"] { --teal: #68d0de; --teal-soft: #1b292c; } :root:not([data-theme="light"])[data-step="3"] { --teal: #6dc2e3; --teal-soft: #1b272d; } :root:not([data-theme="light"])[data-step="4"] { --teal: #72b4e9; --teal-soft: #1c252e; } :root:not([data-theme="light"])[data-step="5"] { --teal: #77a6ee; --teal-soft: #1c242e; } :root:not([data-theme="light"])[data-step="6"] { --teal: #7c9af3; --teal-soft: #1d222f; } :root:not([data-theme="light"])[data-step="7"] { --teal: #818cf8; --teal-soft: #1e212f; } } :root[data-theme="dark"][data-step="0"] { --teal: #5eead4; --teal-soft: #192c2b; } :root[data-theme="dark"][data-step="1"] { --teal: #63dcd9; --teal-soft: #1a2a2c; } :root[data-theme="dark"][data-step="2"] { --teal: #68d0de; --teal-soft: #1b292c; } :root[data-theme="dark"][data-step="3"] { --teal: #6dc2e3; --teal-soft: #1b272d; } :root[data-theme="dark"][data-step="4"] { --teal: #72b4e9; --teal-soft: #1c252e; } :root[data-theme="dark"][data-step="5"] { --teal: #77a6ee; --teal-soft: #1c242e; } :root[data-theme="dark"][data-step="6"] { --teal: #7c9af3; --teal-soft: #1d222f; } :root[data-theme="dark"][data-step="7"] { --teal: #818cf8; --teal-soft: #1e212f; } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); } body { font-family: 'Noto Sans KR', system-ui, -apple-system, sans-serif; font-feature-settings: 'tnum'; line-height: 1.55; } a { color: inherit; text-decoration: none; } /* ── 상단 레일 ─────────────────────────────────────────────────────── */ /* ★열이 «자식 수» 만큼 있어야 한다 — 로고·단계·근거등급·밝기·My. 모자라면 마지막 것이 다음 줄로 떨어진다. */ .rail { position: sticky; top: 0; z-index: 10; min-height: var(--rail-h); height: auto; display: grid; grid-template-columns: minmax(100px, auto) 1fr auto auto auto; align-items: start; gap: 16px; padding: 10px 20px; background: var(--bg); border-bottom: 1px solid var(--line); } .rail[hidden] { display: none; } /* ★로그인 전에는 레일이 없다 — display:grid 를 덮어야 실제로 사라진다 */ .brand { font-weight: 700; letter-spacing: .04em; } .myLink { font-size: 13px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; } .myLink:hover { color: var(--fg); border-color: var(--teal); } .theme-btn { font: inherit; font-size: 12px; color: var(--mute); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; margin-left: 8px; } .theme-btn:hover { color: var(--fg); } .theme-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .myLink:focus-visible { color: var(--fg); border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 2px; } /* 포커스 표시 공통 — 윤곽선(강조색, 비텍스트 3:1 이상)과 옅은 테두리 빛 두 가지가 함께 바뀐다. 색 하나로 세우지 않는다 */ :where(a[href], button, summary, [role="button"], [role="tab"], input[type="checkbox"]):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 5px var(--teal-soft); } /* 스크롤 컨테이너는 안쪽 여백 밖을 자른다 — 단계 링크의 포커스 표시(바깥 5px)가 잘리지 않도록 여백 7px 을 두고 같은 크기의 음수 바깥 여백으로 자리를 되돌린다 */ .steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; overflow: visible; scrollbar-width: none; padding: 7px; margin: -7px; } .steps::-webkit-scrollbar { display: none; } .step { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; color: var(--mute); white-space: nowrap; font-size: 13px; } .step .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; } .step.done { color: var(--teal); } .step.done .dot { background: var(--teal); border-color: var(--teal); } .step.now { color: var(--fg); } /* 지금 보고 있는 단계 — 점 모양(진행 상태)과 별개로 바탕으로 표시한다. 완료 단계를 다시 볼 때도 어디를 보는지 보인다 */ .step.viewing { color: var(--fg); background: var(--teal-soft); } /* 지금 단계는 반채움(◐) — 끝난 단계(●)와 색이 아니라 형태로 구분된다. reduced-motion 에서 맥동이 꺼져도 구분이 남는다. */ .step.now .dot { background: var(--dot-now); border-color: var(--teal); animation: pulse 1.2s ease-in-out infinite; } /* 흐리게 하는 것은 점뿐이다 — 링크 전체에 opacity 를 걸면 이동 가능한 단계 라벨의 글자 대비가 4.5:1 아래로 떨어진다 */ .step.wait .dot { opacity: .65; } /* 연결선은 SVG — motion.js drawProgress 가 stroke-dashoffset 24→0 으로 그린다. 움직임이 없으면 dashoffset 0 이라 그대로 보인다. */ .link { width: 22px; height: 2px; flex: none; overflow: visible; } .link line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 24; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; } .link.done line { stroke: var(--teal); } @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } } .grade { font-size: 12px; color: var(--amber); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } /* ── 화면 ──────────────────────────────────────────────────────────── */ .view { min-height: calc(100vh - var(--rail-h) - 48px); } .page { max-width: var(--max); margin: 0 auto; padding: 48px 20px; } .page.wide { max-width: var(--max-wide); } .page.center { min-height: calc(100vh - var(--rail-h) - 48px); display: flex; flex-direction: column; justify-content: center; } h1 { font-weight: 600; font-size: 28px; margin: 0 0 8px; letter-spacing: -.01em; } h2 { font-weight: 600; font-size: 18px; margin: 28px 0 10px; } .lead { color: var(--mute); margin: 0 0 24px; } /* STEP 0 — 중앙 입력창 하나 */ .ask { display: grid; gap: 12px; } .ask textarea { width: 100%; min-height: 160px; resize: vertical; font: inherit; font-size: 16px; color: var(--fg); background: var(--card); border: 1px solid var(--mute); border-radius: 16px; padding: 18px 20px; outline: none; } .ask textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .askbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .tools { display: flex; gap: 8px; } .tools button, .btn { font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; } .btn.primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); font-weight: 600; padding: 10px 22px; } .btn.primary[disabled] { opacity: .5; cursor: not-allowed; } .recent { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; } .chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--mute); background: var(--card); } .chip.syn { color: var(--amber); } /* 인라인 안내 배너 — 요청 성공과 결과 성공이 다를 때(예: STEP0 자료 업로드 부분 실패) alert() 대신 화면에 남긴다 */ .notice { border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } .notice b { color: var(--fg); font-weight: 500; } .notice ul { margin: 6px 0 0; padding-left: 18px; color: var(--mute); } /* 결과 카드 */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .empty { border: 1px dashed var(--line); border-radius: var(--radius); padding: 18px; color: var(--mute); } .empty b { color: var(--fg); font-weight: 500; } .status { display: flex; align-items: center; gap: 10px; color: var(--mute); font-size: 14px; } .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: pulse 1.2s ease-in-out infinite; } .kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 14px; } .kv dt { color: var(--mute); } .kv dd { margin: 0; } .kv > div { display: contents; } /* dt/dd 한 쌍을 묶는 div(원문 title 을 다는 자리)는 격자 칸을 차지하지 않는다 */ .gate { margin-top: 28px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; } /* 장치 B — 앞 단계 산출물을 머리에 고정 */ .carry { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .carry-item { font-size: 12px; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--card); } .carry-item b { color: var(--teal); font-weight: 500; margin-right: 4px; } /* STEP 1 — 문서처럼 고치는 브리프 (Tally 방식) */ .brief { display: grid; gap: 14px; } .fld label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 6px; } .fld textarea { width: 100%; font: inherit; font-size: 15px; color: var(--fg); background: transparent; border: 0; border-bottom: 1px solid var(--mute); padding: 6px 2px; resize: vertical; outline: none; } .fld textarea:focus { border-bottom-color: var(--teal); box-shadow: 0 1px 0 0 var(--teal); } .fld.is-empty textarea { border-bottom-style: dashed; } /* 분류 칩 — 채워진 칸(●)과 빈 칸(○)을 기호와 테두리 모양으로 가른다. 누르면 그 칸으로 간다 */ .brief-cats { margin: 0 0 14px; } .chip.cat { font: inherit; font-size: 12px; cursor: pointer; } .chip.cat.is-filled { color: var(--teal); border-color: var(--teal); } .chip.cat.is-empty { border-style: dashed; } /* 제품 사실(확인됨)과 제품 측 설명(확인 안 됨) — 나란히 두고, 확인 안 됨 쪽은 점선 테두리로 형태를 바꾼다 */ .fact-split { margin: 0; } .fact-col { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; } .fact-col[data-verified="false"] { border-style: dashed; } /* 게이트 — 확인 버튼 하나만 크게 */ .btn.lg { font-size: 16px; padding: 14px 36px; } .gate-msg { flex: 1 1 auto; } /* STEP 0 을 다시 열었을 때의 입력 원문 */ .brief-raw { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } /* 페이지 전환(F1.5) — 1순위 View Transition: 본문(#view)만 전환 대상이다(레일은 제자리). 이전 페이지는 왼쪽으로 12px 이동하며 투명해지고, 새 페이지는 오른쪽 12px 에서 들어온다. 240ms. */ .view { view-transition-name: page; } ::view-transition-old(page) { animation: vt-out var(--dur-page) var(--ease) both; } ::view-transition-new(page) { animation: vt-in var(--dur-page) var(--ease) both; } @keyframes vt-out { to { opacity: 0; transform: translateX(-12px) } } @keyframes vt-in { from { opacity: 0; transform: translateX(12px) } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(page), ::view-transition-new(page) { animation: none } } /* View Transition 도 Motion 도 없을 때의 CSS 폴백 — 새 페이지 진입만 있다. View Transition 을 지원하면 두 번 움직이지 않게 끈다 */ .page { animation: enter var(--dur-page) var(--ease); } @keyframes enter { from { opacity: 0; transform: translateX(12px) } to { opacity: 1; transform: none } } @supports (view-transition-name: none) { .page { animation: none } } @media (prefers-reduced-motion: reduce) { .page { animation: none } .step.now .dot, .status .dot, .vstep.now .dot { animation: none } } .foot { max-width: var(--max-wide); margin: 0 auto; padding: 12px 20px; color: var(--mute); font-size: 12px; display: flex; justify-content: space-between; } /* 좁은 화면 — 상단 가로 레일이 왼쪽 세로 레일이 된다 (장치 Q · 설계도 F1.4·F1.6 임계 720px) 레일 자식 5개(로고·단계·근거등급·밝기·My)가 위에서 아래로 한 열에 놓인다 — 행 수 = 자식 수. 단계 라벨은 보이지 않게 접고(링크 aria-label 이 이름을 가진다) 점과 연결선만 남긴다. 본문·꼬리말은 레일 폭만큼 오른쪽으로 민다. 로그인 전(레일 hidden)에는 밀지 않는다 — 없는 레일 폭만큼 본문이 넘치지 않게 한다. 입력창은 .page.center 로 중앙에 남는다. */ @media (max-width: 720px) { .rail { position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail-w); height: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto auto; justify-items: center; align-items: start; gap: 10px; padding: 12px 6px; border-bottom: 0; border-right: 1px solid var(--line); } .brand, .grade, .theme-btn, .myLink { writing-mode: vertical-rl; } .brand { font-size: 12px; } .grade { font-size: 11px; padding: 8px 3px; } .theme-btn, .myLink { margin-left: 0; padding: 8px 3px; } .steps { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: 100%; } .step { padding: 6px; } .step > span:not(.dot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .link { width: 16px; transform: rotate(90deg); margin: 7px 0; } .view, .foot { margin-left: var(--rail-w); } .rail[hidden] ~ .view, .rail[hidden] ~ .foot { margin-left: 0; } .page.center { min-height: calc(100vh - 48px); } } .status .elapsed { font-variant-numeric: tabular-nums; } /* 꼬리말이 비어 있으면(로그인 전 메인) 안쪽 여백만 남아 화면 높이를 넘긴다 — 자리를 차지하지 않게 한다 */ .foot:empty { display: none; } /* ── 턴 1-2 추가 — 페이지(2·3·5·7)·차트·장치 C/D/H/I/K·로그인 모달 ─────────────── */ .mute { color: var(--mute); font-size: 12.5px; } .k { font-size: 12.5px; color: var(--mute); margin: 0 0 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .sect { margin: 0 0 26px; } /* ★비어 있는 칸은 자리만 차지하고 여백을 남긴다 — 개입 칸은 «있다가 없는» 자리라 render 가 컨테이너를 항상 두고 hidden 으로 감춘다. .modal[hidden] 과 같은 방식이다. */ .sect[hidden] { display: none; } .sect.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .chip.tier { color: var(--teal); } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; } .kv-inline { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .step.t2 .dot { opacity: .5; } .step.t2 .dot { border-style: dashed; } .step small { font-size: 10px; color: var(--mute); margin-left: 4px; } /* 장치 C — 회색 점선 칸 + «무엇이 있으면 채워지는가» */ .empty-cell { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 16px; color: var(--mute); display: grid; gap: 4px; } .empty-cell b { color: var(--fg); font-weight: 500; } .empty-cell span { font-size: 12.5px; } .empty-cell.small { padding: 8px 10px; font-size: 12.5px; } .empty-cell.chart-empty { display: flex; flex-direction: column; justify-content: center; } /* 장치 C — 안내가 있는 빈 칸은 눌러서 펼친다 */ .empty-cell[role="button"] { cursor: pointer; } .empty-cell[role="button"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .empty-cell[role="button"] > b::after { content: ' ⓘ'; color: var(--mute); font-weight: 400; } .asknote { margin-top: 10px; } .costk { font-variant-numeric: tabular-nums; } .cell-empty { color: var(--mute); border-bottom: 1px dashed var(--line); } /* 장치 D·K — 배지 */ .grade-badge { font-size: 12px; color: var(--amber); border: 1px solid var(--line); padding: 2px 8px; border-radius: 999px; } .llm-badge { font-size: 11px; color: var(--mute); border: 1px dashed var(--line); padding: 1px 7px; border-radius: 999px; } /* 장치 L — 지금 무엇을 하는가 한 줄 */ .status#nowLine { margin: 6px 0 12px; } /* 경과 시간 — 자릿수가 늘어도 옆 글자가 밀리지 않게 tabular-nums 를 쓴다. nowrap·flex-shrink:0 이 없으면 좁은 폭에서 본문이 공간을 다 먹고 «7분 42 / 초 경 / 과» 로 쪼개진다(실측). */ .status .elapsed { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; flex-shrink: 0; } /* 차트 */ .chart { margin: 0; } .chart svg { display: block; max-width: 100%; height: auto; } .chart-ring svg { width: auto; } .ch-grid { stroke: var(--line); stroke-width: 1; } .ch-lab { font-size: 10px; fill: var(--mute); } .ch-big { font-size: 20px; font-weight: 600; fill: var(--fg); } .ch-legend { display: flex; gap: 12px; font-size: 12px; color: var(--mute); margin-top: 4px; } .ch-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; } .ch-legend .ch-key { margin-right: 5px; vertical-align: middle; } .ch-draw { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.1s var(--ease) forwards; } .chart-ring .ch-draw { animation: none; } /* 링은 stroke-dasharray 가 값 자체다 */ .ch-live { animation: pulse 1.2s ease-in-out infinite; } @keyframes draw { to { stroke-dashoffset: 0 } } @media (prefers-reduced-motion: reduce) { .ch-draw { animation: none; stroke-dashoffset: 0 } .ch-live { animation: none } } /* STEP 2 — 벤치마크 */ .hits { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .hit { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; } .hit.ok { border-color: var(--teal); } .hit.ok b { color: var(--teal); } .hit.nokey, .hit.failed, .hit.unusable, .hit.skipped { border-style: dashed; color: var(--mute); } /* 쓸 수 없음 — 「실패」와 달리 다시 눌러도 같다. 점선은 같게 두되 이름을 흐리게 해 성공과 구분한다 */ .hit.unusable b, .hit.skipped b { color: var(--mute); } /* 수집 소스 상태를 테두리 모양으로도 가른다 — 성공 실선 · 실패 이중선 · 건너뜀 점 · 쓸 수 없음 점선. 키 없음은 장치 C 빈 칸으로 그린다 */ .hit.failed { border-style: double; border-width: 3px; } .hit.skipped { border-style: dotted; } /* 근거를 고른 과정 — 「수집 소스」가 아니라 «조용히 줄어든 것을 말로 만든 자리» 다. 한 줄에 하나씩 세로로 쌓는다 — 소스 칸처럼 격자로 두면 다시 «소스 목록» 으로 읽힌다. */ .proc { display: grid; gap: 8px; } .proc-line { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 3px; font-size: 13px; } .proc-line b { color: var(--fg); font-weight: 600; } .proc-line .mute { font-size: 12.5px; } .proc-line .cell-empty { font-size: 12.5px; justify-self: start; } .bcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 8px; } .bcard header { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bcard .src { font-size: 12.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; } .bcard .src a { color: var(--teal); } .bcard .price { font-weight: 600; } .bcard .excerpt { margin: 0; font-size: 13px; color: var(--mute); } .bcard.is-excluded { opacity: .45; border-style: dashed; } .tgl { font-size: 12.5px; color: var(--mute); display: flex; gap: 6px; align-items: center; } .tbl-wrap { overflow-x: auto; } table.cmp { border-collapse: collapse; width: 100%; font-size: 13px; } table.cmp th, table.cmp td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } table.cmp th { color: var(--mute); font-weight: 500; } .proscons { display: grid; gap: 10px; } .pc-row { display: grid; grid-template-columns: 160px 1fr 1fr; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; } .pc-row ul { margin: 0; padding-left: 16px; font-size: 13px; } .pc-row .pros li::marker { color: var(--teal); } .pc-row .cons li::marker { color: var(--orange); } /* 빈 상태 칸은 항목이 아니다 — 불릿을 주지 않는다 */ .pc-row li.pc-none { list-style: none; margin-left: -16px; } .pc-name { font-weight: 500; } /* STEP 3 — 지표·슬롯 */ .siggrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .metric-tile { min-height: 78px; display: grid; align-content: center; gap: 5px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .metric-tile span { color: var(--mute); font-size: 12px; } .metric-tile b { font-size: 22px; line-height: 1.1; font-weight: 600; } .metric-tile em { min-width: 0; color: var(--mute); font-size: 12px; font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .metric-tile.ok { border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); background: var(--teal-soft); } .metric-tile.warn { border-color: color-mix(in srgb, var(--amber) 48%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--card)); } .p3-signal-groups { display: grid; gap: 14px; } .p3-signal-group { display: grid; gap: 8px; } .p3-signal-group h3 { margin: 0; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: 0; } .sig { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 4px; } .sig .v { font-size: 26px; font-weight: 600; line-height: 1.2; } .sig .v small { font-size: 12px; color: var(--mute); margin-left: 4px; font-weight: 400; } .sig .meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; align-items: center; } .delta.up { color: var(--teal); } .delta.down { color: var(--orange); } .tv { display: grid; gap: 8px; max-width: 260px; } .hold { margin-top: 12px; } .hold input { font: inherit; padding: 8px 10px; border: 1px solid var(--mute); border-radius: 8px; background: var(--card); color: var(--fg); } .slotgrid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } /* STEP 4 슬롯 탭·토론자 카드 — 카드는 .slot 의 뒤집기 규칙을 그대로 쓴다 */ .ptabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; } .ptabs [role="tab"] { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--mute); cursor: pointer; } .ptabs [role="tab"][aria-selected="true"] { color: var(--fg); border-color: var(--teal); background: var(--teal-soft); } .pgrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 12px; } .pcard { min-height: 320px; } .fitf td, .fitf th { font-size: 12px; } .slot { position: relative; min-height: 240px; cursor: pointer; perspective: 1000px; outline: none; } .slot:focus-visible .face { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 5px var(--teal-soft); } .slot .face { position: absolute; inset: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; backface-visibility: hidden; transition: transform .5s var(--ease); overflow: auto; } .slot .kv dd, .slot .cmp td, .slot .proc-line { overflow-wrap: anywhere; } .slot .face.back { transform: rotateY(180deg); font-size: 13px; } .slot.is-flipped .face.front { transform: rotateY(180deg); } .slot.is-flipped .face.back { transform: rotateY(0); } @media (prefers-reduced-motion: reduce) { .slot .face { transition: none } } .slot .kv { grid-template-columns: 56px 1fr; font-size: 13px; } .share { margin-top: 10px; display: flex; gap: 8px; align-items: baseline; } .share b { font-size: 22px; color: var(--teal); } /* ★.share 는 «값이 있을 때» 큰 숫자를 보이는 자리다. 빈 칸(emptyCell)에는 그 규칙을 적용하지 않는다. 가로 배치(flex) + 22px 가 좁은 슬롯 카드에서 「미앵커」를 「미앵」으로 잘랐다(운영 실측 2026-09-10). */ .empty-cell.share { display: grid; } .empty-cell.share b { font-size: inherit; color: var(--fg); } .flip-hint { margin-top: 10px; font-size: 11px; } .un { margin: 0; padding-left: 16px; } /* STEP 5 — FGI */ .fgi-head { margin-bottom: 8px; } .vsteps { display: grid; gap: 8px; } .vstep { display: flex; gap: 8px; align-items: center; color: var(--mute); font-size: 13px; } .vstep .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; } .vstep.done { color: var(--teal); } .vstep.done .dot { background: var(--teal); border-color: var(--teal); } .vstep.now { color: var(--fg); } .vstep.now .dot { background: var(--dot-now); border-color: var(--teal); animation: pulse 1.2s ease-in-out infinite; } /* 끝난 조사의 단계 — ★now 는 점이 깜빡여«지금 하고 있다»고 말한다. 실패한 조사에서 그것은 거짓이다. stopped = 마지막으로 확인된 단계(amber · 주의) · none = 진행되지 않은 단계(점선 · 대기와 다르게 보인다) */ .vstep.stopped { color: var(--amber); } .vstep.stopped .dot { border-color: var(--amber); } /* 서버가 보낸 오류 원문 — 접어 두고 펼치면 전문을 복사할 수 있게 줄바꿈을 살린다 */ .err-detail { margin-top: 8px; font-size: 12.5px; color: var(--mute); } .err-detail summary { cursor: pointer; } .err-detail pre { white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; font: inherit; } .vstep.none { color: var(--mute); opacity: .6; } .vstep.none .dot { border-style: dashed; } .stage-note { font-size: 12.5px; margin-top: 8px; } .stage-banner { border-left: 3px solid var(--teal); background: var(--teal-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 10px 12px; margin: 10px 0; font-size: 13px; } .ticker { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; } .utt { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--card); } .utt .who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-bottom: 4px; } .utt p { margin: 0; font-size: 14px; } .stance { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--line); } .stance.pos { color: var(--teal); } .stance.neg { color: var(--orange); } .intervene textarea { width: 100%; font: inherit; font-size: 14px; color: var(--fg); background: var(--bg); border: 1px solid var(--mute); border-radius: 10px; padding: 10px 12px; resize: vertical; } /* STEP 7 — 결과 */ .rep-sec { margin: 0 0 18px; } .rep-body { white-space: pre-wrap; font: inherit; font-size: 14px; margin: 0; } .evid summary { cursor: pointer; } .dl { gap: 8px; } /* 장치 I — 부족한 정보 질문 카드 */ .askq { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; background: var(--teal-soft); display: grid; gap: 8px; } .qcard { display: grid; gap: 4px; font-size: 13.5px; } .qcard input { font: inherit; padding: 8px 10px; border: 1px solid var(--mute); border-radius: 8px; background: var(--card); color: var(--fg); } /* 장치 — STEP 0 고객 자료 추가(§7.6) */ .askassets { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin-top: 14px; display: grid; gap: 8px; } .askassets summary { cursor: pointer; font-size: 13.5px; color: var(--mute); } .askassets label { display: block; font-size: 13px; color: var(--mute); margin-bottom: 4px; } .askassets textarea, .askassets input, .askassets select { font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--mute); border-radius: 8px; background: var(--card); color: var(--fg); width: 100%; margin-top: 4px; } .btn.sm { font-size: 11px; padding: 2px 6px; } /* 로그인 모달 */ .modal { position: fixed; inset: 0; z-index: 20; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal[hidden] { display: none; } .modal-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; width: min(420px, 100%); display: grid; gap: 12px; } .modal-card h2 { margin: 0; padding-right: 36px; } .modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; } .modal-card label { display: grid; gap: 4px; font-size: 13px; color: var(--mute); } .modal-card input { font: inherit; padding: 9px 11px; border: 1px solid var(--mute); border-radius: 8px; background: var(--bg); color: var(--fg); } .modal-card a[data-auth] { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .modal-card a[data-auth]:hover { color: var(--fg); } /* ── 메인 화면(로그인 전) — 설계도 D1-6·F1.6 ───────────────────────── ★배경은 «이 화면에만» 깔린다. STEP 0~7 작업 화면에는 깔지 않는다. ★z-index 0 이라 .rail(10)·.modal(20) 아래에 깔린다. ★★overflow:hidden 을 셸 body 에 «걸지 않는다» — 걸면 다른 페이지의 스크롤이 죽는다. 이 컨테이너에만 건다. */ .mainbg { position: fixed; inset: var(--rail-h) 0 0 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--main-ground); } /* ★레일이 없는 화면(로그인 전 — shell.js 가 .full 을 붙인다)에서는 배경이 위까지 찬다. */ .mainbg.full { inset: 0; } .mainbg[hidden] { display: none; } .mainbg canvas { display: block; width: 100%; height: 100%; } /* ★글자는 입자 위에 «바로» 놓인다 — 글자 뒤에 어둠막을 두지 않는다. */ .mainpage { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; } /* ★Michroma 는 «브랜드 로고 한 곳»에만 쓴다(D1-3). 본문·부제는 Noto Sans KR 다. */ .mainbrand { margin: 0; font-family: Michroma, 'Noto Sans KR', sans-serif; font-size: clamp(28px, 7.2vw, 76px); letter-spacing: .30em; text-indent: .30em; font-weight: 400; line-height: 1; white-space: nowrap; color: var(--fg); text-shadow: var(--main-glow); } /* 부제는 자체 배경을 깔아 입자 위에서도 대비가 --mute/--main-ground 로 고정된다. 여백·반경은 .chip 과 같은 값이다. */ .mainlead { margin: 18px 0 0; font-size: 12px; font-weight: 400; letter-spacing: .22em; color: var(--mute); display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--main-ground); } .mainact { margin: 40px 0 0; } .main-theme-btn { position: fixed; top: 24px; right: 24px; z-index: 2; margin-left: 0; background: var(--card); backdrop-filter: blur(10px); } @media (prefers-reduced-motion: reduce) { .mainbrand { text-shadow: none; } } /* ── D1-12 ㉢ 매체 게시 상태 배지 — 상태는 표식(.pj-mark) 모양으로 가르고 색은 보조다 ── */ .pj-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); background: var(--card); } .pj-badge b { font-weight: 500; } .pj-badge > span { color: var(--mute); } /* 외부 심사·직접 조치는 정상 대기다 — 실패색을 쓰지 않고 점선 테두리로만 구분한다 */ .pj-badge[data-tone="wait"] { border-style: dashed; border-color: var(--mute); } .pj-badge[data-tone="attn"] { border-color: var(--amber); } .pj-badge[data-tone="fail"] { border: 2px solid var(--orange); } .pj-badge[data-tone="fail"] b { color: var(--orange); } .pj-mark { position: relative; display: inline-block; flex: none; width: 10px; height: 10px; box-sizing: border-box; vertical-align: middle; color: var(--teal); } .pj-badge[data-tone="wait"] .pj-mark { color: var(--mute); } .pj-badge[data-tone="attn"] .pj-mark { color: var(--amber); } .pj-badge[data-tone="fail"] .pj-mark { color: var(--orange); } .pj-mark[data-shape="ring"] { border: 1.5px solid currentColor; border-radius: 50%; } .pj-mark[data-shape="ring-dash"] { border: 1.5px dashed currentColor; border-radius: 50%; } .pj-mark[data-shape="ring-dot"] { border: 2px dotted currentColor; border-radius: 50%; } .pj-mark[data-shape="half"] { border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 4px 0 0 0 currentColor; } .pj-mark[data-shape="dot"] { border-radius: 50%; box-shadow: inset 0 0 0 5px currentColor; } .pj-mark[data-shape="dot-ring"] { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--card), inset 0 0 0 5px currentColor; } .pj-mark[data-shape="bars"] { width: 9px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .pj-mark[data-shape="square"] { border: 1.5px solid currentColor; } .pj-mark[data-shape="square-dash"] { border: 1.5px dashed currentColor; } .pj-mark[data-shape="square-double"] { border: 3px double currentColor; } .pj-mark[data-shape="diamond"] { width: 8px; height: 8px; margin: 1px; border: 1.5px solid currentColor; transform: rotate(45deg); } .pj-mark[data-shape="cross"]::before, .pj-mark[data-shape="cross"]::after { content: ''; position: absolute; left: 4px; top: -1px; width: 2px; height: 12px; box-shadow: inset 0 0 0 1px currentColor; transform: rotate(45deg); } .pj-mark[data-shape="cross"]::after { transform: rotate(-45deg); } .pj-mark[data-shape="triangle"] { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid currentColor; } .pj-mark[data-shape="none"] { display: none; } /* 제4부 4.6 evidence_type 배지 — 실측=실선 · 계산=점선 · AI 분석=빗금. 섞인 입력은 이중선 오류 칸 */ .ev-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 8px; border: 1.5px solid var(--mute); border-radius: 4px; color: var(--fg); } .ev-badge b { font-weight: 600; letter-spacing: .02em; } .ev-badge[data-shape="dashed"] { border-style: dashed; } .ev-badge[data-shape="hatch"] { background-image: repeating-linear-gradient(135deg, var(--line) 0 2px, transparent 2px 6px); } .ev-badge[data-shape="empty"] { border-style: dotted; color: var(--mute); } .ev-badge[data-shape="error"] { border: 3px double var(--orange); } .ev-badge[data-shape="error"] b { color: var(--orange); } /* D1-12 ㉠ 검사 6항목 — 통과·실패·판정 없음을 표식 모양과 문구로 가른다 */ .check-sum { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; } .check-sum .ck { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } table.checks caption { text-align: left; padding: 0 0 4px; } table.checks td.ck { white-space: nowrap; } .ck b { font-weight: 500; margin-left: 4px; } .ck span { color: var(--mute); margin-left: 4px; } .ck[data-check="fail"] .pj-mark, .ck[data-check="fail"] b { color: var(--orange); } .ck[data-check="unknown"] .pj-mark, .ck[data-check="unknown"] b { color: var(--mute); } /* D1-12 ㉡ 토론자 미달 — 부족분과 제안 문구만 둔다 */ .shortfall { border: 1px dashed var(--mute); border-radius: var(--radius); padding: 10px 12px; margin-top: 10px; display: grid; gap: 4px; font-size: 13px; } .shortfall b { font-weight: 500; } .shortfall .suggest { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } /* 장치 N — 다음에 확인할 것. 열리는 화면이 없는 버튼은 점선 테두리로 형태를 바꾼다 */ .next-card { display: grid; gap: 8px; align-content: start; } .next-card .btn { justify-self: start; } .next-card .btn[disabled] { border-style: dashed; color: var(--mute); cursor: not-allowed; } .mix-entry-panel { display: grid; gap: 8px; align-content: start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); } .mix-entry-panel .btn { justify-self: start; } /* MIX 운영 화면 */ .mix-root { display: grid; gap: 18px; } .mix-stage-rail { position: sticky; top: var(--rail-h); z-index: 4; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 6px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--line); } .mix-stage { min-height: 54px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--mute); background: var(--card); font-size: 12px; white-space: nowrap; } .mix-stage .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; } .mix-stage b { font-weight: 700; } .mix-stage.now { color: var(--fg); border-color: color-mix(in srgb, var(--teal) 50%, var(--line)); background: color-mix(in srgb, var(--teal-soft) 64%, var(--card)); box-shadow: inset 0 -2px 0 var(--teal); } .mix-stage.done { color: var(--teal); } .mix-stage.done .dot { background: var(--teal); border-color: var(--teal); } .mix-stage.wait .dot { opacity: .55; } .mix-stage.locked { opacity: .42; cursor: not-allowed; } .mix-stage.locked .dot { border-style: dashed; } .mix-stage-shell { display: grid; gap: 18px; } .mix-stage-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 18px; align-items: end; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--card) 86%, var(--teal-soft)); } .mix-stage-head h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; } .mix-stage-head .lead { max-width: 720px; margin: 0; } .mix-stage-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 13px; } .mix-stage-meta span { color: var(--mute); } .mix-stage-meta b { min-width: 0; overflow-wrap: anywhere; font-weight: 600; } .mix-stage-body { display: grid; gap: 16px; } .mix-stage-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; } .mix-stage-actions span { color: var(--mute); font-size: 13px; } .mix-stage-actions [aria-disabled="true"] { opacity: .45; pointer-events: none; } .mix-ops { display: grid; gap: 12px; } .mix-ops-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; } .mix-ops-head h2 { margin: 0 0 6px; } .mix-ops-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; } .mix-ops-grid > .card { height: 100%; } .mix-cost-editor { display: grid; gap: 12px; } .mix-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mix-form-row label, .mix-cost-fields label, .mix-full-label { display: grid; gap: 6px; min-width: 0; color: var(--mute); font-size: 12px; } .mix-form-row select, .mix-form-row input, .mix-cost-fields input, .mix-full-label input { width: 100%; min-height: 38px; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } .mix-cost-fields { display: grid; grid-template-columns: repeat(5, minmax(92px, 1fr)); gap: 10px; } .mix-cost-fields input::placeholder { color: var(--mute); } .mix-advanced-json { border-top: 1px solid var(--line); padding-top: 10px; } .mix-advanced-json summary { cursor: pointer; color: var(--mute); font-size: 13px; } .mix-advanced-json[open] summary { margin-bottom: 8px; color: var(--fg); } .mix-json { width: 100%; min-height: 180px; resize: vertical; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .mix-select { width: 100%; font: inherit; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; } .mix-channel-picker { display: grid; gap: 12px; } .mix-channel-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mix-channel-choice { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 76px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); cursor: pointer; } .mix-channel-choice input { position: absolute; opacity: 0; pointer-events: none; } .mix-channel-check { width: 18px; height: 18px; border: 2px solid var(--mute); border-radius: 3px; background: var(--card); margin-top: 2px; } .mix-channel-choice input:checked + .mix-channel-check { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px var(--card); } .mix-channel-choice:has(input:checked) { border-color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, var(--card)); } .mix-channel-copy { display: grid; gap: 4px; min-width: 0; } .mix-channel-copy b { font-size: 14px; font-weight: 650; overflow-wrap: anywhere; } .mix-channel-copy em { width: fit-content; font-style: normal; color: var(--teal); font-size: 11px; border: 1px solid color-mix(in srgb, var(--teal) 36%, var(--line)); border-radius: 999px; padding: 2px 7px; background: var(--teal-soft); } .mix-channel-copy small { color: var(--mute); font-size: 12px; line-height: 1.35; } .mix-channel-choice.is-disabled { opacity: .52; cursor: not-allowed; } .mix-channel-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line)); border-radius: 8px; background: var(--teal-soft); color: var(--mute); font-size: 13px; } .mix-channel-confirm-btn { min-height: 42px; padding-inline: 18px; font-weight: 700; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); } .mix-driver-status, .mix-driver-empty { display: grid; gap: 10px; } .mix-driver-empty { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .mix-driver-empty b { font-size: 15px; } .mix-driver-empty p { margin: 0; color: var(--mute); line-height: 1.55; } .mix-driver-empty ul { margin: 0; padding-left: 18px; color: var(--mute); font-size: 13px; } .mix-driver-empty details { border-top: 1px solid var(--line); padding-top: 8px; color: var(--mute); font-size: 12px; } .mix-driver-empty summary { cursor: pointer; } .mix-driver-empty code { display: block; margin-top: 7px; overflow-wrap: anywhere; color: var(--fg); } .mix-op-result { margin: 0; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); } .mix-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .mix-kpi-grid div { min-height: 66px; display: grid; align-content: center; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .mix-kpi-grid span { color: var(--mute); font-size: 12px; } .mix-kpi-grid b { min-width: 0; font-size: 15px; overflow-wrap: anywhere; } .mix-rule-note { margin: 8px 0 0; color: var(--mute); font-size: 12px; line-height: 1.5; } .mix-pending-list, .mix-safety-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .mix-pending-list li, .mix-safety-list div { display: grid; grid-template-columns: minmax(112px, 1fr) auto; gap: 4px 10px; align-items: center; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .mix-pending-list small, .mix-safety-list span { grid-column: 1 / -1; color: var(--mute); font-size: 12px; line-height: 1.4; } .mix-pending-list span { color: var(--teal); font-size: 12px; font-weight: 700; } .mix-utm-builder { display: grid; gap: 10px; } .mix-utm-presets { display: flex; flex-wrap: wrap; gap: 6px; } .mix-utm-presets .btn[aria-pressed="true"] { border-color: var(--teal); color: var(--fg); background: var(--teal-soft); } .mix-utm-output { display: block; min-height: 42px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--teal) 34%, var(--line)); border-radius: 8px; background: var(--bg); color: var(--fg); font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; } .mix-limit-table td:last-child { color: var(--mute); font-size: 12px; line-height: 1.45; } .mix-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); gap: 18px; align-items: end; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); } .mix-hero h1 { margin: 4px 0 8px; font-size: 34px; line-height: 1.08; } .mix-summary { display: grid; grid-template-columns: repeat(5, minmax(84px, 1fr)); gap: 8px; } .mix-summary div { min-height: 70px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--card) 82%, var(--bg)); display: grid; align-content: center; gap: 3px; } .mix-summary span { color: var(--mute); font-size: 12px; } .mix-summary b { font-size: 16px; word-break: keep-all; overflow-wrap: anywhere; } .mix-strategy .card, .content-grid .card { min-height: 150px; } .content-cell strong { font-size: 14px; } .cost-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 5px; } .cost-list li { display: flex; justify-content: space-between; gap: 12px; color: var(--mute); font-size: 13px; } .cost-list b { color: var(--fg); font-weight: 600; } .funnel .pill.now { border-color: var(--teal); color: var(--fg); background: color-mix(in srgb, var(--teal) 16%, var(--card)); } .mix-monitor-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .mix-rings { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 10px; } .monitor-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; } .monitor-tabs .card { overflow: auto; } .shape-row { display: flex; align-items: end; gap: 10px; min-height: 72px; padding: 12px 0 2px; } .metric-dot { width: var(--size); height: var(--size); border-radius: 50%; background: color-mix(in srgb, var(--teal) 34%, var(--card)); border: 1px solid var(--teal); box-shadow: 0 0 0 6px var(--teal-soft); } .mini-bars { display: grid; gap: 8px; } .mini-bars div { display: grid; grid-template-columns: minmax(88px, 120px) 1fr 42px; gap: 8px; align-items: center; font-size: 12px; color: var(--mute); } .mini-bars b { display: block; height: 10px; min-width: 4px; border-radius: 999px; background: var(--teal); } .mini-bars em { font-style: normal; color: var(--fg); text-align: right; } .mini-ring { width: 120px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; text-align: center; background-image: conic-gradient(var(--teal) calc(var(--pct) * 1%), var(--line) 0); position: relative; } .mini-ring::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--card); } .mini-ring b, .mini-ring span { position: relative; z-index: 1; } .mini-ring b { font-size: 18px; } .mini-ring span { grid-row: 2; margin-top: -34px; color: var(--mute); font-size: 12px; } @media (max-width: 1000px) { .mix-stage-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mix-hero, .mix-stage-head, .mix-ops-grid { grid-template-columns: 1fr; } .mix-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mix-cost-fields, .mix-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mix-stage-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mix-stage-actions { align-items: stretch; flex-direction: column; } .mix-form-row, .mix-cost-fields, .mix-channel-list, .mix-kpi-grid { grid-template-columns: 1fr; } } /* My 페이지 */ .mypage-shell { display: grid; gap: 16px; } .mypage-account-stack { display: grid; gap: 16px; } .mypage-title { display: grid; gap: 0; margin: 0 0 2px; } .mypage-title h1 { margin: 0 0 8px; font-size: 28px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .mypage-title .lead { margin: 0 0 8px; max-width: 720px; } .mypage-hero { display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--card); } .eyebrow { margin: 0 0 8px; color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .08em; } .my-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .my-summary-grid div { min-height: 76px; display: grid; align-content: center; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .my-summary-grid b { font-size: 22px; line-height: 1.15; font-weight: 600; } .my-summary-grid span { color: var(--mute); font-size: 12px; } .mypage-block { margin: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .mypage-block h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0; } .mypage-block h3 { margin: 0; font-size: 15px; letter-spacing: 0; } .mypage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .mytag, .myhint, .my-step { flex: none; font-size: 12px; line-height: 1; color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; background: var(--bg); } .mytag { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 42%, var(--line)); background: var(--teal-soft); } .my-kv { grid-template-columns: 140px minmax(0, 1fr); align-items: center; margin: 4px 0 18px; } .my-kv dd { min-width: 0; overflow-wrap: anywhere; font-size: 14px; font-weight: 500; } .my-form { display: grid; gap: 12px; } .my-form label { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; color: var(--mute); font-size: 12.5px; } .my-form label span { min-width: 0; } .my-form input { width: 100%; min-width: 0; height: 42px; font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; } .my-form input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); } .my-form .my-actions, .my-form #myPwMsg { margin-left: 152px; } .my-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; } .my-actions .btn[disabled], .support-card[disabled], .terms-grid .btn[disabled] { border-style: dashed; } .credit-grid, .plan-grid, .report-grid, .support-grid, .terms-grid { display: grid; gap: 10px; } .credit-overview { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); align-items: center; gap: 14px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); } .credit-overview .credit-meter { width: min(100%, 150px); justify-self: center; } .credit-overview > div:last-child { display: grid; gap: 5px; min-width: 0; } .credit-overview > div:last-child b { font-size: 20px; font-weight: 600; } .credit-overview > div:last-child span { color: var(--mute); font-size: 13px; line-height: 1.55; } .credit-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 12px; } .credit-grid div { display: grid; gap: 4px; min-height: 76px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .credit-grid span { color: var(--mute); font-size: 12px; } .credit-grid b { font-size: 18px; font-weight: 600; } .usage-table { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .usage-table [role="row"] { display: grid; grid-template-columns: 1fr 1fr 90px 90px; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13px; } .usage-table [role="row"]:last-child { border-bottom: 0; color: var(--mute); } .usage-table [role="row"]:first-child { background: var(--bg); color: var(--fg); } .my-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; color: var(--mute); font-size: 12px; } .my-toolbar span { border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; background: var(--bg); } .my-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .my-history-list .utt { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .my-history-list .utt b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; } .my-history-list .utt div { min-width: 0; display: grid; gap: 3px; } .my-history-list .utt div span { min-width: 0; color: var(--mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-actions { margin-top: 12px; } .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .plan-card, .report-card { display: grid; align-content: space-between; gap: 12px; min-height: 160px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .plan-card > b { font-size: 20px; font-weight: 600; } .plan-card p, .report-card p { margin: 0; color: var(--mute); font-size: 13px; } .billing-card { border-color: color-mix(in srgb, var(--teal) 22%, var(--line)); } .billing-card .plan-card { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--plan-accent) 54%, var(--line)); background: var(--card); } .billing-card .plan-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--plan-accent); } .billing-card .plan-card > * { position: relative; } .billing-card .plan-tone-1 { --plan-accent: #5eead4; } .billing-card .plan-tone-2 { --plan-accent: #fbbf24; } .billing-card .plan-tone-3 { --plan-accent: #818cf8; } .billing-card .plan-card .myhint { color: var(--plan-accent); border-color: color-mix(in srgb, var(--plan-accent) 58%, var(--line)); background: color-mix(in srgb, var(--plan-accent) 13%, var(--card)); } .billing-card .plan-card > b { color: var(--plan-accent); text-shadow: 0 0 18px color-mix(in srgb, var(--plan-accent) 36%, transparent); } .billing-card .plan-card .btn { border-color: color-mix(in srgb, var(--plan-accent) 42%, var(--line)); background: color-mix(in srgb, var(--plan-accent) 8%, var(--card)); } .billing-card .my-policy-note { border-color: color-mix(in srgb, var(--amber) 46%, var(--line)); background: color-mix(in srgb, var(--amber) 8%, var(--card)); } .report-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .report-card .my-actions { justify-content: space-between; } .support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .support-card { min-height: 116px; display: grid; gap: 6px; align-content: start; padding: 15px; text-align: left; font: inherit; color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); cursor: not-allowed; } .support-card span { color: var(--mute); font-size: 12.5px; } .support-card em { align-self: end; color: var(--teal); font-size: 12px; font-style: normal; } .terms-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .policy-list { margin: 0; padding-left: 18px; color: var(--mute); } .policy-list li + li { margin-top: 6px; } .my-policy-note { margin-top: 12px; } .mypage-withdraw-host { display: contents; } @media (max-width: 720px) { .sect.two, .pc-row { grid-template-columns: 1fr; } } @media (max-width: 980px) { .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mypage-hero, .plan-grid, .report-grid, .support-grid { grid-template-columns: 1fr 1fr; } .credit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .my-history-list .utt { grid-template-columns: 1fr; align-items: start; } .my-step { justify-self: start; } } @media (max-width: 560px) { .metric-strip, .credit-overview { grid-template-columns: 1fr; } .mypage-hero, .my-summary-grid, .plan-grid, .report-grid, .support-grid, .credit-grid { grid-template-columns: 1fr; } .mypage-hero { padding: 20px; } .usage-table [role="row"] { grid-template-columns: 1fr; } .my-kv, .my-form label { grid-template-columns: 1fr; gap: 6px; } .my-form .my-actions, .my-form #myPwMsg { margin-left: 0; } } /* 좁은 폭에서는 상태 줄을 접고 경과를 다음 줄 왼쪽에 둔다 — 오른쪽 끝으로 밀면 본문과 멀어져 같이 읽히지 않는다 */ @media (max-width: 560px) { .status { flex-wrap: wrap; } .status > span:not(.dot):not(.elapsed) { flex: 1 1 0; min-width: 0; } /* 점 옆에 붙어 남은 폭 안에서 접히게 한다 */ .status .elapsed { flex-basis: 100%; margin-left: 18px; } /* 본문이 폭을 다 쓰고, 경과는 아래 줄로 내린다 */ } /* 명령 팔레트(Ctrl+K) — 모달 막 위에 목록 카드. 활성 항목은 색만이 아니라 윤곽선으로도 구분한다 */ .cmdk { align-items: flex-start; padding-top: 12vh; } .cmdk-card { width: min(560px, 100%); gap: 8px; padding: 12px; } .cmdk-input { width: 100%; font-size: 15px; } .cmdk-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; display: grid; gap: 2px; } .cmdk-item { padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--fg); } .cmdk-item small { color: var(--mute); margin-left: 6px; } .cmdk-item.is-active { background: var(--bg); outline: 1px solid var(--line); } .cmdk-item[aria-disabled="true"] { color: var(--mute); cursor: default; opacity: .6; } .cmdk-empty { padding: 9px 11px; color: var(--mute); } /* 장치 E 봉인 카드 — 서버가 입장 저장을 알리기 전에는 점선으로 닫혀 있다 */ .seal-cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .seal-card { min-height: 88px; } .seal-card.is-sealed { border-style: dashed; color: var(--mute); display: flex; align-items: center; justify-content: center; } .seal-card.is-open p { margin: 6px 0 0; } @media (prefers-reduced-motion: no-preference) { .seal-card.is-open { animation: seal-open .24s ease-out both; } } @keyframes seal-open { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } } /* STEP 6 하위 탭 · 장치 J 시나리오 3열과 가지 */ .tabs { gap: 6px; margin-bottom: 12px; } .scen-vars { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .scen-vars input[type="range"] { width: 100%; } .scen-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 720px) { .scen-cols { grid-template-columns: 1fr; } } .scen-col h3 { font-size: 12px; color: var(--mute); margin: 10px 0 4px; font-weight: 500; } .scen-col ul, .branch ul { margin: 0; padding-left: 18px; } .price-note { margin: 6px 0 0; } .branch-row { align-items: start; } .chip.branch-badge { border-color: var(--amber); } /* 장치 M 비교 · 장치 P 읽기 전용 공유 */ .cmp-side .rep-body { max-height: 60vh; overflow: auto; } .share-status { margin-bottom: 12px; } /* 장치 F 입장 변화·지표 · 장치 G 관중 누적 — 값이 없는 지표는 점선 빈 칸이다 */ .metric-v { font-weight: 600; margin-right: 6px; } .metric-v.is-empty { display: inline-block; min-width: 3.5em; height: 1.2em; border: 1px dashed var(--line); border-radius: 4px; vertical-align: middle; margin-right: 6px; } .post-round, .aud-group { margin-top: 12px; } .post-metrics, .aud-progress { gap: 6px 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .post-list { list-style: none; margin: 8px 0 0; padding: 0; } .post-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--line); } .post-row .mute { color: var(--mute); } .aud-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; } .aud-accept .empty-cell { flex: 1 1 100%; } .live-age { margin-top: 6px; font-variant-numeric: tabular-nums; } .live-age .metric-v.is-empty { display: inline-block; min-width: 3em; }