/* 1027 동적 대시보드 새 판(v4 · #/dash-live · 홈 스위치 cs_dash4) — dash3.css 위에 얹음(.d3.d4 안에서만) · 기존 디자인 값(tokens) · 어두운 칸은 "콘텐츠 흐름" 하나
 *  간편 모드 글자 17px↑ · 누르는 곳 56px↑ / 전문가 13px↑ · 44px↑ · 폰 폭 넘침 없음 · 움직임 줄이기 = 움직임 없음 · 고대비 = 흰 바탕 검은 글 */
.d3.d4 { --d4-ease: cubic-bezier(.2, .7, .2, 1); --d4-dark: #06121a; --d4-dark-line: #16303a; --d4-dark-ink: #dbe7ee; --d4-dark-muted: #9fb4c0; }

/* 머리 — 실데이터 표시 · 새로 고침 · (홈일 때) 원래 판으로 */
.d4 .d3title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d4live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--teal-press); background: var(--teal-light); border-radius: 999px; padding: 3px 10px; }
.d4live i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(15, 118, 110, .5); animation: d4ping 1.8s ease-out infinite; }
.d4act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.d4act .btn { gap: 6px; }
.d4re .d4ri { width: 18px; height: 18px; }
.d4re[aria-busy="true"] .d4ri { animation: d4spin .9s linear infinite; }

/* 탭 — 1027 완전 교체: 대표 1019 탭 모양(붙음 · 녹색 테두리 · 줄 꽉 참) 그대로(v3 dash3.css) · 새 판은 폰 가로 밀기 양끝 그림자만 */
.d4tabw { position: relative; min-width: 0; }
.d4tabw::before, .d4tabw::after { content: ''; position: absolute; top: 0; bottom: 1px; width: 28px; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 2; }
.d4tabw::before { left: 0; background: linear-gradient(90deg, var(--bg), rgba(255, 255, 255, 0)); }
.d4tabw::after { right: 0; background: linear-gradient(270deg, var(--bg), rgba(255, 255, 255, 0)); }
.d4tabw.l::before, .d4tabw.r::after { opacity: 1; }
.d3.d4 .d3day[aria-pressed="true"] { box-shadow: 0 4px 12px rgba(15, 118, 110, .22); }

/* 떠오르기 · 그려지기 · 자라기 — 새로 그린 칸마다(탭 · 기간 · 채널) */
.d4 .d3body > :not(.d3grid):not(.d3kpis):not(.d3pf), .d4 .d3grid > .d3card, .d4 .d3kpis > .d3kpi, .d4 .d3pf .card { animation: d4rise .6s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 55ms); }
.d4 .d3plot > svg, .d4 svg.pfsvg { animation: d4wipe 1.1s cubic-bezier(.3, .7, .2, 1) backwards; animation-delay: calc(var(--d4i, 0) * 55ms + .15s); }
.d4 .d3bars .bt i { transform-origin: left center; animation: d4grow .9s var(--d4-ease) backwards; animation-delay: .25s; }
.d4 .d3cols i { transform-origin: center bottom; animation: d4growy .8s var(--d4-ease) backwards; animation-delay: .2s; }
.d4num { font-variant-numeric: tabular-nums; }
.d4 .d3line, .d4 .d3area { transition: opacity .25s; }
.d4 .d3line.d4off { opacity: .08; } .d4 .d3area.d4off { opacity: 0; }
@keyframes d4rise { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes d4wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes d4grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d4growy { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes d4ping { 0% { box-shadow: 0 0 0 0 rgba(15, 118, 110, .45); } 70% { box-shadow: 0 0 0 8px rgba(15, 118, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); } }
@keyframes d4spin { to { transform: rotate(360deg); } }
@keyframes d4warn { 0% { box-shadow: 0 0 0 0 rgba(227, 165, 72, .55), 0 0 22px rgba(227, 165, 72, .14); } 70% { box-shadow: 0 0 0 14px rgba(227, 165, 72, 0), 0 0 22px rgba(227, 165, 72, .14); } 100% { box-shadow: 0 0 0 0 rgba(227, 165, 72, 0), 0 0 22px rgba(227, 165, 72, .14); } }
@keyframes d4beam { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* 범례 = 선 숨기기 · 보이기 단추 */
.d4 .d4lg { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; user-select: none; transition: opacity .2s, background-color .2s; }
.d4 .d4lg:hover { background: var(--track); } .d4 .d4lg:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.d4 .d4lg[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }

/* 숫자 카드 → 메뉴(누르면 이동) */
.d4 .d4k { cursor: pointer; transition: transform .2s var(--d4-ease), box-shadow .2s, border-color .2s; gap: 6px; }
.d4 .d4k:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16, 40, 52, .10); border-color: var(--teal); }
.d4 .d4k:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--teal); }
.d4 .d4k .d3kv { font-size: 30px; letter-spacing: -.02em; }
.d4seg { display: flex; gap: 2px; height: 6px; border-radius: 99px; overflow: hidden; background: var(--track); margin: 4px 0 2px; }
.d4seg i { display: block; height: 100%; width: var(--w); animation: d4grow .9s var(--d4-ease) backwards .3s; transform-origin: left; }
.d4kgo { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--teal-link); }
.d4kgo .d4arr { transition: transform .2s var(--d4-ease); } .d4 .d4k:hover .d4arr, .d4 .d4k:focus-visible .d4arr { transform: translateX(4px); }

/* 콘텐츠 흐름 — 어두운 칸 · 유성(√ 숫자) · 0 = 점선 · 실패 = 주황 맥박 */
.d4flow { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; border-radius: 18px; background: var(--d4-dark); border: 1px solid var(--d4-dark-line); color: var(--d4-dark-ink); }
.d4fh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; align-items: flex-start; }
.d4fh > div { min-width: 0; flex: 1 1 320px; }
.d4fh h3 { margin: 0; font-size: 17px; color: #f2f7fa; }
.d4fh p { margin: 2px 0 0; font-size: 13px; color: var(--d4-dark-muted); line-height: 1.5; overflow-wrap: anywhere; }
.d4auto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--d4-dark-muted); border: 1px solid #1f3a46; border-radius: 999px; padding: 4px 12px; white-space: nowrap; }
.d4auto i { width: 8px; height: 8px; border-radius: 50%; background: #5b7183; }
.d4auto.on { color: #a7e3c9; border-color: rgba(167, 227, 201, .45); } .d4auto.on i { background: #5fd3c8; animation: d4ping 1.8s ease-out infinite; }
.d4fscroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-width: thin; scrollbar-color: #1f3a46 transparent; }
.d4fstage { position: relative; min-width: 760px; height: 300px; }
.d4fstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.d4node { position: absolute; transform: translate(-50%, -50%); width: 160px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(160, 200, 215, .45); background: rgba(7, 20, 28, .92); color: var(--d4-dark-ink); text-decoration: none; box-shadow: 0 0 22px rgba(95, 211, 200, .10); transition: border-color .2s, box-shadow .2s, transform .2s var(--d4-ease); }
.d4node:hover { border-color: #5fd3c8; transform: translate(-50%, -50%) translateY(-2px); }
.d4node:focus-visible { outline: 2px solid #5fd3c8; outline-offset: 2px; }
.d4node .d4nl { font-size: 13px; color: var(--d4-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d4node .d4nv { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; color: #e6f1f5; }
.d4node .d4nv small { font-size: 13px; font-weight: 500; color: var(--d4-dark-muted); margin-left: 3px; }
.d4node.c1 { border-color: rgba(95, 211, 200, .55); box-shadow: 0 0 22px rgba(95, 211, 200, .16); } .d4node.c1 .d4nv { color: #5fd3c8; }
.d4node.c2 { border-color: rgba(138, 184, 240, .55); box-shadow: 0 0 22px rgba(138, 184, 240, .14); } .d4node.c2 .d4nv { color: #8ab8f0; }
.d4node.c3 .d4nv { color: #c3d2dc; }
.d4node.c4 { border-color: rgba(167, 227, 201, .55); box-shadow: 0 0 22px rgba(167, 227, 201, .14); } .d4node.c4 .d4nv { color: #a7e3c9; }
.d4node.c5 { border-color: rgba(227, 165, 72, .6); } .d4node.c5 .d4nv { color: #e3a548; }
.d4node.zero { border-color: rgba(127, 147, 163, .35); box-shadow: none; } .d4node.zero .d4nv { color: #93a6b4; }
.d4node.warn { animation: d4warn 1.8s ease-out infinite; }
.d4fleg { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--d4-dark-line); font-size: 13px; color: var(--d4-dark-muted); }
.d4fleg span { display: inline-flex; align-items: center; gap: 6px; }
.d4fleg .ln { width: 18px; height: 3px; border-radius: 3px; background: #5fd3c8; } .d4fleg .ln.dash { height: 0; border-top: 2px dashed #5b7183; background: none; } .d4fleg .ln.warn { height: 0; border-top: 2px dashed #e3a548; background: none; }
.d4fleg .src { margin-left: auto; }
.d4fhint { display: none !important; color: #c3d2dc; font-weight: 600; } .d4wide .d4fhint { display: inline-flex !important; }
.d4kgo .d4gs { display: none; }
@media (max-width: 767px) { .d4kgo .d4gl { display: none; } .d4kgo .d4gs { display: inline; } }

/* 비용 도넛 · 연동 고리 */
.d4crow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.d4donut { width: 108px; height: 108px; flex: 0 0 auto; }
.d4dbg { fill: none; stroke: var(--track); stroke-width: 14; } .d4dseg { fill: none; stroke-width: 14; }
.d4cside { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 180px; }
.d4cleg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.d4cleg li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 14px; }
.d4cleg i { width: 10px; height: 10px; border-radius: 3px; } .d4cleg span { overflow-wrap: anywhere; } .d4cleg b { font-variant-numeric: tabular-nums; } .d4cleg em { font-style: normal; color: var(--muted); font-size: 13px; min-width: 3ch; text-align: right; }
.d4cnote { margin: 0; font-size: 13px; color: var(--muted); }
.d4 .d3ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.d4ring { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.d4ring svg { width: 56px; height: 56px; display: block; }
.d4rbg { fill: none; stroke: var(--track); stroke-width: 7; } .d4rfg { fill: none; stroke: var(--teal); stroke-width: 7; stroke-linecap: round; }
.d4ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d4rsum { margin: 0; font-size: 13px; color: var(--muted); }

/* 플랫폼 탭 머리 — 로고 · 연결 상태 · 기간 · 아래 빛줄 */
.d4hero { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.d4logo { width: 48px; height: 48px; border-radius: 14px; background: var(--track); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.d4logo .i { width: 24px; height: 24px; } .d4xl { font-size: 24px; line-height: 1; }
.d4hm { min-width: 0; flex: 1 1 240px; }
.d4hm h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.d4hm p { margin: 2px 0 0; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.d4tone { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.d4tone i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.t-ok .d4tone i { background: var(--ok); animation: d4ping 1.8s ease-out infinite; } .t-warn .d4tone i { background: var(--warn-ink); }
.d4hp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
/* 1028 [내 채널 연결하기] — 연결 상태 뒤 · 창 안 목록 */
.d4conn { white-space: nowrap; }
.d4cdlg .d4cl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow: auto; }
.d4cdlg .d4cl li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.d4cdlg .d4cl li > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.d4cdlg .d4cl li .min { flex-basis: 100%; }
.d4cdlg .d4cw { font-size: 13px; font-weight: 600; color: var(--warn-ink, #8a5a00); }
.d4cdlg .d4chow { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.d4pp { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.d4beam { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--d4beam) 25%, transparent 50%, var(--d4beam) 75%, transparent 100%) 0 0 / 200% 100%; opacity: .55; animation: d4beam 4s linear infinite; }
.t-off .d4beam { opacity: .18; animation: none; }

/* 새 판 안내 띠(#/dash-live) */
.d4swb { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--accent-line); background: var(--accent-light); }
.d4swt { min-width: 0; flex: 1 1 360px; } .d4swt b { font-size: 16px; } .d4swt p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.d4swa { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.d4swst { font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }

/* 간편 모드 — 글자 17px↑ · 누르는 곳 56px↑ */
html[data-mode="simple"] .d4live, html[data-mode="simple"] .d4kgo, html[data-mode="simple"] .d4fh p, html[data-mode="simple"] .d4auto, html[data-mode="simple"] .d4node .d4nl, html[data-mode="simple"] .d4node .d4nv small,
html[data-mode="simple"] .d4fleg, html[data-mode="simple"] .d4cleg li, html[data-mode="simple"] .d4cleg em, html[data-mode="simple"] .d4cnote, html[data-mode="simple"] .d4ring span, html[data-mode="simple"] .d4rsum,
html[data-mode="simple"] .d4hm p, html[data-mode="simple"] .d4tone, html[data-mode="simple"] .d4pp, html[data-mode="simple"] .d4swt p, html[data-mode="simple"] .d4swst, html[data-mode="simple"] .d4 .d4lg { font-size: 17px; }
html[data-mode="simple"] .d4fh h3 { font-size: 20px; } html[data-mode="simple"] .d4hm h3 { font-size: 21px; } html[data-mode="simple"] .d4swt b { font-size: 19px; }
html[data-mode="simple"] .d4 .d4lg { min-height: 56px; }
html[data-mode="simple"] .d4node { width: 196px; min-height: 76px; } html[data-mode="simple"] .d4node .d4nv { font-size: 26px; }
html[data-mode="simple"] .d4fstage { min-width: 920px; height: 380px; }
html[data-mode="simple"] .d4ring, html[data-mode="simple"] .d4ring svg { width: 64px; height: 64px; }
html[data-mode="expert"] .d4node { min-height: 64px; }

/* 넓은 화면 · 폰 */
@media (min-width: 2000px) { .d4fstage { height: 340px; } .d4node { width: 180px; } }
@media (max-width: 767px) {
  .d4flow, .d4hero { padding: 14px; }
  .d4 .d4k .d3kv { font-size: 24px; }
  .d4fleg .src { margin-left: 0; }
  .d4act .lnk { flex: 1 1 100%; }
}

/* 움직임 줄이기 — 움직임 없이 마지막 모습 */
@media (prefers-reduced-motion: reduce) {
  .d4 .d3body > :not(.d3grid):not(.d3kpis):not(.d3pf), .d4 .d3grid > .d3card, .d4 .d3kpis > .d3kpi, .d4 .d3pf .card, .d4 .d3plot > svg, .d4 svg.pfsvg, .d4 .d3bars .bt i, .d4 .d3cols i, .d4seg i,
  .d4live i, .d4auto.on i, .d4node.warn, .t-ok .d4tone i, .d4beam, .d4re[aria-busy="true"] .d4ri { animation: none; }
  .d4 .d4k, .d4node, .d4kgo .d4arr { transition: none; }
  .d4node.warn { box-shadow: 0 0 0 2px rgba(227, 165, 72, .6); }
}
/* 고대비 — 흰 바탕 · 검은 글 · 흐름 그림(빛)은 숨기고 숫자 칸만 */
html.nu-hc .d4flow { background: #FFFFFF; color: #000000; border: 2px solid #000000; }
html.nu-hc .d4flow canvas { display: none; }
html.nu-hc .d4fh h3, html.nu-hc .d4fh p, html.nu-hc .d4auto, html.nu-hc .d4fleg, html.nu-hc .d4node .d4nl, html.nu-hc .d4node .d4nv, html.nu-hc .d4node .d4nv small { color: #000000; }
html.nu-hc .d4node { background: #FFFFFF; border: 2px solid #000000; box-shadow: none; animation: none; }
html.nu-hc .d4live, html.nu-hc .d4swb { background: #FFFFFF; border: 2px solid #000000; color: #000000; }
.d4act .lnk { display: inline-flex; align-items: center; min-height: 44px; }
html[data-mode="simple"] .d4act .lnk { min-height: 56px; font-size: 17px; }

/* ═══ 1027 대표 15:02 — 전체 탭 배치 · 예약 현황 · 연동 상태(문제 위 · 연결됨 칩) · 자동 제작 막대 ═══ */
.d4hide { display: none !important; }
.d4 .d3grid > .d3card.span12 { grid-column: span 12; }
.d4mm { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.d4mm .btn { min-height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
.d4mm .btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--surface); }
html[data-mode="expert"] .d4mm .btn { min-height: 44px; }
html[data-mode="simple"] .d4mm .btn { min-height: 56px; font-size: 17px; padding: 0 14px; }
.d4sched .d3ch { flex-wrap: wrap; }
.d4ssum { margin: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.d4ssum .d4sn { font-size: 32px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.d4ssum span { font-size: 14px; color: var(--ink-2); }
.d4ssrc { margin-top: -6px; }
.d4sdays { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 132px; padding: 4px 0 0; }
.d4sdays.dense { gap: 2px; }
.d4sdays .dc { display: grid; grid-template-rows: 18px 1fr 30px; height: 100%; min-width: 0; text-align: center; }
.d4sdays .dc .n { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.d4sdays .dc .st { align-self: end; height: var(--h); min-height: 0; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 2px 2px; overflow: hidden; background: transparent; transform-origin: bottom; animation: d4growy .8s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 35ms + .1s); }
.d4sdays .dc .st i { display: block; min-height: 3px; }
.d4sdays .dc .dl { font-size: 13px; line-height: 1.25; color: var(--muted); padding-top: 4px; white-space: nowrap; overflow: hidden; }
.d4sdays .dc.today .dl { color: var(--teal-press); font-weight: 700; }
.d4sdays .dc.today .n { color: var(--teal-press); }
.d4sdays .dc { position: relative; isolation: isolate; }
.d4sdays .dc[data-n="0"] .st { height: 3px; background: var(--track); }
.d4spf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.d4spf li { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; }
.d4spf .pn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d4spf .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.d4spf .pb { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.d4spf .pb i, .d4ab i { display: block; height: 100%; width: var(--w); border-radius: 999px; transform-origin: left; animation: d4grow .9s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 60ms + .2s); }
.d4spf b { font-variant-numeric: tabular-nums; }
.d4snext { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.d4snext li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.d4snext .tm { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .d4snext .pf { display: inline-flex; gap: 4px; align-items: center; color: var(--muted); white-space: nowrap; }
.d4snext .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4okc { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.d4okh { font-size: 13px; font-weight: 700; color: var(--muted); }
.d4chips { display: flex; flex-wrap: wrap; gap: 6px; }
.d4chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--ok-light); color: var(--ok); font-size: 13px; font-weight: 700; animation: d4pop .45s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 50ms + .3s); }
@keyframes d4pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.d4 [data-d3card="agents"] .d3mini li { grid-template-columns: minmax(0, 1fr) auto; }
.d4ab { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin-top: 2px; }
.d4ab i { background: var(--teal); }
html[data-mode="simple"] .d4ssum span, html[data-mode="simple"] .d4sdays .dc .n, html[data-mode="simple"] .d4sdays .dc .dl, html[data-mode="simple"] .d4spf li, html[data-mode="simple"] .d4snext li,
html[data-mode="simple"] .d4okh, html[data-mode="simple"] .d4chip { font-size: 17px; }
html[data-mode="simple"] .d4sdays { height: 168px; } html[data-mode="simple"] .d4sdays .dc { grid-template-rows: 24px 1fr 46px; }
html[data-mode="simple"] .d4chip { min-height: 40px; }

/* ═══ 1027 대표 14:57 — 유튜브 탭 시청자 분석(dash4yt.js · [유튜브 전체] · 채널마다) ═══ */
.d4ytx { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; min-width: 0; }
.d4yh h3 { margin: 0; font-size: 19px; } .d4yh .d3sub { margin-top: 2px; }
.d4yload { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px dashed var(--line-2); border-radius: 18px; }
.d4yload .bar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; } .d4yload .bar i { display: block; height: 100%; width: 8%; background: var(--teal); transition: width .3s; }
.d4yg1, .d4yg2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px; }
.d4yg2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 16px; }
@media (max-width: 1279px) { .d4yg1, .d4yg2 { grid-template-columns: minmax(0, 1fr); } }
.d4ytx .d3card { animation: d4rise .6s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 70ms); }
.d4ytx .d3ch { flex-wrap: wrap; }
/* 지도 */
.d4mapw { position: relative; }
.d4map svg { width: 100%; height: auto; display: block; }
.d4map path { fill: #e7e2d8; stroke: var(--surface); stroke-width: .6; transition: fill .6s ease var(--d, 0ms), stroke .15s, opacity .15s; }
.d4map path.has { cursor: pointer; }
.d4map path.hov { stroke: var(--ink); stroke-width: 1.4; filter: brightness(1.08); }
.d4tip2 { position: absolute; z-index: 6; pointer-events: none; min-width: 180px; max-width: 280px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; }
.d4tip2[hidden] { display: none; }
.d4tip2 b { font-size: 15px; } .d4tip2 em { font-style: normal; font-size: 13px; font-weight: 700; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.d4tip2 strong { font-variant-numeric: tabular-nums; } .d4tip2 small { color: rgba(255, 255, 255, .78); font-size: 13px; }
.d4mleg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--muted); }
.d4mleg .grad { width: 120px; height: 10px; border-radius: 999px; display: inline-block; }
.d4vsel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--accent-light); border: 1px solid var(--accent-line); font-size: 14px; }
.d4vsel[hidden] { display: none; }
.d4clist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 18px; }
.d4clist li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 46px; gap: 2px 6px; align-items: baseline; padding: 6px 4px; border-bottom: 1px solid var(--line); border-radius: 6px; font-size: 14px; outline: none; }
.d4clist li:hover, .d4clist li:focus-visible { background: var(--track); } .d4clist li:focus-visible { box-shadow: var(--focus-ring); }
.d4clist .rk { color: var(--muted); font-weight: 700; } .d4clist .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .d4clist b { font-variant-numeric: tabular-nums; } .d4clist .pp { color: var(--muted); font-size: 13px; text-align: right; }
.d4clist .bt { grid-column: 2 / -1; height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; } .d4clist .bt i { display: block; height: 100%; transform-origin: left; animation: d4grow .8s var(--d4-ease) backwards .2s; }
.d4clist .sub { grid-column: 2 / -1; font-size: 13px; color: var(--muted); }
@media (max-width: 767px) { .d4clist { grid-template-columns: minmax(0, 1fr); } }
/* 프리미엄 순위 */
.d4pl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.d4pl li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 8px; animation: d4rise .5s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 40ms + .15s); }
.d4pl li.on { background: var(--accent-light); }
.d4pl .rk { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--track); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.d4pl .rk.r1, .d4pl .rk.r2, .d4pl .rk.r3 { background: #FDE7C8; color: #8A3F06; }
.d4pl .pt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d4pv-t { all: unset; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 24px; }
.d4pv-t:hover { color: var(--teal-link); text-decoration: underline; } .d4pv-t:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }
.d4pv-t[aria-busy="true"] { opacity: .6; }
.d4pl .pm { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d4pl .pb { height: 4px; border-radius: 999px; background: var(--track); overflow: hidden; } .d4pl .pb i { display: block; height: 100%; background: #D97706; transform-origin: left; animation: d4grow .8s var(--d4-ease) backwards .3s; }
.d4pl .pr { display: flex; flex-direction: column; align-items: flex-end; } .d4pl .pr b { font-size: 17px; color: #8A3F06; font-variant-numeric: tabular-nums; } .d4pl .pr span { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* 올린 시간 */
.d4best { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; } .d4best .lb { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-light); color: var(--accent-press); } .d4best b { font-size: 17px; }
.d4heat { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 6px; align-items: center; }
.d4heat .hh { font-size: 13px; color: var(--muted); text-align: center; } .d4heat .hh.rl { text-align: left; }
.d4heat .hc { height: 40px; border-radius: 8px; background: #f3f1ec; display: flex; align-items: center; justify-content: center; animation: d4pop .45s var(--d4-ease) backwards; animation-delay: calc(var(--k, 0) * 12ms + .2s); }
.d4heat .hc i { font-style: normal; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.d4heat .hc.best { box-shadow: 0 0 0 2px var(--accent), 0 6px 14px rgba(194, 65, 12, .25); }
/* 성별 · 나이 */
.d4gen { display: flex; gap: 10px; flex-wrap: wrap; }
.d4gen > div { flex: 1 1 120px; display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: var(--bg); font-size: 14px; }
.d4gen b { font-size: 20px; font-variant-numeric: tabular-nums; } .d4gen .gf b { color: #BE185D; } .d4gen .gm b { color: #1D4ED8; }
.d4gbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--track); }
.d4gbar i { display: block; height: 100%; width: var(--w); transform-origin: left; animation: d4grow .9s var(--d4-ease) backwards .2s; } .d4gbar .f { background: #EC4899; } .d4gbar .m { background: #3B82F6; }
.d4ages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.d4ages li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 54px; gap: 10px; align-items: center; font-size: 14px; }
.d4ages .ab { height: 14px; border-radius: 999px; background: var(--track); overflow: hidden; }
.d4ages .aw { display: flex; height: 100%; width: var(--w); border-radius: 999px; overflow: hidden; transform-origin: left; animation: d4grow .9s var(--d4-ease) backwards; animation-delay: calc(var(--d4i, 0) * 60ms + .2s); }
.d4ages .aw .f { background: #EC4899; } .d4ages .aw .m { background: #3B82F6; }
.d4ages b { text-align: right; font-variant-numeric: tabular-nums; }
html[data-mode="simple"] .d4yh h3 { font-size: 21px; }
html[data-mode="simple"] .d4tip2, html[data-mode="simple"] .d4tip2 b, html[data-mode="simple"] .d4tip2 small, html[data-mode="simple"] .d4tip2 em, html[data-mode="simple"] .d4mleg, html[data-mode="simple"] .d4vsel,
html[data-mode="simple"] .d4clist li, html[data-mode="simple"] .d4clist .pp, html[data-mode="simple"] .d4clist .sub, html[data-mode="simple"] .d4pv-t, html[data-mode="simple"] .d4pl .pm, html[data-mode="simple"] .d4pl .rk,
html[data-mode="simple"] .d4pl .pr span, html[data-mode="simple"] .d4best .lb, html[data-mode="simple"] .d4heat .hh, html[data-mode="simple"] .d4heat .hc i, html[data-mode="simple"] .d4gen > div, html[data-mode="simple"] .d4ages li, html[data-mode="simple"] .d4yload .d3sub { font-size: 17px; }
html[data-mode="simple"] .d4pv-t { min-height: 56px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
html[data-mode="expert"] .d4pv-t { min-height: 44px; display: flex; align-items: center; }
html[data-mode="simple"] .d4clist li { min-height: 56px; } html[data-mode="expert"] .d4clist li { min-height: 44px; }
html[data-mode="simple"] .d4heat { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); } html[data-mode="simple"] .d4heat .hc { height: 48px; }
@media (max-width: 767px) { .d4heat { gap: 3px; grid-template-columns: 38px repeat(7, minmax(0, 1fr)); } .d4heat .hc i { font-size: 13px; } html[data-mode="simple"] .d4heat .hc i { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) {
  .d4sdays .dc .st, .d4spf .pb i, .d4ab i, .d4chip, .d4ytx .d3card, .d4clist .bt i, .d4pl li, .d4pl .pb i, .d4heat .hc, .d4gbar i, .d4ages .aw { animation: none; }
  .d4map path { transition: none; }
}
html.nu-hc .d4tip2 { background: #000; border: 2px solid #fff; }
html.nu-hc .d4chip { background: #fff; color: #000; border: 2px solid #000; }
.d4yg1 > .d3card, .d4yg2 > .d3card { grid-column: auto; }
.d4ages .aw { background: #8B95A5; }
.d4yg1 { align-items: start; }
.d4pl li { padding: 6px; } .d4pl .pt { gap: 2px; }
.d4heat .hc .sh { display: none; }
@media (max-width: 767px) { .d4heat .hc .fl { display: none; } .d4heat .hc .sh { display: inline; } }
.d4sdays .dc .dl { overflow: visible; }
.d4 [data-d3card="flow"] .d3chart svg { height: 340px; } @media (max-width: 1439px) { .d4 [data-d3card="flow"] .d3chart svg { height: 220px; } }
/* 1027 세어 올리기 = 그림 글자 겹치기(진짜 글자는 서버 값 그대로 · 투명) */
.d4cntl { position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.d4cnt { position: absolute; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d4hold { color: transparent !important; }