/* 오하 전문검사 — 화면 스타일 + 인쇄(A4) 스타일. 색은 tokens.css 값만 사용. */ /* 디자인 원본(_design_src/오하_전문검사 보고서 추가_2026.09/app/pro.css)을 그대로 포팅. devplan28 part003에서는 .pbar-* .fbar-* .dom-* .keep .trend-*만 실제로 쓰인다 — .pulse-line .a4-* .printhint .prev-* 등은 devplan29(분석·인쇄 화면)에서 쓸 클래스라 아직 매칭되는 마크업이 없어 죽은 규칙이지만, "그대로 포팅"(design_map §46) 지침에 따라 파일을 쪼개지 않고 원본 그대로 둔다. .pro-toast는 devplan29 part003(추천 링크 복사)부터 실제로 쓰기 시작했다 — position만 아래에서 보강한다(바로 아래 주석 참고). */ .pro-wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 32px; } @container app (max-width: 720px) { .pro-wrap { padding:0 20px; } } .pro-narrow { max-width:720px; } .pro-read { max-width:600px; } /* 한 줄 45~50자 */ .keep { word-break:keep-all; overflow-wrap:break-word; } .tnum { font-variant-numeric: tabular-nums; } /* ---------- 결과보고서 머리말의 두 버튼(분석보고서 · 인쇄 / PDF 저장) — w1 #4237 ---------- */ /* [높이 44px → 40px] 폴이 "이 두 버튼만" 40px로 내려 달라고 했다. app.css의 .btn-md는 `padding:11px 20px; font-size:15px; min-height:44px`이고 .btn 기본이 line-height:1이라, 글자만 있으면 내용 높이가 15+22=37px이다(아이콘이 18px인 인쇄 버튼은 18+22=40px). 어느 쪽이든 내용 높이는 40px 이하라서 min-height만 40px로 내리면 두 버튼 높이가 정확히 40px로 같아진다 — padding은 건드릴 필요가 없다. ★ 전역 .btn-md(44px)는 건드리지 않는다. 지난 차수에 손가락 터치 영역 때문에 일부러 44px로 올린 값이고, 이번 요청은 이 두 버튼 한정이다. ★ 선택자를 `.reflection .btn-md`로 쓰지 않은 이유: .reflection은 landing.php·result.php·result_multi.php에서도 쓰여서 엉뚱한 버튼까지 작아진다. 그래서 마크업(result_profile.php 머리말의 버튼 묶음)에 전용 클래스 .pro-head-actions를 달고 그 안으로만 한정했다. ★ 구체성 `.pro-head-actions .btn-md`(0,2,0)가 app.css의 `.btn-md`(0,1,0)보다 높아서 두 파일의 로딩 순서와 상관없이 이긴다. */ .pro-head-actions .btn-md { min-height:40px; } /* [폰에서 두 버튼을 한 줄에] 폰(글 영역 약 300px)에서는 "분석보고서 →"와 "인쇄 / PDF 저장" 합이 약 378px이라 두 줄로 쌓여 버튼이 더 커 보였다. 그래서 인쇄 버튼의 글자를 두 span으로 나눠 두고(마크업은 result_profile.php) 폰에서는 짧은 "인쇄"만 보이게 한다. 데스크톱은 지금처럼 전체 글자가 보인다. 기준은 이 파일의 다른 좁은 화면 규칙과 같은 컨테이너 쿼리(app, 560px 이하)다. ★ 이 컨테이너 쿼리는 일부러 새 블록으로 따로 뒀다 — 아래 "폰에서의 인쇄 미리보기" 블록은 인쇄 미리보기 전용이라 여기에 합치지 않는다. ★ 구체성 함정(컨테이너 쿼리는 구체성을 올려 주지 않는다)에는 걸리지 않는다: .pro-lbl-wide / .pro-lbl-phone은 이 파일에 다른 규칙이 없는 새 클래스이고, 같은 구체성(0,1,0)끼리는 소스에서 뒤에 있는 쪽이 이기는데 아래 쿼리 안의 규칙이 기본 규칙(.pro-lbl-phone { display:none })보다 뒤에 있다. */ .pro-lbl-phone { display:none; } @container app (max-width: 560px) { .pro-lbl-wide { display:none; } .pro-lbl-phone { display:inline; } } /* ---------- 백분위 막대 ---------- */ /* [세로 맞춤 — w1 #4156] 막대 아래에 양 끝 줄이 붙으면서 .pbar-main(막대 + 양 끝 줄)이 이름·점수보다 키가 커졌다. 예전처럼 align-items:center로 두면 이름·점수가 "막대+양 끝 줄" 덩어리의 한가운데(= 막대보다 아래)에 앉아 막대와 어긋난다. 그래서 세 칸을 위쪽에 붙이고(align-items:start), 이름·점수의 줄 높이를 --pbar-line으로 못 박은 뒤, 막대에는 같은 값에서 계산한 margin-top을 줘서 "이름 첫 줄의 가운데 = 막대의 가운데 = 점수 첫 줄의 가운데"가 되게 했다. --pbar-track-h는 막대 높이의 단일 출처다(.pbar-track이 이 값을 쓴다) — 인쇄(.a4)에서는 아래에서 두 변수를 함께 줄인다. */ .pbar-row { --pbar-line:22px; --pbar-track-h:12px; display:grid; grid-template-columns:96px 1fr 132px; align-items:start; gap:16px; padding:14px 0; } .pbar-row + .pbar-row { box-shadow:0 -1px 0 var(--border-hairline); } .pbar-name { font-weight:600; font-size:15px; line-height:var(--pbar-line); } .pbar-main { min-width:0; } /* 1fr 칸 안에서 양 끝 글이 길어도 칸을 밀어내지 않고 줄바꿈되게 */ .pbar-main .pbar-track { margin-top:calc((var(--pbar-line) - var(--pbar-track-h)) / 2); } .pbar-track { position:relative; height:var(--pbar-track-h, 12px); border-radius:var(--radius-pill); background:var(--surface-section); overflow:hidden; } .pbar-fill { position:absolute; left:0; top:0; bottom:0; border-radius:var(--radius-pill); background:var(--brand-primary); transition:width var(--motion-slow); } .pbar-mid { position:absolute; left:50%; top:-3px; bottom:-3px; width:1px; background:var(--border-subtle); } .pbar-meta { text-align:right; } .pbar-top { font-size:15px; font-weight:700; color:var(--brand-primary); line-height:var(--pbar-line); } .pbar-band { font-size:12.5px; color:var(--fg-secondary); margin-top:2px; } /* 양 끝 표현 줄 — 왼쪽 글 = 점수 낮은 쪽, 오른쪽 글 = 높은 쪽(Traits가 값을 들고 있다, partials/pct_bar.php 참고). 막대와 같은 칸(.pbar-main) 안에 있으므로 막대의 좌우 끝과 자동으로 같은 범위다. 글이 길어 한 줄에 안 들어가면 두 글이 각자 줄바꿈된다(왼쪽 글은 왼쪽 정렬, 오른쪽 글은 오른쪽 정렬). [화면 가독성 — w1 M-05] 실측에서 글자가 작고(12px) 흐렸다(--fg-tertiary는 흰 바탕 대비 3.2~3.4 — 본문 글자 기준 4.5에 못 미친다). 그래서 이 줄만 글자를 12.5px로 키우고 색을 --fg-secondary(흰 바탕 대비 6.4)로 올렸다. ★ 색을 고친 곳은 이 클래스 하나뿐이다. --fg-tertiary 토큰 자체를 어둡게 하거나 다른 클래스의 색을 같이 바꾸지 않은 이유: 토큰을 바꾸면 그 색을 쓰는 모든 화면(보조 문구·날짜·빈 상태 등)이 한꺼번에 달라져 영향 범위를 가늠할 수 없다. 전역 대비 개선은 별건이라 이번에는 범위를 "양 끝 줄 두 클래스"로 좁혔다. ★ 인쇄 크기는 그대로다: 아래 `.a4 .pbar-ends { font-size:10px }`(선택자 구체성 0,2,0)가 이 규칙(0,1,0)을 항상 이긴다. 인쇄 글자가 커지면 결과보고서가 2장에서 3장이 되므로, 이 규칙의 font-size를 키울 때는 반드시 그 인쇄 규칙이 살아 있는지 같이 본다. (글자 색은 @media print의 `.pbar-ends, .fbar-ends { color:#555 !important }`가 인쇄에서 따로 정한다.) */ .pbar-ends { display:flex; justify-content:space-between; gap:12px; margin-top:4px; font-size:12.5px; line-height:1.4; color:var(--fg-secondary); } .pbar-ends > :last-child { text-align:right; } @container app (max-width: 560px) { .pbar-row { grid-template-columns:1fr auto; grid-template-areas:"name meta" "main main"; gap:8px 12px; } .pbar-name { grid-area:name; } .pbar-meta { grid-area:meta; } .pbar-main { grid-area:main; } .pbar-main .pbar-track { margin-top:0; } /* 막대가 자기 줄로 내려오면 줄 높이 맞춤용 위쪽 여백은 필요 없다 */ .pbar-band { font-size:12px; } /* [인쇄 결과보고서 "한눈에 보기" 폰 우측 공백] 위 `.pbar-row`의 2칸짜리 배치("name meta" "main main")는 폰에서 잘 먹는데, 인쇄 화면(.a4) 안에서는 열 정의가 따로 이긴다: 아래쪽 `.a4 .pbar-row { grid-template-columns:58px 1fr 104px }`가 선택자 구체성 0,2,0이라 위 `.pbar-row`(0,1,0)의 열을 덮어쓴다. 배치 이름(grid-template-areas)은 덮어쓰는 쪽이 없어 그대로 남으므로 "3열 위에 2칸짜리 배치"가 얹혀 세 번째 열(104px)이 빈 채로 남았다(오른쪽 공백). 그래서 열만 다시 2열(이름 ··· 점수 / 막대)로 맞춘다. ★ 선택자를 `.a4 .pbar-row`가 아니라 `.a4-wrap .a4 .pbar-row`(0,3,0)로 쓴 이유: 구체성이 같으면(0,2,0 대 0,2,0) 소스에서 뒤에 있는 쪽이 이기는데, `.a4 .pbar-row`는 이 블록보다 아래(".a4" 구역)에 있어서 같은 구체성으로는 진다. 컨테이너 쿼리는 구체성을 올려 주지 않는다. 바깥에 `.a4-wrap`(인쇄 두 화면 모두 `.a4`의 부모)을 하나 붙여 구체성으로 확실히 이기게 했다. ★ 글자 크기(.a4 .pbar-name 11.5px · .pbar-top 11px · .pbar-band·.pbar-ends 10px)와 행 간격(.a4의 gap 12px·padding 7px)은 그대로 둔다 — 인쇄 크기 기준이라 폰에서도 바꾸지 않는다. 인쇄(종이, 폭 약 673px)에서는 이 쿼리(560px 이하)가 켜지지 않아 3열이 그대로다. */ .a4-wrap .a4 .pbar-row { grid-template-columns:1fr auto; } } /* 하위요인 (작은 막대) */ /* [세로 맞춤 — w1 #4156] 결 막대(.pbar-*)와 같은 방식: 세 칸을 위에 붙이고 이름·점수의 줄 높이(--fbar-line)를 못 박은 뒤 막대에 같은 값에서 계산한 margin-top을 줘서 이름·막대·점수의 가운데 높이를 맞춘다. 하위요인은 한 결에 6개씩 줄이 많아서 예전(padding 9px)보다 위아래 간격을 줄였다(양 끝 줄이 붙어 줄 하나가 커진 만큼 영역이 과하게 길어지지 않게). --fbar-track-h는 막대 높이의 단일 출처다 — 인쇄(.a4-dom)에서는 아래에서 두 변수를 함께 줄인다. */ .fbar { --fbar-line:18px; --fbar-track-h:8px; display:grid; grid-template-columns:108px 1fr 70px; align-items:start; gap:12px; padding:6px 0; } .fbar-main { min-width:0; } .fbar-main .fbar-track { margin-top:calc((var(--fbar-line) - var(--fbar-track-h)) / 2); } .fbar-track { height:var(--fbar-track-h, 8px); border-radius:var(--radius-pill); background:var(--surface-section); position:relative; overflow:hidden; } .fbar-fill { position:absolute; inset:0 auto 0 0; border-radius:var(--radius-pill); background:var(--blue-400); } /* [하위요인 이름 진하게 — w1 #4237-4] 이름과 양 끝 표현(.fbar-ends, 12px · --fg-secondary)의 굵기·색이 같아 어느 쪽이 이름인지 구분이 안 됐다. 그래서 이름만 굵게(600) · 진한 색(--fg-primary)으로 올렸다. .fbar-ends는 지난 차수에 대비를 맞춰 둔 값이라 그대로 둔다. ★ 이 변화는 화면(.dom-card 안)만 의도한 것이다. 종이(인쇄·인쇄 미리보기)는 아래 `.a4-dom .fbar-name`이 예전 값(400 · --fg-secondary)으로 못 박아 둔다. ★ 560px 이하의 `.dom-card .fbar-name { font-size:13px }`는 굵기·색을 건드리지 않으므로 이 변화를 그대로 물려받는다 — 의도한 동작이다. */ .fbar-name { font-size:13.5px; line-height:var(--fbar-line); font-weight:600; color:var(--fg-primary); } .fbar-val { font-size:13px; line-height:var(--fbar-line); font-weight:600; text-align:right; color:var(--fg-primary); } /* 양 끝 표현 줄 — 왼쪽 글 = 점수 낮은 쪽, 오른쪽 글 = 높은 쪽(Traits가 값을 들고 있다, partials/facet_bar.php 참고). 결 막대(12.5px)보다 반 단계 작게(12px) — 하위요인이 한 결에 6개씩 있어 세로가 늘어나는 걸 줄이려는 값이다. [화면 가독성 — w1 M-05] 예전 값은 11px·--fg-tertiary(대비 3.2~3.4)라 작고 흐렸다. 12px로 키우고 색을 --fg-secondary로 올렸다. 세로는 하위요인 29줄 × 약 1px만큼 늘지만 화면에서는 문제없다. ★ 색은 이 클래스(와 위 .pbar-ends) 두 곳만 고쳤다. --fg-tertiary 토큰은 건드리지 않았다 — 토큰을 바꾸면 그 색을 쓰는 모든 화면이 같이 달라지므로, 전역 대비 개선은 별건으로 남기고 이번 범위를 이 두 클래스로 좁혔다. ★ 인쇄 크기는 그대로다: 아래 `.a4-dom .fbar-ends { font-size:10px }`(구체성 0,2,0)가 이 규칙(0,1,0)을 항상 이긴다. 여기 font-size를 더 키우면 인쇄가 커져 결과보고서 쪽수가 늘 수 있으니, 바꿀 때는 그 인쇄 규칙이 이기는지부터 확인한다. */ .fbar-ends { display:flex; justify-content:space-between; gap:8px; margin-top:2px; font-size:12px; line-height:1.3; color:var(--fg-secondary); } .fbar-ends > :last-child { text-align:right; } /* 좁은 화면(웹 영역 카드 안): 예전처럼 3열을 유지하면 막대가 90px 안팎까지 줄어서 양 끝 글(각 80~100px)이 들어갈 자리가 없다. 결 막대(.pbar-row)의 좁은 화면 배치와 같게 "이름 ··· 점수 / 막대 + 양 끝 줄" 두 줄로 쌓는다. .dom-card 안으로 한정한 이유: 인쇄 미리보기(.a4-dom .fbar)는 아래에서 자기 3열 값을 따로 정하고, 이 쌓기 규칙이 섞이면 안 된다. */ @container app (max-width: 560px) { .dom-card .fbar { grid-template-columns:1fr auto; grid-template-areas:"name val" "main main"; gap:4px 8px; } .dom-card .fbar-name { grid-area:name; font-size:13px; } .dom-card .fbar-val { grid-area:val; font-size:12.5px; } .dom-card .fbar-main { grid-area:main; } .dom-card .fbar-main .fbar-track { margin-top:0; } } /* ---------- 영역 펼치기 카드 ---------- */ .dom-card { background:var(--surface-elevated); border-radius:var(--radius-card); box-shadow:var(--shadow-1); overflow:hidden; } .dom-card + .dom-card { margin-top:10px; } /* [아이폰에서 영역(결) 이름·화살표가 파랗게 보이던 것 — w1 #4237-3] .dom-head는