/* ========================================================================== 인비랩 페이지 전용 구성 v3 — 공통 컴포넌트(style.css)로 표현되지 않는 페이지 고유 배치만 둔다. 규칙: tokens.css 변수만 사용, font-size 는 var(--text-*) 만, !important 금지, 색상 직접값 금지. 구역은 "=== page: 파일이름 ===" 주석 줄로 나눈다. 두 페이지 이상이 쓰면 style.css 의 도메인 조합으로 올린다. ========================================================================== */ /* === page: index.html === */ /* CTA 문단: style.css 의 .cta p { opacity: .9 } 가 파랑 위 흰 글자 대비를 4.48:1 로 떨어뜨려 axe(color-contrast) 가 잡는다. 이 페이지에서는 불투명하게 둔다 — style.css 쪽 수정(.cta p 의 opacity 제거)을 함께 요청함. 그쪽이 고쳐지면 이 규칙은 지운다. */ .cta p { opacity: 1; } /* 질문 답변 안내(.talk, style.css 11b 레거시 구역): 좁은 폭에서는 아이콘을 위, 글을 아래로 */ @media (max-width: 480px) { .talk { flex-direction: column; align-items: flex-start; gap: var(--space-3); } } /* === 공통: 채널 순위 행 (.ch-list — today/rocket/favorites 가 같은 행 부품을 쓴다, 작업지시서 2군 "채널 리스트 컴포넌트 통일") === 행(.ch-row, style.css) 안: .rank-no · .rank-thumb · .rank-main(.ch-name + .ch-meta) · .rank-right.ch-stats · (화면별 띠) · .ch-actions · .admin-ctrl */ .ch-list .ch-row { flex-wrap: wrap; } .ch-list .rank-no, .ch-list .list-head .h-rank { width: var(--space-10); } /* 순위가 2,000위까지라 28px 로는 좁다 */ .ch-list .list-head .h-ch { flex: 1; min-width: 0; } .ch-list .list-head .h-stats, .ch-list .ch-stats { min-width: calc(var(--space-20) + var(--space-8)); text-align: right; } .ch-list .ch-name[onclick] { cursor: pointer; } .ch-list .ch-name[onclick]:hover { color: var(--color-brand); } .ch-list .ch-name .grade { margin-right: var(--space-1); } .ch-list .ch-name .tag { margin-left: var(--space-1); } /* 등급 배지: S 경고색 · A 브랜드색 · B 성공색 · C/D 기본 배지 (글자가 등급을 말하므로 색은 보조) */ .ch-list .grade.S { background: var(--color-warning-soft); color: var(--color-warning); } .ch-list .grade.A { background: var(--color-brand-soft); color: var(--color-brand); } .ch-list .grade.B { background: var(--color-success-soft); color: var(--color-success); } .ch-list .ch-stats .money { font-weight: var(--weight-bold); color: var(--color-text); margin-top: var(--space-1); } /* 행 아래 동작 줄(관심 채널·채널 분석·유튜브) · 관리자 제어 줄(카테고리·되돌리기·삭제) — 행 전체 폭으로 줄바꿈 */ .ch-list .ch-actions { flex-basis: 100%; display: flex; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: var(--border-w) solid var(--color-border); } .ch-list .fav.on { background: var(--color-warning-soft); border-color: var(--color-warning-line); color: var(--color-warning); } .ch-list .admin-ctrl { flex-basis: 100%; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: var(--border-w) dashed var(--color-border); } .ch-list .admin-ctrl .cat-sel { width: auto; } .ch-list .pager .pinfo { align-self: center; margin-left: var(--space-2); font-size: var(--text-caption); color: var(--color-text-muted); font-weight: var(--weight-bold); } /* 지표 띠(.ch-metrics — rocket): 로켓 영상·영상 수·숏폼/롱폼 평균 길이 같은 작은 숫자 4~5칸. 좁으면 자기 줄, 넓은 화면(≥1280)은 같은 줄 오른쪽 */ .ch-list .ch-metrics { flex-basis: 100%; display: flex; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-2); border-top: var(--border-w) dashed var(--color-border); } .ch-list .ch-metrics .m { display: flex; flex-direction: column; min-width: var(--space-16); } .ch-list .ch-metrics .m b { font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; } .ch-list .ch-metrics .m b.is-hot { color: var(--color-danger); } .ch-list .ch-metrics .m span { font-size: var(--text-caption); color: var(--color-text-muted); font-weight: var(--weight-bold); } @media (min-width: 1280px) { .ch-list .ch-metrics { flex: 0 0 auto; padding-top: 0; border-top: 0; padding-left: var(--space-4); border-left: var(--border-w) dashed var(--color-border); } } /* === page: dashboard.html (홈) — 시안5B === PC: 인사말+버튼 → 인비남 배너 → KPI → 지금 터진 소재 → 오늘 뜨는 채널 → 시작 안내. 모바일(시안 모바일): 오늘 뜨는 채널 시상대가 맨 위, 그 다음 지금 터진 소재 — 컨테이너를 flex column 으로 두고 order 만 바꾼다 */ .home-page .container { display: flex; flex-direction: column; } .home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } .home-head .page-desc { max-width: 760px; } .home-coach { margin-bottom: 22px; } .home-coach .face { font-size: var(--text-body-sm); } .home-top3 .sd a { font-weight: 700; } .home-howto { margin-top: var(--space-2); } @media (max-width: 899px) { .home-top3 { order: -1; } .home-head { margin-bottom: 14px; } .home-head .btn { width: 100%; } } /* === page: today.html (오늘 뜨는 채널) — 시안5B pc-3 === */ /* 필터: 공통 .filter-panel 한 줄에 유형·정렬·구독자 (구분선) + 둘째 줄 카테고리. 모바일은 줄마다 가로 스크롤. JS 가 #filter-bar 의 display 를 block/none 으로 바꾸므로 id 는 바깥 래퍼(.today-filters)에 두고 패널은 안쪽에 둔다 */ .today-filters .label { white-space: nowrap; flex-shrink: 0; } .today-filters .chips-inline { display: contents; } .today-filters .chip.on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); } .today-head { margin-bottom: var(--space-3); } /* 시상대(1~3위): 공통 .podium 위에 영상 5개·동작 줄·관리자 줄을 얹는다 (시안 슬롯 + 이 화면의 기능) */ .today-podium { margin-bottom: 16px; } .today-podium .value .lbl { display: block; font-size: var(--text-2xs); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0; } .today-podium .name .badge, .today-podium .name .gr { vertical-align: middle; } /* 영상 5칸은 슬롯 폭에 맞춰 5등분 — 타일 자체는 공통 .ch-videos a (style.css) */ .today-podium .ch-videos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); overflow: visible; margin: var(--space-3) auto 0; max-width: calc(5 * 92px + 4 * var(--space-1)); } .today-podium .ch-videos a { width: auto; height: auto; aspect-ratio: 9 / 16; } .today-podium .ch-actions { justify-content: center; margin-top: var(--space-2); } .today-podium .admin-ctrl { justify-content: center; } @media (max-width: 899px) { .today-podium .slot { grid-template-areas: "av rank val" "av body val" "vids vids vids" "acts acts acts" "adm adm adm"; } .today-podium .name { white-space: normal; overflow: visible; text-overflow: clip; } .today-podium .value { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .today-podium .ch-videos { grid-area: vids; margin: 0; } .today-podium .ch-actions { grid-area: acts; margin-top: 0; justify-content: flex-start; } .today-podium .admin-ctrl { grid-area: adm; } } /* "왜 떴나" 한 줄(2026-09-17): 어제 대비 조회수가 가장 많이 는 영상 제목 — 길면 말줄임. 오늘 뜨는 채널(시상대·목록)·관심 채널 공통 */ .today-list .ch-why, .today-podium .ch-why, .fav-list .ch-why { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: var(--space-1); } .today-list .ch-why .lbl, .today-podium .ch-why .lbl, .fav-list .ch-why .lbl { font-weight: var(--weight-bold); color: var(--color-brand); margin-right: var(--space-1); } .today-list .ch-why a, .today-podium .ch-why a, .fav-list .ch-why a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .today-list .ch-why a:hover, .today-podium .ch-why a:hover, .fav-list .ch-why a:hover { color: var(--color-brand); } /* 4위 이하 목록 상자(.rank-list.today-list.ch-list): 행 안 영상 미리보기·동작 줄은 공통 .ch-list 규칙 */ .today-list .ch-videos .vrank { position: absolute; top: var(--space-1); left: var(--space-1); min-width: var(--icon-sm); height: var(--icon-sm); line-height: var(--icon-sm); padding: 0 var(--space-1); text-align: center; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-text-inverse); background: var(--color-text); border-radius: var(--radius-sm); } .today-list .ch-videos .vrank.top { background: var(--color-warning); } .today-list .ch-videos .v { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); text-align: center; } .today-list .ch-videos a.center { outline: var(--border-w-strong) solid var(--color-warning); outline-offset: calc(-1 * var(--border-w-strong)); } /* 넓은 화면(≥1280): 미리보기 5칸을 같은 줄 오른쪽에 붙여 한 줄 컴팩트 배치. 그 아래 폭은 자기 줄로 내려가 가로 스크롤. */ @media (min-width: 1280px) { .today-list .ch-videos { flex: 0 0 auto; } } /* === page: hot.html (지금 뜨는 소재) — 시안5B pc-2 === */ /* 관리자 안내(#devnote): JS 가 style.display 를 block 으로 바꿔 보여주므로 바깥 래퍼를 숨기고, 안쪽 .alert 는 flex(아이콘+글) 를 유지한다 */ .hot-devnote { display: none; margin-bottom: var(--space-4); } /* 머리: 제목(빨간 강조) + 설명 / 오른쪽 큰 편수 + "3시간마다 갱신 · HH:MM" */ .hot-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; } .hot-head .page-desc { max-width: 760px; } .hot-count { text-align: right; flex-shrink: 0; } .hot-count .n { font-size: var(--text-h1); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; } .hot-count .n .u { font-size: var(--text-body-sm); color: var(--color-text-muted); margin-left: 2px; } .hot-count .t { font-size: var(--text-2xs); color: var(--color-text-muted); font-weight: 700; } /* 팁바 앞 옐로 알약 라벨("24시간 규칙") */ .hot-tip > .lbl { color: var(--color-accent); white-space: nowrap; background: var(--color-accent-dim); padding: 3px 10px; border-radius: 6px; font-weight: 900; } /* 긴 안내문 접기(details): 나머지 7개 항목 */ .hot-page details.guide { margin: calc(-1 * var(--space-2)) 0 var(--space-4); } .hot-page details.guide summary { cursor: pointer; padding: var(--space-2) var(--space-3); border: var(--border-w) dashed var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-body-sm); font-weight: var(--weight-bold); color: var(--color-text-secondary); } .hot-page details.guide summary:hover { background: var(--color-surface); } .hot-page details.guide[open] summary { margin-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; } .hot-page details.guide .bd { padding: var(--space-3) var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.7; } /* 필터(공통 .filter-panel): 1줄 = 기간·난이도·분류·정렬 칩, 2줄 = 선택됨 알약 + 전체 초기화 */ .hot-filter .label { white-space: nowrap; flex-shrink: 0; } .hot-filter #catchips, .hot-filter #picks { display: contents; } /* 감싼 span 을 투명하게 — 칩들이 줄의 직접 자식처럼 한 줄(모바일 가로 스크롤)로 놓인다 */ .hot-filter .chip.on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); } .hot-filter .picks-row.is-default { color: var(--color-text-muted); } .hot-filter .filter-picked .chip.x { height: auto; min-height: 0; padding: 0 2px; border: 0; background: none; color: inherit; font-size: inherit; font-weight: 900; opacity: 0.7; } .hot-filter .filter-picked .chip.x:hover { opacity: 1; } .hot-filter .filter-reset { border-style: dashed; } /* 카드 격자(.hot-grid): 한 줄에 6장. 2026-09-10 대표 지시로 '같은 원본' 묶음 상자(띠)를 없애고 카드를 그대로 나열한다 */ .hot-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; } /* 남은 글자가 셋뿐이라 '평소 → N배'를 크게 키워 눈에 띄게 한다 (2026-09-10 대표 지시). 홈 화면 카드는 그대로 두려고 .hot-grid 안에서만 */ .hot-grid .shorts-card .meta .base { font-size: var(--text-caption); color: var(--color-text-secondary); margin-top: 4px; } .hot-grid .shorts-card .meta .base em { font-size: var(--text-h3); font-weight: 900; letter-spacing: -0.02em; } .hot-grid .shorts-card .thumb .chan span { font-size: var(--text-micro); } @media (max-width: 1279px) { .hot-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1099px) { .hot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899px) { .hot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .hot-count { text-align: left; } } /* === page: similar.html === */ /* 관리자 안내(#devnote)·검수 탭줄(#bar): JS 가 style.display 를 block/flex 로 바꿔 보여주므로 기본은 숨김. #bar 는 공통 .tabs 자체에 두어 JS 의 display:flex 가 탭 배치와 같도록 한다 */ .sim-devnote { display: none; } .sim-tabs { display: none; } .sim-tabs .sim-count { align-self: center; } /* 390 폭에서 탭 4개 + 묶음 수가 한 줄에 들어가도록 탭 안쪽 여백만 줄인다 (줄바꿈되면 활성 탭 밑줄이 경계선에서 떨어진다) */ @media (max-width: 480px) { .sim-tabs .tab { padding: 0 var(--space-2); } } /* 내 카테고리 select: 공통 .select 의 100% 폭 대신 내용 폭 (필터 줄은 hot.html 과 같은 공통 .filter-panel) */ .sim-page .filter-panel .sim-sel { width: auto; } /* 묶음 나열 — #list 는 JS 가 className 을 "pack"/"empty" 로 바꾼다. 묶음 하나 = 공통 '같은 원본' 상자(.origin-group, style.css 4-4) + 그 안의 세로 소재 카드(.shorts-card, 4-3) — hot.html 과 같은 부품(작업지시서 6장). 2026-09-10 대표 지시: 상자 안에 빈 칸이 남지 않게 — 격자를 6칸으로 두고 상자가 '보이는 카드 수'만큼 칸을 차지한다 (hot.html 과 같은 방식). 묶음은 최소 2편이라 상자도 최소 2칸이다 (꼬리표·검수 버튼이 들어갈 폭). */ .sim-page .pack { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: var(--space-3); } .sim-page .pack > .empty { grid-column: 1 / -1; } .sim-group { width: 100%; margin-bottom: 0; min-width: 0; } .sim-group.n2 { grid-column: span 2; } .sim-group.n3 { grid-column: span 3; } .sim-group.n4 { grid-column: span 4; } .sim-group.n5 { grid-column: span 5; } .sim-group.n6 { grid-column: span 6; } /* 꼬리표 = 묶음 제목(원본 소재 이름). 길면 말줄임하고 오른쪽 '더보기' 자리는 비워 둔다 */ .sim-group > .tag { max-width: calc(100% - 128px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); } /* "+N개 더보기"/"접기" — 공통 .origin-group > .more 자리(오른쪽 위). 라벨 두 개를 넣어 두고 펼침 여부(.sim-group.expanded)에 따라 하나만 보인다 */ .sim-group > .more { height: auto; line-height: var(--leading-caption); } .sim-group > .more .cl-less-label { display: none; } .sim-group.expanded > .more .cl-more-label { display: none; } .sim-group.expanded > .more .cl-less-label { display: inline; } /* 상자 안 카드: 칸 수를 카드 수에 맞춰 빈 칸을 없앤다. 7장째부터(.extra)는 '더보기'를 눌러야 보인다 */ .sim-group .shorts-grid { gap: 11px; } .sim-group.n2 .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sim-group.n3 .shorts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sim-group.n4 .shorts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sim-group.n5 .shorts-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sim-group.n6 .shorts-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sim-group:not(.expanded) .shorts-card.extra { display: none; } /* 카드는 썸네일 + 시차 배지(최초 관찰·+N일) + 조회수만 (대표 요청 2026-09-08: 제목·채널·증가량 글자 생략). 작은 카드라 조회수 글자는 한 단계 작게 */ .sim-group .shorts-card .meta { padding: var(--space-1) var(--space-2) var(--space-2); } .sim-group .shorts-card .meta .row1 { justify-content: center; } .sim-group .shorts-card .meta .views { font-size: var(--text-h3); } /* 해외 채널 나라 코드 (JP·US…) — 조회수 옆 작은 칩. 한국 채널에는 안 붙는다 (2026-09-17) */ .sim-group .shorts-card .meta .cc { margin-left: 6px; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-text-muted); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-full); padding: 0 6px; line-height: 1.5; } .sim-group .shorts-card .gap { top: 7px; } /* 배율 배지가 없는 화면이라 시차 배지를 맨 위로 */ /* 관리자 검수 줄(공개·반려·공개 취소) — 상자 아래 오른쪽 (관리자에게만 그려진다) */ .sim-group .acts { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--border-w) dashed var(--color-group-line); } /* 화면이 좁아지면 격자 칸을 줄이고, 칸보다 넓은 상자는 줄 폭까지만 차지하게 맞춘다 (hot.html 과 같은 단계) */ @media (max-width: 1279px) { .sim-page .pack { grid-template-columns: repeat(5, minmax(0, 1fr)); } .sim-group.n6 { grid-column: span 5; } .sim-group.n6 .shorts-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1099px) { .sim-page .pack { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sim-group.n5, .sim-group.n6 { grid-column: span 4; } .sim-group.n5 .shorts-grid, .sim-group.n6 .shorts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 899px) { .sim-page .pack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .sim-group.n3, .sim-group.n4, .sim-group.n5, .sim-group.n6 { grid-column: span 2; } .sim-group.n3 .shorts-grid, .sim-group.n4 .shorts-grid, .sim-group.n5 .shorts-grid, .sim-group.n6 .shorts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sim-page .pack { grid-template-columns: 1fr; } /* 폰: 한 줄에 한 묶음 */ .sim-group.n2, .sim-group.n3, .sim-group.n4, .sim-group.n5, .sim-group.n6 { grid-column: span 1; } .sim-group .shorts-grid, .sim-group.n2 .shorts-grid, .sim-group.n3 .shorts-grid, .sim-group.n4 .shorts-grid, .sim-group.n5 .shorts-grid, .sim-group.n6 .shorts-grid { grid-template-columns: 1fr 1fr; gap: 9px; /* 폰: 카드 2열 (작업지시서 7장 ⑤) */ } } /* === page: analyze.html === */ /* 상태 상자: 페이지 JS 가 className 을 "an-load"/"an-load show", "an-err"/"an-err show", "an-res"/"an-res show" 처럼 통째로 덮어쓰므로(로직 불변) 그 이름을 그대로 두고 여기서 '보임/숨김'만 정한다. 겉모습은 안쪽의 공통 컴포넌트(.loading/.card/.alert)가 맡는다. 같은 클래스를 assets/js/tools-addon.js(자막제거기 세션 소유, 이관 보류)가 주입하는 후킹 상자(#hk-box)도 쓰므로 이름을 바꾸지 않는다. */ .an-load { display: none; } .an-load.show { display: block; } /* tools-addon 호환: 그 상자는 .an-load 바로 아래에 .spin(빈 div)+글자만 넣는다 — 공통 .spinner 와 같은 모양을 준다 */ .an-load.show:has(> .spin) { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; color: var(--color-text-secondary); } .an-load > .spin { display: inline-block; width: var(--icon-md); height: var(--icon-md); border: 2px solid var(--color-border); border-top-color: var(--color-brand); border-radius: var(--radius-full); animation: spin 0.7s linear infinite; flex-shrink: 0; } .an-err { display: none; } .an-err.show { display: block; color: var(--color-danger-text); } /* 오류 알림: JS 가 #an-err(안쪽)에 textContent 를 쓰므로 .alert 는 바깥에 두고, 안쪽이 .show 일 때만 알림 상자를 보인다 */ .an-alert:not(:has(> .an-err.show)) { display: none; } .an-res, .src-res, .tr-res, .sc-res { display: none; } .an-res.show { display: flex; flex-direction: column; gap: var(--space-3); } /* 결과가 나오면 JS 가 #an-res 로 스크롤한다 — 위에 고정된 티커(46px)+바로가기 줄에 결과 머리가 가려지지 않게 여백을 둔다 (폰은 상단바 56px) */ .an-res { scroll-margin-top: calc(var(--ticker-h) + var(--space-16)); } @media (max-width: 899px) { .an-res { scroll-margin-top: calc(var(--header-h) + var(--space-2)); } } .src-res.show, .tr-res.show, .sc-res.show { display: block; margin-top: var(--space-4); } /* JS 가 style.display 를 block/flex 로 켜는 요소들의 초기 숨김 (#devnote 는 래퍼, #an-toc 는 flex 로 켜짐) */ .an-devnote, .an-recent, .an-toc, .src-box, .tr-box, .sc-box, .tr-on { display: none; } /* 검색 카드(① 넣기): 공통 .tp-panel/.tp-field/.tp-actions(style.css 4-4d) 그대로 — 페이지 전용 규칙 없음 */ /* 안내 카드: 4단계 소개를 타일 격자로 (공통 .steps-list 의 번호 원 그대로) */ .an-guide .steps-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .an-guide .steps-list li { flex-direction: column; gap: var(--space-2); padding: var(--space-3); background: var(--color-surface-subtle); border-radius: var(--radius-md); color: var(--color-text); } .an-guide .steps-list li::before { position: static; flex-shrink: 0; } /* 번호 원을 흐름 안에(제목 위) — 절대 위치라 제목과 겹치던 것 */ .an-guide .steps-list li b { display: block; font-size: var(--text-title); font-weight: var(--weight-h3); } /* 최근 분석한 영상: 썸네일+제목 버튼 (공통 .btn.btn-outline 의 높이를 풀어 40px 썸네일을 넣는다) */ .an-recent { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--border-w) dashed var(--color-border); } .an-recent-title { margin: 0; } .an-recent-item { height: auto; max-width: 100%; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); } .an-recent-item img { width: var(--space-10); height: var(--space-10); object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-hover); } .an-recent-item .t { max-width: calc(var(--space-20) * 3); font-size: var(--text-body-sm); text-align: left; } /* 결과 바로가기 줄: 결과가 나오면 JS 가 display:flex 로 켠다. 위에 붙어 따라오고, 모바일에서는 메뉴 버튼과 겹치지 않게 흐름에 둔다 */ .an-toc { position: sticky; top: var(--space-2); z-index: var(--z-header); align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .an-toc .chip:hover { text-decoration: none; border-color: var(--color-brand); color: var(--color-brand); } /* 1단계 묶음: JS 가 결론 카드를 만들 때 #ib-stage1 래퍼로 기본 분석 자료를 감싼다(클래스 없음) — 카드 사이 간격만 */ #ib-stage1 { display: flex; flex-direction: column; gap: var(--space-3); } .an-stage-title { margin: var(--space-2) 0 0; } .an-kicker { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); color: var(--color-brand); margin: 0 0 var(--space-1); } /* 영상 요약 카드: 세로 썸네일(9:16) + 분류 배지 + 주제 + 요약 */ .an-res-top { display: flex; gap: var(--space-4); align-items: flex-start; } .an-res-thumb { width: calc(var(--space-20) + var(--space-10)); flex-shrink: 0; } .an-topic { margin-bottom: var(--space-2); } /* 이 페이지의 칩은 검색어·링크 글자라 길 수 있다 — 한 줄 높이는 그대로, 넘치면 줄바꿈 */ .analyze-page .chip { height: auto; min-height: var(--control-h-sm); padding-top: var(--space-1); padding-bottom: var(--space-1); white-space: normal; line-height: var(--leading-body-sm); text-align: left; max-width: 100%; } .stars { color: var(--color-warning); letter-spacing: 2px; } /* 제작 결론 카드 (JS 생성 #ib-verdict-card.an-verdict): 브랜드 연한 바닥 */ .an-verdict { background: var(--color-brand-soft); border-color: var(--color-brand-line); } .an-verdict-label { font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: var(--weight-h3); } .an-reasons { margin: var(--space-2) 0 0 var(--space-5); font-size: var(--text-body-sm); color: var(--color-text-secondary); } .an-plain-list { margin: var(--space-1) 0 0 var(--space-5); } /* 기획안 카드 (JS 생성): 자리표시 로딩은 원본처럼 자리를 잡아 두고, 소제목은 title 역할 */ .an-plan-load { min-height: calc(var(--space-20) * 3); display: flex; flex-direction: column; justify-content: center; } .an-plan-concept { margin-top: var(--space-1); } .an-plan-h { font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-h3); } /* 원본 후보: 후보 행은 공통 .list-item + .rank-thumb.video, 가능성 배지는 글자 + 보조색 */ .src-card .sc-info { flex: 1 1 0; } /* basis 0: 좁은 폭에서 줄바꿈될 때도 썸네일 옆에 남는다 */ .src-card .sc-link { color: inherit; text-decoration: none; } .src-card .sc-link:hover { text-decoration: underline; } .src-card .g-badge.g-높음 { background: var(--color-success-soft); color: var(--color-success); } .src-card .g-badge.g-중간 { background: var(--color-warning-soft); color: var(--color-warning); } .src-links .sl-t { flex-basis: 100%; } .src-links:empty { display: none; } /* 대본 따기: 시각(모노) + 대사 */ .tr-line { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--border-w) solid var(--color-border); } .tr-line .tm { flex: 0 0 var(--space-12); font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-body); font-weight: var(--weight-bold); color: var(--color-brand); } .tr-line .tx { flex: 1; min-width: 0; } .tr-on { margin-top: var(--space-3); } /* 벤치마킹 대본: 번호 원 + 대사 + 장면 + 재료 링크(칩) + 스톡 미리보기 격자 */ .sc-input { flex-wrap: wrap; } .sc-line { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--border-w) solid var(--color-border); } .sc-line .no { flex-shrink: 0; min-width: var(--icon-lg); height: var(--icon-lg); padding: 0 var(--space-1); border-radius: var(--radius-full); background: var(--color-brand-soft); color: var(--color-brand); font-size: var(--text-caption); font-weight: var(--weight-bold); display: inline-flex; align-items: center; justify-content: center; } .sc-line .lt { flex: 1; min-width: 0; } .sc-line .tx { font-weight: var(--weight-bold); } .sc-line .sc { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); margin-top: var(--space-1); } .sc-line .mat-links { margin-top: var(--space-2); } /* 소스 영상 안내는 JS 가 .sc-title(card-section) 안에 끼워 넣으므로 흰 바닥+선으로 구분한다 */ .an-sc-source { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); } .an-sc-thumb { width: calc(var(--space-20) + var(--space-6)); border-radius: var(--radius-md); background: var(--color-surface-hover); } .prev-grid { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); } .prev-grid.show { display: grid; } .prev-grid a { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-hover); } .prev-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .prev-grid .pv-d { position: absolute; right: var(--space-1); bottom: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); font-weight: var(--weight-bold); } .prev-grid .prev-msg, .prev-grid .prev-note { grid-column: 1 / -1; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); } @media (max-width: 768px) { .an-guide .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-toc { position: static; } .an-toc .btn { margin-left: 0; flex: 1 1 100%; } } @media (max-width: 480px) { .an-guide .steps-list { grid-template-columns: 1fr; } .an-guide .steps-list li { flex-direction: row; align-items: flex-start; } .sc-input > .btn { flex: 1 1 100%; } .an-res-thumb { width: var(--space-20); } .src-card { flex-wrap: wrap; } .src-card .src-grade { flex-basis: 100%; padding-left: calc(96px + var(--space-3)); } /* 96px = 공통 .rank-thumb.video 폭 */ .prev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* === page: yt-script.html === */ /* 관리자 안내(#devnote): JS 가 style.display 를 block 으로 바꿔 보여주므로 바깥 래퍼를 숨기고, 안쪽 .alert 는 flex(아이콘+글) 를 유지한다 */ .ys-devnote { display: none; } /* 주소 입력 줄: 주소 상자(별표 단추 · 즐겨찾기 목록 포함) + 길이·개수 select + 불러오기 버튼 (좁으면 줄바꿈) */ .ys-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .ys-urlbox { position: relative; flex: 1 1 calc(var(--space-20) * 4); min-width: 0; } .ys-urlbox .input { padding-right: var(--space-10); } /* 오른쪽 끝 별표 단추 자리 */ .ys-row .select { width: auto; min-height: var(--control-h-lg); } /* 공통 .select 의 100% 폭 대신 내용 폭 · 높이는 시안 입력칸(44px)에 맞춤 */ .ys-urlbox .input { border-width: 1.5px; border-radius: 9px; } /* 시안 입력칸 */ /* 별표(즐겨찾기) 단추: 입력창 안 오른쪽. 켜짐(.on)은 경고색 + 채운 별 — JS 가 className 을 "btn … ys-fav (on)" 으로 다시 쓴다 */ .ys-fav { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); } .ys-fav.on { color: var(--color-warning); } .ys-fav.on .icon { fill: currentColor; } /* 즐겨찾기 목록: 공통 .menu 를 주소 상자 폭으로 펼친다 (JS 가 .show 토글). 행은 .menu-item(div onclick) + 제목/주소/삭제 단추 */ .ys-drop { display: none; left: 0; max-height: calc(var(--space-20) * 3 + var(--space-5)); overflow: auto; } .ys-drop.show { display: block; } .ys-drop .it { cursor: pointer; } .ys-drop .t { flex: 1; min-width: 0; font-weight: var(--weight-bold); } .ys-drop .u { max-width: 45%; } .ys-drop .x { flex-shrink: 0; } .ys-drop .none { padding: var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-muted); } /* 상태 상자들은 처음에 숨김 — JS 가 .show(오류·완료·진행) 또는 style.display(요약·본문) 로 연다 */ .ys-msg { display: none; } .ys-msg.show { display: block; } /* 완료 안내는 여러 줄(실패 목록·미완성 목록)이라 flex 가 아닌 block */ .ys-sum { display: none; margin-bottom: var(--space-4); } .ys-sum > .stat-grid { width: 100%; } /* JS 가 래퍼를 flex 로 켜므로 격자 폭을 고정 */ .ys-body { display: none; } .ys-prog { display: none; } .ys-prog.show { display: block; } /* 동작 줄: 선택/저장/복사 버튼 + 선택 개수(오른쪽), 아래 줄에 받아쓰기 방식 선택 */ .ys-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; } .ys-cnt { font-size: var(--text-body-sm); font-weight: var(--weight-bold); color: var(--color-text-secondary); white-space: nowrap; } .ys-sep { width: var(--border-w); height: var(--space-5); background: var(--color-border); margin: 0 var(--space-1); } .ys-eng { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-w) solid var(--color-border); } /* 받아쓰기 방식(정밀/빠름) 분절 단추: 공통 .btn 위에 두 줄 글(굵은 이름 + 작은 설명), 켜짐(.on)은 흰 바닥 + 브랜드색 */ .ys-seg { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--color-surface-subtle); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); } .ys-seg .seg-b { height: auto; padding: var(--space-2) var(--space-3); background: transparent; color: var(--color-text-secondary); } .ys-seg .seg-b:hover { background: var(--color-surface-hover); color: var(--color-text); } .ys-seg .seg-b.on { background: var(--color-surface); color: var(--color-brand); border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); } .ys-seg .seg-b .tx { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--space-1) / 2); line-height: var(--leading-caption); text-align: left; } .ys-seg .seg-b .tx b { font-size: var(--text-body-sm); } .ys-seg .seg-b .tx i { font-style: normal; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--color-text-muted); } /* 영상 표(.table.ys): 숫자 열 오른쪽 정렬·한 줄, 제목 열만 줄바꿈, 정렬 가능한 머리, 머리 안 제목 검색 상자 */ .ys th, .ys td { text-align: right; white-space: nowrap; } .ys td { font-variant-numeric: tabular-nums; } .ys .l { text-align: left; } .ys td.l { white-space: normal; min-width: calc(var(--space-20) * 3); } .ys .nos, .ys td:first-child { text-align: center; } .ys .ys-chk { width: var(--space-8); } .ys th[onclick] { cursor: pointer; user-select: none; } .ys th[onclick]:hover { color: var(--color-brand); } .ys th .ar { opacity: 0.4; vertical-align: middle; margin-left: calc(var(--space-1) / 2); } .ys th.on .ar { opacity: 1; color: var(--color-brand); } .ys th .qbox { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); vertical-align: middle; } .ys th .qbox .input { width: calc(var(--space-20) * 2); font-weight: var(--weight-medium); } .ys th .qbox .input::-webkit-search-cancel-button { -webkit-appearance: none; } /* 지우기 버튼이 따로 있어 브라우저 기본 x 는 숨김 */ .ys th .qn { font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--color-brand); } .ys .tt { font-weight: var(--weight-bold); cursor: pointer; } .ys .tt:hover { color: var(--color-brand); } .ys td.hot { color: var(--color-success); font-weight: var(--weight-bold); } /* 채널 평균의 1.3배 이상 (머리 tip 이 설명) */ .ys .dsc { margin-top: var(--space-1); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-text-muted); white-space: normal; } .ys .more { height: auto; padding: 0 var(--space-1); font-size: var(--text-caption); color: var(--color-brand); vertical-align: baseline; } .ys input[type="checkbox"] { width: var(--icon-sm); height: var(--icon-sm); accent-color: var(--color-brand); cursor: pointer; } .ys td > .empty { border: 0; background: transparent; } /* 표 상자 안이라 점선 테두리는 뺀다 */ /* 저장 방식 창: 공통 .modal-backdrop/.modal, JS 가 .show 로 연다. 선택지(.opt)는 라디오처럼 보이는 카드(div onclick, JS 가 .sel 토글) */ .ys-modal { display: none; } .ys-modal.show { display: flex; } .ys-modal .opt { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer; font-weight: var(--weight-title); } .ys-modal .opt::before { content: ""; flex-shrink: 0; width: var(--icon-sm); height: var(--icon-sm); margin-top: calc(var(--space-1) / 2); border-radius: var(--radius-full); border: var(--border-w) solid var(--color-border-strong); background: var(--color-surface); } .ys-modal .opt:hover { border-color: var(--color-brand-line); } .ys-modal .opt.sel { border-color: var(--color-brand); background: var(--color-brand-soft); } .ys-modal .opt.sel::before { border: var(--space-1) solid var(--color-brand); } .ys-modal .opt small { display: block; font-weight: var(--weight-regular); color: var(--color-text-secondary); margin-top: calc(var(--space-1) / 2); } .ys-modal .warn { display: none; } .ys-modal .warn.show { display: flex; } @media (max-width: 768px) { .ys-sum > .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 요약 7칸: 모바일은 한 줄 1칸(공통) 대신 2칸 */ } @media (max-width: 480px) { .ys-row .btn-primary { flex: 1 1 100%; } /* 모바일: 불러오기 버튼을 한 줄 전체 폭으로 */ .ys-sep { display: none; } /* 버튼이 줄바꿈되면 구분선이 어색하므로 숨김 */ } /* === page: shorts.html === */ /* JS 가 classList 로 .sc-hidden 을 붙였다 뗀다 (원본 클래스 보존). 공통 .alert/.empty(display:flex) 보다 뒤에 있어 숨김이 이긴다. */ .sc-hidden { display: none; } /* 파일 드롭: JS 가 dragover 에 .on 을 붙인다 → 공통 .file-drop.is-over 와 같은 모양 */ .sc-page .file-drop.on { border-color: var(--color-brand); background: var(--color-brand-soft); } /* 목적 선택: 버튼 3개 격자 · 두 줄(제목 + 설명) 버튼 · 선택은 .on (JS 가 classList.toggle) */ .sc-obj { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } .sc-obj .btn { height: auto; min-height: var(--control-h-lg); flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2); white-space: normal; text-align: center; line-height: var(--leading-body-sm); } .sc-obj .btn small { font-weight: var(--weight-regular); color: var(--color-text-secondary); } .sc-obj .btn.on { border-color: var(--color-brand); background: var(--color-brand-soft); color: var(--color-brand); } .sc-obj .btn.on small { color: var(--color-brand); } /* 권리 확인: 노란 안내 상자(.alert-warning) 안의 체크박스(.check) — 본문 크기 */ .sc-agree { font-size: var(--text-body); } .sc-agree input { flex-shrink: 0; } /* ≤768 공통 input{min-width:0} 때문에 체크박스가 찌그러지지 않게 */ /* 업로드 진행 막대: 시작값 0 (JS 가 style.width 로 채운다) */ .sc-prog .progress-bar { width: 0; } /* 후보 카드(.card-section.sc-cand) 안 점수 배지 줄 */ .sc-cand .chips { margin-top: var(--space-2); } @media (max-width: 480px) { .sc-obj { grid-template-columns: 1fr; } /* 내 영상 목록 행: 제목 줄 아래로 상태 배지·날짜를 내린다 */ .sc-list-item { flex-wrap: wrap; } .sc-list-item .main { flex-basis: 100%; } } /* === page: channel.html === */ /* 검색 결과 목록(.list): 결과가 채워졌을 때만 검색 줄과 간격을 둔다 */ .ch-results:not(:empty) { margin-top: var(--space-4); } /* 상세 카드·AI 진단 상자: 처음엔 숨김 — JS 가 style.display 로 열고 닫는다 (원본 인라인 display:none 대체) */ .ch-detail { display: none; } .ch-ai-box { display: none; background: var(--color-brand-soft); border: var(--border-w) solid var(--color-brand-line); } .ch-ai-text { white-space: pre-wrap; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); } .ch-ai-used:empty { display: none; } /* 오류 응답 때 사용량 줄이 비면 빈 여백을 남기지 않는다 */ /* 관심 채널 버튼 켜짐 상태 (JS 가 data-on="1" 을 준다) */ .ch-fav[data-on="1"] { background: var(--color-warning-soft); border-color: var(--color-warning-line); color: var(--color-warning); } /* 수치 카드 4개: 모바일에서도 2열 (공통 .stat-grid 는 ≤768 에서 1열 — 값이 짧아 2열이 읽기 좋다) */ @media (max-width: 768px) { .ch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* === page: rocket.html === */ /* 필터: 공통 .filter-panel 에 검색 줄 + "라벨 + 칩" 줄 두 개 (today.html 과 같은 구성, 모바일은 가로 스크롤). 행은 공통 .ch-list */ .rocket-filters .label { white-space: nowrap; flex-shrink: 0; } /* 준비중 기간 칩(주간·월간): disabled 표시 (공통 .chip 에는 disabled 모양이 없음) */ .rocket-filters .chip[disabled] { opacity: 0.5; cursor: not-allowed; } /* 채널명 검색: 줄을 다 채우되 너무 넓어지지 않게 */ .rocket-filters .rocket-search { flex: 1 1 220px; max-width: 420px; } .rocket-list .pager { margin-top: var(--space-3); } /* 로켓 영상 띠(2026-09-17): 하루 10만 이상 급상승한 영상 최대 5개 — 사진 위 "+조회수" 띠는 today 의 .v 와 같은 모양. 지표 띠 아래 자기 줄 */ .rocket-list .ch-videos { padding-top: var(--space-2); } .rocket-list .ch-videos .v { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); text-align: center; } /* === page: lab.html === */ /* 컨테이너에 남긴 .wrap(tools-addon.js 의 앵커) 은 style.css 레거시 규칙이 1200 폭을 주므로 좁은 컨테이너 폭으로 되돌린다 */ .lab-page .wrap { max-width: var(--container-narrow); } /* 연결 테스트 결과(#ping-out): JS 가 className 을 "test-out" / "test-out ok" / "test-out bad" 로 통째로 바꾸므로(로직 불변) 그 이름을 공통 .alert-success / .alert-danger 와 같은 모양으로 그린다. JS 의 className 3줄을 "alert alert-success" 등으로 바꿔도 되면 이 블록은 사라진다. */ .lab-page .test-out { display: none; } .lab-page .test-out.ok, .lab-page .test-out.bad { display: block; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); white-space: pre-wrap; } .lab-page .test-out.ok { background: var(--color-success-soft); border-color: var(--color-success-line); color: var(--color-success); } .lab-page .test-out.bad { background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger-text); } /* 하루 한도 입력칸: 행 안에서 숫자 3자리 폭만 차지한다 (공통 .input 은 100% 폭) */ .lab-page .lim { width: var(--space-20); flex-shrink: 0; text-align: center; } /* === page: blueprint.html === */ /* JS 가 className 을 통째로 바꾸거나 style.display 로 켜고 끄는 상자들(로직 불변): 비공개 안내 #devnote · 진행 중 #bp-load(.an-load) · 오류 #bp-err(.an-err) · 결과 #bp-res(.bp-res) · 캐시 안내 #cachenote · 스톡 미리보기 격자(.prev-grid). 초기 숨김은 hidden 속성 대신 클래스로 둔다 (공통 [hidden] 규칙이 JS 의 style.display 보다 우선해 켤 수 없기 때문). */ .bp-page .bp-devnote, .bp-page .an-load, .bp-page .an-err, .bp-page .bp-res, .bp-page .cachenote, .bp-page .prev-grid { display: none; } .bp-page .an-load.show, .bp-page .bp-res.show, .bp-page .cachenote.show { display: block; } .bp-page .an-load.show { margin-bottom: var(--space-4); } /* 오류 상자: JS 가 #bp-err 에 textContent 를 직접 쓰므로 안쪽에 .alert 를 둘 수 없어, 그 이름을 공통 .alert-danger 와 같은 모양으로 그린다 */ .bp-page .an-err.show { display: block; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-danger-line); background: var(--color-danger-soft); color: var(--color-danger-text); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); } /* "새로 분석" 버튼(#btn-force): JS 가 style.display 를 "inline-block"/"none" 으로 켜고 끈다. inline-block 이 되면 .btn 의 inline-flex 가 풀리므로 줄높이를 버튼 높이(sm)에 맞춰 글자를 세로 가운데에 둔다 — community/post 의 .btn-js-toggle 과 같은 규칙 (공통 유틸로 올리면 사라진다) */ .bp-page .btn-js-toggle { display: none; line-height: var(--control-h-sm); } /* 요약 카드(.card.bp-top): 세로(9:16) 썸네일 + 판정·난이도 배지 + 조립 공식 + 병목 안내 */ .bp-page .bp-top { display: flex; gap: var(--space-5); align-items: flex-start; } .bp-page .bp-top .thumb { width: calc(var(--space-20) + var(--space-5)); flex-shrink: 0; } /* 판정(GO/주의/비추천)·난이도(쉬움/보통/어려움) 배지: JS 가 #b-go/#b-diff 의 className 을 "go-badge go-X" / "d-chip d-X" 로 통째로 바꾸므로 .badge 와 같은 모양을 이 이름들에 준다 (className 두 줄을 "badge badge-success" 등으로 바꿔도 되면 첫 줄은 사라진다) */ .bp-page .go-badge, .bp-page .d-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--text-caption); font-weight: var(--weight-bold); background: var(--color-surface-hover); color: var(--color-text-secondary); white-space: nowrap; vertical-align: middle; } .bp-page .go-GO, .bp-page .d-쉬움 { background: var(--color-success-soft); color: var(--color-success); } .bp-page .go-주의, .bp-page .d-보통 { background: var(--color-warning-soft); color: var(--color-warning); } .bp-page .go-비추천, .bp-page .d-어려움 { background: var(--color-danger-soft); color: var(--color-danger-text); } /* 장면 목록(#b-scenes > .scene): 장면 사이 구분선 */ .bp-page .scene + .scene { margin-top: var(--space-3); padding-top: var(--space-3); border-top: var(--border-w) solid var(--color-border); } /* 스톡 미리보기 격자(.prev-grid.show): 3열 썸네일(.thumb) + 오른쪽 아래 길이 표시(.pv-d). 로딩·안내·출처 줄은 전체 폭 */ .bp-page .prev-grid.show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-2); } .bp-page .prev-grid a { position: relative; display: block; } .bp-page .prev-grid .pv-d { position: absolute; right: var(--space-1); bottom: var(--space-1); padding: 0 var(--space-1); border-radius: var(--radius-sm); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); } .bp-page .prev-grid > .loading, .bp-page .prev-grid > .alert, .bp-page .prev-grid > .prev-note { grid-column: 1 / -1; margin: 0; } @media (max-width: 480px) { /* 모바일: 주소 입력 아래로 버튼을 내리고, 캐시 안내의 "새로 분석" 버튼은 글 아래 전체 폭으로, 요약 카드는 썸네일을 위로 올린다 */ .bp-page .input-group { flex-wrap: wrap; } .bp-page .input-group .btn { flex: 1 1 100%; } .bp-page .cachenote .alert { flex-wrap: wrap; } .bp-page .cachenote .flex-1 { flex-basis: 0; } /* 글이 아이콘 옆 같은 줄에서 시작하도록 (basis auto 면 아이콘만 남고 줄바꿈됨) */ .bp-page .cachenote .btn-js-toggle { flex: 0 0 100%; text-align: center; } .bp-page .bp-top { flex-direction: column; } } /* === page: sources.html === */ /* 관리자 안내(#devnote): JS 가 style.display 를 block 으로 바꿔 보여주므로 바깥 래퍼를 숨기고, 안쪽 .alert 는 flex(아이콘+글)를 유지한다 (hot/similar 와 같은 패턴) */ .sources-devnote { display: none; } /* 등록 폼(.input-group 두 줄): 주소+종류 / 제목+설명. 좁은 폭에서는 줄바꿈, 종류 select 는 공통 .select 의 100% 폭 대신 내용 폭 */ .sources-add .input-group { flex-wrap: wrap; } .sources-add .input-group > .input { flex-basis: calc(var(--space-20) * 2 + var(--space-10)); } .sources-add .input-group > .select { width: auto; flex: 0 0 auto; } /* 등록 결과 문구(id add-msg): JS 가 className 을 "add-msg" / "add-msg err" / "add-msg ok" 로 직접 바꾸므로 그 이름에 .alert 와 같은 모양을 준다 */ .add-msg { display: none; margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); } .add-msg.err { display: block; background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger-text); } .add-msg.ok { display: block; background: var(--color-success-soft); border-color: var(--color-success-line); color: var(--color-success); } /* 소스 행(.list-item.s-item): 종류 배지·본문·동작 버튼을 위쪽으로 정렬. 내가 추천한 소스의 하트 버튼은 .mine */ .s-item { align-items: flex-start; } .s-item .like-btn.mine { background: var(--color-danger-soft); border-color: var(--color-danger-line); color: var(--color-danger-text); } /* 좁은 폭: 첫 줄에 종류 배지 + 동작 버튼, 둘째 줄에 제목·설명을 전체 폭으로 (본문이 100px 로 눌리는 것 방지) */ @media (max-width: 640px) { .s-item { flex-wrap: wrap; } .s-item .s-main { flex: 1 1 100%; order: 1; } .s-item .s-actions { margin-left: auto; } } /* === page: sources-guide.html === */ /* 관리자 안내(#devnote): JS 가 style.display 를 block 으로 바꿔 보여주므로 바깥 래퍼를 숨기고, 안쪽 .alert 는 flex 를 유지한다 (hot/similar/sources 와 같은 패턴) */ .guide-devnote { display: none; } /* 소스 항목(.guide-item): 카드(.card) 안에서 선으로 나눈다. 제목 h3 = 링크 + 신호등 배지(.badge) 한 줄, 아래 설명 p, 선택적 팁(.alert-info) */ .guide-item { padding: var(--space-3) 0; border-top: var(--border-w) solid var(--color-border); } .guide-item h3 { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-1); font-size: var(--text-title); line-height: var(--leading-title); } .guide-item p { margin: 0; } .guide-item .alert { margin: var(--space-2) 0 0; } /* 마무리 카드(기억할 것 3가지): 브랜드색 테두리로 강조, 번호 목록은 .doc 의 ol 들여쓰기를 쓰지 않는다 */ .guide-summary { border-color: var(--color-brand-line); } .guide-summary .steps-list { padding-left: 0; margin: 0; } .guide-summary .steps-list li { margin: 0; } /* === page: reference.html === */ /* 레퍼런스 카드(.card.ref-card): 왼쪽 세로(9:16) 썸네일 + 오른쪽 제목·출처·AI 분석(.card-section > dl.kv) */ .ref-card { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-4); } .ref-thumb { position: relative; display: block; flex: 0 0 calc(var(--space-16) * 2); width: calc(var(--space-16) * 2); border-radius: var(--radius-md); overflow: hidden; } /* 썸네일 아래 조회수 띠: 사진 위라 진한 바닥 + 흰 글자 (today 의 .ch-videos .v 와 같은 모양) */ .ref-thumb .vt { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); text-align: center; } .ref-body { flex: 1; min-width: 0; } .ref-ai .kv dt { font-weight: var(--weight-bold); } /* 새 소재 아이디어: 문장 길이의 배지가 줄바꿈되도록 높이 고정을 푼다 (style.css 의 .shorts-card .badge 와 같은 처리) */ .ref-ideas { display: flex; flex-wrap: wrap; gap: var(--space-1); } .ref-ideas .badge { height: auto; padding: calc(var(--space-1) / 2) var(--space-2); white-space: normal; line-height: var(--leading-caption); } /* 좁은 폭: 썸네일을 위, 본문을 아래로. AI 분석 표(.kv)는 라벨 아래 값이 오는 한 열로 (두 열이면 값 폭이 180px 로 눌린다) */ @media (max-width: 640px) { .ref-card { flex-direction: column; } .ref-ai .kv { grid-template-columns: 1fr; gap: 0; } .ref-ai .kv dd { margin-bottom: var(--space-2); } } /* === page: study.html === */ /* 자료 카드 리스트(.study-grid > .study-card): 아이콘 동그라미 + 분류 배지 + 제목(2줄) + 올린 사람·날짜·조회. 폰은 1열 */ .study-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); } .study-grid > .empty, .study-grid > .loading { grid-column: 1 / -1; } .study-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-top: 4px solid var(--color-brand); border-radius: var(--radius-lg); color: inherit; text-decoration: none; transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); } .study-card:hover { border-color: var(--color-brand-line); box-shadow: var(--shadow-md); text-decoration: none; } .study-card .top { display: flex; align-items: center; gap: var(--space-2); } .study-card .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--color-brand-soft); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .study-card .ic .icon { stroke: var(--color-brand); } .study-card .t { font-size: var(--text-body); font-weight: var(--weight-bold); line-height: var(--leading-body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .study-card .meta { margin-top: auto; font-size: var(--text-caption); color: var(--color-text-muted); } @media (max-width: 480px) { .study-grid { grid-template-columns: 1fr; } } /* === page: community.html === */ /* 이번 주 하이라이트(.week-hl — 시안5B board): 검정 가로 띠. [빨간 태그] · 큰 노란 글(수익 인증 1위) · 세로선 · 큰 노란 글(구독자 성장 1위) · 오른쪽 [내 성과 자랑하기]. 시안의 숫자(+31,400 / ₩842,000)는 예시 — 글에 금액 항목이 없어 그 자리에 이번 주 가장 많이 본 글 제목을 넣는다(비었으면 '아직 없음'). 폰은 세로로 쌓음 */ .week-hl { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-5) var(--space-5); background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-lg); border-left: 6px solid var(--color-brand); } .week-hl .t2 { flex-shrink: 0; background: var(--color-brand); color: var(--color-text-inverse); font-size: var(--text-2xs); font-weight: 900; padding: 4px 11px; border-radius: 5px; white-space: nowrap; } .week-hl .hl-cell { flex: 1 1 200px; min-width: 0; color: inherit; text-decoration: none; } .week-hl .hl-cell:hover { text-decoration: none; } .week-hl .hl-cell:hover .bg { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .week-hl .bg { font-size: var(--text-h2); font-weight: 900; color: var(--color-accent); letter-spacing: -0.04em; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .week-hl p { margin: 4px 0 0; font-size: var(--text-body-sm); color: var(--color-on-ink-muted); font-weight: 600; } .week-hl .dv { width: 1px; align-self: stretch; background: var(--color-ink-soft); } .week-hl .hl-cell.is-empty .bg { color: var(--color-on-ink-muted); } .week-hl .hl-cell.is-empty p { color: var(--color-accent); } .week-hl .hl-go { margin-left: auto; flex-shrink: 0; } @media (max-width: 899px) { .week-hl { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-4); } .week-hl .t2 { align-self: flex-start; } .week-hl .hl-cell { flex-basis: auto; } .week-hl .bg { font-size: var(--text-h3); } .week-hl .dv { width: auto; height: 1px; } .week-hl .hl-go { margin-left: 0; } } /* 분류 칩(.comm-filter): 시안은 고른 칩을 빨강으로 채움 (today/hot 과 동일 규칙) */ .comm-filter .chip.on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text-inverse); } /* 글 목록(.post-list — 공통 .rank-list 상자): 한 줄 = [분류 배지] 제목/작성자·날짜·댓글 … 오른쪽 큰 빨간 숫자 + '조회'. 배지 색: 수익 인증·구독자 성장 = 빨강, 후기 = 검정+노랑(.y), 자유 = 회색(.n) */ .post-list { list-style: none; margin: 0; padding: 0; } .post-list .post { display: flex; align-items: center; gap: 13px; padding: 15px 18px; cursor: pointer; } .post-list .pc { flex-shrink: 0; font-size: var(--text-2xs); font-weight: 900; padding: 4px 10px; border-radius: 5px; background: var(--color-brand); color: var(--color-text-inverse); white-space: nowrap; } .post-list .pc.y { background: var(--color-ink); color: var(--color-accent); } .post-list .pc.n { background: var(--color-border); color: var(--color-text-secondary); } .post-list .pbody { flex: 1 1 auto; min-width: 0; } .post-list .pt { font-size: var(--text-body); font-weight: 700; line-height: var(--leading-body-sm); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .post-list .pm { margin-top: 2px; font-size: var(--text-caption); color: var(--color-text-muted); font-weight: 600; } .post-list .pv { margin-left: auto; flex-shrink: 0; text-align: right; white-space: nowrap; } .post-list .pv b { display: block; font-size: var(--text-h3); font-weight: 900; color: var(--color-brand); letter-spacing: -0.03em; line-height: 1.2; } .post-list .pv b.is-zero { color: var(--color-text-muted); } .post-list .pv span { font-size: var(--text-2xs); color: var(--color-text-muted); font-weight: 600; } .post-list > li > .empty, .post-list > li > .error { border: 0; } @media (max-width: 480px) { .post-list .post { gap: 10px; padding: 13px 14px; } .post-list .pt { font-size: var(--text-body-sm); } .post-list .pv b { font-size: var(--text-title); } } /* "더 보기" 버튼(#btn-more): JS 가 style.display 를 "inline-block"/"none" 으로 켜고 끈다(로직 불변). hidden 속성은 공통 [hidden] 규칙이 최우선이라 JS 의 inline-block 이 못 이기므로 초기 숨김은 클래스로 두고, inline-block 으로 켜졌을 때(.btn 은 inline-flex 가 아니게 됨) 글자가 세로 가운데에 오도록 줄높이를 버튼 높이(sm)에 맞춘다. post.html 의 '글 삭제'(#btn-del) 버튼과 같은 규칙 — 공통 유틸로 올려 주면 두 fragment 가 사라진다. */ .btn-js-toggle { display: none; line-height: var(--control-h-sm); } /* === page: post.html === */ /* '글 삭제' 버튼(#btn-del): JS 가 내 글일 때 style.display = "inline-block" 으로 켠다(로직 불변). hidden 속성은 공통 [hidden] 규칙이 최우선이라 JS 의 inline-block 이 못 이기므로 초기 숨김은 클래스로 두고, inline-block 으로 켜졌을 때(.btn 의 inline-flex 가 풀림) 글자가 세로 가운데에 오도록 줄높이를 버튼 높이(sm)에 맞춘다. community.html 의 '더 보기'(#btn-more) 와 같은 규칙 — 공통 유틸로 올려 주면 두 fragment 가 사라진다. */ .btn-js-toggle { display: none; line-height: var(--control-h-sm); } /* 글 본문(.post-view .content)의 아래 여백(공통 32px)은 같은 카드 안에 댓글이 이어질 때를 위한 값 — 이 페이지는 댓글이 다음 카드라 본문이 카드의 마지막 요소일 때는 여백을 없앤다 (공통 규칙을 :not(:last-child) 로 바꿔 주면 이 줄은 필요 없음). */ .post-view .content:last-child { margin-bottom: var(--space-0); } /* === page: favorites.html === */ /* 관심 채널 행은 공통 .ch-list(.ch-row · .ch-name · .ch-stats · .ch-actions) 그대로 — 페이지 전용 규칙 없음 */ /* === page: admin.html === */ /* 출처 탭(.tabs.cat-tabs — JS 가 ".cat-tabs button" 으로 찾으므로 이름 보존): 두 줄(이름 + small "… · 대기 N"). 공통 .tab 의 한 줄 고정 높이를 풀고 설명은 small 로 아래 줄에 둔다 */ .cat-tabs .tab { height: auto; padding: var(--space-2) var(--space-3) var(--space-3); text-align: left; line-height: var(--leading-body); } .cat-tabs .tab small { display: block; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-regular); color: var(--color-text-muted); margin-top: calc(var(--space-1) / 2); } /* 상태 수(검토 대기·승인됨·제외됨): 작은 .stat-card 를 한 줄에 나란히 (원본 "관리자용 · 작게") */ .admin-page .counts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } .admin-page .counts .stat-card { flex: 0 1 auto; min-width: calc(var(--space-20) + var(--space-8)); padding: var(--space-2) var(--space-4); text-align: center; } /* 필터: .filter-bar 한 상자 안에 "라벨 + 칩 묶음" 줄을 쌓는다 (today/rocket 의 .filter-row 와 같은 구성 — 공통화 후보) */ .admin-filters .filter-row { flex: 1 1 100%; display: flex; gap: var(--space-2); align-items: flex-start; } .admin-filters .flabel { flex: 0 0 var(--space-16); min-height: var(--control-h-sm); display: inline-flex; align-items: center; } /* 일괄 처리 줄(.bulkbar — JS 가 ".bulkbar .bk" 를 disabled 로 켜고 끔): 전체 선택 + 선택 수 + 오른쪽 버튼 3개. 긴 목록에서도 따라오게 sticky */ .admin-page .bulkbar { position: sticky; top: var(--space-2); z-index: var(--z-header); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* 채널 카드(.list-item.acard — JS 가 .acard / .chk / data-id 로 찾고 .sel 을 토글): 체크박스 · 썸네일 · 정보 · 영상 5칸 · 동작 열. 줄바꿈 순서: 영상 띠(.ch-videos/.novids)는 order 로 맨 뒤에 두어 좁은 폭에서 자기 줄로 내려간다 */ .admin-page .acard { flex-wrap: wrap; } .admin-page .acard.sel { background: var(--color-brand-soft); border-color: var(--color-brand-line); } .admin-page .acard .chk { width: var(--icon-md); height: var(--icon-md); margin: 0; flex-shrink: 0; accent-color: var(--color-brand); cursor: pointer; } .admin-page .acard .name .badge { margin-left: var(--space-1); } .admin-page .acard .cat-sel { width: auto; } /* 확신도(상·중·하)·처리 상태(승인·제외) 배지: 클래스 이름이 값에서 오므로(원본 b-상 / stat-line.승인 방식) 색만 여기서 준다 */ .admin-page .conf-상 { background: var(--color-success-soft); color: var(--color-success); } .admin-page .conf-중 { background: var(--color-warning-soft); color: var(--color-warning); } .admin-page .conf-하 { background: var(--color-danger-soft); color: var(--color-danger-text); } .admin-page .stat-line.승인 { background: var(--color-success-soft); color: var(--color-success); } .admin-page .stat-line.제외 { background: var(--color-danger-soft); color: var(--color-danger-text); } /* 영상 미리보기(.ch-videos a 는 style.css 76×135): 조회수 띠 — 사진 위라 진한 바닥 + 흰 글자 (today 의 .v 와 같은 모양) */ .admin-page .acard .ch-videos, .admin-page .acard .novids { order: 10; } .admin-page .acard .ch-videos .vt { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-1); background: var(--color-text); color: var(--color-text-inverse); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-bold); text-align: center; } .admin-page .acard .novids { flex-basis: 100%; } /* 동작 열: 버튼을 세로로 쌓은 고정 폭 열, 상태 배지는 열 폭에 맞춰 가운데 */ .admin-page .acard .aactions { display: flex; flex-direction: column; gap: var(--space-1); flex: 0 0 auto; min-width: calc(var(--space-20) + var(--space-10)); } .admin-page .acard .aactions .badge { justify-content: center; } /* 넓은 화면(≥1280): 영상 5칸을 정보와 동작 열 사이 같은 줄에 (원본 배치). 영상이 없으면 같은 폭의 안내 글로 열을 맞춘다 */ @media (min-width: 1280px) { .admin-page .acard .ch-videos, .admin-page .acard .novids { order: 0; flex: 0 0 auto; } .admin-page .acard .novids { flex-basis: calc(76px * 5 + var(--space-2) * 4); text-align: center; } /* = style.css 타일 76px × 5 + 간격 4개 */ } /* 모바일(≤768): 고정 메뉴 단추(왼쪽 위)와 겹치지 않게 일괄 처리 줄은 흐름에 둔다 */ @media (max-width: 768px) { .admin-page .bulkbar { position: static; } } /* 좁은 폭(≤640): 출처 탭 두 개는 폭을 나눠 같은 줄에(설명이 안에서 줄바꿈) · 동작 열을 정보 아래 한 줄(가로 버튼)로 내려 정보 폭을 확보한다 */ @media (max-width: 640px) { .cat-tabs .tab { flex: 1 1 0; min-width: 0; padding-left: var(--space-2); padding-right: var(--space-2); } .admin-page .acard .aactions { flex-direction: row; flex-wrap: wrap; align-items: center; flex-basis: 100%; order: 5; } } /* 모바일(≤480): 일괄 처리 버튼 3개를 자기 줄 전체 폭으로 */ @media (max-width: 480px) { .admin-page .bulkbar .btns { flex: 1 1 100%; } .admin-page .bulkbar .btns .btn { flex: 1 1 auto; } } /* === page: baidu-admin.html === */ /* 수치 카드 줄(현재 상태 3칸 · 오늘 사용량 5칸): 공통 .stat-grid 는 4열(≤1024 는 2열)이라 5칸이면 마지막 한 칸이 홀로 남는다. 칸 최소폭 104px 로 자동 채움 — 좁은 컨테이너(720, 카드 안 632px)에서 5칸 한 줄, 390 에서 2열. */ .bd-page .stat-grid { grid-template-columns: repeat(auto-fit, minmax(calc(var(--space-20) + var(--space-6)), 1fr)); } /* 상태 값(켜짐/정상 + 상태 점)이 한 줄로 읽히도록 */ .bd-page .stat-value .status-dot { margin-right: var(--space-2); } /* 한도·예산 입력 3칸(.grid-3): 라벨 길이가 달라 입력칸 높이가 어긋나지 않게 아래 끝을 맞춘다 */ .bd-page .bd-limits { align-items: end; } .bd-page .bd-limits .field { margin-bottom: 0; } /* 알림(#toast): 페이지 JS 가 textContent 를 쓰고 .show 를 붙였다 떼므로(로직 불변) 공통 .toast 를 .toast-stack 안에 두고 여기서는 보임/숨김(투명도)만 정한다. JS 의 toast() 를 UI.toast() 로 바꿔도 되면 이 두 줄과 #toast 마크업은 사라진다. */ .bd-toast { opacity: 0; pointer-events: none; animation: none; transition: opacity var(--motion-base) var(--ease); } .bd-toast.show { opacity: 1; } @media (max-width: 480px) { /* 상태 3칸: 값이 글자("작동중(정지)"·날짜)라 반 칸에서 두 줄로 꺾인다 — 한 줄에 한 칸 */ .bd-page .bd-status { grid-template-columns: 1fr; } /* 사용량 5칸(2열): 홀수 번째로 남는 마지막 칸을 한 줄 전체로 */ .bd-page .stat-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* === page: review.html === */ /* 조회 줄(.filter-bar.rv-bar): "최근 [7] 일" 은 label 하나가 입력을 감싼다(접근성 이름 "최근 일") — 한 줄 가운데 정렬, 입력은 공통 .input 의 100% 폭 대신 숫자 두 자리 폭 */ .rv-page .rv-range { display: inline-flex; align-items: center; gap: var(--space-2); } .rv-page .rv-days { width: var(--space-20); } /* 검수 카드(.card.rv) 머리: 제목(h2, title 역할) + 상태·내 작업 배지 + 오른쪽 끝 시각. 파일 이름은 띄어쓰기가 없어도 카드 안에서 줄바꿈되게 */ .rv-page .rv-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .rv-page .rv-title { min-width: 0; overflow-wrap: anywhere; } /* 원본/결과 나란히(.grid-2): 비교가 목적이라 공통 .grid-2 의 768 대신 원본과 같은 640 까지 두 칸을 유지한다. 영상은 칸 폭 전체, 세로 영상이 너무 길어지지 않게 높이 상한 420px, 여백은 진한 바닥(검정 토큰이 없어 본문색) */ .rv-page .rv-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rv-page .rv-pair video { display: block; width: 100%; max-height: calc(var(--space-20) * 5 + var(--space-5)); background: var(--color-text); border-radius: var(--radius-md); } .rv-page .rv-pair .alert { margin: 0; } @media (max-width: 640px) { .rv-page .rv-pair { grid-template-columns: 1fr; } } /* 숫자 줄: 작은 보조 글자, 값만 진하게 (JS 가 " · " 로 이어 붙인 한 문단) */ .rv-page .rv-num { margin-top: var(--space-2); font-size: var(--text-body-sm); line-height: var(--leading-body-lg); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } .rv-page .rv-num b { color: var(--color-text); } /* === page: watermark-remover.html === */ /* 자막제거기 — 옛 page