/* EXESALUS 사용자 클라이언트. 디자인 시스템. * * 참조 프론트의 디자인 언어를 계승함: 주색 #0969ff, 넉넉한 라운드. * Pretendard 는 SIL OFL 오픈폰트라 직접 반입함(assets/fonts/ · CDN 미사용). * 모바일 우선. 이 화면은 이후 안드로이드 앱으로 이전됨. */ /* ── Pretendard 반입 ───────────────────────────────────── * 참조본 디자인 언어가 전제하는 글꼴임. CDN 이 아니라 파일로 반입함. 키오스크가 * 오프라인일 수 있고 외부 참조를 두지 않는다는 원칙 때문임(frontend/CLAUDE.md). * SIL OFL 1.1 · 원문은 assets/fonts/LICENSE-Pretendard.txt 에 동봉함. * font-display: swap. 폰트 적재를 기다리며 화면이 비어 있는 시간을 만들지 않음. */ @font-face { font-family: "Pretendard"; src: url("./assets/fonts/Pretendard-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("./assets/fonts/Pretendard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("./assets/fonts/Pretendard-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Pretendard"; src: url("./assets/fonts/Pretendard-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* 참조본(exesalus.com)의 Mantine `myColor` 램프 원문. 주색 인덱스 6 이 #0969ff 임. * 종전에는 3개만 두었는데 랜딩·차트에서 중간 단계가 필요해 전 단계를 가져옴. */ --p0: #e5f4ff; --p1: #cde2ff; --p2: #9bc2ff; --p3: #64a0ff; --p4: #3984fe; --p5: #1d72fe; --p6: #0969ff; --p7: #0058e4; --p8: #004ecc; --p9: #0043b5; --primary: var(--p6); --primary-dark: var(--p8); --primary-soft: var(--p0); --bg: #f5f7fa; --surface: #ffffff; --border: #e5e9f0; /* 장식용 구분선. 비텍스트 대비 요건 대상 아님 */ /* 조작 요소의 경계는 그 자체가 정보임(입력란이 어디까지인지). WCAG 1.4.11 이 3:1 을 * 요구하므로 장식 구분선과 **다른 토큰**으로 분리함. 측정 3.27:1. */ --border-strong: #868f9c; --text: #1a1d23; --text-dim: #575f6b; /* 종전 #6b7684 은 페이지 배경에서 4.3:1 로 미달이었음 */ /* 상태색은 **채움용과 텍스트용을 분리**함. 원래 값(#12b886·#f08c00)은 흰 배경에서 * 2.5:1 수준이라 글자로 쓰면 읽히지 않음. 밝은 값을 버리지 않고 용도를 나눔. */ --good: #12b886; --good-text: #087f5b; --warn: #f08c00; --warn-text: #a35200; /* 연한 바탕. 종전에는 배지마다 생 색상값이 흩어져 있어(`#e6f7ee`·`#ffecec`) 새 칩을 * 만들 때 값을 베껴 쓰게 되고, 대비 검사도 그 조합을 보지 못했음. 토큰으로 모음. */ --good-soft: #e6f7ee; --warn-soft: #fff3e0; --danger-soft: #ffecec; --danger: #d12b2b; /* 종전 #e03131 은 페이지 배경에서 4.21:1 */ /* 링크·강조 **글자**용 주색. 채움용 --primary(#0969ff)는 연한 배경에서 4.37:1 로 * 미달이라 글자에 쓸 수 없음. 버튼 배경 등 채움은 그대로 --primary 를 씀. */ --primary-text: var(--p7); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.04); --appbar-h: 52px; /* 타입 스케일. 종전에는 화면마다 px 를 직접 박아 128개 선언이 제각각이었음. 본문을 15px→16.5px 로 올림(고령 이용자 대상 요건, 목표는 17px 이상 단계 도입). */ /* 글자 크기 3단 토글. 배율 하나로 전 단계를 함께 옮김 — * 단계마다 6개 값을 따로 적으면 한 곳을 빠뜨려 비율이 깨짐. * `data-fs` 가 root 에 붙으면 이 배율만 바뀌고 아래 계산식이 따라감. * 보통(기본) 1.0 · 크게 1.12 · 아주 크게 1.26 * 배율을 1.3 이상으로 올리지 않는 이유: 390px 폭에서 버튼 문구가 두 줄로 넘어가 * 손가락 타겟 배치가 깨짐(렌더 실측으로 확인함). */ --fs-scale: 1; --fs-xs: calc(13.5px * var(--fs-scale)); --fs-sm: calc(15px * var(--fs-scale)); --fs-base: calc(17px * var(--fs-scale)); /* 고령 이용자 요건. 목표치 도달 */ --fs-md: calc(18px * var(--fs-scale)); --fs-lg: calc(21px * var(--fs-scale)); --fs-xl: calc(26px * var(--fs-scale)); /* 간격 스케일. 종전 0개. 리듬이 없어 화면마다 여백이 달랐음 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* 아이콘. 인라인 SVG(js/icons.js). 이모지·기하문자를 대체함 */ /* 글자 옆에 붙는 최소 크기. 게시판 메타(상대시각·댓글 수)·이메일 줄에 씀. * 없어서 사고가 났음 — `icon-xs` 클래스가 정의되지 않아 SVG 가 크기 없이 렌더되어 * 카드 하나를 다 차지했고, 옆의 글자는 폭이 없어 한 글자씩 세로로 쪼개졌음. * 렌더 검증(대비·타겟)은 이것을 잡지 못했고 화면을 보고서야 알았음. */ --icon-xs: 13px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 28px; --tabbar-h: 62px; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); /* Pretendard 를 앞세우고, 적재 실패 시에도 한글이 깨지지 않게 대체군을 남김. */ font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: var(--fs-base); line-height: 1.55; -webkit-text-size-adjust: 100%; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } /* ── 앱바 ─────────────────────────────────────────────── */ /* 삶의 질 '지난번 대비' 한 줄(views/casp.js compareLine) */ .casp-compare { margin: 8px 0 0; font-weight: 700; color: var(--primary-text); } /* 운동 프로그램 — 추천 목록·실행(views/program.js, docs/48 06·12번) */ .pg-filters { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; } .pg-list { display: flex; flex-direction: column; gap: 8px; } .pg-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pg-row-title { font-size: var(--fs-md); } .pg-row-sub { font-size: var(--fs-sm); color: var(--text-dim); } .pg-now { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pg-now-sub { font-size: var(--fs-sm); color: var(--text-dim); } .pg-plan-sub { font-size: var(--fs-xs); color: var(--text-dim); } /* 테스트 서버 띠(js/staging.js). 운영 주소에서는 붙지 않음 */ .staging-ribbon { padding: 6px 16px; text-align: center; background: #7a2e00; color: #fff; font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; } .appbar { position: sticky; top: 0; z-index: 20; height: var(--appbar-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); } .appbar-brand { /* 홈으로 돌아가는 상시 링크임. 글자 크기만으로는 26px 였어 규격 미달이었음 */ display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 900; letter-spacing: 0.06em; /* 레거시 로고(아령 + EXESALUS)는 본문색이었음(2026-10-01 복원, ADR-175). * 종전에는 글자만 주색이었고 아령이 없었음. */ color: var(--text); text-decoration: none; font-size: 18px; /* 종전에는 '사용자' 칩이 오른쪽을 밀어냈음. 칩을 걷어 내면서 그 역할을 로고가 맡음 */ margin-right: auto; } /* 아령 표식. 로고의 일부라 글자보다 조금 크게 둠 */ .brand-mark { width: 1.35em; height: 1.35em; stroke-width: 2; } .appbar-role { font-size: var(--fs-xs); color: var(--text-dim); max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 본문 폭. 종전에는 720px 고정이라 2560px 화면에서 모바일 컬럼 하나가 회색 바다에 떠 * 있었음(눈으로 확인함). 폭을 단계로 넓히되 읽는 글의 줄 길이는 지키기 위해 본문 * 텍스트 블록에는 별도 상한을 둠(`.prose`). 참조본도 `lg:max-w-`·`xl:max-w-` 로 단계를 * 두었으므로 이것이 계승 방향에 맞음. */ /* ── 기록·검사 화면 사이 바로가기 줄 ────────────────────── */ /* 옆으로 미는 대신 줄을 바꿈(main.js SECTION_LINKS 참조). 손가락 타겟 44px 을 지킴. */ .sectionnav { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; max-width: 720px; /* .outlet 과 같은 폭·여백이어야 줄이 어긋나 보이지 않음 */ margin: 0 auto; } @media (min-width: 1024px) { .sectionnav { max-width: 960px; padding: 18px 22px 0; } } @media (min-width: 1440px) { .sectionnav { max-width: 1180px; padding: 22px 26px 0; } } .chip-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-size: var(--fs-sm); } .chip-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .chip-link-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-text); font-weight: 700; } @media print { .sectionnav { display: none !important; } } /* `hidden` 속성이 실제로 감추게 함. `.sectionnav{display:flex}` 처럼 클래스가 display 를 지정하면 `[hidden]` 의 기본 `display:none` 을 이김 — 바로가기 줄을 넣자 그 줄이 없어야 하는 화면에서도 빈 띠가 12px 남았음(홈 높이가 그만큼 늘어 실측으로 잡음. 2026-09-27, ADR-171). 같은 함정을 콘솔에서 먼저 밟았고 한 시간 만에 이쪽에서 되풀이했음. */ [hidden] { display: none !important; } .outlet { padding: 14px 14px 24px; max-width: 720px; margin: 0 auto; } @media (min-width: 1024px) { .outlet { max-width: 960px; padding: 22px 22px 32px; } } @media (min-width: 1440px) { .outlet { max-width: 1180px; padding: 26px 26px 40px; } } /* 읽는 글은 넓어져도 65자 안쪽에 두어야 함. 카드가 넓어지는 것과 글줄이 길어지는 것은 * 다른 문제임 — 폭을 늘린 뒤 약관·안내문이 한 줄 120자가 되어 읽기 어려워졌음. */ .prose { max-width: 62ch; } .view { display: flex; flex-direction: column; gap: 14px; } /* ── 카드 ─────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px 0; } .card-head h2 { font-size: 14px; font-weight: 700; color: var(--text-dim); letter-spacing: 0.01em; } .card-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 12px; } /* ── 통계 ─────────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-label { font-size: var(--fs-xs); color: var(--text-dim); } .stat-value { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .stat-sub { font-size: var(--fs-xs); color: var(--text-dim); min-height: 1em; } /* ── 주간 캘린더 ──────────────────────────────────────── */ .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: var(--radius-sm); background: var(--bg); } .day-done { background: var(--primary-soft); } .day-label { font-size: var(--fs-xs); color: var(--text-dim); } .day-dot { font-size: var(--fs-xs); color: var(--border); } .day-done .day-dot { color: var(--primary-text); } /* ── 버튼 ─────────────────────────────────────────────── */ .btn { appearance: none; /* 높이는 전역 접근성 절에서 44px 를 보장하고, 폭은 여기서 둠: * 짧은 문구 버튼(예: '1')이 43px 로 1px 미달이었음 */ min-width: 44px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 11px 16px; font: inherit; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-block { display: block; width: 100%; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--primary-dark); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-text); } .btn-danger { background: var(--surface); color: var(--danger); border-color: var(--border-strong); } .btn-danger:hover:not(:disabled) { border-color: var(--danger); } .cta { display: flex; flex-direction: column; gap: 8px; } .quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } /* ── 폼 ───────────────────────────────────────────────── */ /* 체크·라디오는 라벨 전체가 타겟임(브라우저가 라벨 클릭을 입력에 전달함). 그런데 라벨에 * 스타일이 없으면 인라인 높이(약 21px)라 실제 타겟이 규격에 미달함. 라벨을 규격의 주체로 * 삼고, 상자 자체도 24px 로 키워 눈으로 찾기 쉽게 함(기본값은 13px). */ .opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 0; cursor: pointer; } .opt input[type="checkbox"], .opt input[type="radio"] { width: 24px; height: 24px; flex: none; accent-color: var(--primary); } .field { display: flex; flex-direction: column; gap: 5px; } .field-label { font-size: var(--fs-xs); color: var(--text-dim); font-weight: 600; } .input { width: 100%; /* 손가락 타겟 44px. 종전 렌더 실측이 input 42px · select 39px 였음 */ min-height: 44px; padding: 10px 12px; font: inherit; color: var(--text); background: var(--surface); /* 입력란의 경계는 "여기가 입력란"이라는 정보 자체임. 3:1 을 만족하는 토큰을 씀 */ border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .input:focus { outline: 3px solid var(--primary); outline-offset: 1px; border-color: var(--primary); } .divider { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: var(--fs-xs); } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ── 안내 ─────────────────────────────────────────────── */ .notice { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--border); background: var(--bg); } .notice-error { color: var(--danger); border-color: #ffd5d5; background: #fff5f5; } .notice-warn { color: #8a5300; border-color: #ffe8b8; background: #fff9e8; } .notice-info { color: var(--text-dim); } /* 성공·완료 상태. 경고와 색으로 확실히 구분되어야 오인이 없음. */ .notice-ok { color: #0a6b3d; border-color: #b9e6cd; background: #f0fbf5; } /* ── 운동 루틴(#/exercise/routine) ───────────────────── * 참조본은 넓은 화면에 본문·웹캠·목록을 3단으로 폈음. 모바일 세로에서는 그 폭이 없으므로 * 위에서 아래로 쌓고, 대신 **진행 상태**(몇 번째인지)를 항상 위에 고정해 보여 줌. */ .routine-bar { display: flex; align-items: center; gap: 10px; } .routine-step { font-size: 13px; font-weight: 800; color: var(--primary-text); white-space: nowrap; } .routine-track { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; } .routine-fill { width: 0; height: 100%; background: var(--primary); transition: width 0.25s ease; } /* 그만두기는 글자 단추임 — 종전 30px '×' 는 손가락 타겟 미달이고 무엇인지 글로 드러나지 않았음. */ .routine-quit { appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 999px; min-width: 44px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; flex: 0 0 auto; } .routine-quit:disabled { opacity: 0.55; cursor: default; } .routine-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; } .routine-item:last-child { border-bottom: 0; } .routine-current { background: var(--p0); border-radius: var(--radius-sm); } .routine-mark { flex: 0 0 24px; text-align: center; font-size: 13px; font-weight: 800; color: var(--text-dim); } .routine-current .routine-mark { color: var(--primary-text); } .routine-name { flex: 1; min-width: 0; word-break: keep-all; } /* ── 가입 동의(#/login) ──────────────────────────────── * 참조본은 체크박스를 주석 처리해 두어 사실상 묻지 않았음. 여기서는 반드시 보이며, * 각 문서로 가는 링크를 같은 줄에 둠(읽지 않고 동의하게 만들지 않기 위함). */ .agree-box { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; } /* 약관 동의 행. **라벨 전체가 타겟**이 되게 44px 를 보장함 — 필수 동의라 여기서 못 누르면 * 가입이 막힘. 종전에는 체크박스 18px·"보기" 링크 23x21 로 둘 다 규격 미달이었음. */ .agree { display: flex; align-items: center; gap: 10px; min-height: 44px; } .check { width: 24px; height: 24px; accent-color: var(--primary); flex: 0 0 auto; } .agree-label { flex: 1; font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; /* 라벨을 눌러도 체크되게 되어 있으므로 라벨이 실제 타겟임 */ display: flex; align-items: center; min-height: 44px; } .agree-link { font-size: var(--fs-xs); color: var(--primary-text); text-decoration: underline; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* ── 운영진 명단(#/lab) ──────────────────────────────── * 참조본은 3열 그리드에 원형 사진을 썼음. 모바일 세로가 기준이라 1열로 쌓되, 사진 * 자산이 없으므로 이름 첫 글자 표식으로 자리를 지킴(자산 확보 시 그대로 교체 가능). */ .op-grid { display: flex; flex-direction: column; gap: 14px; } .op { display: flex; gap: 12px; align-items: flex-start; } .op-face { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--p0); color: var(--p8); font-weight: 900; font-size: 18px; } /* 사진이 지정된 사람. 증명사진이라 얼굴이 위쪽에 있으므로 위 기준으로 자름 * (가운데 기준이면 이마가 잘림). */ .op-face-photo { overflow: hidden; background: var(--bg); line-height: 0; } .op-face-icon .icon { width: 26px; height: 26px; stroke-width: 1.9; } .op-face-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } .op-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .op-name { font-size: 16px; font-weight: 800; } .op-cur { font-size: 13px; font-weight: 700; color: var(--text-dim); word-break: keep-all; } .op-desc { font-size: 13px; line-height: 1.6; word-break: keep-all; } /* 이메일 줄. 긴 주소를 끊어 주되(`break-all`) **글자 쪽에 폭을 남겨야** 함 — * flex 안에서 글자 칸이 0 으로 줄면 한 글자씩 세로로 쌓임(실측으로 겪었음). */ .op-mail { font-size: var(--fs-xs); color: var(--text-dim); display: flex; align-items: flex-start; gap: 4px; } .op-mail > span { min-width: 0; word-break: break-all; } .op-mail > .icon { margin-top: 2px; } /* ── 뱃지·운동 검색(#/exercise/search) ───────────────── * 참조본은 Mantine Badge 를 썼음. 크기(size="lg")와 색 대응(저=초록·중=파랑·고=빨강)을 * 그대로 옮기되, 이 클라이언트에는 컴포넌트 라이브러리가 없으므로 클래스로 재현함. */ .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1.5; white-space: nowrap; } .badge-ok { background: var(--good-soft); color: #0a6b3d; } .badge-info { background: var(--p0); color: var(--p8); } .badge-danger { background: var(--danger-soft); color: #b42318; } .badge-plain { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); } .ex-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; } .ex-card:active { background: var(--p0); } .ex-title { font-size: 16px; font-weight: 700; line-height: 1.4; word-break: keep-all; } .ex-badges { display: flex; flex-wrap: wrap; gap: 6px; } .ex-badges-top { padding: 0 2px 4px; } /* 게시글 본문은 문단 단위로 끊어 넣음. 마크업을 넣지 않으므로 간격을 여기서 줌. */ .ex-line { margin: 0 0 8px; line-height: 1.7; word-break: keep-all; } .ex-line:last-child { margin-bottom: 0; } /* ── 월간 리포트(#/report) ───────────────────────────── * 참조본은 A4 한 장 분량의 인쇄물을 화면에 그대로 보였음. 모바일에서는 그 폭을 낼 수 * 없으므로 화면은 카드로 쌓고, 인쇄할 때만 종이 문서처럼 보이게 함. */ .sheet { display: flex; flex-direction: column; gap: 14px; } .sheet-head { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .sheet-title { margin: 0; font-size: 22px; font-weight: 900; word-break: keep-all; } .sheet-meta { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-dim); } .sheet-mark { display: flex; align-items: baseline; gap: 8px; padding-top: 4px; } .sheet-brand { font-weight: 900; color: var(--primary-text); letter-spacing: -0.02em; } .sheet-org { font-size: var(--fs-xs); color: var(--text-dim); } .sheet-foot { margin: 0; padding: 4px 2px 8px; font-size: var(--fs-xs); color: var(--text-dim); } .chart { display: block; width: 100%; } /* 리포트의 접은 기록. 기본은 닫혀 있고 인쇄 직전에 코드가 펼침(views/report.js). */ .rep-more { margin-top: 6px; } .rep-more-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--primary-text); font-size: var(--fs-sm); font-weight: 600; } .rep-more-sum::-webkit-details-marker { display: none; } .rep-more-sum:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .rep-more[open] .rep-more-sum { margin-bottom: 10px; } .rep-more-body { display: flex; flex-direction: column; gap: 10px; } /* 워치 원자료 그래프(ADR-195, js/watch-chart.js). 그래프 색은 캔버스가 정하고 여기서는 범례·표·접힘만 정함. */ .wseries { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .wseries-canvas { width: 100%; height: 210px; display: block; } .wseries-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--fs-xs); color: var(--text-dim); } .wseries-key::before { content: ''; display: inline-block; width: 16px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid; } .wseries-key-line::before { border-top-color: #0969ff; } .wseries-key-avg::before { border-top: 2px dashed #a35200; } .wseries-key-max::before { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #b42318; } .wseries-key-band::before { height: 10px; border: 1px dashed rgba(9, 105, 255, 0.5); background: rgba(9, 105, 255, 0.1); } .wseries-raw > summary, .rep-watch > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary-text); font-size: var(--fs-sm); font-weight: 600; } .wseries-raw > summary:focus-visible, .rep-watch > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .wseries-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; } .wseries-table th, .wseries-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); } .wseries-table td.num { text-align: right; } .rep-watch { margin-top: 4px; } .rep-item { padding: 12px 0; border-bottom: 1px dashed var(--border); } .rep-item:last-child { border-bottom: 0; } .rep-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rep-what { color: var(--primary-text); font-weight: 900; } .rep-when { font-size: 13px; color: var(--text-dim); } .rep-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; } .rep-score-sub { font-size: var(--fs-xs); color: var(--text-dim); } .rep-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding-top: 8px; font-size: 14px; } .rep-fact { display: flex; gap: 4px; min-width: 0; } .rep-article { margin: 8px 0 0; padding: 8px 10px; background: var(--p0); border-radius: var(--radius-sm); font-size: 14px; } .rep-actions { padding-top: 8px; } /* 실제로는 버튼임(누르면 이동함). 규격 대상. 종전 렌더 실측 117x32 였음 */ .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 16px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; } .link-row-actions { display: flex; gap: 8px; padding-top: 4px; } .badge-dark { background: #1a1d23; color: #fff; } /* 인쇄. 참조본과 같이 리포트 영역만 종이에 남김. 화면용 껍데기(앱바·탭바·버튼)를 * 함께 인쇄하면 한 장이 두 장이 되고 잉크만 씀. */ @media print { .appbar, .tabbar, .sitefoot, .cta, .btn, .link-row-actions, .field { display: none !important; } body { background: #fff; } .outlet { padding: 0; max-width: none; } .sheet { gap: 10px; } .card, .sheet-head { border: 0; box-shadow: none; break-inside: avoid; } .rep-item { break-inside: avoid; } } /* ── 설치 안내(#/download) ───────────────────────────── */ .install-box { display: flex; flex-direction: column; gap: 8px; } .tabpanel { padding-top: 10px; } .steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; } .steps li { line-height: 1.6; } .loading, .empty { font-size: 13px; color: var(--text-dim); padding: 8px 0; } .hint { font-size: var(--fs-xs); color: var(--text-dim); } /* ── 목록·칩 ──────────────────────────────────────────── */ .chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: var(--fs-xs); padding: 4px 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-dark); font-weight: 600; } .kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .kv-key { color: var(--text-dim); } .kv-value { font-weight: 600; text-align: right; } .perm-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .perm-list li { display: flex; align-items: center; gap: 8px; } .perm-mark { font-size: var(--fs-xs); } .perm-on .perm-mark { color: var(--good-text); } .perm-off { color: var(--text-dim); } .perm-off .perm-mark { color: var(--border); } /* ── 막대 ─────────────────────────────────────────────── */ .bars { display: flex; flex-direction: column; gap: 7px; } .bar-row { display: grid; grid-template-columns: 82px 1fr 46px; align-items: center; gap: 8px; } .bar-label { font-size: var(--fs-xs); color: var(--text-dim); } /* 가로 진행 막대. 종전에는 같은 구실의 `.pt-track`·`.pt-fill` 이 따로 있었음 * (포인트 화면에서 12px 로 쓰려고 새로 만든 것). 크기 변형(`.bar-lg`)으로 합침 — * 같은 모양을 두 이름으로 두면 한쪽만 고쳐 어긋남. * `.goalbar-*` 는 **세로** 막대라 합치지 않음(구실이 다름). */ .bar-track { height: 8px; background: var(--bg); border-radius: 999px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 999px; background: var(--primary); min-width: 3px; } .bar-lg { height: 12px; } .bar-good { background: var(--good-text); } .bar-mid { background: var(--primary); } .bar-low { background: var(--warn-text); } .bar-value { font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; } /* ── 로그인 ───────────────────────────────────────────── */ .view-login { padding-top: 22px; } .login-hero { text-align: center; padding: 10px 0 6px; } .login-title { font-size: 30px; font-weight: 800; color: var(--primary-text); letter-spacing: 0.04em; } .login-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; } .greeting { padding: 2px 2px 0; } .greeting-title { font-size: 21px; font-weight: 700; } .greeting-sub { font-size: 13px; color: var(--text-dim); } /* ── 하단 탭 ──────────────────────────────────────────── */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; background: var(--surface); border-top: 1px solid var(--border); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--text-dim); font-size: var(--fs-xs); } .tab-icon { font-size: 17px; line-height: 1; } .tab-active { color: var(--primary-text); font-weight: 700; } /* ── 분절 선택(강도·부위·컨디션) ──────────────────────── */ .seg { display: flex; flex-wrap: wrap; gap: 6px; } .seg-btn { flex: 1 1 auto; min-width: 62px; min-height: 44px; padding: 9px 10px; font: inherit; font-size: 13px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .seg-active { background: var(--primary-soft); color: var(--primary-dark); border-color: var(--primary); font-weight: 700; } /* 2열 격자. **고정 2열이 아니라 최소 폭을 둠** — 글자 크기를 올리면 `datetime-local` 같은 * 넓은 입력이 반 폭에 들어가지 못해 화면이 가로로 넘침(아주 크게 단계에서 실측으로 확인함). * 최소 폭에 못 미치면 1열로 접힘. */ .grid2 { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } /* 입력이 격자 칸보다 넓어지지 않게 함. `width:100%` 만으로는 내용 최소 폭이 칸을 밀어냄 */ .grid2 > .field { min-width: 0; } .grid2 .input { min-width: 0; } /* ── 실시간 채점 ──────────────────────────────────────── */ .run-head { display: flex; align-items: center; justify-content: space-between; } .timer { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text-dim); } .verdict { font-size: 15px; font-weight: 700; color: var(--text-dim); } .verdict-good { color: var(--good-text); } .verdict-bad { color: var(--warn-text); } /* 게이지: conic-gradient 로 그림. 캔버스·SVG 없이 값 하나(--v)로 갱신됨 */ .gauge { --v: 0; position: relative; width: 168px; height: 168px; margin: 4px auto 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--primary) calc(var(--v) * 360deg), var(--bg) 0); transition: background 0.2s linear; } .gauge-good { background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--good-text) calc(var(--v) * 360deg), var(--bg) 0); } .gauge-bad { background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--warn-text) calc(var(--v) * 360deg), var(--bg) 0); } .gauge-value { font-size: 40px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .gauge-label { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 2px; } .cue { text-align: center; font-size: 15px; font-weight: 600; min-height: 1.6em; } .preview { display: flex; justify-content: center; } .preview-img { width: 100%; max-width: 420px; border-radius: var(--radius-sm); background: #0e1218; } /* ── 차트 ─────────────────────────────────────────────── */ .chart { width: 100%; display: block; } .chart[hidden] { display: none; } .input-inline { width: auto; min-width: 118px; padding: 6px 10px; font-size: 13px; } /* 선택 상자(`