/* 실서비스 화면 틀과 캔버스 보드 helmet 에 있던 스타일. 기본 스타일은 radar.css(캔버스 service-v2.css). */

body { margin: 0; }
.phone { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 481px) { .phone { border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.phone a { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .phone a:hover { color: var(--ink); } }
.phone a.btn { color: var(--ink); }
.phone a.btn.primary { color: #0f0f10; }
.top .logo { color: var(--ink); text-decoration: none; }
[hidden] { display: none !important; }

/* 진행 막대: 스크롤해도 위에 붙어 있게 */
.pbar.sticky { position: sticky; top: 0; z-index: 5; }

/* 섹션 목록 줄 번호(P안) */
.secrow .no { display: inline-block; width: 28px; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* 아직 준비 중인 섹션: 이어진 줄을 한 묶음처럼 */
.sx.pend { padding: 0 20px; }
.sx.pend.first { padding-top: 32px; }
.sx.pend .list { border-radius: 0; }
.sx.pend.first .list { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.sx.pend.last .list { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
.sx.pend:not(.first) .list > li { border-top: 1px solid var(--line); }

/* 목록 줄 전체를 누르는 링크·버튼 */
.list.links > li { padding: 0; }
.list.links > li > a, .list.links > li > button { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .list.links > li > a:hover, .list.links > li > button:hover { background: var(--surface-2); } }
.list.links > li:first-child > * { border-radius: var(--r) var(--r) 0 0; }
.list.links > li:last-child > * { border-radius: 0 0 var(--r) var(--r); }
.list.links > li:only-child > * { border-radius: var(--r); }

/* K-2 양쪽 막대: 왼쪽 AI 답, 오른쪽 소비자 글 */
.bf-head { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.bf-head span:first-child { text-align: right; }
.bf-head i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 6px; vertical-align: 0; }
.bf { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 0; }
.bf .l { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.bf .r { display: flex; justify-content: flex-start; align-items: center; gap: 6px; }
.bf i { display: block; height: 10px; border-radius: 2px; }
.bf .l i { background: var(--ink-3); }
.bf .r i { background: var(--accent); }
.bf .r i.sk { background: var(--surface-2); }
.bf b { min-width: 22px; font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bf .l b { text-align: right; }
.bf .k { text-align: center; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bf.zero .l b { color: var(--neu); }
.bf-div { margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: center; }


/* 입장: 업종 고르기 묶음 */
.newbrand { padding: 20px 16px; }

/* 맺음 아래 버튼 묶음 */
.save-row { display: grid; gap: 8px; }

/* 관리자 화면에서도 쓰는 작은 표 */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl th { font-weight: 600; color: var(--ink-3); }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }

/* 08 AI 답 원문 */
.answers > summary { list-style: none; cursor: pointer; }
.answers > summary::-webkit-details-marker { display: none; }
.answers[open] > summary .meta { visibility: hidden; }
.answers-body { padding: 16px 4px 0; }
.list.plain.answers > li { display: block; padding: 14px 0; }
.answer-text { font-size: 13px; line-height: 1.6; color: var(--ink-3); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 7.5em; overflow: hidden; }

/* 리포트 머리: 수집 방식 한 줄 */
.mode-line a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .mode-line a:hover { color: var(--ink); } }

/* ---------- 리포트 v3: 캔버스 '5. 결과 콘텐츠 더하기' ---------- */
.claim { font-size: 21px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; color: var(--ink); }
.claim b { font-weight: 700; color: var(--accent-ink); }
.h2x { font-size: 22px; font-weight: 700; line-height: 1.38; letter-spacing: -.025em; }
.mask { font-style: normal; font-weight: 500; color: var(--ink-3); }

/* 인용: 면 위(ev) · 왼쪽 선(qq) */
.ev { padding: 12px 14px; border-radius: 10px; background: var(--surface); }
.ev + .ev { margin-top: 6px; }
.ev.big { padding: 14px 16px; border-radius: var(--r); }
.ev .q { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ev.big .q { font-size: 15px; line-height: 1.6; }
.ev .src { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.ev.big .src { margin-top: 10px; }
.inner .ev { background: var(--surface-2); }
.phone a.open { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 52px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .phone a.open:hover { color: var(--ink); border-color: var(--ink-3); } }
.qq { padding: 2px 0 0 12px; border-left: 2px solid #3c3c42; }
.qq + .qq { margin-top: 10px; }
.qq p { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.qq .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.phone .qq a.lk { display: inline-flex; flex: none; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .phone .qq a.lk:hover { color: var(--ink); } }
.qq .tg { margin-right: 6px; padding: 1px 6px; border-radius: 5px; background: var(--surface-2); font-size: 11px; font-weight: 600; color: var(--ink-2); }
.qq .tone { display: flex; align-items: center; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.cm { margin-top: 6px; }
.cm li { position: relative; padding-left: 10px; font-size: 12px; line-height: 1.55; color: var(--ink-3); overflow-wrap: anywhere; }
.cm li::before { content: ""; position: absolute; left: 0; top: .7em; width: 4px; height: 1px; background: var(--ink-3); }

.mix { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.mix-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.mix-h b { font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mix-bar { display: flex; gap: 2px; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; }
.mix-bar i { display: block; height: 100%; }
.mix-bar .v { background: var(--ink-2); }
.mix-bar .n { background: repeating-linear-gradient(135deg, #3a3a40 0 2px, #1f1f23 2px 5px); }
.mix-leg { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mix-leg span { display: inline-flex; align-items: center; gap: 6px; }
.mix-leg b { font-weight: 600; color: var(--ink); }
.mix-leg small { font-size: 12px; color: var(--neu); }
.mix-leg .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.mix-leg .sw.v { background: var(--ink-2); }
.mix-leg .sw.n { background: repeating-linear-gradient(135deg, #55555c 0 2px, #1f1f23 2px 4px); }
.mix-note { margin-top: 6px; font-size: 12px; color: var(--neu); }

/* 02 점수 · 소비자가 AI 를 말한 글 */
.score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r); background: var(--surface); }
.score div { padding: 14px 12px; }
.score div + div { border-left: 1px solid var(--line); }
.score .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.score .v.hl { color: var(--accent-ink); }
.score .k { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.voice { padding-left: 12px; border-left: 2px solid #3c3c42; }
.voice p { font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.voice .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.phone .voice a.lk { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink-3); text-decoration: none; }

/* 02 이야기: 장 · 꼭지 */
.chap { margin-top: 40px; }
.chap + .chap { margin-top: 44px; }
.chap .no { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-3); }
.chap .ttl { margin-top: 4px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.chap .sub2 { margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.st { padding: 16px 0; border-top: 1px solid var(--line); }
.chap .st:first-of-type { margin-top: 14px; }
.st .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st .kwd { padding: 2px 8px; border-radius: 6px; background: var(--surface-2); font-size: 13px; font-weight: 700; color: var(--ink); }
.st .n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st .n b { font-weight: 700; color: var(--ink); }
.st .n b.z { color: var(--accent-ink); }
.st .t { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 1.42; letter-spacing: -.015em; color: var(--ink); }
.st .sig { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.st .sig b { font-weight: 600; color: var(--ink-2); }
.st > .qq, .st > .pair { margin-top: 10px; }
.st.open .lead-q { display: none; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pair .qq + .qq { margin-top: 0; }
.peek { margin-top: 10px; padding: 12px 14px; border: 1px dashed #3c3c42; border-radius: var(--r); }
.peek p { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.peek .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.peek .acts .btn { height: 38px; padding: 0 14px; font-size: 13px; }
.phone .peek a.txt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.foot2 { padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }

/* 02 꼭지 펼치기 */
.tog { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tog svg, .fold svg { width: 16px; height: 16px; transition: transform 200ms cubic-bezier(.2,0,0,1); }
.tog[aria-expanded="true"] { border-color: var(--neu); color: var(--ink); }
.tog[aria-expanded="true"] svg, .fold[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel { margin-top: 8px; padding: 16px; border-radius: var(--r); background: var(--surface); }
.blk + .blk { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.bt { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }
.sum { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.ailine { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-3); overflow-wrap: anywhere; }
.ailine mark { background: none; font-weight: 700; color: var(--ink); }
.nb { margin-top: 8px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.row3 { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.row3 b { font-weight: 700; color: var(--ink); }
.panel .qq + .qq { margin-top: 12px; }
.all { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin-top: 16px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.all em { font-style: normal; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.all:disabled { cursor: default; opacity: .7; }
.all-h { margin-top: 20px; }
.all-list { margin-top: 10px; }
.all-list .qq + .qq { margin-top: 12px; }

/* 03 순위 목록(누르면 글) */
.rk { border-radius: var(--r); background: var(--surface); }
.rk > li + li { border-top: 1px solid var(--line); }
.rowbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.rowbtn { cursor: pointer; }
.rowbtn .t { font-size: 15px; font-weight: 500; color: var(--ink); }
.rowbtn .n { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rowbtn .n small { margin-left: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.inner { padding: 0 12px 12px; }

/* 04 소비자가 물은 것 */
.lead { padding-left: 12px; border-left: 2px solid #3c3c42; font-size: 19px; font-weight: 600; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 68px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tile[aria-expanded="true"] { border-color: var(--ink-3); background: var(--surface); }
.tile .t { font-size: 13px; font-weight: 600; line-height: 1.35; }
.tile .n { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 05 · 08 접어 둔 묶음 */
.fold { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: none; color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fold[aria-expanded="true"] { color: var(--ink); }
.tp { margin-top: 20px; }
.tp .bars { margin-bottom: 6px; }

/* 06 위험 신호 줄 펼치기: 줄 아래로 글이 열린다 */
.list.links > li { display: block; }
.list.links > li > .inner { padding: 0 12px 12px; }

/* 07 정리: 다섯 줄(고른 말만 굵게) · 소비자 글 한 건(왼쪽 선) */
.wu-ln { font-size: 15px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.wu-ln + .wu-ln { margin-top: 10px; }
.wu-ln b { font-weight: 700; color: var(--ink); }
.wu-nw { white-space: nowrap; }
.wu-voice { padding: 1px 0 1px 12px; border-left: 2px solid #3c3c42; }
.wu-voice .lb { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.wu-voice .q { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.wu-voice .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.phone .wu-voice a.lk { display: inline-flex; flex: none; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .phone .wu-voice a.lk:hover { color: var(--ink); } }

/* 맺음(B): 정리 아래로 한 번 더 띄우고, 상자는 '믿지 말고, 쓰세요.' 아래에 */
.sec.rule.b-end { margin-top: 56px; padding-top: 40px; }
.b-end .sm { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.b-end .ask { margin-top: 28px; }

/* 01 어떻게 셌나 · 맺음 */
.range { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ask { padding: 20px 18px; border-radius: 14px; background: var(--surface); }
.ask .t { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.ask .b { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.ask .btn { margin-top: 16px; }

/* ---------- 02 v4: AI 의 설명 대 소비자 글, 세 장(벤 그림으로 구분) ---------- */
.h3x { font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; color: var(--ink-2); }
/* 물은 것: 상자 없이 제목 아래 한 줄 */
.askq { font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.askq b { margin-right: 4px; font-weight: 700; color: var(--ink-2); }

/* 벤 그림: 왼쪽 원 AI(회색 선), 오른쪽 원 소비자 글(주황 선), 칠한 곳이 그 장 */
.venn { flex: none; width: 30px; height: 20px; overflow: visible; }
.venn circle { fill: none; stroke-width: 1.3; }
.venn .a { stroke: var(--ink-3); }
.venn .c { stroke: var(--accent); }
.v-both .f { fill: var(--ink-2); }
.v-ai .f { fill: var(--ink-3); }
.v-consumer .f { fill: var(--accent); }

/* 세 장 요약(누르면 그 장으로) */
.idx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r); background: var(--surface); }
.phone a.ix { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 14px 12px; color: inherit; text-decoration: none; }
.ix + .ix { border-left: 1px solid var(--line); }
.ix .venn { margin-bottom: 8px; }
.ix .v { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.ix-consumer .v { color: var(--accent-ink); }
.ix .k { margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.ix .d { font-size: 11px; line-height: 1.4; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .phone a.ix:hover { background: var(--surface-2); } }
.ix:first-child { border-radius: var(--r) 0 0 var(--r); }
.ix:last-child { border-radius: 0 var(--r) var(--r) 0; }

/* 양쪽 막대: 왼쪽 AI 답 비율, 오른쪽 목소리 비율 */
.bfl > li { position: relative; }
.bf-t { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.voice .vk { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); }

/* 장 머리: 벤 그림 + 이름 + 수, 규칙 한 줄 */
.chap { margin-top: 48px; }
.chap + .chap { margin-top: 48px; }
.ch-h { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ch-h .venn { width: 36px; height: 24px; margin-top: 2px; }
.chap .ch-h .ttl { display: flex; align-items: baseline; gap: 8px; margin-top: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ch-h .cnt { font-size: 15px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ch-consumer .ch-h .cnt { color: var(--accent-ink); }
.ch-h .rule { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.ch-note { margin-top: 12px; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.ch-empty { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.chap .st:first-of-type { margin-top: 4px; }
.chap .ch-h + .st, .chap .ch-note + .st { border-top: 0; }
.rest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.rest + .rest { border-top: 0; padding-top: 4px; }
.rest .rk-k { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.rest .ri { display: inline-flex; align-items: center; gap: 4px; }
.rest .ri b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 꼭지: 말 칩 + 판정, AI 줄 대 소비자 줄 */
.st .kwl { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.vd { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vd.same { background: var(--surface-2); color: var(--ink-2); }
.vd.part { border: 1px solid var(--line); color: var(--ink-2); }
.vd.diff { background: var(--accent-soft); color: var(--accent-ink); }
.vs { display: grid; gap: 8px; margin-top: 12px; }
.vr { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 2px 0 2px 10px; border-left: 2px solid var(--neu); }
.vr.cs { border-left-color: var(--accent); }
.vr .who { padding-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--ink-3); }
.vr.cs .who { color: var(--accent-ink); }
.vt p { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.vr.cs .vt p { color: var(--ink); }
.vt p.none { font-weight: 400; color: var(--ink-3); }
.vt p.list { font-size: 13px; color: var(--ink-3); }
.vt p.list mark { background: none; font-weight: 700; color: var(--ink); }
.vt .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.vr.cs .vt .s { color: var(--ink-3); }
.phone .vt a.lk { display: inline-flex; flex: none; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .phone .vt a.lk:hover { color: var(--ink); } }
.st .sig { margin-top: 10px; }
.bfl .bf .r b { position: relative; z-index: 1; padding: 0 3px; margin-left: -3px; background: var(--bg); }

/* ---------- 움직임과 반응 (2026-10-21) ----------
 * 쉬는 상태는 지금 화면 그대로. 움직임은 html.mo(report.js 가 붙임) 아래에서, '동작 줄이기'가 아닐 때만.
 * 곡선 하나(--m-ease), 시간 둘(420·720ms), 간격 30~90ms. 주황은 새로 쓰지 않는다. 반복 움직임은 만드는 중에만. */
:root { --m-ease: cubic-bezier(.2,.7,.2,1); }
html, body { overflow-anchor: none; }
.phone { overflow: hidden; overflow: clip; -webkit-tap-highlight-color: transparent; }

/* 만드는 중 진행 막대가 실제로 위에 붙게(.phone overflow 가 sticky 를 막던 것) */
#hdr.stick { position: sticky; top: 0; z-index: 5; }
.pbar .row .stg { font-weight: 600; color: var(--ink); white-space: normal; }
#hdr.running .prog i { position: relative; overflow: hidden; }

/* 위치 바: 01 을 지나 내려간 뒤 위로 올릴 때만 */
.top .ctx { min-width: 0; max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.top.float { position: sticky; top: 0; z-index: 6; background: var(--bg); transform: translateY(-100%); }
.top.float.show { transform: none; }
.top.float::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-3); opacity: .6; transform-origin: left center; transform: scaleX(var(--p, 0)); }
.top.float .ctx { color: var(--ink); }

/* 누름·초점 */
.tog, .fold, .rowbtn, .list.links > li > button, .list.links > li > a, .tile, .all, .btn, .phone a.find, .phone a.open, .phone a.ix, .phone a.lk {
  transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}
.tog:active, .fold:active, .tile:active { background: var(--surface); }
.panel .tog:active { background: var(--surface-2); }
button.rowbtn:active, .list.links > li > button:active, .phone a.find:active, .phone a.ix:active { background: var(--surface-2); }
.all:active { background: var(--line); }
.btn:active { background: #2a2a2e; }
.btn.primary:active { background: #e8432a; border-color: #e8432a; }
.phone a.open:active { border-color: var(--ink-3); color: var(--ink); }
.phone a.find svg { transition: transform 140ms ease-out; }
.phone a.find:active svg { transform: translateX(2px); }
.phone a.find:first-child { border-radius: var(--r) var(--r) 0 0; }
.phone a.find:last-child { border-radius: 0 0 var(--r) var(--r); }
.phone a.find:only-child { border-radius: var(--r); }
.rk > li:first-child > .rowbtn { border-radius: var(--r) var(--r) 0 0; }
.rk > li:last-child > .rowbtn { border-radius: 0 0 var(--r) var(--r); }
.phone :focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.phone .rowbtn:focus-visible, .phone .list.links > li > button:focus-visible, .phone a.find:focus-visible, .phone a.ix:focus-visible { outline-offset: -2px; }
.phone [tabindex="-1"]:focus { outline: none; }
.btn.ok { border-color: var(--ink-3); }
.btn.primary.ok { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .tog:hover, .fold:hover { border-color: var(--neu); color: var(--ink); }
  button.rowbtn:hover, .phone a.find:hover { background: var(--surface-2); }
  .tile:hover { border-color: var(--neu); }
  .all:hover { background: #2a2a2e; }
}

/* 03·06 줄: 누르면 글이 열린다는 표시 */
.rowbtn.has-chev, .list.links > li > button.has-chev { grid-template-columns: minmax(0, 1fr) auto 14px; }
.chev { display: inline-flex; width: 14px; color: var(--ink-3); }
.chev svg { width: 14px; height: 14px; transition: transform 200ms cubic-bezier(.2,0,0,1); }
[aria-expanded="true"] > .chev svg { transform: rotate(180deg); }

/* 긴 묶음 끝의 '접기' */
.tog.end { margin-top: 20px; }
#s05-all > .tog.end, #s08-more > .tog.end { margin-top: 24px; }

/* '모두 보기' 불러오는 중: 0.2초 넘게 걸릴 때만 */
.all { position: relative; overflow: hidden; }
.all em { transition: opacity 150ms ease-out; }
.all.is-loading em { opacity: .4; }

/* 도착한 자리 표시(01·02 요약에서 눌러 온 곳) */
.st, .o3, .ch-h { position: relative; isolation: isolate; }
.landed::before { content: ""; position: absolute; inset: -6px -12px; z-index: -1; border-radius: 12px; background: var(--surface-2); pointer-events: none; }
.o3.landed::before { inset: 0; }
.eyebrow.landed { color: var(--ink); }
.eyebrow.landed::before { content: none; }

/* 지금 도는 단계: 숨 쉬는 점 */
.status.working::before, .meta.wait::before { content: ""; display: inline-block; flex: none; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

.bf .l i { transform-origin: right center; }
.bf .r i { transform-origin: left center; }

@keyframes m-grow { from { transform: scaleX(0); } }
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes m-rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-ink { from { color: var(--ink); } }
@keyframes m-tally { from { background: var(--line); } }
@keyframes m-land { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes m-arrive { from { color: var(--ink); } }
@keyframes m-breathe { from { opacity: .35; } to { opacity: 1; } }
@keyframes m-sheen { 0% { transform: translateX(-100%); } 66%, 100% { transform: translateX(250%); } }
@keyframes m-load { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

@media (prefers-reduced-motion: no-preference) {
  /* 등장: 덩어리마다 한 번 */
  .mo .rv { transition: opacity 420ms var(--m-ease) var(--d, 0ms), transform 420ms var(--m-ease) var(--d, 0ms); }
  .mo .rv:not(.in) { opacity: 0; transform: translateY(12px); }
  .mo .rv.done { transition: none; }

  /* 01: 강조 숫자는 맨 마지막에 제 색으로, 모은 글 막대는 왼쪽부터 */
  .mo .claim.rv.in:not(.done) b { animation: m-ink 420ms ease-out calc(var(--d, 0ms) + 320ms) backwards; }
  .mo .mix.rv.in:not(.done) .mix-bar { animation: m-wipe 720ms var(--m-ease) calc(var(--d, 0ms) + 100ms) backwards; }

  /* 02 세 장 요약: 공명 → AI에게만 → 못 들은 목소리 순서, 마지막 숫자가 주황으로 */
  .mo .idx.rv.in:not(.done) .ix .v { animation: m-rise 300ms var(--m-ease) backwards; }
  .mo .idx.rv.in:not(.done) .ix .venn .f { animation: m-fade 420ms ease-out backwards; }
  .mo .idx.rv.in:not(.done) .ix:nth-child(1) .v { animation-delay: var(--d, 0ms); }
  .mo .idx.rv.in:not(.done) .ix:nth-child(2) .v { animation-delay: calc(var(--d, 0ms) + 90ms); }
  .mo .idx.rv.in:not(.done) .ix:nth-child(3) .v { animation: m-rise 300ms var(--m-ease) calc(var(--d, 0ms) + 180ms) backwards, m-ink 420ms ease-out calc(var(--d, 0ms) + 520ms) backwards; }
  .mo .idx.rv.in:not(.done) .ix:nth-child(1) .venn .f { animation-delay: calc(var(--d, 0ms) + 120ms); }
  .mo .idx.rv.in:not(.done) .ix:nth-child(2) .venn .f { animation-delay: calc(var(--d, 0ms) + 210ms); }
  .mo .idx.rv.in:not(.done) .ix:nth-child(3) .venn .f { animation-delay: calc(var(--d, 0ms) + 300ms); }

  /* 02 양쪽 막대: AI 쪽이 먼저, 소비자 쪽이 뒤에 */
  .mo .bfl.rv.in:not(.done) .bf .l i { animation: m-grow 420ms var(--m-ease) backwards; animation-delay: calc(var(--d, 0ms) + var(--i, 0) * 30ms); }
  .mo .bfl.rv.in:not(.done) .bf .r i:not(.sk) { animation: m-grow 420ms var(--m-ease) backwards; animation-delay: calc(var(--d, 0ms) + 300ms + var(--i, 0) * 30ms); }

  /* 02 장 머리: 벤 그림의 그 장 자리가 채워진다 */
  .mo .ch-h.rv.in:not(.done) .venn .f { animation: m-fade 500ms ease-out calc(var(--d, 0ms) + 140ms) backwards; }

  /* 02 꼭지: AI 줄 → 소비자 줄 → 판정 */
  .mo .st.rv.in:not(.done) .vr { animation: m-rise 360ms var(--m-ease) backwards; }
  .mo .st.rv.in:not(.done) .vr.ai { animation-delay: calc(var(--d, 0ms) + 80ms); }
  .mo .st.rv.in:not(.done) .vr.cs { animation-delay: calc(var(--d, 0ms) + 220ms); }
  .mo .st.rv.in:not(.done) .vd { animation: m-fade 320ms ease-out calc(var(--d, 0ms) + 420ms) backwards; }

  /* 펼친 꼭지: AI 칸이 하나씩 켜지고, 소비자 막대가 왼쪽부터 */
  .mo .panel .tally .dots i.on { animation: m-tally 160ms linear backwards; animation-delay: calc(var(--r, 0) * 90ms + var(--c, 0) * 45ms); }
  .mo .panel .split { animation: m-wipe 480ms var(--m-ease) 280ms backwards; }

  /* 03 좋게·중립·불편, 05 주제 막대: 비율이 틀리지 않게 통째로 왼쪽부터 드러낸다 */
  .mo .split.rv.in:not(.done) { animation: m-wipe 480ms var(--m-ease) calc(var(--d, 0ms) + 80ms) backwards; }
  .mo .bars.rv.in:not(.done) > li .track { animation: m-wipe 480ms var(--m-ease) backwards; animation-delay: var(--d, 0ms); }
  .mo .bars.rv.in:not(.done) > li:nth-child(2) .track { animation-delay: calc(var(--d, 0ms) + 70ms); }
  .mo .bars.rv.in:not(.done) > li:nth-child(3) .track { animation-delay: calc(var(--d, 0ms) + 140ms); }
  .mo #s05-all .track { animation: m-wipe 420ms var(--m-ease) 120ms backwards; }

  /* 보고 있는 사이 새로 준비된 섹션 */
  .mo .arrive > .eyebrow { animation: m-arrive 1600ms ease-out backwards; }

  /* 도착한 자리 */
  .landed::before { animation: m-land 1600ms cubic-bezier(.4,0,.2,1) forwards; }
  .eyebrow.landed { animation: m-arrive 1600ms ease-out forwards; }

  /* 만드는 중에만 도는 것: 진행 막대가 미끄러지고 옅은 광택, 지금 도는 단계의 점, 세는 중인 자리 */
  .mo .prog i { transition: width 900ms var(--m-ease); }
  .mo #hdr.running .prog i::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); animation: m-sheen 2400ms ease-in-out infinite; }
  .status.working::before, .meta.wait::before { animation: m-breathe 1400ms ease-in-out infinite alternate; }
  .bf .r i.sk { animation: m-breathe 1400ms ease-in-out infinite alternate; }
  .mo .all.is-loading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--ink-3); animation: m-load 1100ms cubic-bezier(.4,0,.2,1) infinite; }

  .top.float { transition: transform 200ms var(--m-ease); }
}
@media print {
  .mo .rv { opacity: 1 !important; transform: none !important; }
}

/* 리포트 순서 바꾸기(2026-10-21): 01 모으고 읽은 것의 막대는 제목 바로 아래(구분선 없이) */
.mix.first { margin-top: 20px; padding-top: 0; border-top: 0; }
.mt40 { margin-top: 40px; }

/* 펼친 근거(2026-10-21 다듬음): 한눈에 → AI의 설명(회색 표시) → 소비자 글(주황 표시). 덩어리 머리 오른쪽에 숫자 하나 */
.panel .blk + .blk { margin-top: 18px; padding-top: 16px; }
.bh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel .bt { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; color: var(--ink-2); }
.panel .blk.ai .bt::before, .panel .blk.cs .bt::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--neu); }
.panel .blk.cs .bt::before { background: var(--accent); }
.bh .bm { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel .sum { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--ink); }
.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-top: 12px; }
.tally li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-2); }
.tally .dots { display: inline-flex; gap: 3px; }
.tally .dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.tally .dots i.on { background: var(--ink-3); }
.says { margin-top: 12px; }
.says li { padding: 5px 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.says li span { margin-left: 6px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.panel .row3 { margin-top: 10px; }
.tp3 { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.tp3 .k { color: var(--ink-3); }
.tp3 b { font-weight: 700; color: var(--ink); }
.qs { margin-top: 14px; }
.ql + .ql { margin-top: 12px; }
.ql > p:first-child { font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ql .s { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.ql .tn { display: inline-flex; align-items: center; margin-right: 6px; font-weight: 700; color: var(--ink-2); }
.phone .ql a.lk { display: inline-flex; flex: none; align-items: center; min-height: 32px; font-weight: 600; color: var(--ink-3); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .phone .ql a.lk:hover { color: var(--ink); } }
.panel .all { margin-top: 14px; }

/* 01 목소리가 나온 곳 */
.bars.where .track .a { background: var(--ink-3); }

/* 02 머리·세 장 요약·양쪽 막대 다듬기(2026-10-21): 장마다 묶고, AI가 듣지 못한 목소리는 옅은 주황 바탕으로 */
.h3x .hl { font-weight: 700; color: var(--accent-ink); }
.ix .d { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; color: var(--ink-2); }
.bf-head, .bf { grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr); }
.phone a.bf-gh { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.bf-head + a.bf-gh { margin-top: 6px; }
.bf-gh .venn { width: 24px; height: 16px; }
.bf-gh b { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gh-consumer b { color: var(--accent-ink); }
.bfl.zg { margin: 0 -10px; padding: 2px 10px; border-radius: 10px; background: rgba(255, 74, 43, .07); }
.bf .l b.z { color: var(--accent-ink); }
.bfl.zg .bf .k { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .phone a.bf-gh:hover { color: var(--ink); } }
.legend .lg-n { margin-left: auto; color: var(--ink-3); }
.bfl.zg .bf .r b { background: none; }
.bfl.zg { background: rgba(255, 74, 43, .06); }

/* 02 B: 소비자가 쓴 다른 이름 */
.plain { margin-top: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); }
.plain p { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.plain b { font-weight: 700; color: var(--ink); }

/* 만드는 중: 진행 상황(2026-10-22). 숫자는 서버가 실제로 센 값이고, 화면은 그 사이를 이어 세고 방금 모은·읽은 글을 한 건씩 넘긴다. */
.pbar .row .eta-t { color: var(--ink-2); }
.pbar .row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 3px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pbar .row2 span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pbar .row2 b { font-weight: 700; color: var(--ink-2); }
.steps { display: grid; gap: 2px; }
.steps li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: var(--ink-3); }
.steps li i { width: 8px; height: 8px; border: 1.5px solid var(--ink-3); border-radius: 50%; box-sizing: border-box; }
.steps li.done { color: var(--ink-2); }
.steps li.done i { border: 0; background: var(--ink-2); }
.steps li.now { font-weight: 600; color: var(--ink); }
.steps li.now i { border: 0; background: var(--ink); }
.steps li em { font-size: 13px; font-style: normal; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.steps li em b { font-weight: 700; color: var(--ink); }
.sx.lv-slot { padding: 32px 20px 0; }
.live { padding: 16px; border-radius: var(--r); background: var(--surface); }
.live .lv-h { display: flex; align-items: center; gap: 8px; }
.live .lv-h .no { flex: none; font-size: 12px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.live .lv-h .nm { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.live .lv-h .status { margin-left: auto; }
.live .lv-big { margin-top: 14px; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.live .lv-big b { font-weight: 700; }
.live .lv-big small { margin-left: 2px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.lv-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lv-ch li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-2); }
.lv-ch li b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-ch li em { font-size: 12px; font-style: normal; color: var(--ink-3); }
.lv-ch li i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.lv-ch li.done i { background: var(--ink-2); }
.lv-ch li.now i { background: var(--ink); }
.lv-ch li.wait, .lv-ch li.fail { color: var(--ink-3); }
.lv-n { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.lv-n b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lv-bar { height: 4px; margin-top: 8px; overflow: hidden; border-radius: 2px; background: var(--surface-2); }
.lv-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ink-2); }
.tick { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); }
.tick .tc-k { font-size: 11px; font-weight: 700; color: var(--ink-3); }
.tick .tc-v { height: 68px; margin-top: 4px; overflow: hidden; }
.tick .tc-t { display: -webkit-box; font-family: var(--f-body); letter-spacing: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tick .tc-s { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.tick .tc-tag { padding: 0 6px; border-radius: 4px; background: var(--surface); font-weight: 600; color: var(--ink-2); }
.lv-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.lv-words span { padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; color: var(--ink-3); transition: color .3s, border-color .3s; }
.lv-words span.on { border-color: var(--ink-3); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .mo .lv-ch li.now i, .mo .steps li.now i { animation: m-breathe 1400ms ease-in-out infinite alternate; }
  .mo .eta-t.bump { animation: m-arrive 1600ms ease-out; }
}

/* ---------- 입장: 분석 유형 · 수집 기간 ---------- */
.period-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.period-reset { padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .period-reset:hover { color: var(--ink); } }
.period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.period-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.period-f span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.period-f input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color-scheme: dark; outline: none; -webkit-appearance: none; appearance: none; }
.period-f input:focus-visible { border-color: var(--ink-3); }
.period-f input[aria-invalid="true"] { border-color: rgba(255, 74, 43, .6); }
.period-f input::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
.period-f input::-webkit-date-and-time-value { text-align: left; }
.period-msg { color: var(--accent-ink); }

/* 입장 화면 '바로 열 수 있는 리포트'(시험용): 한 줄(브랜드 옆에 기간·수집·분석, 좁으면 다음 줄), 목록은 정한 높이 안에서 스크롤(2026-10-25) */
.rl-box { max-height: 392px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.rl-box:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }
.rl-h { position: sticky; top: 0; z-index: 1; padding: 10px 16px 6px; background: var(--surface); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.rl-box .list.links > li > a { padding: 10px 16px; gap: 2px 10px; }
.rl-box .li-t { font-size: 14px; line-height: 1.5; }
.rl-box .li-s { display: inline-block; margin: 0 0 0 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rl-box .list.links > li:first-child > *, .rl-box .list.links > li:last-child > *, .rl-box .list.links > li:only-child > * { border-radius: 0; }

/* 입장 화면 찾기 목록: 빠르게·자세히가 둘 다 있는 브랜드는 줄 오른쪽에 여는 단추 둘(entry.js both) */
.list.links > li.both { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px 10px 16px; }
.list.links > li.both .opens { display: flex; gap: 6px; }
.list.links > li.both .opens a { padding: 7px 10px; border-radius: 8px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .list.links > li.both .opens a:hover { filter: brightness(1.15); } }
.list.links > li.both .opens a:focus-visible { outline: 2px solid var(--ink-3); outline-offset: 2px; }