에 JS 로 걸었다. 우리는 JS 없이 링크로 한다 (개정 248) */
.hist .b { display:block; text-decoration:none; }
.hist .b .n { text-decoration:none; }
/* 좁은 폭에서 표가 화면을 넘지 않게 — 스크롤은 그 표 안에서만 (V11-71).
★ 스크롤바가 흰 줄로만 보이면 무엇인지 모른다 — 스크롤바로 보이게 한다
(실측 08-16 검토 16 — 「표 아래 흰 띠가 하나 있습니다」) */
@media (max-width:1099px) {
/* ★ thead 와 tbody 에 각각 display:table 을 주면 둘이 따로 폭을 정해
머리말과 값이 어긋난다 — 실측 08-16 검토 18
(「관측·매물·출처가 빈 칸이고 오른쪽에 ] 만 보인다」).
칸을 안 접게만 하면 안쪽 표가 스스로 넓어져 가로로 넘어간다.
★ 그래야 머리말과 값이 같은 표 안에서 줄을 맞춘다 */
main table td, main table th { white-space:nowrap; word-break:keep-all; }
main table {
display:block; overflow-x:auto;
scrollbar-color:var(--line2) var(--surface2);
scrollbar-width:thin;
}
main table::-webkit-scrollbar { height:8px; }
main table::-webkit-scrollbar-track {
background:var(--surface2); border-radius:12px;
}
main table::-webkit-scrollbar-thumb {
background:var(--line2); border-radius:12px;
}
}
/* 사진 — 넓으면 더 크게 (개정 281 · V11-80) */
@media (min-width:1750px) {
.thumb, .thumb-none { width:160px; height:107px; }
.rows td.photo { width:170px; }
}
/* ★ 시안의 .thumb-none(56px)이 앞에 있다. 뒤에서 덮는다 —
사진이 없는 칸도 같은 크기여야 표가 흔들리지 않는다 (V11-80) */
.thumb-none { width:128px; height:86px; font-size:11px; }
/* ── 개정 305 · 306 — 매물 화면 여섯의 공통 조작 ─────────────────────
★ 같은 것은 같은 자리 · 같은 모양 (STEP 148).
♡ 는 제목 줄에 — 훑다가 바로 담는다. 카드 끝까지 안 내려간다 */
/* ★★★★★ 08-29 (UI_REVIEW 26-1 · 시험자 119~121) — ★ 하트를 못 눌렀다.
★ `.heart` 가 `position:absolute` 인데 ★ 조상 다섯이 ★ 전부 `static` 이라
★ ★ 기준 상자가 없어 ★ 카드 밖 · 화면 최상단에 붙었다
(하트 left 358 / 카드 right 350 — 시험자 실측).
★ ★ 그 자리를 ★ `header.top`(sticky · z-index 30)이 덮어
★ 390px 에서 ★ 「로그아웃」 단추가 클릭을 가로챘다 — 30초 재시도 끝에 실패.
★ 고칠 줄 셋 (마스터가 짚어 주셨다) —
① 여기에 `z-index:5` ② 카드 겉 div 를 `.cardbody` 로 ③ 그 div 에 relative
★ `body` · `header` 는 안 건드린다 */
/* ★★★★★ 09-02 — ★ 손가락 자리는 44px 이다 (실측 09-02 — ★ 28px 이었다).
★ ★ **보이는 동그라미는 28px 그대로다** — ★ 안쪽 테두리로 그린다.
★ ★ ★ 규칙은 ★ **여기 하나뿐이다** (`S46-118` 「두 곳이면 안 된다」) */
.heart { position:absolute;top:-4px;right:-4px;width:44px;height:44px;border-radius:22px; background:transparent;border:0;color:var(--dim);cursor:pointer;font-size:14px; display:flex;align-items:center;justify-content:center; z-index:5;box-shadow:inset 0 0 0 8px var(--surface2), inset 0 0 0 9px var(--line2) }
/* ★ 하트가 기댈 ★ **기준 상자**다. ★ 이것이 없으면 하트가 화면 꼭대기로 간다 */
.cardbody { position:relative; }
.heart:hover { color:var(--amber); }
.heart.on { color:var(--amber); }
/* 사진이 없는 자리. ★ 빈 칸으로 두면 줄이 흔들린다 */
.nophoto {
display:block; width:100%; aspect-ratio:4/3; border-radius:6px;
background:var(--surface); border:1px solid var(--line);
}
/* 왜 이 순위인가 — 문장 하나 (개정 304) */
.rows td .reason { font-size:12px; color:var(--fg); white-space:normal; }
/* 시안 v2_recommend 의 진행 막대 — 한 줄에 들어가게 얇게 (개정 303) */
.rows .pbar {
display:flex; height:4px; border-radius:2px; overflow:hidden;
background:var(--line); margin-top:3px; width:100%;
}
.rows .pbar .got { background:var(--down); }
.rows .pbar .may { background:var(--line); opacity:.7; }
/* 트림 — Badge · BadgeDetail (개정 313).
★ 좁은 폭에서도 줄이지 않는다. 트림이 없으면 무슨 차인지 모른다 */
.rows td.trim { color:var(--fg); white-space:normal; }
@media (min-width:1750px) { .rows td.trim { min-width:9em; } }
.rows td.trim:empty::after { content:"—"; color:var(--dim); }
/* 뺀 것 (개정 322). ★ 무엇을 왜 뺐는지가 보여야 한다 —
0 아래로도 내려간다. 조용히 깎지 않는다 */
.minus { margin:6px 0 10px; display:flex; flex-wrap:wrap; gap:6px;
align-items:center; }
.minus b { color:var(--down); margin-right:4px; }
/* ── 부록 G 0절 — 화면별 사진 크기 (개정 332) ────────────────────────
★ 마스터 지적 — 「추천에는 이미지 너무 커」.
추천은 목록보다 작다. 한 화면에 여러 후보가 보여야 한다
★ 크기를 CSS 로 고정한다 — 이미지가 오기 전에 칸이 흔들리지 않게
★ 비율 4:3 을 지킨다. 찌그러뜨리지 않는다 */
.rows td.photo img, .rows td.photo .nophoto {
width:96px; height:72px; object-fit:cover; border-radius:12px;
display:block; background:var(--surface); border:1px solid var(--line);
}
.cand-rows td.photo img, .cand-rows td.photo .nophoto {
width:80px; height:60px;
}
@media (max-width: 1749px) {
.rows td.photo img, .rows td.photo .nophoto { width:88px; height:66px; }
.cand-rows td.photo img, .cand-rows td.photo .nophoto {
width:72px; height:54px;
}
}
@media (max-width: 639px) {
.rows td.photo img, .rows td.photo .nophoto { width:80px; height:60px; }
.cand-rows td.photo img, .cand-rows td.photo .nophoto {
width:64px; height:48px;
}
}
/* ③ 왜 싼가 — 상세 (부록 G 상세 ③절 · 개정 299).
★ 「시세차 −1,100만」만 내고 끝내지 않는다. 이유를 함께 낸다 */
.why { font-size:15px; margin:10px 0 4px; }
.why-list { margin:0 0 14px 18px; padding:0; }
.why-list li { margin:3px 0; color:var(--fg); }
/* ── 칸이 쥐어짜여 글자가 세로로 떨어지는 것을 막는다 (개정 307 · G-7)
★ 실측 08-17 — 추천 머리말이 「10건 / — E · 미판정을 뺀 후 보」로
한 자씩 떨어졌다. min-width 가 없어 칸이 0 까지 줄어든 것이다 */
.cond { flex-wrap:wrap; }
.cond .q { min-width:22em; }
.cond .n { min-width:14em; }
/* ★ 표일 때만이다. 카드(<1100)에서는 칸을 격자가 정한다 —
min-width 를 걸면 카드가 화면 밖으로 밀려 오른쪽 값이 잘린다
(실측 08-18 — 「3년 3개월 · 92천k」에서 잘렸다. min-width:9em 이
격자 칸 69px 을 94px 로 벌렸다) */
@media (min-width:1750px) {
.rows th, .rows td { min-width:3.2em; }
.rows td.trim, .rows td[data-label="딜러"] { min-width:8em; }
.rows td[data-label="제조사 보증"] { min-width:9em; white-space:nowrap; }
}
/* ★ 추천 이유는 문장이다. 좁은 폭에서도 한 칸을 통째로 쓴다 (개정 304 · G-7)
실측 08-17 — 「시세보 다 740만 싸고」로 한 자씩 떨어졌다 */
.rows td[data-label="왜 이 순위인가"] { grid-column:1 / -1; }
@media (min-width:1750px) {
.rows td[data-label="왜 이 순위인가"] { min-width:12em; }
}
.rows td[data-label="왜 이 순위인가"] .reason { white-space:normal; }
/* ══ 부록 G — 폭별 줄 수 (개정 332) ═══════════════════════════════
넓음 ≥1100 1줄 · 중간 640~1099 2줄 · 좁음 <640 6줄 (추천 8줄)
★ 도면이 부록 G 에 있다. 거기 없는 값은 그 폭에서 접는다.
22열이 다 나오는 것은 넓은 폭이다 — 좁은 폭은 규격이 골라 놨다
★ 이름표(data-label)를 좁은 폭에서 끈다. 도면에 이름표가 없다.
「연식 2024-11」이 아니라 「2024-11 · 52,176km」이다.
이름표가 폭을 먹어 값끼리 겹쳤다 (실측 08-18)
★ 격자는 12칸이다. 한 줄의 span 합이 12 를 넘으면 칸이 겹친다 */
/* ── 중간 640~1099 — 한 행 2줄 (부록 G) ──────────────────────────
1줄 사진 ♡ 등급 차종 트림 연식 주행 가격 링크
2줄 비율 · 시세대비 · 신차가대비 · 월 · 사고 · 골격 · 용도 · 보증
· 옵션 · 딜러 · 경과 */
/* ── 중간 640~1749 — 표 · 한 행 2줄 (부록 G 14장-2) ─────────────
1줄 사진 ♡ 등급 차종 트림 연식 주행 가격 링크
2줄 비율 · 시세대비 · 신차가대비 · 월 · 사고 · 골격 · 용도 · 보증
· 옵션 · 딜러 · 경과
★ 12칸에 정확히 맞춘다. 전에 act 를 grid-area:1/13/3/13 로 둬서
13번째 칸이 생겼다 — 그 칸이 「근거 엔카에서 보기 ↗」 nowrap 폭을
먹어 나머지 12칸이 쥐어짜였고 글자가 세로로 떨어졌다 (실측 08-18)
★ 이름표를 끈다. 칸이 70px 대라 「시세 대비 −14.0%」가 안 들어간다
★ 순위 · 상태 · 사이트 는 부록 G 2줄 배치에 없다 — 접는다.
넓은 폭(≥1750)과 /why 에는 그대로 있다 */
@media (min-width:640px) and (max-width:1749px) {
.car-rows td::before, .cand-rows td::before { content:""; margin:0; }
.car-rows td[data-label="시세 대비"]::before { content:"시세 ";
font-size:10px; }
.car-rows td[data-label="신차가 대비"]::before { content:"신차 ";
font-size:10px; }
/* 원값(시세 5,290만 · 신차가 6,885만 (등급 …))은 상세로.
★ 70px 칸에서 세로로 늘어져 한 행이 다섯 줄이 됐다 (실측 08-18) */
.car-rows td[data-label="시세 대비"] .raw,
.car-rows td[data-label="신차가 대비"] .raw { display:none; }
.car-rows td[data-label="순위"],
.car-rows td[data-label="상태"],
.car-rows td[data-label="사이트"] { display:none; }
.car-rows td { font-size:11.5px; }
.car-rows td.photo { grid-area:1 / 1 / 2 / 3; }
.car-rows td[data-label="관심"] { grid-area:1 / 3 / 2 / 4; }
.car-rows td[data-label="등급"] { grid-area:1 / 4 / 2 / 5; }
/* ★ 차종은 두 칸이다. 한 칸(66px)에 「KOLEOS_HEV」가 안 들어간다 */
/* ★ 차종·트림은 두 칸씩이다. 한 칸(66px)에 「KOLEOS_HEV」가 안 들어가고
트림은 네 줄로 접혀 행이 통째로 높아진다 (실측 08-18) */
.car-rows td[data-label="차종"] { grid-area:1 / 5 / 2 / 7; }
.car-rows td.trim { grid-area:1 / 7 / 2 / 9; }
.car-rows td[data-label="연식"] { grid-area:1 / 9 / 2 / 10; }
.car-rows td[data-label="주행"] { grid-area:1 / 10 / 2 / 11; }
.car-rows td[data-label="가격"] { grid-area:1 / 11 / 2 / 12;
font-weight:700; }
/* ★ 링크는 두 칸이다. 한 칸(70px)에 넣으면 「근거 / 엔카에서 / 보기 ↗」
세 줄로 접혀 행이 통째로 높아진다 (실측 08-18) */
.car-rows td.act { grid-area:1 / 12 / 2 / 13;
white-space:normal; text-align:left;
font-size:10px; line-height:1.35; }
/* 2줄 — 열한 칸이 정확히 12칸을 채운다.
★ 보증만 두 칸이다 (「3년 3개월 · 92천km」). 합이 13이 되면
한 칸이 밀려나 「못 놓았다」가 된다 (V11-109 실측 08-18) */
.car-rows td[data-label="비율"] { grid-area:2 / 1 / 3 / 2; }
.car-rows td[data-label="시세 대비"] { grid-area:2 / 2 / 3 / 3; }
.car-rows td[data-label="신차가 대비"] { grid-area:2 / 3 / 3 / 4; }
.car-rows td[data-label="월"] { grid-area:2 / 4 / 3 / 5; }
.car-rows td.ax[data-label] { grid-row:2; grid-column:span 1; }
.car-rows td.ax[data-label="제조사 보증"] { grid-column:span 2; }
.car-rows td[data-label="옵션"] { grid-area:2 / 10 / 3 / 11; }
/* ★ 상호는 띄어쓰기가 없다 — 「청운자동차매매상사」.
칸을 아무리 줘도 갈리므로 줄임표로 줄인다. 전체는 title 에 있다
(마스터 실측 08-18 「청운자동차매 / 매상사」) */
.car-rows td[data-label="딜러"] { grid-area:2 / 11 / 3 / 12;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis; }
.car-rows td[data-label="경과"] { grid-area:2 / 12 / 3 / 13; }
}
/* ── 좁음 <640 — 카드 6줄 (부록 G 도면) ─────────────────────────
1줄 [사진] S G70_20T ♡
2줄 80×60 가솔린 2.0T 4WD · 시그니처
3줄 2022-11 · 52,176km
4줄 2,670만 시세 −13.0% 신차 −49.4% ★ 가장 크다
5줄 무사고 · 골격이상없음 · 렌트 · 보증15개월 ★ 렌트는 빨강 (tone)
6줄 옵션 4종 713만 근거 엔카↗
★ 순위 · 비율 · 월 · 상태 · 딜러 · 경과 · 사이트 는 이 폭에 없다.
지운 것이 아니라 접은 것이다 — 넓은 폭과 상세에는 그대로 있다 */
@media (max-width:639px) {
/* 도면에 이름표가 없다. 값이 스스로 말한다 */
/* ★ 추천도 같다. .rows → .car-rows 로 좁힐 때 추천을 빠뜨려
이름표가 도로 살아나 카드가 8줄에서 11줄이 됐다 (실측 08-18) */
.car-rows td::before, .cand-rows td::before { content:""; margin:0; }
/* ★ 1fr 의 최소는 min-content 다. 「근거 엔카에서 보기 ↗」가
nowrap 이라 카드가 화면 밖으로 밀려 ♡ 와 보증이 잘렸다
(실측 08-18 스크린샷). 최소를 0 으로 내리고 줄바꿈을 푼다 */
.car-rows tbody, .cand-rows tbody { grid-template-columns:minmax(0, 1fr); }
.car-rows tbody td.act, .cand-rows tbody td.act { white-space:normal; }
/* ★ 사진은 네 칸이다. 세 칸(78px)에 80px 그림을 넣으면 넘쳐
등급 배지가 사진 위에 얹힌다 (실측 08-18 스크린샷)
★ 사진은 두 줄만 차지한다. 셋째 줄을 비워 트림에 폭을 통째로 준다 */
.car-rows td.photo { grid-area:1 / 1 / 3 / 5; }
.car-rows td[data-label="등급"] { grid-area:1 / 5 / 2 / 7; }
.car-rows td[data-label="차종"] { grid-area:1 / 7 / 2 / 11; }
/* ♡ 는 16px 글자에 여백이 붙어 한 칸(21px)에 안 들어간다 */
.car-rows td[data-label="관심"] { grid-area:1 / 11 / 2 / 13; text-align:right; }
.car-rows td[data-label="연식"] { grid-area:2 / 5 / 3 / 8; }
.car-rows td[data-label="주행"] { grid-area:2 / 8 / 3 / 13; }
/* ★ 트림이 도면(「가솔린 2.0T 4WD · 시그니처」)보다 길다.
실제 값은 「가솔린 2.5 터보 AWD · (세부등급 없음)」 26자다.
사진 오른쪽 8칸(195px)에 넣으면 두 줄로 넘쳐 카드가 7줄이 됐다.
★ 줄여서 감추지 않고 (개정 278) 셋째 줄을 통째로 준다.
부록 G 도면의 2줄·3줄이 서로 바뀐다 — 값은 하나도 안 빠진다 */
.car-rows td.trim { grid-area:3 / 1 / 4 / 13; }
/* 4줄 — 값 셋. ★ 여기가 가장 크다 (부록 G 「값이 이 화면의 핵심이다」) */
.car-rows td[data-label="가격"] { grid-area:4 / 1 / 5 / 5; font-size:15px;
font-weight:700; }
.car-rows td[data-label="시세 대비"] { grid-area:4 / 5 / 5 / 9; font-size:13px; }
.car-rows td[data-label="신차가 대비"] { grid-area:4 / 9 / 5 / 13; font-size:13px; }
/* 도면의 「시세 −13.0%」 · 「신차 −49.4%」 — 두 글자만 붙인다 */
.car-rows td[data-label="시세 대비"]::before,
.cand-rows td[data-label="시세 대비"]::before { content:"시세 ";
font-size:10px; }
.car-rows td[data-label="신차가 대비"]::before,
.cand-rows td[data-label="신차가 대비"]::before { content:"신차 ";
font-size:10px; }
/* 원값(시세 5,290만)은 상세로 — 도면에 없다 */
.car-rows td[data-label="시세 대비"] .raw,
.car-rows td[data-label="신차가 대비"] .raw { display:none; }
/* 5줄 — 축 넷. 흐름에 맡기되 줄을 못박는다 (이름이 c.head 라 못 짚는다).
★ [data-label] 을 붙여야 한다.
위쪽 규칙이 「용도」에 span 6 을 주는데 그게 더 좁아 이긴다.
그것 때문에 5줄이 15칸이 되어 격자가 통째로 어긋났다
(실측 08-18 — 칸 폭이 10.1px 아홉 · 30.3px 셋으로 갈렸다) */
.car-rows td.ax[data-label] { grid-row:5; grid-column:span 3;
font-size:10px; }
/* ★ 축마다 값 길이가 다르다. 똑같이 셋씩 주면 「3년 3개월 · 92천km」가
두 줄로 넘쳐 카드가 7줄이 된다 (실측 08-18). 합은 정확히 12 다.
이름은 config/labels.json 이 정한다 — 바뀌면 위 span 3 으로 돌아간다 */
.car-rows td.ax[data-label="사고"] { grid-column:span 2; }
.car-rows td.ax[data-label="용도"] { grid-column:span 2; }
.car-rows td.ax[data-label="제조사 보증"] { grid-column:span 5; }
.car-rows td[data-label="옵션"] { grid-area:6 / 1 / 7 / 6; font-size:10.5px; }
.car-rows td.act { grid-area:6 / 6 / 7 / 13; margin-top:0;
text-align:right; }
/* ★ 접는 것이지 지우는 것이 아니다. 넓은 폭과 /why 에 그대로 있다 */
.car-rows td[data-label="순위"], .car-rows td[data-label="비율"],
.car-rows td[data-label="월"], .car-rows td[data-label="상태"],
.car-rows td[data-label="딜러"], .car-rows td[data-label="경과"],
.car-rows td[data-label="사이트"] { display:none; }
/* ── 추천 카드 8줄 (부록 G 도면) ───────────────────────────
1 [사진] 1 S G70_20T ♡ 2 트림 3 연식·주행
4 값 셋 5 ★ 추천 이유 한 문장 6 축 넷 7 옵션 8 근거·엔카·비교
★ 목록과 열이 다르다. 목록 규칙을 물려받으면 사진 칸이 눌려
빈 상자로 보인다 (실측 08-18 — 목록은 되고 추천만 안 나왔다) */
/* 추천 사진은 64×48 — 목록보다 작다. 세 칸이면 넉넉하다.
★ 사진은 두 줄만. 셋째 줄을 비워 트림에 폭을 통째로 준다
(목록과 같은 이유 — 실제 트림이 도면 예시보다 길다) */
.cand-rows td.photo { grid-area:1 / 1 / 3 / 4; }
.cand-rows td[data-label="순위"] { display:block;
grid-area:1 / 4 / 2 / 6; font-size:11px; }
.cand-rows td[data-label="등급"] { grid-area:1 / 6 / 2 / 8; }
.cand-rows td[data-label="차종"] { grid-area:1 / 8 / 2 / 11; }
.cand-rows td[data-label="관심"] { grid-area:1 / 11 / 2 / 13; }
.cand-rows td[data-label="연식"] { grid-area:2 / 4 / 3 / 8; }
.cand-rows td[data-label="주행"] { grid-area:2 / 8 / 3 / 13; }
.cand-rows td.trim { grid-area:3 / 1 / 4 / 13; }
.cand-rows td[data-label="가격"] { grid-area:4 / 1 / 5 / 5; }
.cand-rows td[data-label="시세 대비"] { grid-area:4 / 5 / 5 / 9; }
.cand-rows td[data-label="신차가 대비"] { grid-area:4 / 9 / 5 / 13; }
.cand-rows td[data-label="비율"] { display:none; }
.cand-rows td[data-label="왜 이 순위인가"] {
grid-area:5 / 1 / 6 / 13; font-size:11.5px; }
.cand-rows td.ax[data-label] { grid-row:6; grid-column:span 3; }
.cand-rows td.ax[data-label="사고"] { grid-column:span 2; }
.cand-rows td.ax[data-label="용도"] { grid-column:span 2; }
.cand-rows td.ax[data-label="제조사 보증"] { grid-column:span 5; }
.cand-rows td[data-label="옵션"] { grid-area:7 / 1 / 8 / 13; font-size:10px; }
.cand-rows td.act { grid-area:8 / 1 / 9 / 13; text-align:left; }
}
/* ── 카탈로그 못 받은 조합 표 (개정 327) ─────────────────────────
★ 칸 셋을 똑같이 나누면 「MODEL_Y · 2025-03」이 50px 에 뭉갠다.
이 표에만 폭을 준다 — .rows 에 걸면 관리 화면 열아홉이 같이 움직인다 */
@media (max-width:1749px) {
/* 한 줄에 셋을 넣으면 52px 씩이라 「MODEL_Y · 2025-03」이 넉 줄로 쪼개진다.
★ 차종은 한 줄을 통째로 쓰고, 사유와 건수를 그 아래 한 줄에 둔다 */
.cat-rows td[data-label="차종 · 연식"],
.reg-rows td[data-label="경로"] {
grid-column:1 / -1; font-weight:600;
}
.cat-rows td[data-label="차종 · 연식"]::before,
.reg-rows td[data-label="경로"]::before { content:""; margin:0; }
.cat-rows td[data-label="왜 못 받았나"],
.reg-rows td[data-label="제안"] { grid-column:span 4; }
.cat-rows td[data-label="걸린 매물"],
.reg-rows td[data-label="관측"] { grid-column:span 2; }
}
/* ── 시세 위치 (개정 340 · V11-119) ─────────────────────────────
★ 「3,100만 ─── ● 4,550만 ─── 6,000만」.
퍼센트만 내면 싼 것인지 감이 안 온다 — 자리를 보여 준다 */
.pos { position:relative; height:26px; margin:6px 4px 2px; }
.pos .line { position:absolute; left:0; right:0; top:12px; height:2px;
background:var(--line2); border-radius:1px; }
.pos .mid { position:absolute; top:6px; width:2px; height:14px;
background:var(--dim); transform:translateX(-1px); }
.pos .me { position:absolute; top:0; transform:translateX(-50%);
color:var(--amber); font-size:16px; line-height:26px; }
.posx { display:flex; justify-content:space-between; margin:0 4px 6px;
font-family:var(--mono); font-size:11px; color:var(--faint); }
.posx .md { color:var(--dim); }
/* ── 감가 곡선 (개정 340 · V11-119) ─────────────────────────────
★ 선으로 보면 기울기가 보인다. 표로만 내면 안 보인다 */
svg.line { display:block; width:100%; height:140px; margin:6px 0 2px; }
svg.line polyline { fill:none; stroke:var(--amber); stroke-width:1.2;
vector-effect:non-scaling-stroke; }
svg.line circle { fill:var(--amber); }
/* ── 시세 요약 표 (개정 340 · 마스터 실측 08-18) ─────────────────
★ 여덟 칸이라 360px 에서 p75·최고가 화면 밖으로 잘렸다.
넉 칸씩 두 줄로 접는다 — 값을 지우지 않는다 */
@media (max-width:1749px) {
.mk-rows td { grid-column:span 3; font-size:11px; }
.mk-rows td[data-label="관측일"] { grid-column:1 / -1; font-weight:600; }
}
/* ⑨ 비용 — 사이트별 구매 총액 (부록 G 상세 ⑨ · 개정 353) ─────────────
★ 「실제로 내는 돈」이다. 크게 낸다 (40-report 「화면에서는 크게 낸다」)
★ 사이트가 여럿이면 나란히 — 표시가가 싼 쪽이 실제로 싼 쪽이 아닐 수 있다 */
.buys { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 4px }
.buy { flex:1 1 260px; min-width:0; border:1px solid var(--line);
border-radius:6px; padding:10px 12px; background:var(--surface) }
.buy-h { font-size:12px; color:var(--faint) }
.buy-t { font-size:26px; font-weight:700; line-height:1.2; margin:2px 0 6px;
font-variant-numeric:tabular-nums }
.buy-t .dim { font-size:12px; font-weight:400 }
.buy-t.est { color:var(--ink) }
.buy-rows td { padding:2px 0 }
.buy .muted { font-size:11px; margin:4px 0 0 }
/* 미리보기의 실구매 총액 (개정 353). ★ 표시가 아래에 붙는다 */
#peek .pk-b { font-size:12px; color:var(--faint); margin-top:2px }
/* 리포트 팝업 (개정 357). ★ JS 없이 닫힌다 — 별도 경로다 */
.pop { border:1px solid var(--line); border-radius:6px; background:var(--surface);
padding:10px 12px; margin:8px 0 14px }
.pop-h { display:flex; justify-content:space-between; align-items:baseline;
gap:8px; border-bottom:1px solid var(--line); padding-bottom:6px }
.pop-x a { font-size:12px }
.rep-body { white-space:pre-wrap; word-break:break-word; font-size:12px;
max-height:60vh; overflow:auto; margin:8px 0 0 }
.rep-list td, .rep-list th { white-space:nowrap }
.rep-list td:first-child { white-space:normal; word-break:keep-all }
.rep-rows { font-size:12px }
.rep-rows td, .rep-rows th { white-space:nowrap }
/* 진행 메모 (11장 STEP 118 · 개정 362). ★ 계약 4단계 대신 들어온 것 */
.prog { border:1px solid var(--line); border-radius:6px; padding:8px 10px;
margin:6px 0; background:var(--surface) }
.prog-h { font-weight:600; margin-bottom:4px }
.prog-l { margin:0 0 6px; padding-left:18px; font-size:13px }
.prog-l li { margin:2px 0 }
.prog form.inline { display:flex; flex-wrap:wrap; gap:6px; align-items:center }
/* ① 상세 사진 (개정 375 · V11-132). ★ 상세인데 사진이 하나도 없었다.
★ JS 없이 갈아 끼운다 — 썸네일은 앵커이고 :target 이 큰 사진을 고른다.
아무것도 안 눌렀을 때는 첫 장이 보인다 */
.shots { margin:8px 0 12px }
.shot-big { position:relative; width:480px; max-width:100%; aspect-ratio:4/3;
background:var(--surface2); border:1px solid var(--line);
border-radius:6px; overflow:hidden }
.shot-big .big { position:absolute; inset:0; display:none }
.shot-big .big:first-child { display:block }
.shot-big .big:target { display:block }
.shot-big .big:target ~ .big:first-child { display:none }
.shot-big img { width:100%; height:100%; object-fit:cover; display:block }
.shot-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.shot-thumbs img { width:128px; height:96px; object-fit:cover;
border:1px solid var(--line); border-radius:12px;
display:block }
@media (max-width:639px) {
.shot-big { width:100% }
.shot-thumbs img { width:80px; height:60px }
}
/* 사이트별 거르기 단추 (개정 306). ★ 사이트가 둘 이상일 때만 나온다 */
.sitebar { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 }
/* ★★ 08-30 (토스 · UI_REVIEW 29장) — ★ `--ink` 가 ★ 흰 바탕 쪽으로 뒤집혀
★ ★ 흰 글자가 ★ 흰 바탕에 얹혀 ★ 「전체」가 안 보였다 (사진 실측).
★ 눌린 것은 ★ 강조색으로 채운다 — ★ 위 `.btn.on` 과 같은 꼴 */
.sitebar .btn.on { background:var(--accent); color:var(--surface);
border-color:var(--accent); cursor:default }
/* 미분류 — 판단할 재료 (개정 367 · V4-28).
★ 경로만 내고 「사람이 봐야 합니다」라 하면 아무도 못 정한다 */
.decide { border:1px solid var(--line); border-radius:6px; padding:8px 10px;
margin:6px 0; background:var(--surface) }
.dec-h { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline;
margin-bottom:4px }
.decide p { margin:2px 0; font-size:12px }
.decide form.inline { display:flex; flex-wrap:wrap; gap:6px; align-items:center;
margin-top:6px }
/* ★ 색은 토큰만 쓴다 (V11-13). --up 이 「나쁨」이다 */
.tag.bad { background:var(--up); color:var(--bg) }
/* 받은 원문 (개정 378 · V11-134). ★ 받아 놓고 안 보여주지 않는다 */
.rawbox { border:1px solid var(--line); border-radius:6px; padding:6px 10px;
margin:4px 0; background:var(--surface) }
.rawbox summary { cursor:pointer; font-size:13px }
.raw-rows { font-size:12px; margin-top:6px }
.raw-rows td:first-child { white-space:nowrap; color:var(--faint) }
/* 세 값을 한 셀에 (41-view) — 표시가 · 현금 · 월.
★ 표시가만 보면 부대비용 차이로 순위가 뒤집힌다 */
.rows td .pay, .rows td .cash { display:block; font-size:11px; line-height:1.3 }
/* 쿼리 결과 「그대로 복사」 (개정 401 · V10-37) */
.qtools { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.qtools .muted { font-size: 12px; }
.copy { cursor: pointer; }
/* ★ 클립보드가 막혀도 쓸 수 있게 남긴다. 낮게 둬 표를 밀지 않는다 */
textarea.tsv { width: 100%; height: 44px; font-family: var(--mono);
font-size: 11px; color: var(--dim);
background: var(--surface2); border: 1px solid var(--line); }
/* 차종 · 가격대 · 리스 거르기 (개정 420) */
.pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pick label { display: flex; gap: 4px; align-items: center; font-size: 13px; }
.pick input[type="text"], .pick input:not([type]) { width: 5em; }
/* ══ 시안 이식 — ref/screens/v2_시안_목록상세.html (개정 427) ══
★ 시안이 정본이다. 값을 손으로 옮겨 적지 않는다 (V11-59 · V11-60)
★ 아래는 시안에서 기계로 뽑아 붙인 것이다 — 손으로 고치지 않는다 */
.mono { font-family:var(--mono);font-variant-numeric:tabular-nums }
/* ★★★★ 08-29 (UI_REVIEW · 마스터 6 · 개정 850) — ★ 머리를 ★ **한 곳에서** 정한다.
★★ 실측 08-29 — ★ `body.s-… header` 규칙이 ★ **21곳**에 똑같이 적혀 있었다.
★ ★ 한 글자도 안 다른데 ★ `z-index` 만 갈렸다 — ★ 30 이 열둘 · ★ 20 이 아홉.
★ ★ 그래서 ★ 화면마다 ★ 머리의 위·아래가 바뀌었다.
★ ★ 21곳을 지우고 ★ 이 한 줄만 남긴다 — ★ 한 곳을 고치면 다 따라온다.
★ 틀은 이미 한 곳이다 — ★ `base.html` 이 머리·발을 갖고
★ `_page.html` 이 전 화면을 감싼다 (실측). ★ 갈린 것은 ★ CSS 뿐이었다 */
header { position:sticky;top:0;z-index:50;background:var(--surface); backdrop-filter:blur(8px);border-bottom:1px solid var(--line) }
.hbar { display:flex;align-items:center;gap:14px;padding:11px 16px;max-width:1400px;margin:0 auto }
.logo { font-family:var(--mono);font-weight:700;letter-spacing:-.5px;font-size:15px }
.logo span { color:var(--accent) }
nav { display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none }
nav::-webkit-scrollbar { display:none }
nav button { background:none;border:0;color:var(--dim);font:inherit;font-size:13px; padding:6px 11px;border-radius:6px;cursor:pointer;white-space:nowrap }
nav button[aria-selected=true] { background:var(--accent);color:var(--ink);font-weight:600 }
nav button:focus-visible { outline:2px solid var(--accent);outline-offset:2px }
.cond { max-width:1400px;margin:0 auto;padding:12px 16px 0 }
.chips { display:flex;flex-wrap:wrap;gap:6px;align-items:center }
.chip { font-family:var(--mono);font-size:12px;padding:4px 9px;border-radius:12px; background:var(--surface2);border:1px solid var(--line);color:var(--dim) }
.chip b { color:var(--text);font-weight:600 }
.chip.on { border-color:var(--accent);color:var(--accent) }
.sentence { margin-top:9px;font-size:13px;color:var(--dim) }
.sentence b { color:var(--text) }
.sentence .n { color:var(--accent);font-family:var(--mono);font-weight:700 }
.bars { display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:104px }
.bar { height:26px;background:var(--surface2);border-radius:2px;position:relative;overflow:hidden }
.bar i { position:absolute;bottom:0;left:0;right:0;background:var(--dim);display:block }
.bar.b1 i { background:var(--api-dim) }
.bar.b2 i { background:var(--good) }
.bar.b3 i { background:var(--cool) }
.bar.b4 i { background:var(--accent) }
.bar u { position:absolute;top:2px;left:0;right:0;text-align:center;font-size:8px; font-family:var(--mono);color:var(--faint);text-decoration:none;letter-spacing:-.3px }
.barlab { display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:104px; font-size:8px;font-family:var(--mono);color:var(--faint);text-align:center;margin-top:2px }
main { max-width:1400px;margin:0 auto;padding:14px 16px 80px }
.row { display:grid;gap:12px;align-items:center;padding:12px;border-radius:9px; background:var(--surface);border:1px solid var(--line);margin-bottom:8px; grid-template-columns:44px 104px 72px minmax(150px,1.6fr) repeat(4,minmax(64px,.8fr)) 92px; transition:border-color .12s }
.row:hover { border-color:var(--api-line) }
.gr { font-family:var(--mono);font-weight:800;font-size:19px;text-align:center; border-radius:7px;padding:7px 0;line-height:1 }
.gr small { display:block;font-size:9px;font-weight:600;opacity:.75;margin-top:3px }
.gr.S { background:var(--surface2);color:var(--accent);border:1px solid var(--accent) }
.gr.A { background:var(--surface2);color:var(--good);border:1px solid var(--good) }
.gr.B { background:var(--surface2);color:var(--dim);border:1px solid var(--line) }
.thumb { width:72px;height:54px;border-radius:12px;background:linear-gradient(150deg,var(--api-surface),var(--api-bg)); display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--faint); font-family:var(--mono);flex-shrink:0 }
.name { font-weight:600;font-size:14px;line-height:1.35 }
.trim { color:var(--dim);font-size:12px;margin-top:2px }
.meta { color:var(--faint);font-size:11px;font-family:var(--mono);margin-top:3px }
.cell { font-family:var(--mono);font-size:13px }
.cell b { display:block;font-size:14px;font-weight:700 }
.cell u { display:block;font-size:9px;color:var(--faint);text-decoration:none;margin-bottom:2px; letter-spacing:.4px }
.up { color:var(--bad) }
.price { text-align:right;font-family:var(--mono) }
.price b { font-size:17px;font-weight:800;display:block }
.price u { font-size:11px;text-decoration:none;display:block;margin-top:2px }
.swatch { display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:-1px; margin-right:4px;border:1px solid var(--line2) }
.desk { display:contents }
.mob { display:none }
.detail { display:none }
.detail.on { display:block }
.list.off { display:none }
.sec { background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:16px;margin-bottom:10px }
.sec h3 { font-size:11px;letter-spacing:1.3px;color:var(--faint);font-weight:700; margin-bottom:12px;font-family:var(--mono) }
.verdict { display:flex;gap:16px;align-items:center;flex-wrap:wrap }
.verdict .gr { font-size:30px;padding:12px 18px;min-width:78px }
.why { flex:1;min-width:230px }
.why li { list-style:none;padding:5px 0 5px 17px;position:relative;font-size:13.5px;line-height:1.55 }
.why li::before { content:"";position:absolute;left:0;top:12px;width:6px;height:6px;border-radius:50% }
.why li.g::before { background:var(--good) }
.why li.r::before { background:var(--bad) }
.why li b { font-family:var(--mono) }
.kv { display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:7px;overflow:hidden }
.kv div { background:var(--surface2);padding:11px 12px }
.kv u { display:block;font-size:10px;color:var(--faint);text-decoration:none;margin-bottom:4px; letter-spacing:.4px }
.kv b { font-family:var(--mono);font-size:16px;font-weight:700 }
.gate { display:flex;flex-wrap:wrap;gap:7px }
.gate span { font-size:12px;padding:6px 11px;border-radius:6px;font-family:var(--mono); background:var(--surface2);color:var(--good);border:1px solid var(--good) }
.gate span.x { background:var(--surface2);color:var(--bad);border-color:var(--bad) }
.opts { display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:7px }
.opt { background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:11px 5px; text-align:center;font-size:10.5px;color:var(--dim);line-height:1.3 }
.opt.on { border-color:var(--accent);color:var(--accent);background:var(--surface2) }
.opt em { display:block;font-size:17px;font-style:normal;margin-bottom:4px }
.money { width:100%;border-collapse:collapse;font-family:var(--mono);font-size:13px }
.money td { padding:8px 0;border-bottom:1px solid var(--line) }
.money td:last-child { text-align:right }
.money tr:last-child td { border:0;padding-top:12px;font-size:16px;font-weight:800 }
.money tr:last-child td:last-child { color:var(--accent) }
.alt { display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:9px }
.altcard { background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:12px; display:flex;gap:11px;align-items:flex-start }
.altcard .gr { font-size:15px;padding:5px 0;min-width:36px }
.altcard .an { font-weight:600;font-size:13px }
.altcard .ap { font-family:var(--mono);font-size:15px;font-weight:700;margin-top:3px }
.altcard .ar { font-size:11.5px;color:var(--good);margin-top:5px;line-height:1.45 }
.altcard .ar.r { color:var(--bad) }
.foot { position:fixed;left:0;right:0;bottom:0;background:var(--surface); border-top:1px solid var(--line);padding:11px 16px;display:flex;gap:12px; align-items:center;backdrop-filter:blur(8px);z-index:40 }
.foot .p { font-family:var(--mono);font-size:19px;font-weight:800 }
.foot .p u { display:block;font-size:10px;color:var(--faint);text-decoration:none;font-weight:400 }
.foot a { margin-left:auto;background:var(--accent);color:var(--ink);text-decoration:none; font-weight:700;font-size:13px;padding:10px 18px;border-radius:7px }
.foot button { background:var(--surface2);border:1px solid var(--line);color:var(--text); font:inherit;font-size:13px;padding:10px 14px;border-radius:7px;cursor:pointer }
.note { font-size:11.5px;color:var(--faint);margin-top:9px;line-height:1.55 }
.prov { font-size:8px;font-family:var(--mono);color:var(--cool);letter-spacing:-.2px; display:block;margin-top:2px;font-weight:600 }
.spark { height:44px;width:100%;display:block }
.dist { position:relative;height:34px;background:var(--surface2);border-radius:12px;margin:10px 0 6px }
.dist .q { position:absolute;top:0;bottom:0;background:var(--surface2) }
.dist .t { position:absolute;top:0;bottom:0;width:1px;background:var(--faint) }
.dist .me { position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--accent) }
.dist .me::after { content:"이 차";position:absolute;top:-14px;left:50%;transform:translateX(-50%); font-size:9px;font-family:var(--mono);color:var(--accent);white-space:nowrap }
.distlab { display:flex;justify-content:space-between;font-size:9.5px;font-family:var(--mono); color:var(--faint) }
.unk { display:flex;flex-direction:column;gap:1px;background:var(--line);border-radius:7px; overflow:hidden;border:1px solid var(--line) }
.unk div { background:var(--surface2);padding:9px 12px;display:flex;align-items:center; font-size:12.5px;gap:9px }
.unk b { margin-left:auto;font-family:var(--mono);color:var(--accent) }
.unk .ok b { color:var(--good) }
.quad { display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:7px;overflow:hidden;aspect-ratio:1;max-width:170px }
.quad div { background:var(--surface2);padding:8px;font-size:9.5px;color:var(--faint); display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35 }
.quad div.on { background:var(--surface2);color:var(--good);font-weight:700;font-size:11px }
.axes { display:flex;flex-wrap:wrap;gap:5px }
.axc { font-family:var(--mono);font-size:11px;padding:5px 9px;border-radius:12px; background:var(--surface2);border:1px solid var(--line);color:var(--dim);cursor:pointer }
.axc b { color:var(--text) }
.axc.full { border-color:var(--good);color:var(--good) }
.axc.zero { border-color:var(--bad);color:var(--bad) }
.axc.na { border-style:dashed;color:var(--faint) }
details>summary { cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:1.3px; color:var(--faint);font-weight:700;list-style:none }
details>summary::-webkit-details-marker { display:none }
details>summary::after { content:" ▾";color:var(--accent) }
details[open]>summary::after { content:" ▴" }
details>div { margin-top:12px }
.tl { display:flex;gap:0;margin:4px 0 8px }
.tl span { flex:1;height:5px;background:var(--surface2) }
.tl span.d { background:var(--good) }
.tl span.u { background:var(--bad) }
@media (max-width:1080px) {
.row{grid-template-columns:44px 104px 1fr;grid-template-areas:
"gr bars head" "gr bars head" "cells cells cells";row-gap:10px}
.row>.gr{grid-area:gr;align-self:start}
.row>.barwrap{grid-area:bars;align-self:start}
.row>.head{grid-area:head;display:flex;gap:10px}
.row>.cellset{grid-area:cells;display:grid;grid-template-columns:repeat(5,1fr);
gap:8px;border-top:1px solid var(--line);padding-top:9px}
.price{text-align:left}
}
@media (max-width:560px) {
.row{grid-template-columns:44px 1fr;grid-template-areas:"gr head" "bars bars" "cells cells"}
.row>.barwrap{grid-area:bars}
.bars,.barlab{width:100%}
.row>.cellset{grid-template-columns:repeat(3,1fr)}
.hbar{padding:9px 12px} main{padding:12px 12px 80px}
}
/* ══ 시안이 빠뜨린 것 — 개발측이 채운다 (작업기록 여쭐 것) ══
★ 시안의 .row 는 넓은 폭에서 9칸 그리드다
(44px 104px 72px minmax(150px,1.6fr) repeat(4,…) 92px)
★ 그런데 자식은 다섯뿐이다 — gr · barwrap · desk · head · cellset.
.desk 만 display:contents 라 사진이 3번 칸으로 풀린다.
★ .cellset 은 안 풀려서 **5칸(시세차·신차대비·옵션가·경과·가격)이
한 칸에 세로로 쌓인다** (실측 08-21 스크린샷).
★ 시안에 넓은 폭 .cellset 규칙이 없다. 좁은 폭(1080·560)에만 있다
★ 그리드가 9칸을 요구하므로 여기서 푼다. 시안 값은 안 고쳤다 */
@media (min-width:1081px) {
.row > .cellset { display:contents }
/* ★★★ 08-29 (#122 뒤) — ★ 사진이 ★ **글자를 덮고 있었다.**
★ 시안이 ★ 넓은 폭에서 사진을 ★ 240px 로 키우는데 (아래 미디어 규칙)
★ ★ 그리드의 사진 칸은 ★ **72px** 그대로였다 —
★ ★ 168px 이 ★ 옆 칸(차명·트림·판정 다섯)을 ★ 덮었다.
★ 실측 — ★ `사고OK` 칩의 왼쪽이 ★ 사진 뒤로 들어가 안 보였다 (1100px).
★ ★ 사진을 줄이지 않는다 — ★ 시안 값이다. ★ **칸을 사진에 맞춘다** */
.row { grid-template-columns:44px 104px 240px minmax(150px,1.6fr)
repeat(4,minmax(64px,.8fr)) 92px; }
}
/* ══ 등급 배지 8단계 + 제외 (개정 433) ══
★ 시안은 S · A · B 셋만 그렸다. ★ C~G 와 「제외」가 없다 —
개정 433 이 컷을 8단계로 내리고 관문 배제를 등급에서 뺐기 때문이다.
★ 시안의 .gr.B 를 본으로 삼아 같은 결로 이어 붙인다. 시안 값은 안 고쳤다 */
.gr.C { background:var(--surface2);color:var(--dim);border:1px solid var(--line) }
.gr.D { background:var(--surface2);color:var(--faint);border:1px solid var(--line) }
.gr.E { background:var(--surface2);color:var(--faint);border:1px solid var(--line) }
.gr.F { background:transparent;color:var(--faint);border:1px solid var(--line) }
.gr.G { background:transparent;color:var(--faint);border:1px dashed var(--line) }
.gr.NO_GRADE, .gr.NOT_RATED { background:transparent;color:var(--faint);
border:1px dashed var(--line);font-size:12px }
/* ★ 제외는 등급이 아니다 — 점수 색을 안 쓴다. 테두리로만 구분한다 */
.gr.EXCLUDED { background:transparent;color:var(--faint);
border:1px dashed var(--bad);font-size:12px }
/* ★ 비교 — 막대 넷과 총 구매비용을 나란히 (개정 427 · V11-166) */
.cmp-bars { width:100%; border-collapse:collapse; margin-bottom:12px }
.cmp-bars th, .cmp-bars td { padding:9px 10px; border-bottom:1px solid var(--line);
vertical-align:top; text-align:left }
.cmp-bars th:first-child { color:var(--faint); font-weight:600; white-space:nowrap }
/* ★★ v3 시안이 새로 들인 이름 (명령서 22장 ⓐ — 시안이 모양의 정본이다).
★ 우리 CSS 에 ★ 같은 이름이 없어 ★ 부딪히지 않는다 —
★ 그래서 ⓐ 로 시안 값을 그대로 넣는다. ★ 화면이 바뀌지 않는다 (없던 것이다) */
.head { display:flex; justify-content:space-between; align-items:center;
margin-bottom:8px }
/* ★★★★ 08-29 — ★ 위 주석의 「같은 이름이 없어 부딪히지 않는다」는 ★ 틀렸다.
★ `.heart` 는 ★ 이미 위에 있었다 (하트 자리 고침 · UI_REVIEW 26-1).
★ 두 벌로 두면 ★ 머리띠가 21곳으로 갈라진 것과 ★ 같은 일이 난다 (S46-121).
★ 시안이 더한 것은 ★ `display:flex` 세 줄뿐이다 — ★ 위 규칙에 합쳤다.
★ ★ `z-index:5` 를 잃지 않는 것이 ★ 중요하다 — ★ 그것이 없으면
★ ★ 하트가 ★ 카드 뒤로 들어가 ★ 안 눌린다 (검사 `S46-118`) */
/* ★★ 08-25 — ★ 새 화면이 쓰는 이름 둘 (V11-59).
★ `.what` — ★ 「이 화면은 무엇을 하는 곳인가」 상자 (명령서 1-5 · 시안 주황 상자)
★ `.filter-body` — ★ 접은 거르개의 속 (v3_listings_시안 다섯 절).
★★ ★ 시안이 `.mbody` 를 먼저 쓰고 있었다 — ★ 이름이 겹쳐 ★ 내 쪽을 바꿨다 (S46-67)
★ 값은 ★ 이미 있는 토큰만 쓴다 — ★ 새 색을 안 만든다 (V11-13) */
.cond.what { border-color:var(--amber); margin-bottom:14px }
.cond.what h2 { font-size:13px; color:var(--dim); margin:0 0 6px }
.cond.what p { margin:4px 0; font-size:12.5px; line-height:1.7 }
.filter-body { padding:0 14px 14px }
.filter-body h3 { font-size:12px; color:var(--dim); margin:12px 0 6px }
.filter-body h3:first-child { margin-top:0 }
/* ── v4m 관심 — ★★★ 모바일이 기준이다 (ref/screens/v4m_watch_시안.html · 마스터 확정 08-25)
★ 「넓어지면 카드가 「옆으로 펴진다」」. ★ 카드를 옆으로 붙이지 않는다 —
한 줄에 늘 하나. 넓어진 만큼 카드가 넓어진다
★★ 세 폭(≤639 · 640~1023 · 1024~)이 담는 정보는 똑같다 — 자리만 바뀐다.
★ 금지 — 좁다고 글자를 줄이거나 감추는 것 (display:none 을 쓰지 않는다)
★ 값은 :root 토큰만 쓴다 (L-3) — 시안의 --ok/--no 는 우리 --down/--up 이다 */
.kcards { display:block; }
.kcard { background:var(--surface); border-bottom:1px solid var(--line);
padding:12px 14px; margin:0 -12px; }
.kchg { font-size:14px; font-weight:700; margin-bottom:6px; }
.kchg.dn { color:var(--down); }
.kchg.up { color:var(--up); }
.kchg.gone { color:var(--up); }
.kchg.same { color:var(--faint); font-weight:400; font-size:13px; }
.kcardline { display:block; }
.kline { display:flex; gap:10px; }
.kthumb { width:104px; height:78px; flex:0 0 104px; border-radius:8px;
background:var(--surface2); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
overflow:hidden; font-size:11px; color:var(--faint);
text-decoration:none; }
.kthumb img { width:100%; height:100%; object-fit:cover; }
.kmid { flex:1; min-width:0; }
.kname { font-size:14px; font-weight:600; margin-top:2px; }
.kname a { color:var(--text); text-decoration:none; }
.ktrim { font-size:12px; color:var(--dim); margin-top:1px; }
.kspec { font-size:12px; color:var(--dim); margin-top:2px; }
.kspec.dn { color:var(--down); }
.kspec.up { color:var(--up); }
.kprice { font-size:16px; font-weight:700; margin-top:4px;
font-family:var(--mono); }
.kwas { font-size:12px; color:var(--faint); text-decoration:line-through;
font-weight:400; }
.ksince { font-size:11px; color:var(--faint); margin-top:6px; }
.kgr { display:inline-block; background:var(--amber); color:var(--ink4);
font-weight:700; border-radius:12px; padding:0 6px; font-size:12px;
margin-right:5px; }
.kax { font-size:11px; color:var(--faint); font-family:var(--mono);
margin-bottom:3px; }
.kax b { color:var(--dim); font-weight:600; }
.kheart { color:var(--amber); float:right; }
.kj { display:flex; flex-wrap:wrap; gap:3px 8px; margin-top:5px;
font-size:11px; color:var(--faint); }
.kj a { color:var(--faint); text-decoration:none; }
.kacts { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
/* ★ 단추는 44px 이상 · 한 줄에 둘까지 (시안 「지켜야 하는 것」) */
.kbtn { flex:1 1 calc(50% - 4px); min-height:44px; background:var(--surface2);
border:1px solid var(--line2); border-radius:8px; color:var(--text);
font-size:13px; font-family:inherit; display:flex;
align-items:center; justify-content:center; text-decoration:none; }
.kbtn.go { background:var(--amber); border-color:var(--amber);
color:var(--ink4); font-weight:600; }
.kform { flex:1 1 calc(50% - 4px); display:flex; gap:4px; }
.kform input[name=target_price_won] { flex:1; min-width:0; width:auto;
min-height:44px; }
.kform .kbtn { flex:0 0 auto; padding:0 12px; }
/* ★★ 비교 네모 — ★ 사진 왼쪽 위에 얹는다 (마스터 확정 17 「비교→관심」 ·
v4m 시안 08-26 `.v4-pick`). ★ 하트와 마주 본다.
★ 짚는 자리는 44px 이다 — ★ 보이는 네모는 26px 이고 ★ 둘레가 손가락 몫이다 */
.kthumbwrap { position:relative; flex:0 0 auto; }
.kpick { position:absolute; top:0; left:0; width:44px; height:44px; z-index:2;
display:flex; align-items:center; justify-content:center; cursor:pointer; }
.kpick input { position:absolute; opacity:0; width:44px; height:44px; margin:0;
cursor:pointer; }
.kpick span { width:26px; height:26px; border-radius:6px; background:var(--ink);
border:1px solid var(--line2); color:var(--faint); font-size:14px;
display:flex; align-items:center; justify-content:center; }
.kpick input:checked + span { background:var(--amber); border-color:var(--amber);
color:var(--ink4); font-weight:700; }
/* ★ 고른 것을 들고 나가는 띠. ★ 아래 탭 위에 붙는다 */
.kcmp { position:sticky; bottom:64px; z-index:8; display:flex; gap:10px;
align-items:center; padding:10px 14px; margin:0 -12px;
background:var(--surface2); border-top:1px solid var(--amber); }
.kcmp .dim { flex:1; font-size:12px; }
.kcmp .kbtn { flex:0 0 130px; }
/* ★ 640 이상 — 사진을 키우고 · 판정을 한 줄로 · 단추를 오른쪽으로 */
@media (min-width:640px) {
.kcard { padding:16px 0; margin:0; }
.kthumb { width:180px; height:135px; flex:0 0 180px; }
.kname { font-size:16px; }
.kprice { font-size:19px; }
.kj { flex-wrap:nowrap; }
.kcardline { display:flex; gap:18px; align-items:stretch; }
.kcardline .kline { flex:1; min-width:0; }
.kacts { margin-top:0; flex:0 0 200px; flex-direction:column;
justify-content:center; }
.kbtn, .kform { flex:0 0 auto; }
}
/* ★ 1024 이상 — 사진을 더 키우고 · 곁말을 옆에 편다 */
@media (min-width:1024px) {
.kcard { padding:18px 0; }
.kthumb { width:240px; height:180px; flex:0 0 240px; }
.kname { font-size:17px; }
.ktrim, .kspec { font-size:13px; }
.kprice { font-size:21px; }
.kj { gap:4px 14px; font-size:12px; }
.kax { font-size:12px; }
.kacts { flex:0 0 240px; }
}
/* ★ 640 이상 — ★ 아래 탭이 없으므로 ★ 띠도 바닥에 붙는다 */
@media (min-width:640px) {
.kcmp { bottom:0; margin:0; }
}
/* ★ 340 아래에서도 안 깨진다 — 사진만 줄인다. ★ 글자는 그대로다 */
@media (max-width:359px) {
.kthumb { width:88px; height:66px; flex:0 0 88px; }
.kprice { font-size:15px; }
.kbtn { font-size:12px; }
}
/* ── 상단 메뉴를 ★ 손가락 폭에서는 ★ 아래 탭으로 (v4m 시안 · 마스터 확정 08-25).
★ 「모바일이 기준이다」 — ★ 엄지는 화면 위쪽에 안 닿는다.
★★ 메뉴 글자를 안 지운다 — ★ 자리만 아래로 옮긴다 (「정보를 빼지 않는다」).
★ 다섯 칸이 폭을 나눠 갖는다 — ★ 상단 메뉴 다섯이 규격이다 (config/web.json) */
@media (max-width:639px) {
.nav { position:fixed; bottom:0; left:0; right:0; z-index:10;
background:var(--surface); border-top:1px solid var(--line2);
border-bottom:0; gap:0; padding:0; flex-wrap:nowrap; }
.nav-item { flex:1; text-align:center; padding:11px 2px 13px;
font-size:11.5px; min-height:44px; }
.nav-item em { display:block; font-size:10px; }
/* ★ 탭이 마지막 카드를 가리지 않게 — 그만큼 아래를 비운다 */
main { padding-bottom:72px; }
}
/* ── v4m 비교 · 미판정 (마스터 확정 08-26 · ref/screens/v4m_compare · v4m_notready)
★★ 「★ 좁으면 **줄로** · 넓어지면 **칸으로** 편다. ★ 담는 것은 같다」
★ 한 줄이 매물 하나다 — ★ 좁으면 세로로 쌓이고 ★ 넓으면 나란히 선다 */
.vlist { display:grid; grid-template-columns:1fr; gap:1px; background:var(--line);
border:1px solid var(--line); border-radius:7px; overflow:hidden;
margin-bottom:10px; }
.vline { display:flex; gap:10px; align-items:baseline; justify-content:space-between;
background:var(--surface2); padding:10px 12px; font-size:13px; }
.vline > span { min-width:0; }
/* ★ 줄이 통째로 문일 수 있다 (관리 메뉴) — ★ 손가락으로 짚는 자리가 넓어야 한다 */
a.vline { text-decoration:none; color:var(--text); min-height:44px; }
a.vline:hover { background:var(--surface); }
a.vline b { color:var(--amber); }
.vline b { font-family:var(--mono); white-space:nowrap; }
@media (min-width:640px) {
/* ★ 넓어지면 칸으로 — ★ 견주는 것끼리 나란히 선다 */
.vlist { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.vline { display:block; }
.vline b { display:block; margin-top:4px; font-size:16px; font-weight:700; }
}
/* ★ 미판정 「여쭐 것」 — ★ 맨 위에 크게 (v4m 시안의 주황 테두리 상자) */
.ask { border:1px solid var(--amber); border-radius:10px; padding:12px 14px;
margin-bottom:12px; background:var(--surface); }
.ask .big { text-align:left; color:var(--amber); margin-bottom:6px; }
/* ── 매물 카드의 비교 네모 (마스터 확정 08-26 · v4m_listings_시안)
★ 가이드 — 「★ 매물 카드에도 비교 네모를 둬라」
★ `.desk` 가 `display:contents` 라 ★ 자리를 잡을 상자가 하나 있어야 한다 —
그것이 `.kthumbwrap` 이다. ★ 「N곳」 배지도 그 안에 든다
★★ 사진을 시안 크기(104×78)로 키운다 — ★ 72×54 에 44px 네모를 얹으면
★ 사진이 거의 안 보인다 (짚는 자리는 44px 여야 한다 · 마스터 확정) */
.car-rows .kthumbwrap .thumb { width:104px; height:78px; }
.car-rows .kthumbwrap .nsite { position:absolute; top:2px; right:2px; z-index:3;
font-size:10px; padding:1px 5px; }
@media (min-width:1081px) {
/* ★ 넓은 폭은 그리드 칸이 104px 다 — 그대로 맞는다 */
.car-rows .kthumbwrap { width:104px; }
}
/* ══════════════════════════════════════════════════════════════════
★★★★ v4m 시안 값 — ★ 명령서 82장 (마스터 08-28)
★★★ 마스터 — 「★ 내가 시안대로 ★ 디자인 위치를 모두 보정하라고 한 거잖아.
★ ★ 내용만 있으면 시안을 왜 만들어. ★ UX 관점도 없고
★ ★ 메뉴가 위에 있다가 밑으로 가버리고」
★★★★ ★ 이름은 ★ **우리 것 그대로** 쓴다 — ★ 마스터 확정 ㉮(08-24)가
★ ★ 「시안 쪽에 `.v3-` 을 붙인다. ★ 실제 `app.css` 는 안 건드린다」이고
★ ★ 검사 `S46-67` 이 ★ 시안 이름이 여기 들어오는 것을 막는다.
★ ★ 08-28 실측 — ★ 시안 CSS 를 그대로 들였더니 ★ 289곳이 겹쳐
★ ★ `S46-67`·`S46-68`·`S46-75` 가 터지고 시험 셋이 깨졌다. ★ 되돌렸다.
★ 그래서 ★ **값만** 옮긴다 — ★ 크기·여백·색·자리를 시안에서 재서 적었다
══════════════════════════════════════════════════════════════════ */
/* ★ 목록 카드 — 시안 `.v4-card` (모바일: 좌우 14px · 위아래 12px) */
@media (max-width:639px) {
.row { display:block; padding:12px 14px; margin-bottom:0;
border-radius:0; border:0; border-bottom:1px solid var(--line); }
/* ★ 사진 — 시안 `.v4-thumb` 104×78 (아주 좁으면 88×66) */
.row .desk img, .row .desk .pimg { width:104px; height:78px; border-radius:8px; }
/* ★ 등급 배지 — 시안 `.v4-gr` 는 작은 알약이다 (19px 큰 글씨가 아니다) */
.gr { font-size:12px; font-weight:700; border-radius:12px; padding:0 6px;
line-height:1.6; text-align:left; display:inline-block; }
/* ★ 값 — 시안 `.pickprice` 16px/700 */
.row .price b { font-size:16px; font-weight:700; }
/* ★ 칸 글씨 — 시안 `.pickspec` 12px */
.row .cell { font-size:12px; }
/* ★ 단추 — 시안 `.v4-btn` 은 ★ 손가락이 닿게 44px 다 */
.row .btn, .cellset .btn { min-height:44px; border-radius:8px; font-size:13px; }
}
@media (min-width:340px) and (max-width:479px) {
.row .desk img, .row .desk .pimg { width:88px; height:66px; }
.row .price b { font-size:15px; }
.row .btn { font-size:12px; }
}
/* ★ 넓은 폭 — 시안은 사진이 180 → 240 으로 커진다 */
@media (min-width:640px) and (max-width:1023px) {
.row .desk img, .row .desk .pimg { width:180px; height:135px; }
}
@media (min-width:1024px) {
.row .desk img, .row .desk .pimg { width:240px; height:180px; }
}
/* ★ 거르개 상자 — 시안 `.v4-fil` : 아래 줄 하나 · 고르개는 40px 에 8px 둥글게 */
.chips { padding:8px 0; border-bottom:1px solid var(--line); }
@media (max-width:639px) {
.chips select, .chips input { min-height:40px; border-radius:8px;
font-size:13px; padding:0 10px; }
}
/* ★ 절 상자 — 시안 `.v4-sec` · `.v4-kv` · `.v4-box` */
.vline { display:flex; justify-content:space-between; padding:5px 0;
font-size:13px; border-bottom:1px solid var(--line); }
.vline:last-child { border-bottom:0; }
.cond.what { border:1px solid var(--amber); border-radius:10px;
background:var(--surface); padding:11px 12px; }
/* ★★★★ 22-1 · 22-4 (개정 826) — ★ 홈의 「엔카 받기」.
★ 마스터는 휴대폰뿐이다 — ★ 손가락에 닿아야 한다.
★ 22-4 필수 — ★ 340~639 에서 ★ **44px 이상** · ★ 아래 탭(bottom:0)에 안 가리게 */
.getencar { margin:10px 0 14px; display:flex; flex-wrap:wrap; gap:10px;
align-items:center; }
.getencar-btn { min-height:44px; display:inline-flex; align-items:center;
padding:0 18px; font-size:15px; font-weight:700;
border-radius:8px; white-space:nowrap; }
@media (max-width:639px) {
.getencar { flex-direction:column; align-items:stretch; }
/* ★ 한 손으로 누르시게 ★ 폭을 꽉 채운다 */
.getencar-btn { width:100%; justify-content:center; min-height:48px; }
}
/* ★★★★ 22-1 — ★ `auto=1` 로 들어오면 ★ 「고르는 자리」를 안 보인다.
★ 지우는 것이 아니다 — ★ 주소에서 `auto=1` 을 빼면 ★ 그대로 다 보인다.
★ 진행과 결과는 ★ 그대로 낸다 — ★ 받은 것을 감추지 않는다 (STEP 136c 의 뜻) */
body.auto #saveform,
body.auto .auto-hide { display:none; }
body.auto #progress { font-size:15px; line-height:1.7; }
/* ★★★ 08-29 (마스터 3번) — ★ 팔린 것을 ★ 목록에 두고 ★ **흐리게** 낸다.
★ 지우지 않는다 — ★ 「얼마에 팔렸나」가 ★ 다음 판단의 재료다 (v281 답).
★ 정렬은 SQL 이 맨 뒤로 보낸다 (`ORDER_SOLD`).
★ 새 색을 안 만든다 — ★ 이미 있는 토큰만 쓴다 (V11-13) */
.row.sold { opacity:.55; }
.row.sold:hover { opacity:.8; }
.sold-tag { color:var(--faint); border-color:var(--line2); }
/* 「약 N시간 걸립니다」 — 누르기 전에 눈에 들어와야 한다 (UI_REVIEW 25-2) */
.run-hours { color:var(--accent) }
/* ══════════════════════════════════════════════════════════════════
★★★★★ 09-01 — ★ 추천 화면 (시안 `ref/screens/v4m_recommend_시안.html`)
★ 마스터 — 「★ 시안을 꼭 보라는데 왜 안 보고 네 마음대로 하지?」
★★ 값은 ★ **시안에서 재서 적었다** — ★ 시안 CSS 를 통째로 들이지 않는다
(08-28 실측 — 그렇게 했다가 289곳이 겹쳐 검사 셋이 터졌다. 위 2425줄 참고)
★★★ 이름은 ★ **우리 것**(`pick*`)이다 — ★ 시안 이름(`rc-*`·`v4-*`)을 쓰면
★ ★ `S46-67`(시안 이름이 app.css 와 겹치면 안 된다)이 문다.
★ ★ 위 2425줄이 적어 둔 그대로다 — ★ **값만** 옮긴다
★ 색은 ★ **`:root` 토큰만** 쓴다 — ★ 값을 박으면 `V11-13`·`S46-123` 이 문다
★ 브라우저(playwright chromium)로 ★ 시안과 우리 화면을 나란히 열어 맞췄다 (09-01)
══════════════════════════════════════════════════════════════════ */
/* ★ 시안 `.picktabs` — 탭 셋. ★ 눌린 것은 호박색 밑줄 */
.picktabs { display:flex; gap:0; border-bottom:1px solid var(--line);
margin:0 0 0; }
.picktabs .btn { flex:1; text-align:center; padding:11px 0; font-size:13px;
border:0; border-bottom:2px solid transparent;
border-radius:0; background:none; }
.picktabs .btn.on { color:var(--amber); font-weight:600;
border-bottom-color:var(--amber); }
/* ★ 시안 `.pickhead` — 무엇으로 세우는지 두 줄 */
.pickhead { font-size:12px; line-height:1.6; }
/* ★ 시안 `.pickscore` — ★ 합이 카드 맨 위다 (13px/700 · 호박색) */
.pickscore { font-size:13px; font-weight:700; color:var(--amber);
margin-bottom:6px; }
.pickgrade { font-size:11px; color:var(--faint); margin-left:6px;
font-weight:400; }
/* ★★★★★ 09-01 — ★ `V11-94` 「추천 조건이 화면에 적혀 있음」이 부른 두 줄.
★ 시안에는 없다 — ★ 규격(개정 304)이 요구해 ★ **덧붙인** 것이다.
★ ★ 시안의 글자와 자리는 ★ 하나도 안 건드렸다 */
.pickwhyall { color:var(--dim); }
/* ★★★★★ 09-01 — ★ `V11-69` 로 되살린 조작들.
★ 시안의 자리와 크기는 ★ 안 건드렸다 — ★ 카드 안에 ★ 줄을 하나 더했을 뿐이다.
★ ★ 손가락 자리는 ★ 44px 이다 (`V11-76` · 모바일 대조 09-01) */
.pickorder { margin:8px 0 0; }
.pickcmp { font-size:11px; color:var(--dim); margin-right:6px; }
.pickcmp input { width:16px; height:16px; vertical-align:-2px; }
.pickfoot { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
margin-top:8px; }
.pickbuy { font-size:11px; color:var(--dim); }
.pickbuy b { color:var(--text); font-weight:600; }
.pickfoot .btn { min-height:44px; display:inline-flex; align-items:center; }
.cmpbar { margin:12px 0; }
.pickwhy { font-size:11px; color:var(--dim); margin-top:8px;
letter-spacing:.02em; }
/* ★ 시안 `.pickaxes` · `.pickax` — ★ 네 축을 알약으로. ★ 만점이면 호박색 */
.pickaxes { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pickax { font-size:11px; color:var(--dim);
background:var(--surface2); border:1px solid var(--line);
border-radius:4px; padding:2px 6px;
font-family:ui-monospace,monospace; }
.pickax b { color:var(--text); font-weight:600; }
.pickax.hi, .pickax.hi b { color:var(--amber); }
.pickax.hi { border-color:var(--amber); }
/* ★ 시안 `.pickbar` — ★ 막대는 비율이다 (부록 G · A-3). 4px */
/* ★★★★★ 09-01 — ★ `.pbar` 를 ★ 함께 단다 (`V11-77`).
★ 위쪽 `.pbar` 는 ★ `display:flex` 라 ★ 시안 꼴이 깨진다 —
★ ★ 여기서 ★ **되돌린다** (`.pbar.pickbar` 가 ★ 더 좁아 이긴다) */
.pbar.pickbar { display:block; height:4px; background:var(--surface2);
border:0; border-radius:2px; margin-top:6px; overflow:hidden; }
.pbar.pickbar i { display:block; height:100%; background:var(--amber); }
/* ★ 시안 `.pickempty` — 빈 탭 (탭 2·3) */
.pickempty { padding:60px 20px; text-align:center;
color:var(--faint); font-size:13px; }
/* ★ 시안 `.pickrow` · `.pickmid` · `.v4-thumb` 104×78 · 이름·제원·값 */
.pickrow { display:flex; gap:10px; }
.pickmid { flex:1; min-width:0; }
.pickname { font-size:14px; font-weight:600; }
.pickspec { font-size:12px; color:var(--dim); margin-top:2px; }
.pickprice { font-size:16px; font-weight:700; margin-top:4px; }
.pickthumb { width:104px; height:78px; flex:0 0 104px; border-radius:8px;
background:var(--surface2); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center;
font-size:11px; color:var(--faint); overflow:hidden; }
.pickthumb img { width:100%; height:100%; object-fit:cover; }
/* ★ 시안 `.v4-cards` — 카드가 줄줄이 붙는다 (사이 여백 없음 · 아래 선으로 가른다) */
.pickcards { display:block; }
.pickcard { display:block; border-bottom:1px solid var(--line); }
@media (max-width:479px) {
/* ★ 시안 — ★ 아주 좁으면 사진이 88×66 이다 (목록과 같은 결) */
.pickthumb { width:88px; height:66px; flex:0 0 88px; }
.pickprice { font-size:15px; }
}
/* ══════════════════════════════════════════════════════════════════
★★★★★ 09-01 — ★ **브라우저로 재서 고친 둘** (`tools/browser_diff.py`).
★ 마스터 지시 — 「★ 모바일용 태블릿용으로 나누어서 ★ 제대로 되는지 확인해」
══════════════════════════════════════════════════════════════════ */
/* ★ ① 누르는 자리는 ★ **44px** 이다 (`UI_REVIEW` · 시안 `.v4-btn`).
★ 실측 09-01 — ★ 상단 메뉴가 ★ **24px** 이었다 (여덟 화면 전부).
★ ★ 손가락이 닿는 크기가 아니다 — ★ 글씨는 그대로 두고 ★ 닿는 자리만 넓힌다 */
.brand, .nav-item, header button {
display:inline-flex; align-items:center; min-height:44px;
}
/* ★ 카드 안의 이름·값 링크도 ★ 손가락이 닿아야 한다.
★ 실측 09-01 — ★ 추천 카드의 차종 이름이 ★ 20~42px 이었다.
★ ★ 글씨는 그대로 두고 ★ 닿는 자리만 넓힌다 (줄 높이로) */
.pickname a, .pickprice a { display:inline-block; min-height:44px;
line-height:44px; }
/* ★ ② 넓은 표는 ★ **가로로만 스크롤한다** — ★ 쪽 전체가 밀리면 안 된다.
★ 실측 09-01 — ★ `/admin` 이 모바일에서 ★ 문서 폭 **584px** 였다 (뷰포트 390).
★ ★ 표 하나 때문에 ★ 쪽 전체가 옆으로 밀렸다 */
@media (max-width:639px) {
main { max-width:100%; overflow-x:hidden; }
main > table.rows,
main > .tablewrap { display:block; max-width:100%; overflow-x:auto; }
}
/* ★★★★★ 09-02 — ★ **손가락이 닿는 자리는 44px 이다** (UI_REVIEW · 시안 `.v4-btn`).
★ 브라우저로 모바일(390×844)·태블릿(820×1180)을 대조해 찾았다 [실측 09-02] —
★ ★ 여덟 화면 전부에서 ★ 단추가 19~33px 이었다:
★ ★ ★ 「미판정 보기」33 · 「가기」**19** · 「함께 보기」19 · ♡ 28 · 「원문 ↗」31
★★ 눈에 보이는 크기는 ★ 안 바꾼다 — ★ 글자와 테두리는 그대로다.
★ ★ **닿는 자리만** 늘린다 (`min-height` ＋ 가운데 맞춤).
★ ★ ★ 그래야 ★ 시안의 촘촘함을 잃지 않으면서 ★ 손가락이 빗나가지 않는다 */
.btn,
button[type="submit"],
input[type="submit"] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ★ 표 안이나 곁말 속 작은 문 — 「가기」·「함께 보기」가 19px 이었다 */
td .btn.mini, .chips .btn, .sitebar .btn, .cellset .btn {
min-height: 44px;
}
/* ★ 곁말 속 「가기」·「함께 보기」·「따로 보기」·「전부 지우기」 — ★ 이것들도 문이다 */
.note a, .dim a, .muted a, .cond a, nav a, footer a,
a.mini, a.clear, .sub a {
min-height: 44px;
display: inline-flex;
align-items: center;
}
/* ★★ 값 링크는 다르다 — 「A」「2,300km」「게시중」은 ★ **글 속의 값**이다
★ (`V11-61` 「값을 누르면 그 조건으로 걸러진다」). ★ 44px 상자로 만들면
★ ★ 카드가 통째로 벌어져 ★ 시안이 깨진다.
★★ 그래서 ★ **보이는 크기는 그대로 두고 ★ 닿는 자리만 넓힌다** —
★ ★ 위아래로 패딩을 주고 ★ 같은 만큼 여백을 뺀다. ★ 줄 높이가 안 변한다 */
/* ★★★★★ 09-02 정정 — ★ `p a` 가 ★ **단추까지 물었다**.
★ 실측 09-02 — ★ 알약 단추에 ★ `margin:-14px 0` 이 붙어
★ ★ 줄 높이가 ★ 51px 자식에 ★ **24px** 로 잡히고 ★ 다음 줄과 겹쳤다
★ ★ ★ (300·360·600·900px 전 폭 · 여섯 쌍).
★★ 값 링크만 물린다 — ★ 단추(`.btn`·`.mb`·`.nav-item`·`.heart`)는 뺀다 */
/* ★★★★★ 09-03 — ★ 배지(`.gr`) 안 글자는 ★ **뺀다.**
★ 값 링크에 준 ★ `padding:14px 0` 이 ★ 배지 글자까지 물어
★ ★ 「A」가 50px 이 되어 ★ 아래 「1위」와 겹쳤다 [실측 09-03] */
.row a:not(.btn):not(.heart):not(.mb):not(.gr *):not(.pickname *):not(.name *),
td a:not(.btn):not(.mb),
li a:not(.btn):not(.mb):not(.nav-item),
p a:not(.btn):not(.mb):not(.nav-item),
.notice a:not(.btn):not(.mb),
/* ★★★★★ 09-02 실측 — ★ `.pickname a` 를 ★ **뺐다.**
★ 앞 회차에 ★ `.pickname a { padding:0 }` 으로 막았다고 적었으나
★ ★ 이 줄이 ★ `:not(.btn)` 으로 ★ **더 세서** ★ 그 뒤에도 이겼다 —
★ ★ ★ 이름 상자가 위아래로 28px 커져 ★ 순위·제원 줄과 겹쳤다
★ ★ ★ (900px 진짜 겹침 3 — 「1 / 그랑 콜레오스」·「그랑 콜레오스 / (2년)」).
★★ 이름 줄은 ★ **글**이지 ★ 값 링크가 아니다 —
★ ★ 손가락 자리는 ★ 카드 전체가 받는다 (`data-href`). ★ 안 잃는다 */
.pickspec a, .cellset a:not(.btn) {
padding-top: 14px;
padding-bottom: 14px;
margin-top: -14px;
margin-bottom: -14px;
}
/* ★ 「가기」가 ★ 43px 이었다 — ★ 한 픽셀이 모자랐다. ★ 재서 맞춘다 */
a.mini, .note a, .dim a, .muted a { line-height: 1.5; }
/* ★ 좁은 폭에서 표가 화면을 넘겼다 — ★ 실측 09-02 (모바일 390).
★ 「좁으니 뺀다」가 아니라 ★ **「좁으니 그 표만 옆으로 민다」**다 (`V11-70`·`V11-71`).
★ ★ 몸통은 안 밀린다 — ★ 표 안에서만 민다 */
@media (max-width: 820px) {
/* ★ `main` 밖의 표도 있다 — ★ 관심 화면이 그렇다 [실측 09-02].
★ ★ 자리를 가리지 않고 ★ **표라면 다 민다** */
table { display: block; max-width: 100%; overflow-x: auto; }
}
/* ★ 쪽 번호 — ★ 29px 이었다 [실측 09-02]. ★ 목록에서 **가장 자주 누르는 자리**다.
★ 여기서 빗나가면 ★ 엉뚱한 쪽으로 간다 */
.page a { min-height: 44px; min-width: 44px;
display: inline-flex; align-items: center; justify-content: center; }
/* ★★★★★ 09-02 — ★ 시안 `.rc-models` — ★ **차종 고르개**.
★ 시안 이름(`rc-models`·`mb`)은 못 쓴다 (`S46-67`) — ★ 값만 옮긴다.
★ 시안 — 알약 · 옆으로 밀린다 · 0 건은 흐리게 · 고른 것은 호박색 */
.pickmodels { display:flex; gap:6px; overflow-x:auto; padding:10px 0;
flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
.pickmodels::-webkit-scrollbar { display:none; }
/* ★★★★★ 09-03 시험자 「칩 잘림 33/225 — 더 나빠졌다」 —
★ `white-space:nowrap` 이라 ★ 긴 차종 이름이 ★ **잘렸다**
★ ★ (「그랑 콜레오스 1.5 E-TECH」·「볼보 XC40 리차지 (전기)」).
★★ 명령서 ② — 「★ 단추 안 글자가 넘치면 ★ **두 줄로** ·
★ ★ `white-space:normal` · `word-break:keep-all` · ★ **…로 줄이지 마라**」
★ 차종이 32종이라 ★ 한 줄에 다 못 들어간다 — ★ 줄이 접히면 된다 */
.pickmodels .mb { flex:0 1 auto; font-size:12px;
white-space:normal; word-break:keep-all;
overflow-wrap:anywhere; max-width:100%;
border-radius:16px; padding:7px 12px; }
.pickmodels .mb b { font-weight:600; color:var(--text); font-size:11px; }
.pickmodels .mb.on { border-color:var(--amber); color:var(--amber); }
.pickmodels .mb.on b { color:var(--amber); }
/* ★ 0 건 — ★ 흐리게. ★ **누를 수는 있다** (「없다」가 아니라 「지금 없다」) */
.pickmodels .mb.off { opacity:.45; }
/* ★★★★★ 09-02 마스터 지시 — ★ 시안 `.v4-tabs` 대로.
★ 「★ 시안 `v4m_recommend_시안.html` 에 맞추어서 빨리 작업해」
★★ 넓은 화면 — ★ 기호를 이름 앞에 둔다 (자리는 안 옮긴다) */
.nav-item b { font-weight: 400; margin-right: 4px; }
/* ★★ 좁은 화면 — ★ **시안 그대로 아래에 붙인다.**
★ 시안은 ★ 기호가 **위**, 이름이 **아래**, 여섯 칸이 ★ 화면을 나눠 갖는다.
★ ★ 손가락은 아래에 있다 — ★ 위쪽 메뉴는 엄지가 안 닿는다 */
@media (max-width: 820px) {
.nav {
position: fixed; bottom: 0; left: 0; right: 0;
max-width: 1180px; margin: 0 auto;
display: flex; flex-wrap: nowrap; gap: 0; padding: 0;
background: var(--surface); border-top: 1px solid var(--line2);
border-bottom: 0; z-index: 10;
}
.nav-item {
flex: 1; text-align: center; padding: 9px 0 11px;
font-size: 11px; min-height: 44px;
display: flex; flex-direction: column; align-items: center;
justify-content: center;
}
.nav-item b { display: block; font-size: 17px; line-height: 1.2;
margin: 0; }
/* ★ 아래 띠가 마지막 줄을 가리지 않게 ★ 자리를 비운다.
★★★★★ 09-02 실측 — ★ 300px 에서 ★ 띠가 **두 줄**이 되어 138px 이었다.
★ ★ 64px 로는 ★ **74px 이 가려졌다.** ★ 넉넉히 둔다 */
/* ★ `body.s-listings{padding:0}` 같은 규칙이 ★ 이것을 되돌린다 —
★ ★ 실측 09-02 — ★ `padding-bottom` 이 ★ **0px** 이었다.
★ ★ ★ 그래서 ★ `body[class]` 로 ★ 한 칸 더 좁게 쓴다 */
body, body[class] { padding-bottom: 150px; }
}
/* ═══════════════════════════════════════════════════════════════════
★★★★★ 09-02 명령서 ①② — ★ 시안 `ref/screens/v4m_*.html` 그대로.
★ 마스터 — 「★ 전 화면을 시안에 맞게 · ★ 단추 겹침 0」
═══════════════════════════════════════════════════════════════════ */
/* ★★★★★ 09-02 (1부 1-2 · **7회차째**) — ★ 추천만 ★ **104×78 에 갇혀 있었다.**
★ 실측 09-02 — ★ 목록·추적은 ★ 360:104 · 900:180 · 1200:240 으로 커지는데
★ ★ 추천은 ★ 셋 다 ★ **104×78** 이었다.
★★ 까닭 — ★ 추천 카드는 ★ `
` 다.
★ ★ 아래 `.row .desk`(클래스 둘)가 ★ 폭 규칙의 `.pickthumb`(클래스 하나)보다
★ ★ ★ **더 세서** ★ 104px 로 되돌렸다.
★ ★ ★ ★ 폭 규칙에 ★ `.row .desk` 를 함께 적어 ★ 같이 커지게 했다
★★★ ① 사진은 **float** 다. ★ flex 가 아니다 (명령서 ①).
★ 까닭 — ★ flex 는 **칸을 나눈다**. ★ 글이 사진 밑으로 안 흐른다.
★ ★ 실측 — 300px 에서 ★ **사진 밑 1,840px 이 비어 있었다**
★★ `clear:both` 를 꼭 붙인다 — ★ 없으면 다음 카드가 사진 옆으로 파고든다 */
.pickrow, .row .cardbody, .cardbody {
display: block;
}
.pickrow::after, .cardbody::after {
content: ''; display: block; clear: both;
}
.pickthumb, .row .desk, .thumb {
float: left;
width: 104px;
height: 78px;
margin: 0 10px 6px 0;
flex: 0 0 auto;
}
.pickmid, .row .mid, .cardbody > div:not(.desk):not(.thumb) {
min-width: 0;
}
/* ★★ ② 단추 — ★ 글자가 넘치면 **두 줄**로. ★ 「…」로 줄이지 않는다 (명령서 ②) */
.btn, .nav-item, .mb, button, input[type="submit"] {
white-space: normal;
word-break: keep-all;
overflow-wrap: anywhere;
/* ★★★★★ 09-02 실측 — ★ `min-height` 만으로는 ★ **줄 높이가 안 큰다.**
★ 알약이 44px 인데 ★ 줄은 27.5px 로 잡혀 ★ 두 줄이 12px 씩 겹쳤다
★ ★ (600·900px · 여섯 쌍). ★ `min-height` 는 ★ 칸 안에서만 늘린다.
★★ 그래서 ★ **속 높이 자체를 44 로 만든다** — ★ 여백과 줄간으로.
★ ★ 12.5px × 1.5 = 19 ＋ 위아래 12 ＋ 테두리 2 = ★ 45 */
padding-top: 12px;
padding-bottom: 12px;
line-height: 1.5;
min-height: 44px;
box-sizing: border-box;
}
/* ★★ ② 단추 줄이 모자라면 ★ **두 줄로 접는다**.
★ ★ **가로 스크롤 금지** — ★ 밀어 보게 하면 ★ 뒤에 무엇이 있는지 모르신다 */
/* ★★★★★ 09-02 정정 — ★ `.chips` 를 통째로 물면 ★ **거르개 판을 감싼 `