:root {
/* Surfaces */
--color-paper: #FFFFFF;
--color-bone: #FAFAFA;
--color-hairline: #E5E5E5;
--color-smoke: #D4D4D4;
/* Text */
--color-ink: #1A1A1A;
--color-cinder: #3F3F3F;
--color-stone: #6B6B6B;
--color-slate: #9C9C9C;
/* Accent */
--color-indigo: #4F46E5;
--color-indigo-soft: #EEF2FF;
--color-indigo-deep: #3730A3;
/* Sentiment */
--color-ember: #C2410C;
--color-ember-soft: #FFEDD5;
--color-teal: #0F766E;
--color-teal-soft: #CCFBF1;
--color-amber: #D97706;
--color-amber-soft: #FEF3C7;
/* Fixed per-axis colours for sub-scores (활동량/실효성/충실성).
Distinct from the tier colours (teal/amber/ember = 총합 only). */
--ax-act: #4F46E5;
--ax-eff: #38BDF8;
--ax-dev: #A855F7;
/* Gradient */
--gradient-cluster: linear-gradient(135deg, #4F46E5 0%, #818CF8 50%, #C7D2FE 100%);
/* Layout */
--page-max: 1200px;
/* Shadows */
--shadow-hairline: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
--shadow-hairline-strong: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
background: var(--color-paper);
color: var(--color-ink);
font-size: 15px;
line-height: 1.6;
font-feature-settings: "kern" 1, "calt" 1;
}
.num, .data, table, .tnum, .score-value, .counter-num, .stat {
font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ===== Scrollytelling engine (scrolly.js) ===== */
/* Ambient particle background — sits above body paper, below all content */
#scrolly-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
/* HOME wants a clean white background — hide the ambient particle canvas
only on the home page. (The 3D cluster section's own dots are inside
.cluster-stage, NOT this canvas, so they stay visible.) Other pages
keep the ambient particles for subtle texture. */
body.home-page #scrolly-bg { display: none; }
/* Lenis smooth scroll — required base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--color-ink); }
h1 { font-size: 64px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 900; }
h2 { font-size: 32px; }
h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.3; }
h4 { font-size: 16px; letter-spacing: 0; line-height: 1.4; }
p { color: var(--color-ink); }
a { color: var(--color-indigo); text-decoration: none; transition: color 200ms; }
a:hover { color: var(--color-indigo-deep); }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
/* =========================================================================
Top Nav — floating "liquid glass" pill (Apple iOS 26 inspired)
========================================================================= */
.topnav {
/* Floats above content with margins from the viewport edges. Stays
fixed in place rather than scrolling with the page. */
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 28px);
max-width: 1280px;
z-index: 100;
/* Liquid glass: translucent white + heavy backdrop blur + saturation
boost so colors behind the bar pop through. */
background: rgba(255, 255, 255, 0.55);
backdrop-filter: saturate(180%) blur(28px);
-webkit-backdrop-filter: saturate(180%) blur(28px);
/* Hairline outer border on top of the glass surface. */
border: 1px solid rgba(255, 255, 255, 0.65);
border-radius: 22px;
/* Layered shadow + inset highlights mimic the look of a thick glass
slab catching light from above (top inset white) and casting a soft
shadow below (outer drop shadow). */
box-shadow:
0 6px 22px -10px rgba(20, 24, 40, 0.18),
0 22px 48px -20px rgba(20, 24, 40, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
inset 0 -1px 0 rgba(20, 24, 40, 0.04);
}
/* Body needs padding-top to clear the floating nav (which is now out of flow). */
body { padding-top: 96px; }
.topnav-inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 0 22px;
height: 64px;
display: flex; align-items: stretch; justify-content: space-between;
gap: 24px;
}
.logo {
display: flex; align-items: center; gap: 0;
white-space: nowrap;
}
.logo-img { display: block; width: auto; }
.logo-img--mbc { height: 52px; }
.nav-links {
display: flex; gap: 6px;
align-self: stretch;
align-items: center;
}
.nav-links a {
display: flex; align-items: center;
color: var(--color-ink); font-size: 14px; font-weight: 500;
/* Pill-style hover/active state instead of the old underline bar —
fits the rounded floating-glass aesthetic. */
padding: 6px 14px;
border-radius: 999px;
letter-spacing: -0.005em;
transition: color 160ms, background-color 160ms;
}
.nav-links a:hover {
color: var(--color-indigo);
background: rgba(99, 102, 241, 0.10);
}
.nav-links a.active {
color: var(--color-indigo);
font-weight: 700;
background: rgba(99, 102, 241, 0.14);
}
/* Page section */
.page {
max-width: var(--page-max);
margin: 0 auto;
/* body has padding-top: 96px to clear the floating nav, so .page only
needs a smaller breathing-space padding-top. */
padding: 40px 24px 128px;
}
/* Page eyebrow label */
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--color-indigo);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 20px;
}
/* HOME hero */
.hero {
text-align: center;
padding: 64px 0 48px;
position: relative;
}
.hero-eyebrow {
font-size: 14px;
font-weight: 700;
color: var(--color-indigo);
letter-spacing: 0.02em;
margin-bottom: 18px;
}
.hero h1 {
font-size: clamp(36px, 6vw, 80px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.035em;
margin-bottom: 24px;
}
.hero-sub {
color: var(--color-stone);
font-size: 15px;
letter-spacing: -0.01em;
}
.hero-desc {
max-width: 1080px;
margin: 36px auto 0;
color: var(--color-slate);
font-size: 20px;
line-height: 1.75;
text-align: center;
letter-spacing: -0.005em;
padding: 0 8px;
/* Reserve ~2 lines on desktop so the page doesn't jump as chars type. */
min-height: calc(20px * 1.75 * 2);
}
.hero-desc strong {
color: var(--color-ink);
font-weight: 700;
background: linear-gradient(180deg, transparent 60%, rgba(79, 70, 229, 0.15) 60%);
padding: 0 2px;
}
@media (max-width: 768px) {
/* Body text bump for mobile.
Korean glyphs are denser than Latin — 15px reads cramped on a phone,
especially for the long .lead paragraphs on analysis / ranking / issues.
Bumping to 16/1.65 brings us in line with iOS HIG (17pt) and Material
(16sp). Small chip/badge components hard-code their own sizes so they
are unaffected. */
body { font-size: 16px; line-height: 1.65; }
.hero-desc {
font-size: 16px;
line-height: 1.7;
margin: 24px auto 0;
padding: 0 2px;
/* ~4 lines on a phone */
min-height: calc(16px * 1.7 * 4);
}
}
/* JS-gated reveal: hide hero-desc until the typewriter starts, so the
full string doesn't flash before the animation kicks in. No-JS users
still see the text because the .js-on class is never added. */
.js-on .hero-desc { opacity: 0; transition: opacity 0.2s ease-out; }
.js-on .hero-desc.is-typing,
.js-on .hero-desc.is-typed { opacity: 1; }
/* Blinking caret that follows the typing position */
.hero-typing-cursor {
display: inline-block;
color: var(--color-indigo);
font-weight: 400;
margin-left: 1px;
animation: hero-cursor-blink 0.6s steps(2, end) infinite;
user-select: none;
}
@keyframes hero-cursor-blink {
50% { opacity: 0; }
}
/* Cluster stage (HOME hero visual) */
.cluster-stage {
position: relative;
height: min(760px, 84vh);
min-height: 560px;
margin: 48px 0;
background:
radial-gradient(ellipse at center, #1B2236 0%, #0E1320 75%),
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px,
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 60px 60px;
background-blend-mode: normal, screen, screen;
border-radius: 4px;
overflow: hidden;
overflow: hidden;
border-radius: 4px;
border: 1px solid var(--color-hairline);
}
.cluster-canvas {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
display: block;
/* Prevent the browser from interpreting drag / pinch as page scroll
or browser zoom — required for the in-canvas orbit + pinch-zoom
gestures to actually receive their pointer events. */
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.cluster-bg-text {
position: absolute; top: 24px; left: 24px;
font-size: 11px; font-weight: 600; letter-spacing: 0.10em;
color: rgba(255,255,255,0.55); text-transform: none;
z-index: 2;
pointer-events: auto;
}
.cluster-bg-text a { color: rgba(255,255,255,0.85); }
.cluster-bg-text-dummy {
pointer-events: none;
}
.cluster-controls {
position: absolute; top: 24px; right: 24px;
display: flex; gap: 8px;
z-index: 2;
}
.cluster-control {
background: white;
border: 1px solid var(--color-hairline);
padding: 8px 12px;
font-size: 12px; font-weight: 500;
color: var(--color-ink);
border-radius: 4px;
cursor: pointer;
}
.cluster-control:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.cluster-region-labels {
position: absolute; inset: 0;
pointer-events: none;
z-index: 2;
}
.region-label {
position: absolute;
font-size: 11px; font-weight: 700;
color: var(--color-indigo-deep);
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(4px);
border: 1px solid var(--color-hairline);
}
.cluster-tooltip {
position: absolute;
background: var(--color-ink);
color: white;
padding: 8px 12px;
font-size: 12px;
border-radius: 4px;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -120%);
transition: opacity 150ms;
z-index: 10;
white-space: nowrap;
font-weight: 500;
}
.cluster-tooltip.visible { opacity: 1; }
.cluster-tooltip .num {
color: #C7D2FE;
font-weight: 700;
}
/* Projected 3D dot labels (positioned every frame by cluster.js).
Unique class names — must NOT collide with the legacy .cluster-label
box style further down this file. No background: text sits on the dot. */
.topic-label-layer {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 3;
}
.topic-label {
position: absolute;
left: 0;
top: 0;
background: none;
border: 0;
padding: 0;
color: #fff;
/* Uniform size — does NOT scale with dot size or depth */
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 1.12;
letter-spacing: -0.01em;
/* Wrap long names (감사·인사·기관운영) while keeping the · interpuncts */
white-space: normal;
word-break: keep-all;
max-width: 8.5em;
text-shadow:
0 0 2px rgba(0,0,0,0.95),
0 1px 6px rgba(0,0,0,0.9),
0 0 10px rgba(0,0,0,0.7);
transform: translate(-50%, -50%);
will-change: transform, opacity;
user-select: none;
}
.topic-label.kw {
font-size: 15px;
font-weight: 700;
letter-spacing: 0;
max-width: 9.5em;
}
@media (max-width: 768px) {
.topic-label { font-size: 13px; max-width: 7.5em; }
.topic-label.kw { font-size: 12px; }
}
.cluster-legend {
position: absolute; bottom: 24px; left: 24px;
background: rgba(15, 19, 32, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.08);
padding: 12px 16px; font-size: 12px; line-height: 1.7;
color: rgba(255,255,255,0.7);
z-index: 2;
border-radius: 4px;
}
.cluster-legend strong { color: white; font-weight: 700; }
.cluster-legend .meta { color: rgba(255,255,255,0.5); margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.1); }
/* === Topic cluster: loading, tooltip-muted, side panel === */
.cluster-loading {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; color: rgba(255,255,255,0.55);
letter-spacing: 0.04em;
pointer-events: none;
z-index: 1;
animation: cluster-pulse 1.4s ease-in-out infinite;
}
@keyframes cluster-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.cluster-tooltip .muted {
color: #C7D2FE;
font-weight: 500;
letter-spacing: 0.02em;
}
/* Super-topic filter chips (Vercel-style) */
.cluster-supers {
position: absolute;
top: 54px; left: 24px; right: 24px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
z-index: 4;
pointer-events: auto;
}
.cluster-super-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px 5px 11px;
background: rgba(20, 26, 42, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.78);
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: all 0.15s ease;
line-height: 1.2;
}
.cluster-super-chip:hover {
border-color: rgba(255,255,255,0.4);
color: white;
background: rgba(40, 50, 75, 0.85);
}
.cluster-super-chip.active {
background: white;
border-color: white;
color: #0E1320;
}
.cluster-super-chip .super-count {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
font-weight: 600;
color: rgba(255,255,255,0.5);
letter-spacing: -0.02em;
}
.cluster-super-chip.active .super-count {
color: rgba(14, 19, 32, 0.6);
}
.cluster-super-chip:hover .super-count {
color: rgba(255,255,255,0.85);
}
/* Floating cluster centroid labels (network-graph style) */
.cluster-labels {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 3;
overflow: hidden;
}
.cluster-label {
position: absolute;
transform: translate(-50%, -50%);
background: rgba(10, 14, 24, 0.92);
border: 1px solid rgba(255,255,255,0.12);
padding: 4px 8px;
border-radius: 3px;
font-size: 11px;
font-family: inherit;
color: white;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
transition: opacity 0.2s ease;
will-change: left, top, opacity;
}
.cluster-label .cl-name {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.85);
}
.cluster-label .cl-count {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 700;
color: white;
letter-spacing: -0.02em;
}
/* Inline 'methodology' link — small marker that follows section leads */
.method-inline-link {
display: inline-block;
font-size: 11px;
color: var(--color-stone);
text-decoration: none;
letter-spacing: 0.02em;
margin-left: 6px;
vertical-align: baseline;
border-bottom: 1px dotted var(--color-stone);
padding-bottom: 1px;
white-space: nowrap;
transition: color 0.15s ease, border-color 0.15s ease;
}
.method-inline-link:hover {
color: var(--color-indigo);
border-bottom-color: var(--color-indigo);
}
/* Drill-down chip variants: back button, parent label, sub-topic */
.cluster-super-chip.back {
background: rgba(255,255,255,0.12);
color: white;
border-color: rgba(255,255,255,0.25);
font-weight: 600;
}
.cluster-super-chip.back:hover {
background: rgba(255,255,255,0.2);
color: white;
}
.cluster-super-chip.parent {
cursor: default;
background: rgba(99, 102, 241, 0.25);
border-color: rgba(99, 102, 241, 0.4);
color: white;
font-weight: 600;
}
.cluster-super-chip.parent:hover {
background: rgba(99, 102, 241, 0.25);
color: white;
}
.cluster-super-chip.parent .super-count {
color: rgba(199, 210, 254, 0.85);
}
.cluster-super-chip.sub {
font-size: 10px;
padding: 4px 9px 4px 10px;
background: rgba(20, 26, 42, 0.55);
}
.cluster-super-chip.sub.active {
background: #818CF8;
border-color: #818CF8;
color: #0E1320;
font-weight: 600;
}
.cluster-super-chip.sub.active .super-count {
color: rgba(14, 19, 32, 0.6);
}
/* Speech list inside cluster panel */
.cp-speeches { display: flex; flex-direction: column; gap: 12px; }
.cp-speeches-loading,
.cp-speeches-empty {
font-size: 12px;
color: var(--color-stone);
padding: 14px 0;
text-align: center;
}
.cp-speeches-loading { animation: cluster-pulse 1.4s ease-in-out infinite; }
.cp-speech {
font-size: 12px;
line-height: 1.5;
padding: 10px 0 12px;
border-bottom: 1px solid var(--color-hairline);
}
.cp-speech:last-child { border-bottom: none; }
.cp-speech-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
font-size: 10px;
color: var(--color-stone);
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.cp-speech-meta .speaker {
color: var(--color-ink);
font-weight: 700;
}
.cp-speech-meta .role {
color: var(--color-stone);
}
.cp-speech-meta .meeting {
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
}
.cp-speech-content {
color: var(--color-ink);
font-size: 13px;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cp-speeches-more {
font-size: 11px;
color: var(--color-stone);
text-align: center;
padding-top: 8px;
}
@media (max-width: 768px) {
.cluster-stage {
/* Fill most of the visible viewport so the 3D map reads as the
hero of the page rather than a postage stamp. Reserves room
for the topnav (~56px) + a peek at the section below. */
height: min(720px, 78vh);
min-height: 520px;
margin: 16px 0 24px;
}
.cluster-bg-text {
top: 12px; left: 14px; right: 14px;
font-size: 10px;
line-height: 1.45;
}
/* JS moves the chip row OUT of .cluster-stage on mobile and adds
.is-detached. Render it as a static horizontally-scrollable row
ABOVE the 3D map instead of floating on top. */
.cluster-supers.is-detached {
position: static;
margin: 0 0 12px;
padding: 4px 0 6px;
background: transparent;
top: auto; right: auto; bottom: auto; left: auto;
max-width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
z-index: auto;
box-shadow: none;
}
.cluster-supers.is-detached::-webkit-scrollbar { display: none; }
/* On the dark cluster stage, .back uses 12% white fill + white text +
light border — invisible the moment we detach the row onto the
white page. Re-skin .back and .parent for the light context. */
.cluster-supers.is-detached .cluster-super-chip.back {
background: white;
color: var(--color-ink);
border-color: var(--color-hairline);
font-weight: 600;
}
.cluster-supers.is-detached .cluster-super-chip.back:hover {
background: var(--color-bone);
color: var(--color-ink);
border-color: var(--color-stone);
}
.cluster-supers.is-detached .cluster-super-chip.parent {
background: var(--color-indigo-soft, #EEF2FF);
color: var(--color-indigo-deep, #4338CA);
border-color: rgba(79, 70, 229, 0.35);
}
.cluster-supers.is-detached .cluster-super-chip.parent:hover {
background: var(--color-indigo-soft, #EEF2FF);
color: var(--color-indigo-deep, #4338CA);
}
.cluster-supers.is-detached .cluster-super-chip.parent .super-count {
color: var(--color-indigo-deep, #4338CA);
opacity: 0.7;
}
}
.cluster-panel {
position: absolute;
top: 24px; right: 24px;
width: min(340px, calc(100% - 48px));
max-height: calc(100% - 48px);
background: white;
border: 1px solid var(--color-hairline);
box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
padding: 24px 22px 22px;
z-index: 6;
overflow-y: auto;
opacity: 0;
transform: translateX(8px);
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.cluster-panel.open {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.cluster-panel-close {
position: absolute; top: 10px; right: 10px;
width: 28px; height: 28px;
background: transparent;
border: none;
color: var(--color-stone);
font-size: 14px;
cursor: pointer;
border-radius: 4px;
transition: background 0.15s ease, color 0.15s ease;
}
.cluster-panel-close:hover {
background: var(--color-bone);
color: var(--color-ink);
}
.cluster-panel-body { font-size: 13px; line-height: 1.55; color: var(--color-ink); }
.cp-super {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-indigo-deep, #4F46E5);
background: var(--color-indigo-soft, #EEF2FF);
padding: 4px 8px;
border-radius: 3px;
margin-bottom: 12px;
}
.cp-name {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
line-height: 1.3;
color: var(--color-ink);
padding-right: 24px;
}
.cp-meta {
font-size: 12px;
color: var(--color-stone);
margin-bottom: 14px;
}
.cp-meta .num { color: var(--color-ink); font-weight: 700; }
.cp-desc {
font-size: 13px;
color: var(--color-slate, #475569);
margin: 0 0 14px;
padding: 10px 12px;
background: var(--color-bone);
border-left: 2px solid var(--color-indigo);
}
.cp-section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-stone);
margin: 16px 0 8px;
}
.cp-keywords {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 18px;
}
.kw-chip {
display: inline-block;
font-size: 11px;
font-weight: 500;
padding: 4px 8px;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
border-radius: 3px;
color: var(--color-ink);
}
.cp-cta {
display: inline-block;
font-size: 13px;
color: var(--color-indigo);
text-decoration: none;
font-weight: 500;
padding-top: 10px;
border-top: 1px solid var(--color-hairline);
width: 100%;
}
.cp-cta:hover { color: var(--color-indigo-deep, #4338CA); }
.cp-cta-note {
font-size: 11px;
color: var(--color-stone);
font-weight: 400;
margin-left: 4px;
}
@media (max-width: 768px) {
/* Centered full-screen modal — escapes .cluster-stage via position:fixed
and sits above a darkened backdrop drawn on body::before below. */
.cluster-panel {
position: fixed;
top: 50%; left: 50%;
right: auto; bottom: auto;
width: calc(100vw - 24px);
height: calc(100vh - 80px);
max-width: none;
max-height: none;
transform: translate(-50%, -50%) scale(0.96);
border: 1px solid var(--color-hairline);
border-radius: 8px;
box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45);
padding: 22px 18px;
z-index: 200;
}
.cluster-panel.open { transform: translate(-50%, -50%) scale(1); }
/* Scrim behind the modal so the cluster doesn't compete for attention */
body.cluster-panel-open { overflow: hidden; }
body.cluster-panel-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 199;
pointer-events: auto;
}
/* Larger close-tap target inside the modal */
.cluster-panel-close {
width: 44px; height: 44px;
font-size: 20px;
top: 8px; right: 8px;
}
}
/* Search section */
.search-section {
background: var(--color-indigo-soft);
padding: 56px 32px;
text-align: center;
margin-top: 48px;
}
.search-section h2 {
font-size: 32px; color: var(--color-ink); margin-bottom: 8px;
letter-spacing: -0.02em;
}
.search-section p { color: var(--color-stone); font-size: 14px; margin-bottom: 32px; }
.search-form {
display: flex; gap: 8px; max-width: 640px; margin: 0 auto;
flex-wrap: wrap;
}
.search-form select {
flex: 1 1 180px;
padding: 16px 18px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 4px;
font-family: inherit;
font-size: 15px;
color: var(--color-ink);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.search-form select:focus { outline: 2px solid var(--color-indigo); outline-offset: -2px; }
/* Buttons */
.btn {
padding: 16px 24px;
background: var(--color-indigo);
color: white;
border-radius: 4px;
font-size: 14px; font-weight: 700;
transition: background 200ms;
display: inline-block;
text-align: center;
text-decoration: none;
}
.btn:hover { background: var(--color-indigo-deep); color: white; }
.btn-outline {
background: white; color: var(--color-ink);
border: 1px solid var(--color-hairline);
}
.btn-outline:hover { background: var(--color-bone); border-color: var(--color-stone); color: var(--color-ink); }
.btn-ghost {
background: transparent; color: var(--color-indigo);
padding: 8px 12px;
}
.btn-ghost:hover { color: var(--color-indigo-deep); text-decoration: underline; }
/* Page header */
.page-header { margin-bottom: 64px; text-align: center; }
/* Header heading is now (was ) on ranking/issues/analysis/press
so each page has exactly one document-outline-correct h1 for SEO.
Both selectors are kept so any leftover in this slot keeps its
styling. */
.page-header h1,
.page-header h2 {
font-size: clamp(36px, 5vw, 56px);
font-weight: 900; letter-spacing: -0.03em;
/* Breathing room between the two lines of the title (was 1.05, too tight) */
line-height: 1.2;
color: var(--color-ink);
margin: 0;
}
/* Single-line hero variant — matches the standard .page-header heading
size so all pages have the same hero scale (esp. on mobile). nowrap
removed so longer titles wrap naturally on small phones. */
.page-header h1.page-h2--single,
.page-header h2.page-h2--single {
font-size: clamp(36px, 5vw, 56px);
letter-spacing: -0.03em;
line-height: 1.2;
}
.page-header .lead {
margin: 20px auto 0;
color: var(--color-stone); font-size: 17px; line-height: 1.6;
max-width: 720px;
}
/* Small, subtle link to the methodology page — sits below .lead in
.page-header. Replaces the half-dozen 'method-inline-link' instances
that used to live next to every sub-section heading. */
.page-method-link {
display: inline-block;
margin-top: 14px;
font-size: 13px;
font-weight: 500;
color: var(--color-stone);
text-decoration: none;
border-bottom: 1px solid var(--color-hairline);
padding-bottom: 1px;
letter-spacing: -0.005em;
transition: color 120ms, border-color 120ms;
}
.page-method-link:hover {
color: var(--color-indigo);
border-bottom-color: var(--color-indigo);
}
/* Mobile-only
: explicit line break that's invisible on desktop but
forces a wrap on phones. Used in page-header leads where natural
wrapping puts the lead on one wide line desktop, but on mobile the
editor wants a specific break point. */
.br-mobile { display: none; }
@media (max-width: 768px) { .br-mobile { display: inline; } }
/* Inverse helper — show
only on desktop, hide on mobile where natural
wrapping already handles it (and a hard break would create an awkward
short line). */
.br-desktop { display: inline; }
@media (max-width: 768px) { .br-desktop { display: none; } }
/* =========================================================================
METHODOLOGY PAGE — editorial layout
========================================================================= */
.method-main {
max-width: 1100px;
margin: 0 auto;
padding: 64px 24px 96px;
}
/* HERO */
.method-hero {
margin: 0 0 56px;
padding-bottom: 56px;
border-bottom: 1px solid var(--color-hairline);
text-align: center;
}
.method-hero-inner { max-width: 820px; margin: 0 auto; }
.method-eyebrow {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
color: var(--color-indigo);
text-transform: uppercase;
background: var(--color-indigo-soft, #EEF2FF);
padding: 5px 11px;
border-radius: 999px;
margin-bottom: 22px;
}
.method-h1 {
/* Match the standard .page-header h2 size so the methodology hero
reads at the same scale as every other page title. */
font-size: clamp(36px, 5vw, 56px);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.2;
margin: 0 0 22px;
color: var(--color-ink);
}
.method-lede {
font-size: 19px;
line-height: 1.75;
color: var(--color-cinder);
margin: 0 auto;
max-width: 700px;
}
.method-lede strong { color: var(--color-ink); font-weight: 700; }
/* KEY NUMBERS — sits inside a dark "stadium" band (reuses .dark-stat-band
pattern). Stats are white on dark with a subtle indigo glow. */
.method-stats {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 0 0 64px;
padding: 44px 32px;
background: linear-gradient(180deg, #0E1320 0%, #14182A 55%, #1A1A1A 100%);
border-radius: 18px;
overflow: hidden;
}
.method-stats::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 0%,
rgba(255, 255, 255, 0.06) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.method-stat {
position: relative;
z-index: 1;
padding: 0 24px;
border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.method-stat:last-child { border-right: 0; }
.method-stat-num {
font-size: clamp(32px, 4vw, 44px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
color: #fff;
margin-bottom: 8px;
font-feature-settings: 'tnum';
text-shadow: 0 0 32px rgba(167, 174, 255, 0.32);
}
.method-stat-unit {
font-size: 0.55em;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
margin-left: 3px;
text-shadow: none;
}
.method-stat-label {
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.62);
line-height: 1.45;
}
/* TABLE OF CONTENTS */
.method-toc {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin: 0 0 80px;
}
.method-toc-item {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 18px 20px;
border: 1px solid var(--color-hairline);
border-radius: 8px;
text-decoration: none;
color: var(--color-ink);
background: white;
transition: border-color 160ms, transform 160ms, box-shadow 160ms;
}
.method-toc-item:hover {
border-color: var(--color-indigo);
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(79, 70, 229, 0.18);
}
.method-toc-num {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--color-indigo);
}
.method-toc-title {
font-size: 15px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.005em;
line-height: 1.35;
}
/* STEP SECTIONS */
.method-step {
scroll-margin-top: 112px;
margin: 0 0 88px;
}
.method-step:last-child { margin-bottom: 0; }
.method-step-head {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 2px solid var(--color-ink);
}
.method-step-num {
font-family: 'IBM Plex Mono', monospace;
font-size: 64px;
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--color-ink);
flex-shrink: 0;
min-width: 88px;
}
.method-step-num--limits {
font-family: inherit;
font-size: 56px;
color: var(--color-ember);
}
.method-step-titles {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 8px;
}
.method-step-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-stone);
}
.method-step-h2 {
font-size: clamp(26px, 3.2vw, 36px);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
color: var(--color-ink);
}
.method-step-body {
max-width: 820px;
margin-left: 112px;
}
.method-step-body p {
font-size: 17px;
line-height: 1.8;
color: var(--color-cinder);
margin: 0 0 18px;
}
.method-step-body p strong { color: var(--color-ink); font-weight: 700; }
.method-step-body p:last-child { margin-bottom: 0; }
.method-step-cta { margin-top: 22px !important; }
.method-step-link {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 700;
color: var(--color-indigo);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 1px;
}
.method-step-link:hover { color: var(--color-indigo-deep, #4338CA); }
/* CALLOUT BOX */
.method-callout {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 28px 0 0;
padding: 16px 18px;
background: var(--color-bone);
border-left: 3px solid var(--color-indigo);
border-radius: 0 6px 6px 0;
}
.method-callout-label {
flex-shrink: 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-indigo);
padding-top: 3px;
}
.method-callout-body {
font-size: 14.5px;
line-height: 1.65;
color: var(--color-ink);
}
/* FORMULA GRID (3 axes) */
.method-formula-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 28px 0 0;
}
.method-formula {
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px 22px;
background: white;
border: 1px solid var(--color-hairline);
border-top: 4px solid var(--color-stone);
border-radius: 6px;
}
.method-formula--a { border-top-color: var(--color-indigo); }
.method-formula--b { border-top-color: var(--color-teal); }
.method-formula--c { border-top-color: var(--color-ember); }
.method-formula-tag {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-stone);
}
.method-formula--a .method-formula-tag { color: var(--color-indigo); }
.method-formula--b .method-formula-tag { color: var(--color-teal); }
.method-formula--c .method-formula-tag { color: var(--color-ember); }
.method-formula-title {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.35;
margin: 4px 0 0;
color: var(--color-ink);
}
.method-formula-eq {
font-family: 'IBM Plex Mono', monospace;
font-size: 12.5px;
line-height: 1.7;
color: var(--color-cinder);
background: var(--color-bone);
border-radius: 4px;
padding: 12px 14px;
margin-top: auto;
}
/* TAG GRID (8 분류 기준) */
.method-tag-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 28px 0 0;
}
.method-tag-card {
padding: 16px 18px;
background: white;
border: 1px solid var(--color-hairline);
border-left: 3px solid var(--color-stone);
border-radius: 0 6px 6px 0;
}
.method-tag-card--pos { border-left-color: var(--color-teal); }
.method-tag-card--neg { border-left-color: var(--color-ember); }
.method-tag-name {
font-size: 15px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--color-ink);
margin-bottom: 4px;
}
.method-tag-card--pos .method-tag-name { color: var(--color-teal); }
.method-tag-card--neg .method-tag-name { color: var(--color-ember); }
.method-tag-def {
font-size: 13.5px;
line-height: 1.55;
color: var(--color-cinder);
}
/* ORDERED METHOD LIST (3 methods for issues) */
.method-method-list {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.method-method-list > li {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 18px;
background: var(--color-bone);
border-radius: 6px;
}
.method-method-num {
font-size: 22px;
font-weight: 900;
color: var(--color-indigo);
line-height: 1;
flex-shrink: 0;
}
.method-method-list > li > div {
font-size: 15px;
line-height: 1.65;
color: var(--color-cinder);
}
.method-method-list strong { color: var(--color-ink); font-weight: 700; }
/* LIMITATIONS */
.method-step--limits .method-step-head { border-bottom-color: var(--color-ember); }
.method-limits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.method-limits > li {
position: relative;
padding: 14px 18px 14px 36px;
background: var(--color-ember-soft);
border-radius: 6px;
font-size: 15px;
line-height: 1.65;
color: var(--color-ink);
}
.method-limits > li::before {
content: '·';
position: absolute;
top: 9px;
left: 18px;
font-size: 24px;
font-weight: 900;
color: var(--color-ember);
line-height: 1;
}
.method-limits strong { color: var(--color-ember-deep, var(--color-ember)); font-weight: 800; }
/* RESPONSIVE */
@media (max-width: 900px) {
.method-toc { grid-template-columns: repeat(2, 1fr); }
.method-formula-grid { grid-template-columns: 1fr; }
.method-tag-grid { grid-template-columns: 1fr; }
.method-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
.method-stat:nth-child(2) { border-right: 0; }
.method-stat { padding: 0 16px; }
}
/* TOC card grid removed at all viewports — the 01–05 numbered step
sections below already provide clear navigation, the TOC was just a
duplicate restating of the same information. */
.method-toc { display: none; }
@media (max-width: 600px) {
.method-main { padding: 36px 16px 64px; }
.method-hero { margin-bottom: 36px; padding-bottom: 36px; }
.method-h1 { font-size: 36px; }
.method-lede { font-size: 16px; }
.method-stats { padding: 24px 0; margin-bottom: 44px; }
.method-step { margin-bottom: 56px; }
.method-step-head { gap: 14px; }
.method-step-num { font-size: 40px; min-width: 56px; }
.method-step-h2 { font-size: 22px; }
.method-step-body { margin-left: 0; }
.method-step-body p { font-size: 16px; }
.method-callout { flex-direction: column; gap: 8px; }
/* Formula equation wraps naturally on narrow screens — drop the
monospace size slightly so it fits in one card width and breaks
across lines instead of overflowing. */
.method-formula-eq {
font-size: 12px;
line-height: 1.65;
word-break: keep-all;
overflow-wrap: anywhere;
white-space: normal;
}
.method-formula { padding: 18px 16px 16px; }
}
/* =========================================================================
Dark stat band — shared "stadium" treatment for hero counter rows and
methodology stats strip. Same dark-gradient + spotlight pattern as the
ranking TOP 3 arena, so big numbers feel like they're under stage
lights. Used by:
- analysis.html .counter-row (single hero stat: 54,551)
- methodology.html .method-stats (4-stat strip: 167,071 / 54,551 / …)
========================================================================= */
.dark-stat-band {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #0E1320 0%, #14182A 55%, #1A1A1A 100%);
border-radius: 18px;
padding: 48px 32px;
overflow: hidden;
margin: 40px 0;
}
.dark-stat-band::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 0%,
rgba(255, 255, 255, 0.06) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.dark-stat-band > * { position: relative; z-index: 1; }
@media (max-width: 600px) {
.dark-stat-band { padding: 32px 18px; border-radius: 14px; }
}
/* =========================================================================
Dark section — wraps a chart/map + analytical lead in a dark "stadium"
so the visual reads as one editorial unit. Used in issues.html around
the expo timeline and the 공공기여 map. SVG / map colors inside are
overridden to read on the dark background.
========================================================================= */
.dark-section {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #0E1320 0%, #14182A 55%, #1A1A1A 100%);
border-radius: 20px;
padding: 40px 32px 48px;
margin: 24px 0 56px;
overflow: hidden;
}
.dark-section::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 50% at 50% 0%,
rgba(255, 255, 255, 0.05) 0%, transparent 65%);
pointer-events: none;
z-index: 0;
}
.dark-section > * { position: relative; z-index: 1; }
@media (max-width: 600px) {
.dark-section { padding: 24px 14px 32px; border-radius: 14px; margin: 18px 0 36px; }
}
/* === issues.html: let the expo / 공공기여 dark band BREAK OUT of the .page
max-width so the graph + map have room to breathe. Without this they were
capped at ~1152px (page max 1200 minus 24px side padding) and the wide
1110:510 SVG looked squished. We extend horizontally via negative margins
tied to the viewport so the band stays roughly centered while taking the
full topnav-class width on desktop. */
@media (min-width: 1100px) {
.issues-page .tab-panel[data-tab="expo"] > .dark-section,
.issues-page .tab-panel[data-tab="public"] > .dark-section {
/* Tightened from 1440 → 1280px so the frame doesn't dominate the layout.
Content scales proportionally: the expo SVG uses preserveAspectRatio
and a vw-based height clamp; the busan map SVG uses xMidYMid meet, so
both shrink with the container without distortion. */
width: min(calc(100vw - 48px), 1280px);
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
padding-left: 20px;
padding-right: 20px;
}
/* Match the intro/analytical lead paragraphs to the same width so the
editor-placed
halves still fit cleanly on a
single line each. Centered on desktop per editor; mobile keeps its
default left-aligned flow for readability at narrow widths. */
.issues-page .tab-panel[data-tab="expo"] > .section-lead--analysis,
.issues-page .tab-panel[data-tab="public"] > .section-lead--analysis {
max-width: min(calc(100vw - 48px), 1280px);
text-align: center;
}
}
/* Tighter horizontal padding so the graph/map take the full inner width.
Editor felt 56px sides looked like dead space; pulled down to 20px while
keeping a more generous vertical padding for breathing room. */
@media (min-width: 1280px) {
.issues-page .tab-panel[data-tab="expo"] > .dark-section,
.issues-page .tab-panel[data-tab="public"] > .dark-section {
padding: 40px 20px 48px;
}
}
/* Mobile: editor wants the 엑스포 / 공공기여 intro leads to match the
sub-header (.section-h is 22px on mobile) so the body copy reads at the
same visual scale as the section title above. Weight stays at the base
500 so it still reads as body, not a second heading. Scoped to JUST
these two paragraphs. */
@media (max-width: 768px) {
.issues-page .tab-panel[data-tab="expo"] > .section-lead--analysis,
.issues-page .tab-panel[data-tab="public"] > .section-lead--analysis {
font-size: 22px;
line-height: 1.55;
letter-spacing: -0.01em;
}
}
/* --- expo line graph SVG inside dark section --- */
.dark-section .expo-line-svg .graph-dot-label { fill: #fff; }
.dark-section .expo-line-svg .graph-year { fill: rgba(255, 255, 255, 0.88); }
.dark-section .expo-line-svg .graph-year--sub { fill: rgba(255, 255, 255, 0.5); }
.dark-section .expo-line-svg .graph-year--start { fill: rgba(255, 255, 255, 0.5); }
.dark-section .expo-line-svg .graph-year--clickable:hover { fill: #C7CCFF; }
.dark-section .expo-line-svg .axis-line { stroke: rgba(255, 255, 255, 0.14); }
/* Event vertical lines + labels (BIE 실사단 방문 / 리야드 선정 / 엑스포
재도전 시사) — switch from ember/orange to white on dark-section so
they read as neutral chart markers rather than alert callouts. */
.dark-section .expo-line-svg .event-line { stroke: rgba(255, 255, 255, 0.55); }
.dark-section .expo-line-svg .event-line.peak { stroke: rgba(255, 255, 255, 0.75); }
.dark-section .expo-line-svg .event-label { fill: rgba(255, 255, 255, 0.85); }
.dark-section .expo-line-svg .event-label--date { fill: rgba(255, 255, 255, 0.55); }
.dark-section .expo-line-svg .event-dot { fill: rgba(255, 255, 255, 0.7); }
/* --- mobile bubble timeline inside dark section --- */
.dark-section .timeline-wrap.expo-timeline-wrap {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.dark-section .expo-timeline-wrap .tl-axis-text { color: rgba(255, 255, 255, 0.6); }
.dark-section .tl-row-date { color: rgba(255, 255, 255, 0.7); }
/* Only the "muted" (non-pill) row labels get the light text — the proper
event pills (BIE 실사단 방문 etc.) keep their white-bg + ember-text look. */
.dark-section .tl-row .muted-event { color: rgba(255, 255, 255, 0.55); }
.dark-section .tl-mobile::before { background: rgba(255, 255, 255, 0.12); }
/* On the dark band the mobile timeline event rows (BIE 실사단 방문 /
리야드 선정 / 엑스포 재도전 시사) read ember/red, matching the desktop SVG
default. We already neutralised the desktop SVG event lines to white;
do the same here for the diamond marker + date + pill label so the
event treatment matches between desktop and mobile. */
.dark-section .tl-row.event .tl-row-date { color: rgba(255, 255, 255, 0.85); }
.dark-section .tl-row-marker {
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 4px 10px -2px rgba(255, 255, 255, 0.25),
0 0 0 3px rgba(255, 255, 255, 0.15) !important;
}
.dark-section .tl-row-bubble.event.peak.tl-row-marker {
box-shadow: 0 6px 18px -3px rgba(255, 255, 255, 0.4),
0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}
.dark-section .tl-row.event .tl-row-event {
background: transparent;
border-color: rgba(255, 255, 255, 0.55);
color: #fff;
box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.25);
}
/* --- busan map inside dark section --- */
.dark-section .busan-map-wrap {
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-section .busan-svg .busan-districts path {
fill: rgba(255, 255, 255, 0.08);
stroke: rgba(255, 255, 255, 0.18);
}
.dark-section .busan-svg .busan-districts path:hover {
fill: rgba(255, 255, 255, 0.16);
}
.dark-section .busan-svg .district-label {
fill: rgba(255, 255, 255, 0.32);
font-weight: 400;
/* Kill the paper-color halo (designed for the light theme) — on dark
it created a bold-looking outline that dominated the map. */
stroke: none;
paint-order: normal;
}
.dark-section .map-legend {
background: rgba(0, 0, 0, 0.4);
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.dark-section .map-legend .meta { color: rgba(255, 255, 255, 0.5); }
/* --- analytical lead inside dark section ---
ALL highlights keep text white; only the underline-style background
picks up the accent color. Previously ember/teal also tinted the text
itself which looked muddy on dark. */
.dark-section .section-lead--analysis {
color: rgba(255, 255, 255, 0.92);
}
.dark-section .section-lead--analysis .lead-hl,
.dark-section .section-lead--analysis .lead-hl--ember,
.dark-section .section-lead--analysis .lead-hl--teal,
.dark-section .section-lead--analysis .lead-hl--indigo {
color: #fff;
}
.dark-section .section-lead--analysis .lead-hl {
background: linear-gradient(transparent 55%, rgba(255, 220, 90, 0.5) 55%);
}
.dark-section .section-lead--analysis .lead-hl--ember {
background: linear-gradient(transparent 55%, rgba(245, 100, 80, 0.6) 55%);
}
.dark-section .section-lead--analysis .lead-hl--teal {
background: linear-gradient(transparent 55%, rgba(95, 200, 175, 0.55) 55%);
}
.dark-section .section-lead--analysis .lead-hl--indigo {
background: linear-gradient(transparent 55%, rgba(140, 130, 255, 0.55) 55%);
}
/* Counter row */
.counter-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding: 48px 0 64px;
}
.counter-cell { text-align: center; }
.counter-num {
font-size: clamp(40px, 6vw, 72px);
font-weight: 900;
color: var(--color-indigo);
line-height: 1;
letter-spacing: -0.04em;
}
.counter-label {
color: var(--color-stone);
font-size: 13px;
margin-top: 12px;
letter-spacing: 0.02em;
}
/* Inside the dark stat band: counter colors flip to light. */
.dark-stat-band .counter-row { padding: 0; }
.dark-stat-band .counter-num {
color: #fff;
text-shadow: 0 0 32px rgba(167, 174, 255, 0.35);
}
.dark-stat-band .counter-label { color: rgba(255, 255, 255, 0.62); }
.section-h {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 12px;
margin-top: 96px;
}
/* Section heading with a horizontal divider line below — matches the
look of .shorts-header (padding-bottom 14px, 1px hairline border,
margin-bottom 22px). Used on the 보도 영상 heading in press.html so
it visually pairs with the 유튜브 쇼츠 section below. */
.section-h--divided {
padding-bottom: 14px;
border-bottom: 1px solid var(--color-hairline);
margin-bottom: 22px;
}
.section-lead {
color: var(--color-stone);
font-size: 16px;
margin-bottom: 32px;
max-width: 700px;
}
/* Wider variant for analytical leads — uses the full content width so a
long reportage paragraph doesn't wrap into a narrow column on desktop.
Color is ink (near-black) so the analysis reads clearly; the surrounding
.section-lead default is muted stone, which washed this paragraph out. */
.section-lead--reportage {
max-width: none;
font-size: 16.5px;
line-height: 1.75;
color: var(--color-ink);
}
/* '보도 분석' analytical lead — much larger body, generous line-height,
ink color, wider line. Used for the paragraph that summarizes the
chart/map below 주요 현안 graphs. Pairs with .lead-hl* highlight
utilities for picking out key phrases. */
.section-lead--analysis {
max-width: 920px;
margin: 28px auto 36px;
font-size: 22px;
line-height: 1.75;
font-weight: 500;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.section-lead--analysis .lead-hl,
.section-lead--analysis .lead-hl--ember,
.section-lead--analysis .lead-hl--teal,
.section-lead--analysis .lead-hl--indigo {
font-weight: 800;
padding: 0 3px;
border-radius: 2px;
}
/* Default highlight — subtle ink underline-style bg. */
.section-lead--analysis .lead-hl {
background: linear-gradient(transparent 55%, rgba(255, 220, 90, 0.55) 55%);
color: var(--color-ink);
}
.section-lead--analysis .lead-hl--ember {
background: linear-gradient(transparent 55%, rgba(245, 158, 158, 0.55) 55%);
color: var(--color-ember-deep, var(--color-ember));
}
.section-lead--analysis .lead-hl--teal {
background: linear-gradient(transparent 55%, rgba(140, 220, 200, 0.55) 55%);
color: var(--color-teal);
}
.section-lead--analysis .lead-hl--indigo {
background: var(--color-indigo-soft, #EEF2FF);
color: var(--color-indigo);
}
@media (max-width: 768px) {
/* Bumped further 26 → 30px so the analytical lead lands with editorial
weight on a phone — the conclusion deserves the biggest body text. */
.section-lead--analysis {
font-size: 30px;
line-height: 1.45;
margin: 22px 0 28px;
letter-spacing: -0.015em;
}
/* Hide the long expo-timeline footnote on mobile — adds clutter under
the bubble timeline. Desktop keeps it. */
.expo-timeline-note { display: none; }
/* 다대한진 pin (radius 51.6) overlaps 성창기업 (41.9) at mobile scale.
Bring it down to roughly the same scale so both stay legible. */
.busan-svg .map-pin-svg[data-target="site-dadae_hanjin"] circle.pin-circle,
.busan-svg .map-pin-svg[data-target="site-dadae_hanjin"] circle.pin-pulse {
r: 38;
}
.busan-svg .map-pin-svg[data-target="site-dadae_hanjin"] text.pin-text {
font-size: 20px;
}
}
/* [보도분석] inline tag — indigo highlight, sits inline with the text */
.lead-tag {
display: inline-block;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 700;
color: var(--color-indigo-deep, #4338CA);
background: var(--color-indigo-soft, #EEF2FF);
padding: 3px 8px;
border-radius: 3px;
letter-spacing: 0.02em;
margin-right: 10px;
vertical-align: 0.1em;
}
/* Bar chart */
.bar-chart {
border: 1px solid var(--color-hairline);
padding: 28px;
}
.bar-filters {
display: flex; gap: 8px; justify-content: flex-end;
margin-bottom: 24px; flex-wrap: wrap;
}
.bar-filters select {
padding: 8px 12px; padding-right: 32px;
border: 1px solid var(--color-hairline); border-radius: 4px;
background: white;
font-family: inherit; font-size: 13px; color: var(--color-ink);
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
/* 발언 총량 분석 — 의원별 / 위원회별 segmented filter */
.vol-filter {
display: inline-flex;
gap: 4px;
padding: 4px;
margin-bottom: 24px;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
border-radius: 999px;
}
.vol-seg {
padding: 9px 22px;
border: 0;
border-radius: 999px;
background: transparent;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: var(--color-stone);
cursor: pointer;
transition: background 160ms, color 160ms;
}
.vol-seg:hover { color: var(--color-ink); }
.vol-seg.active {
background: var(--color-indigo);
color: #fff;
}
.vol-view[hidden] { display: none; }
.bar-section-label {
font-size: 11px; font-weight: 700; color: var(--color-stone);
letter-spacing: 0.12em; text-transform: uppercase;
margin: 16px 0 8px;
}
.bar-row {
display: flex; align-items: center; gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--color-hairline);
transition: background 150ms;
}
.bar-row:hover { background: var(--color-bone); }
.bar-row:last-child { border-bottom: 0; }
.bar-rank {
flex: 0 0 42px; font-size: 12px; font-weight: 700;
color: var(--color-stone); text-align: right;
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
}
.bar-avatar {
flex: 0 0 26px;
width: 26px; height: 26px;
border-radius: 50%;
background-color: var(--color-bone);
background-size: cover;
background-position: center 22%;
border: 1px solid var(--color-hairline);
}
.bar-name {
flex: 0 0 104px;
display: flex; flex-direction: column; gap: 1px;
min-width: 0;
}
.bar-name .bn-name { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.bar-name .bn-region { font-size: 11px; font-weight: 500; color: var(--color-stone); }
.bar-region {
flex: 0 0 80px;
font-size: 12px;
color: var(--color-stone);
text-align: right;
font-variant-numeric: tabular-nums;
}
.bar-region--primary {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
color: var(--color-ink);
font-weight: 700;
font-size: 13px;
font-family: 'IBM Plex Mono', monospace;
}
.bar-region-sub {
font-size: 10px;
font-weight: 600;
color: var(--color-stone);
white-space: nowrap;
font-family: var(--font-sans, inherit);
}
.bar-track {
flex: 1; height: 12px;
background: var(--color-bone);
border-radius: 0;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: var(--color-indigo);
transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-fill.dim { opacity: 0.45; }
/* Fill-on-reveal (one trigger → all rows cascade, scroll-independent).
scaleX avoids fighting the inline width; no-JS/reduced-motion = full. */
@media (prefers-reduced-motion: no-preference) {
#bar-chart-body.bars-anim .bar-fill {
transform: scaleX(0);
transform-origin: left center;
}
#bar-chart-body.bars-anim.is-revealed .bar-fill {
transform: scaleX(1);
transition: transform 700ms cubic-bezier(0.22,1,0.36,1);
transition-delay: var(--row-delay, 0ms);
}
}
.bar-value {
flex: 0 0 84px; text-align: right;
font-size: 13px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
color: var(--color-ink);
}
.bar-value--total {
color: var(--color-stone);
font-weight: 600;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}
.bar-value-sub {
font-size: 10px;
font-weight: 600;
color: var(--color-stone);
white-space: nowrap;
font-family: var(--font-sans, inherit);
}
.bar-omit {
text-align: center;
padding: 18px 0;
font-size: 13px;
color: var(--color-slate);
background: var(--color-bone);
margin: 12px -28px;
border-top: 1px dashed var(--color-hairline);
border-bottom: 1px dashed var(--color-hairline);
}
.bar-actions { text-align: center; margin-top: 24px; }
/* Committee analysis card */
.committee-card {
border: 1px solid var(--color-hairline);
padding: 32px;
margin-bottom: 16px;
background: white;
box-shadow: var(--shadow-hairline);
}
.committee-head {
display: flex; justify-content: space-between; align-items: baseline;
flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
padding-bottom: 16px; border-bottom: 1px solid var(--color-hairline);
}
.committee-head h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.committee-meta { font-size: 13px; color: var(--color-stone); }
.committee-meta .num { font-weight: 700; color: var(--color-ink); }
.committee-stats {
display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.committee-stat {
flex: 1; min-width: 180px;
padding: 14px 16px;
background: var(--color-bone);
border-left: 3px solid var(--color-indigo);
}
.committee-stat .label {
font-size: 11px; color: var(--color-stone);
font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
}
.committee-stat .value {
font-weight: 700; color: var(--color-ink);
margin-top: 4px; font-size: 14px;
}
.committee-analysis {
background: var(--color-indigo-soft);
border-left: 3px solid var(--color-indigo);
padding: 16px 18px;
font-size: 15px; line-height: 1.7;
color: var(--color-cinder);
}
.committee-analysis strong { color: var(--color-indigo-deep); font-weight: 700; }
/* ===== Scroll-triggered animations ===== */
/* Elements with [data-anim] start invisible, become visible when .is-visible is added by JS */
@media (prefers-reduced-motion: no-preference) {
[data-anim] {
opacity: 0;
transition: opacity 600ms ease-out, transform 600ms ease-out;
}
[data-anim].is-visible { opacity: 1; transform: none; }
[data-anim="fade-up"] { transform: translateY(24px); }
[data-anim="fade-left"] { transform: translateX(-30px); }
[data-anim="fade-right"] { transform: translateX(30px); }
[data-anim="scale-up"] { transform: scale(0.92); }
}
/* Stagger children: each child delays slightly more */
[data-anim-stagger] > [data-anim]:nth-child(1) { transition-delay: 0ms; }
[data-anim-stagger] > [data-anim]:nth-child(2) { transition-delay: 100ms; }
[data-anim-stagger] > [data-anim]:nth-child(3) { transition-delay: 200ms; }
[data-anim-stagger] > [data-anim]:nth-child(4) { transition-delay: 300ms; }
/* Expo timeline: 6 rows reveal one-by-one. Gentle 80ms step keeps the
above-the-fold cluster cascading nicely without lagging rows that are
scrolled to individually further down the long timeline. */
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(1) { transition-delay: 0ms; }
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(2) { transition-delay: 80ms; }
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(3) { transition-delay: 160ms; }
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(4) { transition-delay: 240ms; }
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(5) { transition-delay: 320ms; }
.tl-mobile[data-anim-stagger] > [data-anim]:nth-child(6) { transition-delay: 400ms; }
/* 주요 발언 TOP 3 — slowed down a touch (scoped to the VS arena so the
rest of the site's reveals keep their snappy default). */
@media (prefers-reduced-motion: no-preference) {
.vs-arena [data-anim] {
transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}
}
.vs-arena [data-anim-stagger] > [data-anim]:nth-child(1) { transition-delay: 0ms; }
.vs-arena [data-anim-stagger] > [data-anim]:nth-child(2) { transition-delay: 220ms; }
.vs-arena [data-anim-stagger] > [data-anim]:nth-child(3) { transition-delay: 440ms; }
.vs-arena [data-anim-stagger] > [data-anim]:nth-child(4) { transition-delay: 660ms; }
/* Mobile: the generic per-element scroll reveal half-plays for
above-the-fold cards (first GOOD/BAD cards look "already shown"
while the rest pop). On mobile the whole arena instead reveals as
ONE coordinated group, gated by .vs-in (added by an
IntersectionObserver on .vs-arena), not the per-element .is-visible.
Desktop is untouched and keeps its slowed per-element reveal. */
@media (max-width: 768px) {
@media (prefers-reduced-motion: no-preference) {
.vs-arena [data-anim],
.vs-arena [data-anim="fade-left"],
.vs-arena [data-anim="fade-right"] {
opacity: 0;
transform: translateY(18px);
transition: opacity 760ms ease-out, transform 760ms ease-out;
}
.vs-arena.vs-in [data-anim] { opacity: 1; transform: none; }
}
/* GOOD column (vs-col--pos) reveals fully first … */
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(1) { transition-delay: 0ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(2) { transition-delay: 240ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(3) { transition-delay: 480ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(4) { transition-delay: 720ms; }
/* … then the BAD column (vs-col--neg) in sequence after it */
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(1) { transition-delay: 1080ms; }
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(2) { transition-delay: 1320ms; }
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(3) { transition-delay: 1560ms; }
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(4) { transition-delay: 1800ms; }
}
/* Mobile: kill the 1.8s pos→neg cascade — both columns reveal
simultaneously with a short stagger. Otherwise BAD cards take almost
2 seconds to appear, which reads as "missing" on a phone. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(1),
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(1) { transition-delay: 0ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(2),
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(2) { transition-delay: 120ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(3),
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(3) { transition-delay: 240ms; }
.vs-arena.vs-in .vs-col--pos > [data-anim]:nth-child(4),
.vs-arena.vs-in .vs-col--neg > [data-anim]:nth-child(4) { transition-delay: 360ms; }
}
/* ===== Expo vertical timeline (bubbles + diamond event markers) =====
Restored from the early vertical-timeline design and applied on ALL
viewports (not mobile-only). The shared .tl-row-marker (diamond),
.tl-row .muted-event, .tl-row-bubble--clickable and .expo-timeline-note
rules live further down the file and already apply at every width. */
.timeline-wrap.expo-timeline-wrap {
/* Bubble+diamond vertical timeline is MOBILE ONLY. Desktop uses the
smooth SVG line graph (.expo-line-graph) instead. */
display: none;
position: relative;
max-width: 620px;
margin: 28px auto 16px;
padding: 34px 30px 28px;
border: 1px solid var(--color-hairline);
background: white;
border-radius: 6px;
overflow: visible;
}
.expo-timeline-wrap .tl-axis-text {
position: static;
top: auto; left: auto;
font-size: 12px;
font-weight: 700;
color: var(--color-slate);
letter-spacing: 0.02em;
text-transform: none;
margin: 0 0 18px;
}
.tl-mobile {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
/* Long vertical rail down the centre of the bubble column.
128px = 64 (date col) + 16 (gap) + 48 (half of 96 bubble col).
Near-zero top/bottom inset + tall rows make the line read long. */
.tl-mobile::before {
content: '';
position: absolute;
left: 128px;
top: 2px;
bottom: 2px;
width: 2px;
margin-left: -1px;
background: linear-gradient(180deg,
rgba(79, 70, 229, 0.18) 0%,
rgba(79, 70, 229, 0.42) 12%,
rgba(79, 70, 229, 0.42) 88%,
rgba(79, 70, 229, 0.18) 100%);
border-radius: 1px;
z-index: 0;
}
.tl-row {
display: grid;
grid-template-columns: 64px 96px 1fr;
column-gap: 16px;
align-items: center;
/* Doubled row spacing so the vertical line reads as a long journey
(~2x the prior length). min-height is the dominant lever under
border-box; padding sits inside it. */
padding: 60px 0;
min-height: 214px;
position: relative;
}
.tl-row-date {
grid-column: 1;
text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 700;
color: var(--color-slate);
letter-spacing: 0.02em;
}
.tl-row.event .tl-row-date { color: var(--color-ember); font-size: 12px; }
.tl-row.event.muted .tl-row-date { color: var(--color-stone); }
.tl-row-bubble {
grid-column: 2;
justify-self: center;
width: var(--bs, 36px);
height: var(--bs, 36px);
font-size: var(--bf, 12px);
border-radius: 50%;
background: var(--color-indigo);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
letter-spacing: -0.02em;
box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.28),
0 0 0 3px white;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.tl-row-bubble.event { background: var(--color-indigo-deep); }
.tl-row-bubble.event.peak {
box-shadow: 0 6px 16px -3px rgba(55, 48, 163, 0.45),
0 0 0 3px white;
}
.tl-row-bubble.event.muted { background: var(--color-stone); }
/* Event label sits to the right of the bubble (same row) */
.tl-row-event {
grid-column: 3;
justify-self: start;
padding: 8px 12px;
background: white;
border: 1.5px solid var(--color-ember);
color: var(--color-ember);
border-radius: 4px;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
box-shadow: 0 4px 12px -3px rgba(193, 53, 21, 0.22);
max-width: 100%;
position: relative;
z-index: 1;
}
.tl-row.event { align-items: center; padding: 52px 0; }
.tl-row.event.muted .tl-row-event {
border-color: var(--color-stone);
color: var(--color-stone);
box-shadow: none;
}
@media (max-width: 768px) {
.timeline-wrap.expo-timeline-wrap { display: block; padding: 24px 14px 20px; }
.tl-mobile::before { left: 110px; }
.tl-row { grid-template-columns: 50px 96px 1fr; column-gap: 10px; padding: 48px 0; min-height: 190px; }
.tl-row.event { padding: 40px 0; }
.tl-row-date { font-size: 11px; }
.tl-row-event { font-size: 12px; padding: 7px 10px; }
}
/* ===== Expo line graph ===== */
.expo-line-graph {
position: relative;
/* Bottom padding was 56px which left a large gap before the analysis
lead below. Tighten to 12px so the graph→lead spacing matches the
map→lead spacing on the 공공기여 tab. */
padding: 32px 8px 12px;
margin: 28px 0 0;
}
.expo-line-svg {
width: 100%;
height: clamp(360px, 46vw, 540px);
display: block;
}
.expo-mobile-tl { display: none; }
@media (max-width: 768px) {
/* The wide SVG line graph is unreadable on a phone — hide it; mobile
shows the .tl-mobile bubble+diamond vertical timeline instead. */
.expo-line-graph { display: none; }
.expo-mobile-tl { display: block; }
.etl-start {
font-size: 14px; font-weight: 600;
color: var(--color-stone); padding: 2px 2px 12px;
}
.etl-year {
display: flex; align-items: center; gap: 12px;
width: 100%; padding: 14px 4px;
background: none; border: 0;
border-top: 1px solid var(--color-hairline);
font-family: inherit; text-align: left; cursor: pointer;
}
.etl-year:active { background: var(--color-bone); }
.etl-y {
flex: 0 0 48px;
font-size: 18px; font-weight: 800;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-ink);
}
.etl-bar-wrap {
flex: 1 1 auto; height: 16px;
background: var(--color-bone);
border-radius: 3px; overflow: hidden;
}
.etl-bar {
display: block; height: 100%;
background: var(--color-indigo);
border-radius: 3px;
}
.etl-n {
flex: 0 0 56px; text-align: right;
font-size: 17px; font-weight: 800;
color: var(--color-ink);
}
.etl-event {
display: flex; align-items: baseline;
flex-wrap: wrap; gap: 4px 10px;
padding: 12px 4px 12px 14px; margin: 3px 0;
border-left: 3px solid var(--color-ember);
background: var(--color-ember-soft);
}
.etl-ev-name { font-size: 15px; font-weight: 700; color: var(--color-ember); }
.etl-ev-date {
font-size: 13px; font-weight: 600;
color: var(--color-ember); opacity: 0.85;
font-family: 'IBM Plex Mono', monospace;
}
.etl-event--peak { border-left-width: 6px; }
.etl-hint {
font-size: 13px; color: var(--color-stone);
padding: 16px 2px 2px; text-align: center;
}
}
.expo-line-svg .graph-line {
fill: none;
stroke: var(--color-indigo);
stroke-width: 3.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.expo-line-svg .graph-area {
fill: var(--color-indigo);
opacity: 0.08;
}
.expo-line-svg .graph-origin {
fill: var(--color-stone);
}
.expo-line-svg .graph-dot {
fill: var(--color-indigo);
cursor: pointer;
transition: r 150ms ease;
}
.expo-line-svg .graph-dot:hover { r: 12; }
.expo-line-svg .graph-dot-pulse {
fill: var(--color-indigo);
opacity: 0;
pointer-events: none;
}
@keyframes expoDotPulse {
0% { r: 8; opacity: 0.45; }
70% { r: 24; opacity: 0; }
100% { r: 24; opacity: 0; }
}
.expo-line-svg .graph-dot-label {
fill: var(--color-ink);
font-size: 28px;
font-weight: 800;
font-family: 'IBM Plex Mono', monospace;
text-anchor: middle;
}
.expo-line-svg .graph-axis-label { display: none; }
.expo-line-svg .graph-year {
fill: var(--color-ink);
font-size: 19px;
font-weight: 700;
font-family: 'Pretendard Variable', sans-serif;
text-anchor: middle;
}
.expo-line-svg .graph-year--sub {
fill: var(--color-stone);
font-size: 15px;
font-weight: 400;
}
.expo-line-svg .graph-year--start {
fill: var(--color-stone);
font-size: 13px;
font-weight: 500;
}
.expo-line-svg .graph-year--clickable { cursor: pointer; transition: fill 150ms ease; }
.expo-line-svg .graph-year--clickable:hover { fill: var(--color-indigo); }
.expo-line-svg .axis-line {
stroke: var(--color-hairline);
stroke-width: 1;
}
/* Event markers */
.expo-line-svg .event-line {
stroke: var(--color-ember);
stroke-width: 1.5;
stroke-dasharray: 4 3;
}
.expo-line-svg .event-line.peak {
stroke-width: 2;
stroke-dasharray: none;
}
.expo-line-svg .event-dot {
fill: var(--color-ember);
}
.expo-line-svg .event-label {
fill: var(--color-ember);
font-size: 18px;
font-weight: 600;
font-family: 'Pretendard Variable', sans-serif;
}
.expo-line-svg .event-label--date {
font-size: 14px;
font-weight: 600;
opacity: 0.7;
font-family: 'IBM Plex Mono', monospace;
}
/* Wider, taller timeline on desktop so it really spreads out */
@media (min-width: 1024px) {
.expo-line-graph {
width: min(100vw - 48px, 1500px);
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
}
.expo-line-svg { height: clamp(440px, 42vw, 720px); }
/* Inside the dark-section the graph must STAY in its parent's content
width — the above 'break out of the page' trick was pushing it past
the dark-section's right edge and clipping the rightmost event label
('엑스포 재도전 시사'). Override and let the SVG scale normally.
Also kill the leftover top margin so the graph doesn't sit far below
the dark-section's top padding. */
.dark-section .expo-line-graph {
width: auto;
max-width: none;
margin: 0;
padding: 0;
transform: none;
}
}
/* Tighten graph + analysis text spacing inside dark-section across all
viewports (the previous 28+32 px top stack made the chart float far
below the dark-section's top edge). */
.dark-section .expo-line-graph { margin: 0; padding: 8px 0 0; }
/* Explicit large height (not aspect-ratio) so the chart actually feels
substantial. The SVG fills full dark-section width with this tall
height; preserveAspectRatio="xMidYMid meet" inside keeps the chart
horizontally centered with proportional sizing.
We also pump the line/dot sizes to make the chart line itself read
bigger, not just the labels around it. */
.dark-section .expo-line-svg {
width: 100%;
height: clamp(580px, 72vh, 820px);
}
/* Reduce dark-section side padding when it wraps the expo graph so the
chart can fill more of the viewport width. */
.tab-panel[data-tab="expo"] .dark-section {
padding-left: 16px;
padding-right: 16px;
}
@media (max-width: 600px) {
.tab-panel[data-tab="expo"] .dark-section { padding-left: 8px; padding-right: 8px; }
}
/* Stroke uniformity under non-uniform stretch (preserveAspectRatio="none").
IMPORTANT: graph-line is INTENTIONALLY excluded — its draw-in animation
uses stroke-dasharray seeded from getTotalLength() in viewBox units, but
vector-effect: non-scaling-stroke interprets dashes in screen pixels,
producing a mismatch that visually stops the line animation midway.
axis-line / event-line are static so they're safe to keep uniform. */
.dark-section .expo-line-svg .axis-line,
.dark-section .expo-line-svg .event-line {
vector-effect: non-scaling-stroke;
}
/* Thicker chart line, bigger data dots inside dark-section */
.dark-section .expo-line-svg .graph-line { stroke-width: 5; }
.dark-section .expo-line-svg .graph-dot { r: 11; }
.dark-section .expo-line-svg .graph-dot:hover { r: 14; }
.dark-section .expo-line-svg .graph-origin { r: 7; }
.dark-section .section-lead--analysis {
margin: 16px auto 0;
text-align: center;
}
/* Line drawing animation */
@media (prefers-reduced-motion: no-preference) {
.expo-line-svg .graph-line {
stroke-dasharray: var(--line-len, 1000);
stroke-dashoffset: var(--line-len, 1000);
transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.expo-line-svg .graph-area {
opacity: 0;
transition: opacity 0.8s ease 0.8s;
}
.expo-line-svg .graph-dot {
r: 0;
transition: r 400ms ease;
}
.expo-line-svg .graph-dot-label {
opacity: 0;
transition: opacity 300ms ease;
}
.expo-line-graph.is-drawn .graph-line {
stroke-dashoffset: 0;
}
.expo-line-graph.is-drawn .graph-area {
opacity: 0.08;
}
.expo-line-graph.is-drawn .graph-dot {
r: 8;
}
.expo-line-graph.is-drawn .graph-dot-label {
opacity: 1;
}
.expo-line-graph.is-drawn .graph-dot:nth-child(1) { transition-delay: 0.2s; }
.expo-line-graph.is-drawn .graph-dot:nth-child(2) { transition-delay: 0.6s; }
.expo-line-graph.is-drawn .graph-dot:nth-child(3) { transition-delay: 1.0s; }
.expo-line-graph.is-drawn .graph-dot:nth-child(4) { transition-delay: 1.3s; }
.expo-line-graph.is-drawn .graph-dot-label:nth-child(1) { transition-delay: 0.4s; }
.expo-line-graph.is-drawn .graph-dot-label:nth-child(2) { transition-delay: 0.8s; }
.expo-line-graph.is-drawn .graph-dot-label:nth-child(3) { transition-delay: 1.1s; }
.expo-line-graph.is-drawn .graph-dot-label:nth-child(4) { transition-delay: 1.4s; }
/* Event markers (BIE 실사단 방문 / 리야드 선정) appear only AFTER the
line + dots have finished drawing (~1.5s). */
.expo-line-svg .event-line,
.expo-line-svg .event-label { opacity: 0; transition: opacity 0.55s ease; }
.expo-line-graph.is-drawn .event-line { opacity: 1; transition-delay: 1.6s; }
.expo-line-graph.is-drawn .event-line.peak { opacity: 1; transition-delay: 1.75s; }
.expo-line-graph.is-drawn .event-label { opacity: 1; transition-delay: 1.9s; }
.expo-line-graph.is-drawn .event-label--date { opacity: 0.7; transition-delay: 2s; }
/* Dots keep pulsing (once everything is drawn) so it's obvious they
are clickable. Staggered so the rings don't fire in unison. */
.expo-line-graph.is-drawn .graph-dot-pulse {
animation: expoDotPulse 2.4s ease-out 2.2s infinite;
}
.expo-line-graph.is-drawn .graph-dot-pulse:nth-child(2) { animation-delay: 2.5s; }
.expo-line-graph.is-drawn .graph-dot-pulse:nth-child(3) { animation-delay: 2.8s; }
.expo-line-graph.is-drawn .graph-dot-pulse:nth-child(4) { animation-delay: 3.1s; }
}
/* ===== VS Arena — Bad vs Good TOP3 face-off ===== */
.vs-arena {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
margin: 40px 0 48px;
align-items: start;
}
/* ===== Dark "stadium" wrapper around the TOP 3 face-off =====
#back-negative is the id on the TOP 3 .vs-arena. Wraps the matchup in
a dark gradient backdrop with a soft radial spotlight from the top —
the white cards inside read like a stage. */
.vs-arena#back-negative {
position: relative;
isolation: isolate;
background: linear-gradient(180deg, #0E1320 0%, #14182A 55%, #1A1A1A 100%);
border-radius: 20px;
padding: 56px 40px 64px;
margin: 24px 0 56px;
overflow: hidden;
}
/* Soft top-center spotlight to suggest "stage lighting". */
.vs-arena#back-negative::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 55% at 50% 0%,
rgba(255, 255, 255, 0.06) 0%,
transparent 65%);
pointer-events: none;
z-index: 0;
}
.vs-arena#back-negative > * { position: relative; z-index: 1; }
/* Soften the column header underline so it reads on dark. */
.vs-arena#back-negative .vs-col-header {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* Vertical hairline of the divider also lifted to white-on-dark. */
.vs-arena#back-negative .vs-divider::before {
background: rgba(255, 255, 255, 0.14);
}
/* GOOD / BAD labels glow on dark — bump weight, no other change to color. */
.vs-arena#back-negative .vs-toptitle { font-weight: 900; }
.vs-arena#back-negative .vs-toptitle--neg {
text-shadow: 0 0 28px rgba(229, 87, 60, 0.35);
}
.vs-arena#back-negative .vs-toptitle--pos {
text-shadow: 0 0 28px rgba(43, 169, 154, 0.35);
}
@media (max-width: 768px) {
.vs-arena#back-negative { padding: 36px 18px 44px; border-radius: 14px; }
}
/* TOP 3 dark stadium — cards themselves go dark so the white doesn't
pop too hard against the dark backdrop. Content (rank circle, avatar,
name, region) stays legible with light text + retained accent colors. */
.vs-arena#back-negative .vs-card {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.10);
}
.vs-arena#back-negative .vs-card:hover {
background: rgba(255, 255, 255, 0.10);
border-color: var(--color-ember);
box-shadow: 0 4px 16px -3px rgba(220, 38, 38, 0.30);
}
.vs-arena#back-negative .vs-card--pos:hover {
border-color: var(--color-teal);
box-shadow: 0 4px 16px -3px rgba(13, 148, 136, 0.30);
}
.vs-arena#back-negative .vs-name { color: rgba(255, 255, 255, 0.94); }
.vs-arena#back-negative .vs-region { color: rgba(255, 255, 255, 0.5); }
.vs-arena#back-negative .vs-avatar {
border-color: rgba(255, 255, 255, 0.15);
}
/* Rank circles get a touch more opacity since they sit on dark cards. */
.vs-arena#back-negative .vs-rank {
background: rgba(245, 158, 158, 0.22);
}
.vs-arena#back-negative .vs-rank.pos {
background: rgba(95, 200, 175, 0.22);
}
/* GOOD on the left, BAD on the right (DOM stays neg→divider→pos) */
.vs-arena .vs-col--pos { order: -1; }
.vs-arena .vs-col--neg { order: 1; }
.vs-col {
display: flex;
flex-direction: column;
gap: 14px;
}
.vs-col-header {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-hairline);
}
/* Pull section labels toward the central VS divider so the two sides face
each other across the spine — GOOD (left column) hugs its RIGHT edge,
BAD (right column) hugs its LEFT edge. Applies to TOP 3 (vs-toptitle +
vs-col-sub) and the 그 외 row (vs-toptitle + vs-col-sub). */
.vs-col--pos .vs-col-header { align-items: flex-end; text-align: right; }
.vs-col--neg .vs-col-header { align-items: flex-start; text-align: left; }
.vs-col--pos .vs-col-sub { justify-content: flex-end; flex-direction: row-reverse; }
.vs-col--neg .vs-col-sub { justify-content: flex-start; }
.vs-toptitle {
font-size: 34px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1;
}
.vs-toptitle--neg { color: var(--color-ember); }
.vs-toptitle--pos { color: var(--color-teal); }
.vs-col-sub { display: flex; align-items: baseline; gap: 10px; }
.vs-label {
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.vs-label--neg { color: var(--color-ember); }
.vs-label--pos { color: var(--color-teal); }
.vs-col-header .method-inline-link { font-size: 12px; }
@media (max-width: 768px) {
.vs-toptitle { font-size: 26px; }
/* Mobile: both vs-arenas stack to a single column. The central VS
divider doesn't make sense in a vertical stack, so hide it. Labels
all go left-aligned since there's no center spine to converge on.
gap is large (72px) so the BAD section ends and GOOD section starts
with a clear visual break — without it the two halves read as one
long list. */
.vs-arena {
grid-template-columns: 1fr;
gap: 72px;
}
.vs-arena .vs-divider { display: none; }
.vs-arena .vs-col--pos,
.vs-arena .vs-col--neg { order: 0; }
.vs-col {
gap: 12px;
}
.vs-col--pos .vs-col-header,
.vs-col--neg .vs-col-header {
align-items: flex-start;
text-align: left;
}
.vs-col--pos .vs-col-sub,
.vs-col--neg .vs-col-sub {
justify-content: flex-start;
flex-direction: row;
}
/* More breathing room inside cards on mobile so they don't feel
squished against the avatar + name. */
.vs-card {
padding: 18px 18px;
gap: 16px;
}
/* TOP 3 dark stadium: extra hairline divider above the GOOD column on
mobile, so the transition from BAD half to GOOD half reads as a
section break inside the dark backdrop. */
.vs-arena#back-negative .vs-col--pos {
border-top: 1px solid rgba(255, 255, 255, 0.10);
padding-top: 36px;
}
/* '그 외 주요 발언' arena uses a lighter hairline (it's on white page
background, not dark stadium). */
.vs-arena.vs-arena--more .vs-col--pos {
border-top: 1px solid var(--color-hairline);
padding-top: 36px;
}
}
/* ===== VS full-screen modal ===== */
body.vsm-lock { overflow: hidden; }
.vs-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 48px 20px;
overflow-y: auto;
}
.vs-modal[hidden] { display: none; }
.vsm-backdrop {
position: fixed;
inset: 0;
background: rgba(14, 19, 32, 0.62);
backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 240ms ease;
}
.vs-modal.is-open .vsm-backdrop { opacity: 1; }
.vsm-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
background: #fff;
border-radius: 8px;
box-shadow: 0 30px 80px -20px rgba(14, 19, 32, 0.55);
padding: 40px 44px 44px;
opacity: 0;
transform: translateY(20px) scale(0.985);
transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.vs-modal.is-open .vsm-dialog { opacity: 1; transform: none; }
.vsm-close {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--color-hairline);
background: #fff;
color: var(--color-stone);
font-size: 15px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 150ms;
}
.vsm-close:hover { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.vsm-head {
display: flex;
align-items: center;
gap: 18px;
padding-bottom: 22px;
margin-bottom: 24px;
border-bottom: 1px solid var(--color-hairline);
}
.vsm-avatar {
width: 72px; height: 72px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
border: 2px solid var(--color-hairline);
background: var(--color-bone);
flex: 0 0 72px;
}
.vsm-head-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vsm-ranktag {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
font-family: 'IBM Plex Mono', monospace;
}
.vsm-ranktag--neg { color: var(--color-ember); }
.vsm-ranktag--pos { color: var(--color-teal); }
.vsm-name { font-size: 22px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; }
.vsm-tag {
align-self: flex-start;
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
}
.vsm-tag--neg { color: var(--color-ember); background: var(--color-ember-soft); }
.vsm-tag--pos { color: var(--color-teal); background: var(--color-teal-soft); }
.vsm-quote-wrap {
margin: 0 0 24px;
transition: background 160ms, padding 160ms;
}
.vsm-ctx-open .vsm-quote-wrap {
background: var(--color-bone);
border-radius: 6px;
padding: 18px 20px;
}
.vsm-quote {
margin: 0;
font-size: 21px;
font-weight: 700;
line-height: 1.55;
color: var(--color-ink);
padding-left: 20px;
border-left: 4px solid var(--color-hairline);
}
.vsm-quote--neg { border-left-color: var(--color-ember); }
.vsm-quote--pos { border-left-color: var(--color-teal); }
/* Expanded ("발언 펼치기") state — full statement is longer than the
curated highlight so we drop weight a touch and tighten line-height
to keep the passage readable. */
.vsm-quote.vsm-quote--full {
font-size: 17px;
font-weight: 500;
line-height: 1.7;
color: var(--color-cinder);
}
/* Curated highlight portion inside the full statement — visible link
between the short quote on the card and the surrounding speech. */
.vsm-quote .vsm-highlight {
background: linear-gradient(transparent 55%, rgba(255, 220, 90, 0.55) 55%);
color: var(--color-ink);
font-weight: 700;
padding: 0 2px;
border-radius: 1px;
}
.vsm-quote--neg .vsm-highlight {
background: linear-gradient(transparent 55%, rgba(245, 158, 158, 0.55) 55%);
}
.vsm-quote--pos .vsm-highlight {
background: linear-gradient(transparent 55%, rgba(140, 220, 200, 0.55) 55%);
}
/* Typewriter caret — shown only while a quote is actively typing */
.vsm-quote.is-typing::after,
.rep-speech .quote.is-typing::after {
content: '▌';
display: inline-block;
margin-left: 2px;
font-style: normal;
font-weight: 400;
opacity: 0.5;
animation: typeCaret 0.7s steps(1, end) infinite;
}
@keyframes typeCaret { 50% { opacity: 0; } }
.rep-speech .quote { min-height: 1.2em; }
.vsm-ctx-before { margin-bottom: 6px; }
.vsm-ctx-after { margin-top: 6px; margin-bottom: 8px; }
.vsm-why {
padding: 18px 20px;
border-radius: 6px;
margin-bottom: 22px;
}
.vsm-why--neg { background: var(--color-ember-soft); }
.vsm-why--pos { background: var(--color-teal-soft); }
.vsm-why-label {
font-size: 13px;
font-weight: 800;
margin-bottom: 6px;
}
.vsm-why--neg .vsm-why-label { color: var(--color-ember); }
.vsm-why--pos .vsm-why-label { color: var(--color-teal); }
.vsm-why-text { font-size: 14px; line-height: 1.7; color: var(--color-cinder); }
/* Match the 주요 현안 대표발언 action buttons (.rep-actions /
.rep-context-toggle): compact, full-width, stacked, understated. */
.vsm-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.vsm-btn {
width: 100%;
text-align: center;
padding: 9px 14px;
border: 1px solid var(--color-hairline);
background: white;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-slate);
border-radius: 4px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vsm-btn:hover {
border-color: var(--color-indigo);
color: var(--color-indigo);
background: var(--color-indigo-soft, #EEF2FF);
}
.vsm-video { margin-top: 16px; }
.vsm-video video { width: 100%; border-radius: 6px; background: #000; display: block; }
.vsm-video .video-fallback { font-size: 12px; color: var(--color-stone); margin-top: 8px; }
.vsm-ctx-loading { font-size: 13px; color: var(--color-stone); padding: 12px 0; }
@media (max-width: 768px) {
.vs-modal { padding: 18px; align-items: center; }
.vsm-dialog {
max-width: none;
min-height: 0;
border-radius: 0;
padding: 24px 18px 28px;
max-height: calc(100vh - 36px);
overflow-y: auto;
}
.vsm-quote { font-size: 18px; }
.vsm-actions { flex-direction: column; }
}
/* Divider with VS badge */
.vs-divider {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
align-self: stretch;
position: relative;
}
.vs-divider::before {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 1px;
background: var(--color-hairline);
}
.vs-badge {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-ink);
color: white;
font-size: 14px;
font-weight: 900;
letter-spacing: 0.06em;
margin-top: 80px;
}
/* Individual VS card */
.vs-card {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: white;
border: 1px solid var(--color-hairline);
cursor: pointer;
transition: all 200ms;
position: relative;
}
.vs-card:hover {
border-color: var(--color-ember);
box-shadow: 0 4px 12px -3px rgba(220, 38, 38, 0.15);
}
.vs-card--pos:hover {
border-color: var(--color-teal);
box-shadow: 0 4px 12px -3px rgba(13, 148, 136, 0.15);
}
.vs-card.is-open {
border-color: var(--color-ember);
box-shadow: 0 6px 20px -4px rgba(220, 38, 38, 0.2);
}
.vs-card--pos.is-open {
border-color: var(--color-teal);
box-shadow: 0 6px 20px -4px rgba(13, 148, 136, 0.2);
}
.vs-rank {
flex-shrink: 0;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 900;
color: var(--color-ember);
background: var(--color-ember-soft);
border-radius: 50%;
}
.vs-rank.pos {
color: var(--color-teal);
background: var(--color-teal-soft);
}
.vs-avatar {
width: 52px; height: 52px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--color-hairline);
flex-shrink: 0;
}
.vs-info { flex: 1; min-width: 0; }
.vs-name {
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
margin-bottom: 2px;
}
.vs-region {
font-size: 12px;
font-weight: 500;
color: var(--color-stone);
}
.vs-count {
font-size: 13px;
color: var(--color-stone);
}
/* Expanded quote area — card-news style */
.vs-expand-area {
padding: 20px 18px 16px;
border-top: 1px solid var(--color-hairline);
background: var(--color-bone);
}
.vs-card.is-open .vs-expand-area {
display: block !important;
}
.vs-quote {
font-size: 20px;
font-weight: 700;
line-height: 1.55;
color: var(--color-ink);
margin-bottom: 14px;
padding: 16px 20px;
background: white;
border-left: 4px solid var(--color-ember);
}
.vs-card--pos .vs-quote {
border-left-color: var(--color-teal);
}
.vs-context {
font-size: 13px;
line-height: 1.65;
color: var(--color-slate);
margin-bottom: 12px;
}
.vs-expand-area .video-toggle {
margin-top: 8px;
}
/* Mobile: stack columns vertically */
@media (max-width: 768px) {
.vs-arena {
grid-template-columns: 1fr;
gap: 0;
margin: 24px 0 32px;
}
.vs-divider {
padding: 24px 0;
justify-content: center;
}
.vs-divider::before {
top: 50%; bottom: auto;
left: 0; right: 0;
width: auto; height: 1px;
}
.vs-badge {
margin-top: 0;
width: 40px; height: 40px;
font-size: 12px;
}
.vs-quote {
font-size: 17px;
padding: 14px 16px;
}
}
/* Ranking table */
.ranking-search {
display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.ranking-search input, .ranking-search select {
padding: 12px 14px;
border: 1px solid var(--color-hairline);
border-radius: 0;
background: white;
font-family: inherit; font-size: 14px;
color: var(--color-ink);
}
.ranking-search input { flex: 2; min-width: 200px; }
.ranking-search select { flex: 1; min-width: 140px; }
.ranking-table {
width: 100%; border-collapse: collapse;
border: 1px solid var(--color-hairline);
}
.ranking-table th {
background: var(--color-bone);
padding: 14px 16px; text-align: left;
font-size: 12px; font-weight: 700;
color: var(--color-stone);
letter-spacing: 0.04em;
border-bottom: 1px solid var(--color-hairline);
cursor: pointer;
}
.ranking-table td {
padding: 14px 16px;
font-size: 14px;
border-bottom: 1px solid var(--color-hairline);
}
.ranking-table tbody tr { cursor: pointer; transition: background 150ms; }
.ranking-table tbody tr:hover td { background: var(--color-indigo-soft); }
.ranking-table .num-cell {
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
color: var(--color-stone);
}
.ranking-table .num-cell.bold { color: var(--color-ink); font-weight: 700; }
.ranking-table .omit-row td {
background: var(--color-bone);
text-align: center; color: var(--color-slate);
font-size: 13px;
border-top: 1px dashed var(--color-hairline);
border-bottom: 1px dashed var(--color-hairline);
}
/* Methodology */
.methodology {
background: var(--color-bone);
border: 1px dashed var(--color-hairline);
padding: 40px;
margin-top: 48px;
}
.methodology h3 {
color: var(--color-indigo); font-weight: 700; font-size: 16px;
margin-top: 24px; margin-bottom: 8px;
}
.methodology h3:first-of-type { margin-top: 16px; }
.methodology h2 { color: var(--color-ink); margin-bottom: 16px; }
.methodology p, .methodology li { color: var(--color-cinder); font-size: 15px; line-height: 1.7; }
.methodology ul { padding-left: 20px; margin: 8px 0; }
/* Sentiment cards (TOP 3) */
.top3-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 900px) { .top3-grid { grid-template-columns: 1fr; } }
.top3-card {
background: white;
border: 1px solid var(--color-hairline);
padding: 24px;
box-shadow: var(--shadow-hairline);
/* Flex column so the video-toggle button can be pinned to the bottom
edge regardless of how long each card's 이유 block is — keeps the
row of "해당 회의 영상 보기" buttons aligned horizontally. */
display: flex;
flex-direction: column;
}
.top3-card > .video-toggle { margin-top: auto; }
/* When the video is opened the card spans the row and grows tall on
its own — drop the auto-fill so the button sits right under the
context block, not floating below a giant gap. */
.top3-card.video-open > .video-toggle { margin-top: 16px; }
.top3-rank {
font-size: 32px; font-weight: 900;
color: var(--color-indigo);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 16px;
}
.top3-rank.pos { color: var(--color-teal); }
.member-mini {
display: flex; gap: 10px; align-items: center; margin-bottom: 16px;
}
.avatar {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--color-slate);
}
.member-mini .name { font-size: 16px; font-weight: 700; color: var(--color-ink); }
.member-mini .meta { font-size: 12px; color: var(--color-stone); }
.member-mini .meta .num { font-weight: 700; color: var(--color-ember); }
.pos .member-mini .meta .num { color: var(--color-teal); }
.quote {
border-left: 3px solid var(--color-ember);
background: var(--color-ember-soft);
padding: 12px 16px;
font-size: 14px; line-height: 1.6;
color: var(--color-ink);
font-weight: 300;
font-style: italic;
}
.top3-card.pos .quote { border-left-color: var(--color-teal); background: var(--color-teal-soft); }
.quote-link {
display: block; font-size: 12px; font-weight: 700;
color: var(--color-indigo); margin-top: 6px;
}
.quote-link:hover { color: var(--color-indigo-deep); }
.context {
background: var(--color-bone);
border-left: 3px solid var(--color-stone);
padding: 12px 14px;
margin: 16px 0;
font-size: 13px; line-height: 1.7;
color: var(--color-cinder);
}
.context .label {
display: block;
font-size: 11px; color: var(--color-stone);
font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.dist {
background: var(--color-bone);
padding: 14px 16px;
margin: 16px 0;
}
.dist-title {
font-size: 12px; font-weight: 700; color: var(--color-stone);
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 10px;
}
.dist-row {
display: flex; align-items: center; gap: 8px;
font-size: 12px; margin-bottom: 6px;
}
.dist-row:last-child { margin-bottom: 0; }
.dist-label { flex: 0 0 80px; color: var(--color-cinder); }
.dist-track { flex: 1; height: 6px; background: var(--color-hairline); }
.dist-fill { height: 100%; background: var(--color-ember); }
.top3-card.pos .dist-fill { background: var(--color-teal); }
.dist-value {
flex: 0 0 36px; text-align: right;
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
font-weight: 700; color: var(--color-ink);
}
.btn-full {
display: block; width: 100%; margin-top: 16px;
padding: 12px; text-align: center;
background: white; color: var(--color-ink);
border: 1px solid var(--color-hairline); border-radius: 4px;
font-size: 13px; font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: all 200ms;
font-family: inherit;
}
.btn-full:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
/* Collapsible representative quote */
.quote { transition: max-height 280ms ease; }
.quote.quote-collapsed {
/* Lock to a uniform 6-line slot so cards in a TOP 3 row align even
when individual quotes are short. Both min and max are set. */
min-height: 9.6em;
max-height: 9.6em;
overflow: hidden;
position: relative;
}
.quote.quote-collapsed::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3em;
background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-ember-soft) 90%);
pointer-events: none;
}
.top3-card.pos .quote.quote-collapsed::after {
background: linear-gradient(to bottom, rgba(255,255,255,0), var(--color-teal-soft) 90%);
}
.quote-toggle {
display: inline-block;
background: none;
border: none;
color: var(--color-ember);
font-size: 12px; font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
padding: 6px 0;
margin: 4px 0 8px;
font-family: inherit;
}
.top3-card.pos .quote-toggle { color: var(--color-teal); }
.quote-toggle:hover { text-decoration: underline; }
/* Click-selected indicator — card stays in its grid cell, gets a 2px
indigo (or ember for problem-tag side / teal for positive side) border.
The actual video player lives in a sibling .video-panel that's moved
out of the card and inserted after the row's last card. */
.top3-card { transition: box-shadow 280ms ease, border-color 280ms ease, transform 280ms ease; }
.top3-card.is-selected {
border-color: var(--color-ember);
border-width: 2px;
box-shadow: 0 10px 28px rgba(193, 53, 21, 0.18);
position: relative;
z-index: 1;
}
.top3-card.pos.is-selected {
border-color: var(--color-teal);
box-shadow: 0 10px 28px rgba(15, 118, 110, 0.18);
}
/* Video panel default state (inside its card, hidden — kept compact in
case the new state machine ever shows it inline as a fallback) */
.video-panel {
margin-top: 14px;
background: #000;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--color-hairline);
}
/* Floating state — when moved out of the card and reinserted after the
row's last card. Spans the full grid row width so the video plays at
the page's full content width. */
.video-panel.video-floating {
grid-column: 1 / -1;
margin: 6px 0 0;
background: #000;
border-radius: 6px;
border: 0;
overflow: hidden;
box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.35);
scroll-margin-top: 112px;
}
.video-panel video {
display: block;
width: 100%;
/* Reserve correct space BEFORE metadata loads so the panel doesn't
pop from a ~150px-tall stub to its real size after the user clicks
play. object-fit: contain letterboxes if the actual clip differs. */
aspect-ratio: 16 / 9;
max-height: 78vh;
background: #000;
object-fit: contain;
}
.video-panel iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border: 0;
background: #111;
max-height: 78vh;
}
.video-fallback {
padding: 8px 12px;
background: var(--color-bone);
font-size: 12px; color: var(--color-stone);
text-align: center;
border-top: 1px solid var(--color-hairline);
}
.video-fallback a { color: var(--color-indigo); font-weight: 600; text-decoration: none; }
.video-fallback a:hover { text-decoration: underline; }
.video-placeholder {
padding: 38px 20px;
text-align: center;
color: #b8b8b8;
background: #1a1a1a;
font-size: 13px; line-height: 1.6;
}
.video-placeholder a { color: #fff; font-weight: 600; text-decoration: underline; }
/* Speech list */
.filter-bar {
display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.filter-bar input, .filter-bar select {
padding: 12px 14px;
border: 1px solid var(--color-hairline);
border-radius: 0;
background: white;
font-family: inherit; font-size: 14px;
}
.filter-bar input { flex: 2; min-width: 200px; }
.filter-bar select {
flex: 1; min-width: 130px; padding-right: 32px;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
}
.speech-list {
border: 1px solid var(--color-hairline);
background: white;
}
.speech-list-head {
display: flex; gap: 16px;
padding: 14px 20px;
background: var(--color-bone);
border-bottom: 1px solid var(--color-hairline);
font-size: 11px; color: var(--color-stone);
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.speech-list-row {
display: flex; gap: 16px; align-items: center;
padding: 18px 20px;
border-bottom: 1px solid var(--color-hairline);
transition: background 150ms; cursor: pointer;
}
.speech-list-row:last-child { border-bottom: 0; }
.speech-list-row:hover { background: var(--color-bone); }
.col-tags { flex: 0 0 140px; display: flex; gap: 4px; flex-wrap: wrap; }
.col-quote { flex: 1; font-size: 14px; line-height: 1.55; color: var(--color-ink); }
.col-meta { flex: 0 0 160px; font-size: 12px; color: var(--color-stone); }
.col-meta .num { font-weight: 700; color: var(--color-ink); }
.col-video { flex: 0 0 50px; text-align: right; font-size: 16px; color: var(--color-indigo); }
.chip {
display: inline-block;
padding: 4px 8px;
background: var(--color-bone);
color: var(--color-cinder);
border: 1px solid var(--color-hairline);
border-radius: 4px;
font-size: 11px; font-weight: 500;
line-height: 1.4;
}
.chip.neg { background: var(--color-ember-soft); color: var(--color-ember); border-color: transparent; font-weight: 700; }
.chip.pos { background: var(--color-teal-soft); color: var(--color-teal); border-color: transparent; font-weight: 700; }
.chip.party { background: var(--color-indigo-soft); color: var(--color-indigo); border-color: transparent; }
/* Pagination */
.pagination {
display: flex; justify-content: space-between; align-items: center;
margin-top: 24px; flex-wrap: wrap; gap: 16px;
}
.pagination-info { font-size: 13px; color: var(--color-stone); }
.pagination-info .num { font-weight: 700; color: var(--color-ink); }
.page-btns { display: flex; gap: 4px; }
.page-btn {
padding: 10px 14px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 4px;
font-size: 13px;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-ink);
transition: all 150ms;
}
.page-btn:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.page-btn.active { background: var(--color-indigo); color: white; border-color: var(--color-indigo); }
/* Timeline (엑스포 발언 추적) — vertical event guides tie each event
callout to its corresponding bubble for at-a-glance mapping. */
.timeline-wrap {
position: relative;
padding: 38px 32px 24px;
border: 1px solid var(--color-hairline);
background: white;
overflow-x: auto;
border-radius: 4px;
}
.timeline-inner {
position: relative;
/* Shorter horizontal line. Original 880 made 2022→2025 read as too
stretched. 720 still has enough room for the 4 year bubbles + 2 event
markers without the 결과 callout colliding with the 2023 bubble. */
min-width: 720px;
height: 280px;
}
.tl-axis-text {
position: absolute; top: 14px; left: 32px;
font-size: 11px; font-weight: 700; color: var(--color-slate);
letter-spacing: 0.08em; text-transform: uppercase;
}
/* Vertical dashed guide passing through the column of a major event.
Drawn first so bubbles and labels sit on top of it. */
.tl-guide {
position: absolute;
top: 0; bottom: 0;
width: 0;
border-left: 1px dashed rgba(193, 53, 21, 0.32);
transform: translateX(-0.5px);
pointer-events: none;
}
.tl-guide.muted { border-left-color: rgba(107, 107, 107, 0.28); }
/* Axis at bottom: 100px → bubbles get 180px above; year + callout fit
in the 100px below. */
.tl-axis-line {
position: absolute;
left: 0; right: 0;
bottom: 100px;
height: 1px;
background: var(--color-ink);
}
/* Bubbles — bottom edge sits ON the axis, size grows upward */
.tl-node {
position: absolute;
bottom: 100px;
border-radius: 50%;
background: var(--color-indigo);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
letter-spacing: -0.02em;
transform: translateX(-50%);
box-shadow: 0 6px 14px -3px rgba(79, 70, 229, 0.28),
0 0 0 3px white;
transition: transform 200ms;
}
.tl-node.event {
background: var(--color-indigo-deep);
box-shadow: 0 8px 20px -4px rgba(55, 48, 163, 0.45),
0 0 0 3px white;
}
.tl-node.event.muted {
background: var(--color-stone);
box-shadow: 0 6px 14px -3px rgba(107, 107, 107, 0.30),
0 0 0 3px white;
}
.tl-node:hover { transform: translateX(-50%) scale(1.06); z-index: 4; }
/* Year markers just below the axis. 2-line: year label on top, '행감
MM/DD~DD' subtitle below (matching the mobile vertical layout). */
.tl-year {
position: absolute;
bottom: 56px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.tl-year .tl-year-label {
font-size: 11px;
font-weight: 700;
color: var(--color-slate);
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 0.04em;
}
.tl-year .tl-year-sub {
font-size: 10px;
color: var(--color-stone);
font-family: 'Pretendard Variable', sans-serif;
font-weight: 500;
white-space: nowrap;
}
/* Event callouts — anchored at the bottom, vertically aligned with bubbles
via their shared left:% and the dashed guide running through */
.tl-callout {
position: absolute;
bottom: 0;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center;
gap: 6px;
}
.tl-callout-date {
font-size: 13px;
font-weight: 800;
color: var(--color-ember);
font-family: 'IBM Plex Mono', monospace;
letter-spacing: -0.01em;
}
.tl-callout-label {
background: white;
border: 1.5px solid var(--color-ember);
color: var(--color-ember);
padding: 6px 12px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-align: center;
line-height: 1.35;
white-space: nowrap;
box-shadow: 0 4px 12px -3px rgba(193, 53, 21, 0.22);
}
.tl-callout.muted .tl-callout-date,
.tl-callout.muted .tl-callout-label {
color: var(--color-stone);
border-color: var(--color-stone);
box-shadow: none;
}
/* The vertical timeline (.tl-mobile / .tl-row) is now defined once, near
the top of the Expo section, and applies on all viewports. */
/* Map */
.map-wrap {
position: relative;
height: 480px;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
overflow: hidden;
}
.busan-map-wrap {
/* SVG drives the height via aspect ratio; remove the legacy fixed height */
height: auto;
background: linear-gradient(180deg, #f4f1eb 0%, #ebe6dc 100%);
padding: 16px;
}
.busan-svg {
display: block;
width: 100%;
height: auto;
max-height: 640px;
}
.busan-svg .busan-districts path {
fill: #fdfcf9;
stroke: #b9b0a0;
stroke-width: 1;
stroke-linejoin: round;
transition: fill 200ms;
}
.busan-svg .busan-districts path:hover { fill: #f4ede0; }
.busan-svg .busan-district-labels { pointer-events: none; }
.busan-svg .district-label {
fill: #b6ad9c;
font-family: 'Pretendard Variable', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: -0.01em;
/* Subtle paper-tone halo so the name stays readable on hovered districts */
paint-order: stroke fill;
stroke: rgba(253, 252, 249, 0.85);
stroke-width: 3;
stroke-linejoin: round;
}
.busan-svg .map-pin-svg { cursor: pointer; outline: none; }
.busan-svg .map-pin-svg .pin-circle {
fill: var(--color-indigo);
stroke: white; stroke-width: 3;
filter: drop-shadow(0 2px 4px rgba(0,30,80,0.25));
transition: transform 180ms ease, fill 180ms;
transform-box: fill-box;
transform-origin: center;
}
.busan-svg .map-pin-svg.ongoing .pin-circle {
fill: white;
stroke: var(--color-ember);
stroke-width: 4;
filter: drop-shadow(0 2px 4px rgba(160,30,30,0.25));
}
.busan-svg .map-pin-svg .pin-text {
fill: white;
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
pointer-events: none;
}
.busan-svg .map-pin-svg.ongoing .pin-text { fill: var(--color-ember); }
.busan-svg .map-pin-svg .pin-label {
fill: var(--color-ink);
font-family: 'Pretendard Variable', sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
pointer-events: none;
/* draw a white halo behind the text so it stays readable on any background */
paint-order: stroke fill;
stroke: white;
stroke-width: 4;
stroke-linejoin: round;
}
.busan-svg .map-pin-svg.ongoing .pin-label { fill: var(--color-ember); }
.busan-svg .map-pin-svg:hover .pin-circle,
.busan-svg .map-pin-svg:focus-visible .pin-circle { transform: scale(1.12); }
.busan-svg .map-pin-svg:hover .pin-label,
.busan-svg .map-pin-svg:focus-visible .pin-label { font-size: 17px; }
/* 공공기여 map — bubbles fade in one-by-one, biggest first
(--pin-order is set per pin by 발언 건수 rank). Opacity only, so it
never fights the :hover / :focus / .is-active pin-circle transform. */
@media (prefers-reduced-motion: no-preference) {
#public-map .busan-pins .map-pin-svg {
opacity: 0;
transition: opacity 0.45s ease;
}
#public-map.pins-in .busan-pins .map-pin-svg {
opacity: 1;
transition-delay: calc(var(--pin-order, 0) * 0.16s);
}
}
/* 공공기여 map — clickable pins pulse (same cue as the expo dots /
mobile timeline bubbles) so it's obvious they open a panel. Indigo
for 완료 pins, ember for the 진행 중 pin. Staggered by --pin-order;
starts once the pins have revealed. Web + mobile. */
.busan-svg .pin-pulse {
fill: var(--color-indigo);
opacity: 0;
pointer-events: none;
transform-box: fill-box;
transform-origin: center;
}
.busan-svg .map-pin-svg.ongoing .pin-pulse { fill: var(--color-ember); }
@keyframes pinPulse {
0% { transform: scale(1); opacity: 0.40; }
70% { transform: scale(2.1); opacity: 0; }
100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
#public-map.pins-in .busan-pins .map-pin-svg .pin-pulse {
animation: pinPulse 2.4s ease-out infinite;
animation-delay: calc(1s + var(--pin-order, 0) * 0.22s);
}
}
/* Mobile map — district labels shrink so they don't collide; pin labels
bump up because the pins themselves are also scaled larger via JS so
they read at a glance on a small screen. */
@media (max-width: 768px) {
/* Full-bleed the 공공기여 map so the near-square SVG (and its bubbles)
use the entire phone width — much bigger than the padded, page-width
version. */
.busan-map-wrap {
height: auto;
padding: 0;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
}
/* Inside .dark-section, the map MUST stay contained — the 100vw
full-bleed above would burst out of the rounded dark backdrop. */
.dark-section .busan-map-wrap {
width: auto;
margin-left: 0;
margin-right: 0;
padding: 12px;
border-radius: 10px;
}
.busan-svg { max-height: none; }
.busan-svg .district-label { font-size: 13px; stroke-width: 2.5; }
.busan-svg .map-pin-svg .pin-label { font-size: 23px; stroke-width: 5.5; }
/* Drop the white stroke on district labels for dark-section on mobile too. */
.dark-section .busan-svg .district-label { stroke-width: 0; }
}
.map-bg-text {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: var(--color-slate);
font-size: 14px;
}
.map-pin {
position: absolute;
border-radius: 50%;
background: var(--color-indigo);
color: white;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
transform: translate(-50%, -50%);
cursor: pointer;
box-shadow: 0 0 0 4px var(--color-indigo-soft);
transition: transform 200ms;
}
.map-pin:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 5; }
.map-pin.outline {
background: white;
border: 3px solid var(--color-indigo);
color: var(--color-indigo);
box-shadow: none;
}
.map-legend {
position: absolute; bottom: 16px; left: 16px;
background: white;
border: 1px solid var(--color-hairline);
padding: 14px 16px; font-size: 12px; line-height: 1.8;
box-shadow: var(--shadow-hairline);
}
.map-legend .leg-dot {
display: inline-block; width: 10px; height: 10px;
border-radius: 50%; vertical-align: middle;
margin-right: 6px;
}
.map-legend .leg-dot.solid { background: var(--color-indigo); }
.map-legend .leg-dot.outline { background: white; border: 2px solid var(--color-ember); }
.map-legend .meta { color: var(--color-stone); font-size: 11px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-hairline); }
/* Mobile legend — compact single-line strip pinned to top-left of the map
so it never covers pins. Placed AFTER the desktop .map-legend rule so it
wins on source order at equal specificity. */
@media (max-width: 768px) {
.map-legend {
position: absolute;
top: 8px;
left: 8px;
right: auto;
bottom: auto;
width: auto;
height: auto;
max-width: calc(100% - 16px);
padding: 4px 8px;
font-size: 10px;
line-height: 1.1;
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid var(--color-hairline);
}
.map-legend > div {
display: inline-flex;
align-items: center;
white-space: nowrap;
margin: 0;
padding: 0;
border: 0;
}
.map-legend .leg-dot {
width: 7px;
height: 7px;
margin-right: 4px;
}
.map-legend .leg-dot.outline { border-width: 1.5px; }
.map-legend .meta { display: none; }
}
/* Representative speech */
.rep-speech {
border: 1px solid var(--color-hairline);
padding: 24px;
margin-top: 24px;
background: white;
box-shadow: var(--shadow-hairline);
}
.rep-speech .label {
display: inline-block;
font-size: 11px; font-weight: 700; color: var(--color-indigo);
letter-spacing: 0.08em; text-transform: uppercase;
margin-bottom: 12px;
}
.rep-speech .quote {
background: var(--color-indigo-soft);
border-left: 3px solid var(--color-indigo);
color: var(--color-ink);
font-style: italic;
font-weight: 300;
font-size: 16px;
padding: 14px 18px;
margin-bottom: 12px;
}
.rep-speech .meta { font-size: 13px; color: var(--color-stone); margin-bottom: 16px; }
/* Rep-speech with member photo on the left + expandable surrounding context.
Used on the 공공기여 tab for the 박진수 representative quote. */
.rep-speech-with-photo {
display: flex;
gap: 22px;
align-items: flex-start;
}
/* Honor the [hidden] attribute even on .rep-speech-with-photo — without
this the flex display above overrides the browser default and the card
stays visible. Needed because the 주요 현안 page hides the 대표 발언
cards for now (markup preserved for future reactivation). */
.rep-speech-with-photo[hidden] { display: none; }
.rep-speech-photo {
width: 96px;
height: 96px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 1px solid var(--color-hairline);
background: var(--color-bone);
box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
}
.rep-speech-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
display: block;
}
.rep-speech-body { flex: 1; min-width: 0; }
.rep-speech-body .meta { margin-bottom: 14px; }
.rep-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 0;
}
.rep-context-toggle {
background: white;
border: 1px solid var(--color-hairline);
color: var(--color-slate);
padding: 9px 14px;
border-radius: 4px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
width: 100%;
text-align: center;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.rep-context-toggle:hover {
border-color: var(--color-indigo);
color: var(--color-indigo);
background: var(--color-indigo-soft, #EEF2FF);
}
.rep-context-toggle[aria-expanded="true"] {
border-color: var(--color-indigo);
color: var(--color-indigo);
}
.rep-context[hidden] { display: none; }
.rep-context-before {
margin-bottom: 12px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-hairline);
}
.rep-context-after {
margin-top: 4px;
margin-bottom: 14px;
padding-top: 14px;
border-top: 1px solid var(--color-hairline);
}
.rep-context-section-label {
font-size: 11px;
font-weight: 700;
color: var(--color-indigo);
letter-spacing: 0.06em;
margin-bottom: 10px;
}
.rep-context-quote {
padding: 10px 14px;
background: var(--color-bone);
border-left: 3px solid var(--color-hairline);
margin-bottom: 6px;
}
.rep-context-quote:last-child { margin-bottom: 0; }
.rep-context-quote.is-asker {
/* 위원 (the questioner — same role as the rep speaker) gets the indigo
accent that ties it visually to the highlighted rep quote. */
border-left-color: var(--color-indigo);
background: var(--color-indigo-soft, #EEF2FF);
}
.rep-context-quote.is-answerer {
border-left-color: var(--color-stone);
}
.rep-context-speakerline {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 4px;
font-family: 'Pretendard Variable', sans-serif;
}
.rep-context-speaker {
font-size: 13px;
font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.rep-context-role {
font-size: 11px;
color: var(--color-stone);
font-weight: 500;
padding: 1px 6px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 999px;
}
.rep-context-quote.is-asker .rep-context-role {
color: var(--color-indigo);
border-color: rgba(79, 70, 229, 0.3);
}
.rep-context-content {
font-size: 14px;
line-height: 1.65;
color: var(--color-slate);
font-style: italic;
font-weight: 300;
}
@media (max-width: 768px) {
.rep-speech-with-photo {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.rep-speech-photo {
width: 72px;
height: 72px;
}
.rep-speech-body {
width: 100%;
text-align: left;
}
.rep-speech-body .label {
text-align: left;
}
}
/* Reportage placeholder */
.reportage-box {
background: var(--color-bone);
border: 1px dashed var(--color-hairline);
padding: 20px 24px;
margin-top: 16px;
color: var(--color-slate);
font-style: italic;
font-size: 14px;
}
.reportage-box strong { color: var(--color-stone); font-style: normal; font-weight: 700; }
.reportage-box.filled {
font-style: normal;
color: var(--color-cinder);
background: white;
border: 1px solid var(--color-hairline);
line-height: 1.85;
font-size: 15px;
}
/* Per-site detail grid */
.site-grid-h {
font-size: 22px; font-weight: 700;
color: var(--color-ink);
margin: 40px 0 8px;
letter-spacing: -0.01em;
}
.site-grid-sub { color: var(--color-stone); font-size: 13px; margin-bottom: 18px; }
.site-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 1100px) { .site-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .site-grid { grid-template-columns: 1fr; } }
.site-card {
background: white;
border: 1px solid var(--color-hairline);
padding: 20px;
display: flex; flex-direction: column;
box-shadow: var(--shadow-hairline);
scroll-margin-top: 112px; /* room for pin click scroll */
transition: border-color 200ms, box-shadow 200ms;
}
.site-card.is-target {
border-color: var(--color-indigo);
box-shadow: 0 6px 22px rgba(0, 30, 90, 0.12);
}
.status-badge {
display: inline-block;
font-size: 10px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
background: var(--color-teal-soft);
color: var(--color-teal);
margin-bottom: 8px;
}
.status-badge.ongoing { background: var(--color-ember-soft); color: var(--color-ember); }
.status-badge.general { background: var(--color-bone); color: var(--color-stone); }
.site-card h4 {
font-size: 18px; font-weight: 700; color: var(--color-ink);
margin: 0 0 4px;
}
.site-addr {
font-size: 12px; color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
margin-bottom: 14px; line-height: 1.5;
}
.site-meta {
font-size: 13px; color: var(--color-cinder);
margin-bottom: 12px;
}
.site-meta .num {
font-size: 22px; font-weight: 800;
color: var(--color-ink);
font-family: 'IBM Plex Mono', monospace;
margin-right: 4px;
}
.site-cats {
margin-bottom: 14px;
}
.site-cats .cat-row {
display: flex; align-items: center; gap: 8px;
font-size: 11px; margin-bottom: 5px;
color: var(--color-cinder);
}
.site-cats .cat-label { flex: 0 0 108px; }
.site-cats .cat-track { flex: 1; height: 5px; background: var(--color-hairline); border-radius: 2px; overflow: hidden; }
.site-cats .cat-fill { height: 100%; background: var(--color-indigo); border-radius: 2px; }
.site-cats .cat-value {
flex: 0 0 28px; text-align: right;
font-family: 'IBM Plex Mono', monospace; font-weight: 700;
color: var(--color-ink);
}
.site-card.ongoing .cat-fill { background: var(--color-ember); }
.site-expand {
margin-top: auto;
padding: 10px 12px;
background: white;
border: 1px solid var(--color-hairline); border-radius: 4px;
font-size: 13px; font-weight: 600;
cursor: pointer;
font-family: inherit;
color: var(--color-ink);
transition: all 180ms;
}
.site-expand:hover { border-color: var(--color-indigo); color: var(--color-indigo); }
.site-statements {
margin-top: 14px;
border-top: 1px solid var(--color-hairline);
padding-top: 14px;
max-height: 460px;
overflow-y: auto;
}
/* Click-selected indicator — card stays at its grid position; the
detail panel below is what spans full row. */
.site-card.is-selected {
border-color: var(--color-indigo);
border-width: 2px;
box-shadow: 0 10px 28px rgba(79, 70, 229, 0.18);
position: relative;
z-index: 1;
}
.site-card.ongoing.is-selected {
border-color: var(--color-ember);
box-shadow: 0 10px 28px rgba(193, 53, 21, 0.18);
}
/* Detail panel — moved out of the card and inserted after the row's
last card so other cards in the same row stay in place. */
.site-statements.public-detail-active {
grid-column: 1 / -1;
background: white;
border: 1px solid var(--color-hairline);
border-top: 3px solid var(--color-indigo);
padding: 24px 28px;
margin: 4px 0 0;
max-height: none;
overflow: visible;
column-count: 2;
column-gap: 36px;
column-rule: 1px solid var(--color-hairline);
scroll-margin-top: 112px;
}
.site-statements.public-detail-active.ongoing { border-top-color: var(--color-ember); }
.site-statements.public-detail-active.general { border-top-color: var(--color-stone); }
.site-statements.public-detail-active .stmt-cat {
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
margin-bottom: 22px;
}
@media (max-width: 900px) {
.site-statements.public-detail-active {
column-count: 1;
column-rule: 0;
}
}
/* === Site panel — centered modal on desktop, gapped modal on mobile.
Frame design mirrors .cluster-panel: 1px hairline border, soft multi-
layer shadow, no accent top-bar (status is conveyed by the badge inside
the head), 8px corners. Backdrop is rendered on body::before. === */
.site-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(720px, calc(100vw - 32px));
max-height: 86vh;
z-index: 1000;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 8px;
padding: 28px 32px;
overflow-y: auto;
/* Same shadow profile as .cluster-panel (mobile modal variant) so both
panels read like siblings instead of two different design languages. */
box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45);
display: flex;
flex-direction: column;
}
.site-panel[hidden] { display: none; }
/* Backdrop + body-scroll lock when the modal is open. Uses the same
55% scrim opacity as the cluster panel scrim. */
body.site-panel-open { overflow: hidden; }
body.site-panel-open::before {
content: '';
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 999;
pointer-events: auto;
}
.site-panel-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
background: transparent;
border: none;
color: var(--color-stone);
font-size: 14px;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s ease, color 0.15s ease;
font-family: inherit;
z-index: 2;
}
.site-panel-close:hover {
background: var(--color-bone);
color: var(--color-ink);
}
.site-panel-head {
flex-shrink: 0;
margin-bottom: 18px;
padding-bottom: 16px;
padding-right: 56px;
border-bottom: 1px solid var(--color-hairline);
}
.site-panel-head .status-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
color: var(--color-indigo);
background: var(--color-indigo-soft, #EEF2FF);
letter-spacing: 0.08em;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.site-panel-head .status-badge.ongoing {
color: var(--color-ember);
background: rgba(193, 53, 21, 0.1);
}
.site-panel-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
margin: 0 0 8px;
color: var(--color-ink);
line-height: 1.2;
}
.site-panel-sub {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
font-size: 13px;
color: var(--color-stone);
align-items: center;
}
.site-panel-sub .site-panel-count .num {
color: var(--color-ink);
font-weight: 800;
font-family: 'IBM Plex Mono', monospace;
margin-right: 2px;
}
.site-panel-body {
flex: 1;
overflow-y: auto;
padding-right: 4px;
-webkit-overflow-scrolling: touch;
}
.site-panel-empty {
color: var(--color-stone);
font-size: 13px;
text-align: center;
padding: 24px 0;
margin: 0;
}
/* ----- Member cards (initial view) ----- */
.stmt-members {
display: flex;
flex-direction: column;
gap: 8px;
}
.stmt-member {
border: 1px solid var(--color-hairline);
border-radius: 6px;
background: white;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
}
.stmt-member.is-open {
border-color: var(--color-indigo);
box-shadow: 0 4px 14px -4px rgba(79, 70, 229, 0.2);
}
.stmt-member-head {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
width: 100%;
background: transparent;
border: 0;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.15s;
}
.stmt-member-head:hover { background: var(--color-bone); }
.stmt-member.is-open .stmt-member-head {
background: var(--color-indigo-soft, #EEF2FF);
}
.stmt-member-photo {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
flex-shrink: 0;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.stmt-member-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
}
/* Fallback: when image fails or no source, show the first character.
The data-initial attribute is set in JS. */
.stmt-member-photo::before {
content: attr(data-initial);
font-size: 18px;
font-weight: 800;
color: var(--color-slate);
font-family: 'Pretendard Variable', sans-serif;
}
.stmt-member-photo img {
z-index: 1;
}
.stmt-member-info {
flex: 1;
min-width: 0;
}
.stmt-member-name {
font-size: 15px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.01em;
line-height: 1.25;
}
.stmt-member-count {
font-size: 12px;
color: var(--color-stone);
margin-top: 3px;
}
.stmt-member-count .num {
color: var(--color-ink);
font-weight: 800;
font-family: 'IBM Plex Mono', monospace;
margin-right: 2px;
}
.stmt-member-toggle {
font-size: 12px;
color: var(--color-stone);
flex-shrink: 0;
transition: transform 0.2s;
}
.stmt-member.is-open .stmt-member-toggle {
transform: rotate(180deg);
color: var(--color-indigo);
}
.stmt-member-body {
border-top: 1px solid rgba(79, 70, 229, 0.15);
padding: 14px 16px 16px;
background: linear-gradient(180deg, rgba(79, 70, 229, 0.025) 0%, transparent 80%);
}
.stmt-member-body[hidden] { display: none; }
.stmt-occasion {
margin-bottom: 16px;
}
.stmt-occasion:last-child { margin-bottom: 0; }
.stmt-occasion-head {
font-size: 11px;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.stmt-occasion-head .committee {
color: var(--color-indigo-deep, #4338CA);
font-weight: 600;
}
.stmt-occasion-head .timing-pill {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
color: var(--color-stone);
background: var(--color-bone);
border: 1px solid var(--color-hairline);
border-radius: 999px;
letter-spacing: 0.02em;
font-family: 'Pretendard Variable', sans-serif;
vertical-align: 1px;
}
.stmt-occasion .stmt-quotes {
margin: 0;
padding-left: 20px;
font-size: 13.5px;
line-height: 1.65;
color: var(--color-ink);
}
.stmt-occasion .stmt-quotes li {
margin-bottom: 8px;
}
.stmt-occasion .stmt-quotes li:last-child { margin-bottom: 0; }
/* Active pin glow while modal is open */
.map-pin-svg.is-active .pin-circle {
filter: drop-shadow(0 0 0 3px rgba(79, 70, 229, 0.6)) drop-shadow(0 4px 10px rgba(79, 70, 229, 0.45));
transform: scale(1.1);
}
.map-pin-svg.is-active.ongoing .pin-circle {
filter: drop-shadow(0 0 0 3px rgba(193, 53, 21, 0.6)) drop-shadow(0 4px 10px rgba(193, 53, 21, 0.45));
}
/* === Expo timeline additions === */
/* Clickable year bubbles (both desktop .tl-node and mobile .tl-row-bubble
variants): subtle hover lift + indigo ring on active state */
.tl-node--clickable,
.tl-row-bubble--clickable {
border: 0;
padding: 0;
font-family: inherit;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tl-node--clickable:hover,
.tl-row-bubble--clickable:hover {
transform: translateX(-50%) scale(1.08);
box-shadow: 0 8px 22px -4px rgba(79, 70, 229, 0.35);
}
.tl-row-bubble--clickable:hover {
/* mobile row bubbles are not center-positioned, so don't add the X translate */
transform: scale(1.06);
}
.tl-node--clickable.is-active,
.tl-row-bubble--clickable.is-active {
box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.35), 0 6px 18px rgba(79, 70, 229, 0.45);
}
/* Mobile timeline: count bubbles pulse like the desktop line-graph dots
so it's obvious they're clickable. Filled indigo ripple behind the
bubble (z-index:-1 keeps the number crisp); diamond event markers do
NOT get this (they aren't .tl-row-bubble--clickable). */
.tl-row-bubble--clickable::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--color-indigo);
opacity: 0;
transform: scale(0.95);
pointer-events: none;
z-index: -1;
}
@keyframes tlBubblePulse {
0% { transform: scale(0.95); opacity: 0.45; }
70% { transform: scale(1.9); opacity: 0; }
100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
.tl-row-bubble--clickable::after {
animation: tlBubblePulse 2.4s ease-out 1.6s infinite;
}
/* Stagger so the rings don't fire in unison (rows 1/3/5/6 are the
clickable count bubbles; 2/4 are diamond event markers). */
.tl-row:nth-child(3) .tl-row-bubble--clickable::after { animation-delay: 1.9s; }
.tl-row:nth-child(5) .tl-row-bubble--clickable::after { animation-delay: 2.2s; }
.tl-row:nth-child(6) .tl-row-bubble--clickable::after { animation-delay: 2.5s; }
}
/* Event markers (BIE 실사단 방문, 결과 발표) — ember diamonds centered on
the axis line at bottom:100px so they read as point-in-time markers,
not aggregate bubbles. Not clickable (no statement data to show). */
.tl-node--event {
position: absolute;
bottom: 100px;
transform: translate(-50%, 50%) rotate(45deg);
background: var(--color-ember);
border-radius: 2px;
box-shadow: 0 4px 12px -2px rgba(193, 53, 21, 0.4), 0 0 0 3px white;
z-index: 2;
pointer-events: none; /* informational marker, not clickable */
}
.tl-node--event:hover {
/* keep the rotate even if .tl-node:hover would replace it */
transform: translate(-50%, 50%) rotate(45deg);
}
.tl-node--event.peak {
background: var(--color-ember);
box-shadow: 0 6px 18px -3px rgba(193, 53, 21, 0.55), 0 0 0 3px white;
}
/* Mobile event marker — small ember diamond, visually distinct from the
indigo year-aggregate circles so the user can tell at-a-glance which
bubbles are clickable (years) vs which are point-in-time event tags.
Diamond = border-radius 3px + rotate(45deg). */
.tl-row-marker {
background: var(--color-ember) !important;
border-radius: 3px !important;
transform: rotate(45deg);
box-shadow: 0 4px 10px -2px rgba(193, 53, 21, 0.4), 0 0 0 3px white !important;
}
.tl-row-bubble.event.peak.tl-row-marker {
/* Peak event (개최도시 결과 발표) gets a stronger ember glow */
box-shadow: 0 6px 18px -3px rgba(193, 53, 21, 0.6), 0 0 0 3px white !important;
}
/* Muted secondary text on mobile rows (e.g., '행감 11/2~14') */
.tl-row .muted-event {
border: 0;
background: transparent;
box-shadow: none;
color: var(--color-stone);
font-style: normal;
font-weight: 500;
font-size: 11px;
padding: 0;
margin: 0;
}
/* Annotation INSIDE the timeline card — 특이사항 footnote. Sits below the
timeline content (either the desktop horizontal axis or the mobile
vertical rail) with a subtle separator above. Stone text + leading *
so it reads as supplementary context, not a primary takeaway. */
.expo-timeline-note {
margin: 16px 0 0;
padding: 12px 0 0;
border-top: 1px dashed var(--color-hairline);
font-size: 13px;
line-height: 1.6;
color: var(--color-stone);
}
.expo-timeline-note .asterisk {
color: var(--color-stone);
font-weight: 700;
margin-right: 4px;
}
@media (max-width: 768px) {
.expo-timeline-note { font-size: 12px; margin-top: 14px; padding-top: 10px; }
}
/* Placeholder rep-speech card — same layout as the real one but greyed
out so the page reads as 'awaiting content from the editorial team'. */
.rep-speech-placeholder {
opacity: 0.85;
background: var(--color-bone);
}
.rep-speech-photo--placeholder {
width: 96px; height: 96px;
border-radius: 50%;
background: white;
border: 2px dashed var(--color-hairline);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
font-weight: 800;
color: var(--color-stone);
flex-shrink: 0;
}
.rep-speech-placeholder .quote {
color: var(--color-stone);
font-style: italic;
}
.rep-speech-placeholder .rep-context-toggle[disabled],
.rep-speech-placeholder .video-toggle[disabled] {
opacity: 0.6;
cursor: not-allowed;
}
@media (max-width: 768px) {
.rep-speech-photo--placeholder { width: 72px; height: 72px; font-size: 26px; }
}
/* Mobile: gapped modal that mirrors .cluster-panel's mobile sizing —
~12px margin around with the same scale-up open animation. */
@media (max-width: 768px) {
.site-panel {
width: calc(100vw - 24px);
height: calc(100vh - 80px);
max-width: none;
max-height: none;
padding: 22px 18px;
/* Keep 8px corners + same shadow + scale-up transition as desktop. */
}
.site-panel-close {
width: 44px;
height: 44px;
font-size: 20px;
top: 8px;
right: 8px;
}
.site-panel-title { font-size: 22px; }
.stmt-member-head { padding: 10px 12px; gap: 12px; }
.stmt-member-photo { width: 44px; height: 44px; }
.stmt-member-name { font-size: 14px; }
}
.stmt-cat {
margin-bottom: 24px;
break-inside: avoid-column;
-webkit-column-break-inside: avoid;
}
.stmt-cat-h, .stmt-cat h5 {
font-size: 14px; font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.01em; text-transform: none;
margin: 0 0 14px;
padding-bottom: 7px;
border-bottom: 2px solid var(--color-ink);
display: flex; align-items: baseline; gap: 8px;
}
.stmt-cat-h .num, .stmt-cat h5 .num {
color: var(--color-indigo);
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
font-size: 12px;
}
/* Group: one speaker / meeting / timing block holding 1+ quotes */
.stmt-group {
margin: 0 0 14px;
padding: 10px 0 10px 14px;
border-left: 2px solid var(--color-hairline);
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.stmt-group:last-child { margin-bottom: 0; }
.stmt-group-head {
display: flex; flex-wrap: wrap;
gap: 6px 10px;
align-items: baseline;
margin-bottom: 7px;
font-size: 11px;
color: var(--color-stone);
line-height: 1.4;
}
.stmt-group-head .speaker {
color: var(--color-ink);
font-weight: 800;
font-size: 12px;
letter-spacing: -0.01em;
}
.stmt-group-head .speaker.muted {
color: var(--color-slate);
font-weight: 600;
font-style: italic;
}
.stmt-group-head .timing {
background: var(--color-bone);
color: var(--color-cinder);
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.stmt-group-head .committee {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
color: var(--color-stone);
}
.stmt-group-head .group-count {
margin-left: auto;
font-size: 10px;
color: var(--color-slate);
font-weight: 600;
}
.stmt-quotes {
list-style: none;
margin: 0;
padding: 0;
counter-reset: q;
}
.stmt-quotes li {
position: relative;
padding: 6px 0 6px 26px;
font-size: 13px;
line-height: 1.65;
color: var(--color-cinder);
border-top: 1px dotted var(--color-hairline);
counter-increment: q;
}
.stmt-quotes li:first-child { border-top: 0; padding-top: 2px; }
.stmt-quotes li::before {
content: counter(q);
position: absolute;
left: 0; top: 7px;
width: 18px; text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
color: var(--color-slate);
font-weight: 700;
}
.site-card-general {
margin-top: 16px;
background: var(--color-bone);
}
.site-card-general .site-addr { font-style: italic; }
/* 의원 디테일 */
.subpage-marker {
display: inline-block;
background: var(--color-bone);
border: 1px dashed var(--color-stone);
color: var(--color-stone);
padding: 8px 14px;
font-size: 12px; letter-spacing: 0.04em;
margin-bottom: 24px;
}
.member-detail {
display: grid;
grid-template-columns: 140px 1fr;
gap: 32px;
padding: 32px;
border: 1px solid var(--color-hairline);
background: white;
box-shadow: var(--shadow-hairline);
align-items: start;
}
@media (max-width: 600px) {
.member-detail { grid-template-columns: 100px 1fr; gap: 20px; padding: 24px; }
}
.member-photo {
width: 140px; height: 140px;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
display: flex; align-items: center; justify-content: center;
color: var(--color-slate); font-size: 12px;
border-radius: 50%;
}
@media (max-width: 600px) { .member-photo { width: 100px; height: 100px; } }
.member-info h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.member-info .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.rank-badge {
display: inline-block;
background: var(--color-indigo);
color: white;
padding: 6px 14px;
font-size: 14px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
border-radius: 4px;
}
/* Inside the indigo rank badge, the tier colors (ember/amber/teal) become
unreadable. Force everything to white. Higher specificity (0,2,0) +
!important beats the global [data-score-tier] rules. */
.rank-badge [data-score-tier] { color: white !important; }
.pin-note {
color: var(--color-stone); font-size: 14px; margin: 16px 0 24px;
}
.pin-note::before { content: "📌 "; }
/* Score card */
.score-card {
border: 1px solid var(--color-hairline);
padding: 28px;
margin-top: 24px;
background: white;
box-shadow: var(--shadow-hairline);
}
.score-card-head {
display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 24px;
padding-bottom: 16px; border-bottom: 1px solid var(--color-hairline);
}
.score-card-head > div { flex: 1; min-width: 180px; }
.score-card-head .label {
font-size: 11px; color: var(--color-stone);
font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.score-card-head .value { font-size: 16px; font-weight: 700; color: var(--color-ink); margin-top: 4px; }
.score-bar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.score-label {
flex: 0 0 110px;
font-size: 13px; color: var(--color-cinder);
font-weight: 500;
}
.score-track {
flex: 1; height: 14px;
background: var(--color-bone);
}
.score-fill {
height: 100%; background: var(--color-indigo);
transition: width 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.score-fill.teal { background: var(--color-teal); }
.score-fill.slate { background: var(--color-slate); }
.score-value {
flex: 0 0 40px; text-align: right;
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
font-weight: 700; font-size: 14px;
color: var(--color-ink);
}
/* Session bar chart (의원 디테일) */
.session-chart {
display: flex; gap: 20px; align-items: flex-end;
height: 220px; padding: 32px 24px 32px;
border: 1px solid var(--color-hairline);
background: var(--color-bone);
margin-top: 20px;
}
.session-bar {
flex: 1; background: var(--color-indigo);
position: relative;
transition: height 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.session-bar-value {
position: absolute; top: -24px; left: 0; right: 0;
text-align: center; font-size: 12px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
color: var(--color-ink);
}
.session-bar-label {
position: absolute; bottom: -24px; left: 0; right: 0;
text-align: center; font-size: 12px;
color: var(--color-stone);
}
.member-analysis {
background: var(--color-indigo-soft);
border-left: 3px solid var(--color-indigo);
padding: 20px 24px;
margin-top: 24px;
font-size: 16px; line-height: 1.75;
color: var(--color-cinder);
font-weight: 300;
}
.agenda-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
/* News (Page 5) — simplified: 보도 영상 grid + 뉴스 기사 list.
Title styling now lives on the standard .page-header h2 (centered).
.reporters sits below as a left-aligned card grid. */
.page-header + .reporters { margin-top: 0; }
/* Reporters row — sits under the page hero, replaces the old descriptive paragraph */
.reporters {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 40px 0 56px;
max-width: 760px;
}
@media (max-width: 700px) {
.reporters { grid-template-columns: 1fr; }
}
.reporter {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 6px;
color: inherit;
}
.reporter-photo {
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
border: 1px solid var(--color-hairline);
flex-shrink: 0;
}
.reporter-info { flex: 1; min-width: 0; }
.reporter-role {
font-size: 10px;
font-weight: 700;
color: var(--color-stone);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 4px;
}
.reporter-name {
font-size: 16px;
font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.01em;
margin-bottom: 5px;
line-height: 1.2;
}
.reporter-title {
display: inline-block;
font-size: 11px;
font-weight: 600;
color: var(--color-stone);
margin-left: 4px;
letter-spacing: 0;
}
.reporter-contact {
display: flex;
flex-wrap: wrap;
gap: 2px 12px;
font-size: 11px;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
}
.reporter-contact strong {
color: var(--color-ink);
font-weight: 600;
}
/* Category filter chips */
.press-filters {
display: flex; flex-wrap: wrap;
gap: 8px;
margin: 18px 0 26px;
}
.press-filter {
padding: 8px 18px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 999px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: var(--color-stone);
cursor: pointer;
transition: color 180ms, border-color 180ms, background 180ms;
}
.press-filter:hover {
color: var(--color-indigo);
border-color: var(--color-indigo);
}
.press-filter.active {
background: var(--color-indigo);
border-color: var(--color-indigo);
color: white;
}
/* 보도 영상 3-col grid */
.video-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }
.video-card {
background: white;
border: 1px solid var(--color-hairline);
border-radius: 6px;
overflow: hidden;
display: flex; flex-direction: column;
cursor: pointer;
transition: transform 200ms, border-color 200ms, box-shadow 200ms;
}
.video-card.is-hidden { display: none; }
.video-card:hover {
transform: translateY(-3px);
border-color: var(--color-indigo);
box-shadow: 0 10px 26px -6px rgba(79, 70, 229, 0.20);
}
.video-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
position: relative;
}
.video-thumb::after {
content: "▶";
position: absolute;
inset: 0;
display: flex; align-items: center; justify-content: center;
color: white; font-size: 38px;
opacity: 0.85;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.video-thumb.alt-1 { background: linear-gradient(135deg, #C2410C 0%, #FB923C 100%); }
.video-thumb.alt-2 { background: linear-gradient(135deg, #0F766E 0%, #5EEAD4 100%); }
.video-thumb.alt-3 { background: linear-gradient(135deg, #3730A3 0%, #6366F1 100%); }
.video-thumb.alt-4 { background: linear-gradient(135deg, #B45309 0%, #FCD34D 100%); }
.video-body {
padding: 14px 16px 16px;
display: flex; flex-direction: column;
gap: 8px;
flex: 1;
}
.video-cat {
display: inline-block;
align-self: flex-start;
font-size: 10px; font-weight: 700;
padding: 2px 9px;
border-radius: 999px;
background: var(--color-indigo-soft);
color: var(--color-indigo);
letter-spacing: 0.04em;
}
.video-cat.expo { background: var(--color-ember-soft); color: var(--color-ember); }
.video-cat.public { background: var(--color-teal-soft); color: var(--color-teal); }
.video-cat.general { background: var(--color-bone); color: var(--color-stone); }
.video-card h4 {
font-size: 15px; font-weight: 700;
color: var(--color-ink);
line-height: 1.45;
margin: 0;
letter-spacing: -0.01em;
}
.video-meta {
font-size: 11px;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
margin-top: auto;
padding-top: 4px;
}
/* 뉴스 기사 — horizontal row list */
.article-list {
display: flex; flex-direction: column;
border-top: 1px solid var(--color-hairline);
}
.article-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid var(--color-hairline);
align-items: center;
cursor: pointer;
transition: background 180ms;
}
.article-row:hover { background: var(--color-bone); padding-left: 8px; padding-right: 8px; }
.article-thumb {
width: 180px;
aspect-ratio: 4 / 3;
border-radius: 4px;
background: linear-gradient(135deg, #4F46E5 0%, #818CF8 100%);
}
.article-thumb.alt-1 { background: linear-gradient(135deg, #C2410C 0%, #FB923C 100%); }
.article-thumb.alt-2 { background: linear-gradient(135deg, #0F766E 0%, #5EEAD4 100%); }
.article-thumb.alt-3 { background: linear-gradient(135deg, #3730A3 0%, #6366F1 100%); }
.article-content { min-width: 0; }
.article-source {
font-size: 11px; font-weight: 700;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.article-row h4 {
font-size: 18px; font-weight: 700;
color: var(--color-ink);
line-height: 1.4;
margin: 0 0 8px;
letter-spacing: -0.01em;
}
.article-row p {
font-size: 13px;
color: var(--color-cinder);
line-height: 1.65;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 600px) {
.article-row {
grid-template-columns: 96px 1fr;
gap: 14px;
padding: 16px 0;
}
.article-thumb { width: 96px; }
.article-row h4 { font-size: 15px; }
.article-row p { font-size: 12px; -webkit-line-clamp: 3; }
}
/* Footer */
footer {
border-top: 0;
background: var(--color-ink);
color: rgba(255, 255, 255, 0.72);
margin-top: 96px;
}
/* Next-page CTA — injected by nav.js, sits ABOVE the footer (in flow,
never overlaps it) and floats up when scrolled into view. */
.next-cta-wrap {
display: flex;
justify-content: center;
padding: 8px 24px 4px;
opacity: 0;
transform: translateY(22px);
transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.next-cta-wrap.is-visible {
opacity: 1;
transform: none;
}
.next-page-cta {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 30px;
background: var(--color-indigo);
color: #fff;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 14px 34px -12px rgba(79, 70, 229, 0.5);
transition: background 180ms, transform 180ms, box-shadow 180ms;
}
.next-page-cta:hover {
background: var(--color-indigo-deep);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 18px 40px -12px rgba(79, 70, 229, 0.55);
}
.next-page-cta .npc-title {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.next-page-cta .npc-arrow {
font-family: 'IBM Plex Mono', monospace;
font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
.next-cta-wrap { transition: opacity 240ms ease; transform: none; }
}
@media (max-width: 768px) {
.next-cta-wrap { padding: 4px 18px; }
.next-page-cta { padding: 14px 24px; gap: 10px; }
.next-page-cta .npc-title { font-size: 15px; }
}
.footer-inner {
max-width: var(--page-max);
margin: 0 auto;
padding: 36px 24px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 24px 40px;
flex-wrap: wrap;
}
.footer-partners {
display: flex;
align-items: center;
gap: 12px 28px;
flex-wrap: wrap;
}
.footer-partner-label + .footer-partner { margin-left: -12px; }
.footer-partner + .footer-partner-label { margin-left: 8px; }
.footer-partner-label {
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
}
.footer-partner-text {
color: rgba(255, 255, 255, 0.92);
font-weight: 700;
}
.footer-partner {
display: inline-flex;
align-items: center;
text-decoration: none;
color: rgba(255, 255, 255, 0.92);
transition: opacity 0.15s ease;
}
.footer-partner:hover { opacity: 0.7; }
.footer-partner img { display: block; width: auto; }
.footer-partner img.busan-mbc-logo { height: 54px; }
/* Logo PNG is dark on transparent — invert + brighten so it renders
solid white over the new black footer background. */
.footer-partner img.tk-logo {
height: 28px;
filter: brightness(0) invert(1);
opacity: 0.92;
}
.footer-partner img.logo-img--mbc {
filter: brightness(0) invert(1);
opacity: 0.92;
}
.footer-contacts {
display: flex;
gap: 6px 24px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
align-items: center;
}
.footer-contact-item {
white-space: nowrap;
letter-spacing: 0.01em;
}
.footer-contact-item a {
color: #C7CCFF;
text-decoration: none;
font-weight: 500;
margin-left: 4px;
transition: color 0.15s ease;
}
.footer-contact-item a:hover {
color: #fff;
text-decoration: underline;
}
@media (max-width: 768px) {
/* Mobile footer: everything in a single left-aligned column.
Partners and contacts also stack rather than wrapping inline. */
.footer-inner {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 18px 0;
}
.footer-partners {
flex-direction: column;
align-items: flex-start;
gap: 8px 0;
}
.footer-partner-label + .footer-partner,
.footer-partner + .footer-partner-label { margin-left: 0; }
.footer-contacts {
flex-direction: column;
align-items: flex-start;
gap: 6px 0;
font-size: 12px;
}
}
.footer-brand { font-size: 14px; color: var(--color-stone); line-height: 1.7; }
.footer-brand strong { color: var(--color-ink); display: block; margin-bottom: 6px; font-size: 15px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.footer-links a { font-size: 14px; color: var(--color-indigo); }
/* Hamburger button — hidden on desktop, shown on mobile */
.nav-toggle {
display: none;
width: 44px; height: 44px;
background: transparent;
border: 0;
cursor: pointer;
position: relative;
z-index: 102;
padding: 0;
margin: 0;
align-self: center;
/* Kill iOS 300ms tap delay + the grey tap highlight */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
appearance: none;
-webkit-appearance: none;
outline: none;
font: inherit;
}
.nav-toggle span {
position: absolute;
left: 10px; right: 10px;
height: 2px;
background: var(--color-ink);
border-radius: 1px;
transition: transform 220ms ease, opacity 180ms ease, top 220ms ease;
pointer-events: none;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
body.nav-open { overflow: hidden; }
/* Mobile */
@media (max-width: 768px) {
/* CRITICAL: ANY of backdrop-filter / transform / filter on .topnav
would create a new containing block for the position:fixed mobile
menu, clamping it to the navbar's 56px height. Drop both on mobile
and switch from transform-centered to left/right edges so the
hamburger overlay covers the full viewport like it should. */
.topnav {
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(255, 255, 255, 0.92);
top: 10px;
left: 10px;
right: 10px;
width: auto;
transform: none;
border-radius: 18px;
}
body { padding-top: 76px; }
.nav-toggle { display: block; }
/* Full-screen overlay menu */
.nav-links {
position: fixed;
inset: 0;
z-index: 101;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 0;
background: white;
padding: 80px 0 32px;
border-radius: 0;
transform: translateY(-100%);
transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
visibility: hidden;
overflow-y: auto;
}
.nav-links.is-open {
transform: translateY(0);
visibility: visible;
}
.nav-links a {
display: flex;
align-items: center;
width: 100%;
height: auto;
padding: 18px 28px;
font-size: 20px;
font-weight: 600;
color: var(--color-ink);
border-radius: 0;
background: transparent;
border-bottom: 1px solid var(--color-bone);
border-left: 3px solid transparent;
margin-bottom: 0;
}
.nav-links a.active {
color: var(--color-indigo);
background: var(--color-indigo-soft);
border-bottom-color: var(--color-bone);
border-left-color: var(--color-indigo);
}
/* Shrink the long logo text so the hamburger has room */
.topnav-inner { height: 56px; }
.logo {
max-width: calc(100vw - 88px);
overflow: hidden;
white-space: nowrap;
}
.logo-img--mbc { height: 44px; }
.page { padding: 32px 20px 80px; }
.counter-row { grid-template-columns: 1fr 1fr; gap: 24px; padding: 32px 0 40px; }
.section-h { margin-top: 64px; }
.speech-list-row { flex-wrap: wrap; gap: 8px; }
.col-tags { flex: 0 0 100%; }
.col-quote { flex: 0 0 100%; font-size: 13px; }
.col-meta, .col-video { flex: 1; font-size: 11px; }
.ranking-table { font-size: 12px; }
.ranking-table th, .ranking-table td { padding: 10px 8px; }
}
/* Committee comparison (종합) */
.committee-comparison {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.committee-comparison { grid-template-columns: 1fr; }
}
.comp-panel {
border: 1px solid var(--color-hairline);
padding: 20px 22px;
background: white;
box-shadow: var(--shadow-hairline);
}
.comp-panel-head {
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--color-hairline);
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
}
.comp-metric {
font-size: 16px;
font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.01em;
}
.comp-unit {
font-size: 11px;
color: var(--color-stone);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.comp-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--color-bone);
}
.comp-row:last-child { border-bottom: 0; }
.comp-name {
flex: 0 0 80px;
font-size: 13px;
color: var(--color-ink);
font-weight: 500;
}
.comp-track {
flex: 1;
height: 8px;
background: var(--color-bone);
}
.comp-fill {
height: 100%;
background: var(--color-indigo);
transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.comp-fill.ember { background: var(--color-ember); }
.comp-fill.teal { background: var(--color-teal); }
.comp-value {
flex: 0 0 56px;
text-align: right;
font-size: 12px;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
color: var(--color-ink);
}
/* Committee synthesis (통합 분석문) */
.committee-synthesis {
background: var(--color-indigo-soft);
border-left: 3px solid var(--color-indigo);
padding: 28px 32px;
}
.committee-synthesis .label {
display: inline-block;
font-size: 12px;
color: var(--color-indigo-deep);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.committee-synthesis p {
font-size: 16px;
line-height: 1.75;
color: var(--color-cinder);
margin-bottom: 14px;
font-weight: 300;
}
.committee-synthesis p:last-child { margin-bottom: 0; }
.committee-synthesis strong {
color: var(--color-ink);
font-weight: 700;
}
/* Key findings */
.key-findings {
background: white;
border: 1px solid var(--color-hairline);
padding: 24px 28px;
margin-top: 16px;
box-shadow: var(--shadow-hairline);
}
.key-findings h4 {
font-size: 12px;
color: var(--color-stone);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 14px;
}
.key-findings ul {
list-style: none;
padding: 0;
margin: 0;
}
.key-findings li {
font-size: 15px;
line-height: 1.6;
color: var(--color-cinder);
padding: 10px 0;
border-bottom: 1px solid var(--color-bone);
position: relative;
padding-left: 24px;
}
.key-findings li:last-child { border-bottom: 0; }
.key-findings li::before {
content: "→";
position: absolute;
left: 0;
top: 10px;
color: var(--color-indigo);
font-weight: 700;
}
.key-findings li strong {
color: var(--color-ink);
font-weight: 700;
}
.key-findings li .num {
color: var(--color-indigo);
font-weight: 700;
}
/* Member Directory (HOME 47명 카드 그리드) */
.directory-section {
max-width: var(--page-max);
margin: 64px auto 0;
padding: 0 24px;
}
.directory-header {
text-align: center;
margin-bottom: 32px;
}
.directory-header .eyebrow { display: inline-block; margin-bottom: 12px; }
.directory-header h2 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 900;
letter-spacing: -0.03em;
margin-bottom: 12px;
line-height: 1.1;
}
.directory-header p { color: var(--color-stone); font-size: 15px; }
.directory-filter {
margin-bottom: 28px;
padding: 24px 0;
border-top: 1px solid var(--color-hairline);
border-bottom: 1px solid var(--color-hairline);
}
/* Unified search bar: icon · input · divider · region · party */
.directory-searchbar {
display: flex;
align-items: stretch;
width: 100%;
border: 2px solid var(--color-hairline);
background: white;
transition: border-color 160ms;
}
.directory-searchbar:focus-within { border-color: var(--color-indigo); }
.directory-search-icon {
flex: 0 0 auto;
align-self: center;
width: 24px;
height: 24px;
margin: 0 4px 0 26px;
color: var(--color-stone);
pointer-events: none;
}
.directory-searchbar input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: none;
padding: 22px 22px;
font-family: inherit; font-size: 21px; font-weight: 600;
color: var(--color-ink);
background: transparent;
}
.directory-searchbar input::placeholder {
color: var(--color-stone);
font-size: 19px;
font-weight: 500;
}
.directory-bar-sep {
flex: 0 0 1px;
align-self: stretch;
margin: 12px 0;
background: var(--color-hairline);
}
.directory-searchbar select {
flex: 0 0 auto;
border: 0;
border-radius: 0;
padding: 0 42px 0 20px;
background: transparent;
font-family: inherit; font-size: 15px; font-weight: 500;
color: var(--color-ink);
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 18px center;
}
.directory-searchbar select + select { border-left: 1px solid var(--color-hairline); }
.directory-searchbar select:focus { outline: none; background-color: var(--color-indigo-soft); }
/* Mobile: icon + input stay on one row; the two filters wrap below,
each full-width.
CRITICAL: the input must be flex-basis:0 (flex:1 1 0). With
flex-basis:auto, flex-wrap breaks lines using the input's intrinsic
~20ch width (large on iOS Safari) and pushes it to its own row,
orphaning the icon. flex-basis:0 makes the wrap calc see width 0 so
icon+input always share row 1, then grow fills the space. */
@media (max-width: 768px) {
.directory-searchbar { flex-wrap: wrap; align-items: center; }
.directory-search-icon { margin: 0 2px 0 18px; width: 20px; height: 20px; }
.directory-searchbar input {
flex: 1 1 70%;
min-width: 0;
width: auto;
padding: 18px 14px;
font-size: 18px;
}
.directory-bar-sep { display: none; }
.directory-searchbar select {
flex: 1 1 50%;
min-width: 0;
padding: 15px 14px 15px 16px;
font-size: 15px;
border-top: 1px solid var(--color-hairline);
border-left: 0;
}
.directory-searchbar select + select { border-left: 1px solid var(--color-hairline); }
}
.directory-count {
margin-left: auto;
font-size: 13px;
color: var(--color-stone);
white-space: nowrap;
}
.directory-count .num { font-weight: 700; color: var(--color-ink); }
.directory-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 900px) { .directory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .directory-grid { grid-template-columns: 1fr; } }
.dir-card {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 22px;
background: white;
border: 1px solid var(--color-hairline);
cursor: pointer;
transition: all 180ms;
position: relative;
}
/* Result cards stagger in when the search renders (delay set inline
per card in render()). backwards fill keeps them hidden until their
turn; reduced-motion users get them instantly. */
@media (prefers-reduced-motion: no-preference) {
.dir-card {
animation: dirCardIn 380ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes dirCardIn {
from { opacity: 0; transform: translateY(11px); }
to { opacity: 1; transform: none; }
}
}
.dir-card:hover {
border-color: var(--color-indigo);
background: var(--color-indigo-soft);
transform: translateY(-1px);
box-shadow: 0 4px 10px -2px rgba(79, 70, 229, 0.18);
}
.dir-card.is-selected {
border-color: var(--color-indigo);
border-width: 2px;
background: var(--color-indigo-soft);
box-shadow: 0 6px 16px -3px rgba(79, 70, 229, 0.28);
position: relative;
z-index: 1;
}
.dir-card .photo {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 9px; color: var(--color-slate);
}
.dir-card .body { flex: 1; min-width: 0; }
.dir-card .name {
font-size: 16px; font-weight: 700;
color: var(--color-ink);
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dir-card .meta {
font-size: 13px;
color: var(--color-stone);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dir-card .score {
flex-shrink: 0;
text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
}
.dir-card .rank {
font-size: 10px;
color: var(--color-slate);
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.dir-card .num {
font-size: 16px;
font-weight: 700;
color: var(--color-indigo);
line-height: 1;
}
.dir-empty {
grid-column: 1 / -1;
text-align: center;
padding: 64px 24px;
color: var(--color-stone);
font-size: 14px;
border: 1px dashed var(--color-hairline);
}
.dir-empty--initial {
font-size: 16px;
padding: 80px 24px;
border: none;
color: var(--color-stone);
opacity: 0.7;
}
/* Idle-state member face marquee */
.dir-marquee {
grid-column: 1 / -1;
overflow: hidden;
padding: 40px 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dir-marquee-track {
display: flex;
gap: 22px;
width: max-content;
animation: dirMq 55s linear infinite;
}
.dir-marquee:hover .dir-marquee-track { animation-play-state: paused; }
@keyframes dirMq {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.dir-mq-item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
.dir-mq-item img {
width: 66px;
height: 66px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
border: 2px solid var(--color-hairline);
background: var(--color-bone);
transition: border-color 160ms, transform 160ms;
}
.dir-mq-item:hover img {
border-color: var(--color-indigo);
transform: scale(1.07);
}
.dir-mq-name {
font-size: 12px;
font-weight: 600;
color: var(--color-stone);
}
.dir-mq-item:hover .dir-mq-name { color: var(--color-indigo); }
@media (prefers-reduced-motion: reduce) {
.dir-marquee {
-webkit-mask-image: none;
mask-image: none;
}
.dir-marquee-track {
animation: none;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 18px 22px;
}
}
@media (max-width: 768px) {
.dir-marquee { padding: 28px 0; }
.dir-mq-item img { width: 54px; height: 54px; }
.dir-mq-name { font-size: 11px; }
}
/* Directory view toggle (Card / Table) */
.directory-view-toggle {
display: inline-flex;
border: 1px solid var(--color-hairline);
border-radius: 4px;
overflow: hidden;
margin-left: auto;
}
.view-btn {
padding: 8px 16px;
background: white;
border: 0;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--color-stone);
cursor: pointer;
transition: all 150ms;
border-right: 1px solid var(--color-hairline);
}
.view-btn:last-child { border-right: 0; }
.view-btn:hover { color: var(--color-indigo); }
.view-btn.active {
background: var(--color-indigo);
color: white;
font-weight: 700;
}
/* Directory table (combined ranking) */
.directory-table {
border: 1px solid var(--color-hairline);
background: white;
overflow-x: auto;
}
.directory-table table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.directory-table th {
background: var(--color-bone);
padding: 12px 14px;
text-align: left;
font-size: 11px;
font-weight: 700;
color: var(--color-stone);
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid var(--color-hairline);
white-space: nowrap;
cursor: pointer;
user-select: none;
}
.directory-table th:hover { background: var(--color-indigo-soft); color: var(--color-indigo); }
.directory-table td {
padding: 12px 14px;
border-bottom: 1px solid var(--color-bone);
}
.directory-table tbody tr {
cursor: pointer;
transition: background 120ms;
}
.directory-table tbody tr:hover td { background: var(--color-indigo-soft); }
.directory-table .num-cell {
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
color: var(--color-stone);
}
.directory-table .num-cell.bold { font-weight: 700; color: var(--color-ink); }
.directory-table .num-cell.indigo { color: var(--color-indigo); font-weight: 700; }
.directory-table .partial-tag {
display: inline-block;
font-size: 9px;
color: var(--color-stone);
border: 1px solid var(--color-hairline);
padding: 1px 4px;
margin-left: 6px;
border-radius: 2px;
font-weight: 500;
vertical-align: middle;
}
/* Member photos — circle, face-focused */
img.photo {
width: 56px; height: 56px;
object-fit: cover;
object-position: center 25%;
border-radius: 50%;
border: 1px solid var(--color-hairline);
display: block;
flex-shrink: 0;
background: var(--color-bone);
}
img.member-photo {
width: 140px; height: 140px;
object-fit: cover;
object-position: center 22%;
border-radius: 50%;
border: 1px solid var(--color-hairline);
display: block;
background: var(--color-bone);
}
@media (max-width: 600px) {
img.member-photo { width: 100px; height: 100px; }
}
img.avatar {
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid var(--color-hairline);
object-fit: cover;
object-position: center 25%;
flex-shrink: 0;
background: var(--color-bone);
}
/* Overlay support */
.bar-row { min-height: 38px; padding: 12px 0; }
/* Committee v3 cards — 종합 데이터 위주 + horizontal member list */
.cmt-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.cmt-card {
border: 1px solid var(--color-hairline);
background: white;
box-shadow: var(--shadow-hairline);
}
.cmt-card-head {
padding: 24px 28px 20px;
border-bottom: 1px solid var(--color-hairline);
display: flex;
align-items: flex-start;
gap: 16px;
}
.cmt-rank {
flex: 0 0 auto;
font-size: 14px;
font-weight: 800;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
line-height: 1.3;
}
.cmt-head-text { flex: 1 1 auto; min-width: 0; }
.cmt-card-head h3 {
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-ink);
margin-bottom: 6px;
}
.cmt-card-head .stats {
font-size: 13px;
color: var(--color-stone);
}
.cmt-card-head .stats .num {
color: var(--color-ink);
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
}
/* Big committee bar */
.cmt-bar-section {
padding: 24px 28px;
border-bottom: 1px solid var(--color-hairline);
}
.cmt-bar-label {
font-size: 12px;
font-weight: 700;
color: var(--color-stone);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 12px;
}
.cmt-bar-track {
height: 28px;
background: var(--color-bone);
position: relative;
margin-bottom: 10px;
}
.cmt-bar-fill-total {
position: absolute; top: 0; left: 0;
height: 100%;
background: var(--color-indigo);
opacity: 0.32;
}
.cmt-bar-fill-meaningful {
position: absolute; top: 0; left: 0;
height: 100%;
background: var(--color-indigo);
}
/* Fill-on-reveal for committee bars (one trigger → cascade) */
@media (prefers-reduced-motion: no-preference) {
#committee-cards.cmt-anim .cmt-bar-fill-total,
#committee-cards.cmt-anim .cmt-bar-fill-meaningful {
transform: scaleX(0);
transform-origin: left center;
}
#committee-cards.cmt-anim.is-revealed .cmt-bar-fill-total,
#committee-cards.cmt-anim.is-revealed .cmt-bar-fill-meaningful {
transform: scaleX(1);
transition: transform 750ms cubic-bezier(0.22,1,0.36,1);
transition-delay: var(--row-delay, 0ms);
}
}
.cmt-bar-numbers {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
}
.cmt-bar-numbers .meaningful-num {
font-family: 'IBM Plex Mono', monospace;
font-weight: 700;
color: var(--color-indigo);
font-size: 17px;
letter-spacing: -0.02em;
}
.cmt-bar-numbers .meaningful-num .pct {
color: var(--color-stone);
font-size: 12px;
font-weight: 500;
margin-left: 6px;
}
.cmt-bar-numbers .total-num {
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
}
.cmt-bar-numbers .total-num .label {
color: var(--color-slate);
font-weight: 500;
margin-right: 4px;
}
/* Horizontal member list */
.cmt-members-section {
padding: 20px 28px 24px;
border-bottom: 1px solid var(--color-hairline);
}
.cmt-members-list {
display: flex;
flex-wrap: wrap;
gap: 12px 14px;
}
.cmt-member-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
color: var(--color-ink);
}
.cmt-member-chip img, .cmt-member-chip .ph {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
object-position: center 25%;
border: 1px solid var(--color-hairline);
background: var(--color-bone);
display: block;
}
.cmt-member-chip .ph {
display: flex; align-items: center; justify-content: center;
font-size: 9px; color: var(--color-slate);
}
.cmt-member-chip .name {
font-size: 11px;
color: var(--color-cinder);
font-weight: 500;
}
/* Analysis placeholder */
.cmt-analysis {
background: var(--color-indigo-soft);
padding: 20px 28px;
}
.cmt-analysis .label {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--color-indigo-deep);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
.cmt-analysis .placeholder {
font-style: italic;
color: var(--color-stone);
font-size: 14px;
line-height: 1.7;
}
/* 의원 종합 점수 — Podium + List */
.composite-section {
margin-top: 96px;
}
.podium-grid {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 16px;
align-items: end;
margin-bottom: 32px;
}
@media (max-width: 700px) {
/* On mobile the Olympic-stadium podium is dropped entirely — ranks 1·2·3
show up as regular composite-rows inside #composite-list-4-10 alongside
ranks 4-10 (renderJS now slices [0, 10) instead of [3, 10)). Hiding the
podium also kills the wasted space its three-card grid would take. */
#podium-top3 { display: none; }
}
/* Desktop / tablet: ranks 1-3 are shown in the podium, so the duplicate
composite-rows at the top of #composite-list-4-10 must be hidden. The
@media min-width: 701 pairs with the @media max-width: 700 above to keep
the breakpoint single-source. */
@media (min-width: 701px) {
#composite-list-4-10 .composite-row[data-rank="1"],
#composite-list-4-10 .composite-row[data-rank="2"],
#composite-list-4-10 .composite-row[data-rank="3"] {
display: none;
}
}
.podium-card {
background: white;
border: 1px solid var(--color-hairline);
padding: 28px 24px;
text-align: center;
position: relative;
transition: transform 200ms;
cursor: pointer;
box-shadow: var(--shadow-hairline);
}
.podium-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(79,70,229,0.18); }
.podium-card.first {
/* Visual emphasis stays via the gradient and larger inner spacing.
The selected-state border is only applied on click via .is-selected. */
background: linear-gradient(180deg, #FAF7FF 0%, #FFFFFF 60%);
padding: 36px 24px;
}
.podium-card.is-selected,
.podium-card.first.is-selected {
border-color: var(--color-indigo);
border-width: 2px;
box-shadow: 0 12px 30px -6px rgba(79, 70, 229, 0.28);
}
.composite-row.is-selected {
background: var(--color-indigo-soft);
box-shadow: inset 3px 0 0 var(--color-indigo);
}
/* Tier coloring for all 종합 점수 displays — low / mid / high.
Thresholds (on the 0–100 scale): low < 40, mid 40–64, high ≥ 65.
!important so we override the per-element default colors
(e.g., podium-card.first .podium-score-big uses indigo-deep). */
[data-score-tier="low"] { color: var(--color-ember) !important; }
[data-score-tier="mid"] { color: var(--color-amber) !important; }
[data-score-tier="high"] { color: var(--color-teal) !important; }
/* Bar fills in the detail panel — match the tier color so the row's
length and color both communicate the same thing. */
.detail-score-bar .fill[data-score-tier="low"] { background: var(--color-ember) !important; }
.detail-score-bar .fill[data-score-tier="mid"] { background: var(--color-amber) !important; }
.detail-score-bar .fill[data-score-tier="high"] { background: var(--color-teal) !important; }
.podium-medal {
font-size: 36px;
line-height: 1;
margin-bottom: 12px;
}
.podium-card.first .podium-medal { font-size: 48px; }
.podium-rank-label {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: var(--color-indigo);
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--color-indigo-soft);
padding: 4px 12px;
border-radius: 999px;
margin-bottom: 16px;
}
.podium-photo {
width: 96px; height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
border: 2px solid var(--color-hairline);
margin: 0 auto 16px;
display: block;
background: var(--color-bone);
}
.podium-card.first .podium-photo {
width: 120px; height: 120px;
border-color: var(--color-indigo);
box-shadow: 0 0 0 4px var(--color-indigo-soft);
}
.podium-photo-ph {
display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--color-slate);
}
.podium-name {
font-size: 20px;
font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.podium-card.first .podium-name { font-size: 24px; }
.podium-name { margin-bottom: 3px; }
.podium-region {
font-size: 12px;
font-weight: 600;
color: var(--color-stone);
margin-bottom: 14px;
}
.podium-card.first .podium-region { font-size: 13px; margin-bottom: 16px; }
.podium-score-big {
font-size: 52px;
font-weight: 900;
color: var(--color-ink);
line-height: 1;
letter-spacing: -0.03em;
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
margin-bottom: 4px;
}
.podium-score-big .unit {
font-size: 18px;
font-weight: 700;
margin-left: 3px;
color: var(--color-stone);
letter-spacing: 0;
}
.podium-card.first .podium-score-big { font-size: 66px; color: var(--color-ink); }
.podium-card.first .podium-score-big .unit { font-size: 22px; }
.podium-score-label {
font-size: 11px;
color: var(--color-stone);
letter-spacing: 0.06em;
font-weight: 700;
margin-bottom: 18px;
}
.podium-breakdown {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--color-hairline);
text-align: left;
}
.podium-bd-item { display: flex; flex-direction: column; gap: 5px; }
.podium-bd-top {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.podium-bd-label {
font-size: 13px;
font-weight: 600;
color: var(--color-cinder);
}
.podium-bd-value {
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
font-weight: 800;
color: var(--color-ink);
font-size: 22px;
}
.podium-bd-bar {
height: 8px;
background: var(--color-bone);
border-radius: 999px;
overflow: hidden;
}
.podium-bd-bar i {
display: block;
height: 100%;
border-radius: 999px;
transition: width 700ms cubic-bezier(0.4,0,0.2,1);
}
/* Fixed per-axis colours (활동량/실효성/충실성) — not tier-based.
Scoped tight so the per-element bar rules don't out-specify them. */
/* Legend swatches: solid. Stacked-bar segments: slightly translucent
(the white value text is a child, so it stays fully opaque). */
.composite-legend i.ax-a { background: var(--ax-act); }
.composite-legend i.ax-b { background: var(--ax-eff); }
.composite-legend i.ax-c { background: var(--ax-dev); }
.composite-legend i.ax-t { background: var(--color-ink); }
.composite-stack .cstk-seg.ax-a { background: color-mix(in srgb, var(--ax-act) 84%, transparent); }
.composite-stack .cstk-seg.ax-b { background: color-mix(in srgb, var(--ax-eff) 84%, transparent); }
.composite-stack .cstk-seg.ax-c { background: color-mix(in srgb, var(--ax-dev) 84%, transparent); }
/* Podium uses the same single stacked bar, full-width in the card */
.podium-card .composite-stack {
width: 100%;
max-width: none;
margin: 18px 0 0;
flex: 0 0 auto;
}
/* Olympic-podium rise: 3위 → 2위 → 1위 (per-card --rise-delay) */
@media (prefers-reduced-motion: no-preference) {
#podium-top3.is-revealed .podium-card {
animation: podiumRise 1000ms cubic-bezier(0.22,1,0.36,1) backwards;
animation-delay: var(--rise-delay, 0ms);
}
@keyframes podiumRise {
from { opacity: 0; transform: translateY(52px); }
to { opacity: 1; transform: translateY(0); }
}
}
/* Compact list (4-10위) */
.composite-list {
border: 1px solid var(--color-hairline);
background: white;
}
.composite-row {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid var(--color-bone);
cursor: pointer;
transition: background 150ms;
}
.composite-row:last-child { border-bottom: 0; }
.composite-row:hover { background: var(--color-indigo-soft); }
.composite-rank {
flex: 0 0 48px;
font-size: 15px;
font-weight: 700;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
text-align: right;
}
.composite-photo {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
object-position: center 25%;
border: 1px solid var(--color-hairline);
background: var(--color-bone);
}
.composite-photo-ph {
display: flex; align-items: center; justify-content: center;
font-size: 9px; color: var(--color-slate);
}
.composite-name {
flex: 0 0 116px;
display: flex;
flex-direction: column;
gap: 2px;
}
.composite-name .cn-name {
font-size: 16px;
font-weight: 700;
color: var(--color-ink);
}
.composite-name .cn-region {
font-size: 12px;
font-weight: 600;
color: var(--color-stone);
}
/* Stacked tri-colour bar: 활동량 | 실효성 | 충실성 (fixed colours).
Each segment width = score/3 % so total length ∝ the three combined. */
.composite-stack {
flex: 1;
display: flex;
align-items: stretch;
height: 30px;
max-width: 520px;
margin: 0 14px 0 auto;
background: var(--color-bone);
border-radius: 6px;
overflow: hidden;
}
.composite-stack .cstk-seg {
width: var(--w);
min-width: 30px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.composite-stack .cstk-seg span {
font-size: 12px;
font-weight: 700;
color: #fff;
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
}
/* Fill on scroll-in. JS marks each bar .cstk-anim (start at 0) and
adds .is-revealed when the row scrolls into view → transition to
--w. No JS / reduced-motion → bars stay at full width (base rule). */
@media (prefers-reduced-motion: no-preference) {
.composite-stack.cstk-anim .cstk-seg { width: 0; }
.composite-stack.cstk-anim.is-revealed .cstk-seg {
width: var(--w);
transition: width 760ms cubic-bezier(0.22,1,0.36,1);
transition-delay: var(--row-delay, 0ms);
}
.composite-stack.cstk-anim.is-revealed .cstk-seg:nth-child(2) { transition-delay: calc(var(--row-delay, 0ms) + 80ms); }
.composite-stack.cstk-anim.is-revealed .cstk-seg:nth-child(3) { transition-delay: calc(var(--row-delay, 0ms) + 160ms); }
}
.composite-score {
flex: 0 0 96px;
text-align: right;
font-size: 30px;
font-weight: 800;
color: var(--color-ink);
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
}
.composite-score::after {
content: "점";
font-size: 14px;
font-weight: 700;
color: var(--color-stone);
letter-spacing: 0;
margin-left: 2px;
}
.composite-legend {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
padding: 12px 22px 14px;
font-size: 12px;
font-weight: 600;
color: var(--color-cinder);
}
.composite-legend span { display: flex; align-items: center; gap: 6px; }
.composite-legend i {
width: 12px;
height: 12px;
border-radius: 3px;
display: inline-block;
}
.composite-legend .cl-total {
margin-left: auto;
font-weight: 500;
color: var(--color-stone);
}
@media (max-width: 768px) {
.composite-legend { gap: 6px 14px; padding: 10px 14px 12px; font-size: 11px; }
.composite-legend .cl-total { margin-left: 0; flex-basis: 100%; }
}
.composite-omit {
text-align: center;
padding: 24px;
font-size: 13px;
color: var(--color-slate);
background: var(--color-bone);
border-top: 1px dashed var(--color-hairline);
}
/* Inline composite detail — opens below clicked card */
.composite-detail {
background: white;
border: 2px solid var(--color-indigo);
margin: 16px 0;
padding: 32px;
position: relative;
animation: detailFadeIn 250ms ease-out;
}
@keyframes detailFadeIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.composite-detail-close {
position: absolute; top: 16px; right: 16px;
width: 32px; height: 32px;
background: white;
border: 1px solid var(--color-hairline);
border-radius: 50%;
cursor: pointer;
font-size: 14px;
color: var(--color-stone);
display: flex; align-items: center; justify-content: center;
transition: all 150ms;
}
.composite-detail-close:hover {
background: var(--color-indigo);
color: white;
border-color: var(--color-indigo);
}
.composite-detail-head {
display: grid;
grid-template-columns: 100px 1fr;
gap: 24px;
align-items: start;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--color-hairline);
}
.composite-detail-head img, .composite-detail-head .ph {
width: 100px; height: 100px;
border-radius: 50%;
object-fit: cover;
object-position: center 22%;
border: 2px solid var(--color-indigo);
background: var(--color-bone);
}
.composite-detail-head .ph {
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: var(--color-slate);
}
.composite-detail-info h3 {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.02em;
margin-bottom: 8px;
color: var(--color-ink);
}
.composite-detail-info .meta {
font-size: 13px;
color: var(--color-stone);
margin-bottom: 12px;
}
.composite-detail-info .meta .num {
color: var(--color-ink);
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
}
.composite-detail-info .badges {
display: flex; gap: 6px; flex-wrap: wrap;
}
.composite-detail-info .rank-badge {
background: var(--color-indigo);
color: white;
padding: 4px 12px;
font-size: 13px;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
border-radius: 4px;
}
.detail-section { margin-top: 20px; }
.detail-section-label {
font-size: 13px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: 0.02em;
margin-bottom: 14px;
}
.detail-scores {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.detail-score-bar {
display: flex;
align-items: center;
gap: 14px;
}
.detail-score-bar .label {
flex: 0 0 76px;
font-size: 14px;
color: var(--color-ink);
font-weight: 600;
}
.detail-score-bar .track {
flex: 1;
height: 18px;
background: var(--color-bone);
border-radius: 4px;
overflow: hidden;
}
.detail-score-bar .fill {
height: 100%;
background: var(--color-indigo);
border-radius: 4px;
transition: width 600ms cubic-bezier(0.4,0,0.2,1);
}
.detail-score-bar .fill.teal { background: var(--color-teal); }
.detail-score-bar .fill.slate { background: var(--color-slate); }
.detail-score-bar .fill.gold { background: linear-gradient(135deg, var(--color-indigo) 0%, #818CF8 100%); }
/* New per-axis colours (matches the list stacked bar) */
.detail-score-bar .fill.ax-a { background: var(--ax-act); }
.detail-score-bar .fill.ax-b { background: var(--ax-eff); }
.detail-score-bar .fill.ax-c { background: var(--ax-dev); }
.detail-score-bar .value.ax-a { color: var(--ax-act); }
.detail-score-bar .value.ax-b { color: var(--ax-eff); }
.detail-score-bar .value.ax-c { color: var(--ax-dev); }
.detail-score-bar .value {
flex: 0 0 76px;
text-align: right;
font-size: 18px;
font-weight: 800;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-ink);
}
/* Colour-blind-safe tier text next to the score */
.detail-score-bar .tier {
flex: 0 0 42px;
font-size: 11px;
font-weight: 700;
text-align: center;
padding: 3px 0;
border-radius: 4px;
}
.detail-score-bar .tier[data-tier="high"] { color: var(--color-teal); background: rgba(20,184,166,0.12); }
.detail-score-bar .tier[data-tier="mid"] { color: var(--color-amber); background: rgba(217,119,6,0.12); }
.detail-score-bar .tier[data-tier="low"] { color: var(--color-ember); background: rgba(194,65,12,0.12); }
/* Rank badge (replaces the 높음/낮음 label): overall rank on that score */
.detail-score-bar .tier.rank {
flex: 0 0 54px;
color: var(--color-ink);
background: var(--color-bone);
font-family: 'IBM Plex Mono', monospace;
font-variant-numeric: tabular-nums;
}
/* Mobile: the fixed label/value/rank columns starved the track to ~90px,
so the score bar looked tiny. Tighten them to give the bar real width. */
@media (max-width: 768px) {
.detail-score-bar { gap: 8px; }
.detail-score-bar .label { flex: 0 0 52px; font-size: 13px; }
.detail-score-bar .value { flex: 0 0 38px; font-size: 16px; }
.detail-score-bar .tier.rank { flex: 0 0 40px; font-size: 11px; padding: 3px 0; }
.detail-score-bar .track { height: 20px; }
}
/* 종합 = headline row: pinned on top, brand indigo, set apart from the
three sub-axes below it. (fill has no data-score-tier so the base
indigo .fill rule already applies.) */
.detail-score-bar.is-total {
padding-bottom: 16px;
margin-bottom: 6px;
border-bottom: 1px solid var(--color-bone);
}
.detail-score-bar.is-total .label { font-weight: 700; }
.detail-score-bar.is-total .fill { background: var(--color-ink); }
.detail-score-bar.is-total .value { color: var(--color-ink); }
.detail-score-bar.is-total .tier {
color: #fff !important;
background: var(--color-ink) !important;
}
.detail-scores-note {
margin-top: 12px;
font-size: 12px;
color: var(--color-stone);
line-height: 1.6;
}
.detail-agenda-chips {
display: flex; gap: 6px; flex-wrap: wrap;
}
.detail-session-chart {
display: flex; gap: 12px; align-items: flex-end;
height: 130px;
padding: 24px 16px 24px;
background: var(--color-bone);
border-radius: 4px;
position: relative;
}
.detail-session-bar {
flex: 1;
background: var(--color-indigo);
position: relative;
transition: height 600ms cubic-bezier(0.4,0,0.2,1);
}
.detail-session-bar .v {
position: absolute; top: -20px; left: 0; right: 0;
text-align: center; font-size: 10px; font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
color: var(--color-ink);
}
.detail-session-bar .l {
position: absolute; bottom: -22px; left: 0; right: 0;
text-align: center; font-size: 10px;
color: var(--color-stone);
}
.detail-analysis {
background: var(--color-indigo-soft);
border-left: 3px solid var(--color-indigo);
padding: 16px 20px;
font-size: 14px; line-height: 1.7;
color: var(--color-cinder);
font-weight: 300;
}
/* Profile directory cards (HOME) */
.dir-card .meta-row {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 4px;
}
.dir-card .meta-tag {
font-size: 10px;
color: var(--color-stone);
background: var(--color-bone);
padding: 1px 6px;
border-radius: 2px;
}
.dir-card .meta-tag.party-yh { background:#FFF1E6; color:#C2410C; }
.dir-card .meta-tag.party-dm { background:#E0E7FF; color:#3730A3; }
.dir-card .meta-tag.party-no { background:#F5F5F5; color:#6B6B6B; }
.dir-card.no-profile { opacity: 0.55; }
/* Profile detail panel (HOME inline) */
.profile-detail-info { display: flex; flex-direction: column; gap: 8px; }
.profile-detail-info .name-en {
font-size: 14px;
color: var(--color-stone);
font-family: 'IBM Plex Mono', monospace;
font-weight: 500;
margin-left: 8px;
}
.profile-meta-row {
display: grid;
grid-template-columns: 80px 1fr;
gap: 6px;
font-size: 14px;
}
.profile-meta-row .label {
color: var(--color-stone);
font-weight: 600;
font-size: 12px;
}
.profile-meta-row .value {
color: var(--color-ink);
font-weight: 500;
}
.career-section h4 {
font-size: 12px;
color: var(--color-stone);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 24px;
}
.career-group {
margin-bottom: 16px;
}
.career-group .group-label {
display: inline-block;
background: var(--color-indigo);
color: white;
padding: 3px 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 3px;
margin-bottom: 8px;
}
.career-group.past .group-label { background: var(--color-stone); }
.career-list {
list-style: none;
padding: 0;
margin: 0;
}
.career-list li {
font-size: 13px;
color: var(--color-cinder);
padding: 6px 0 6px 18px;
border-bottom: 1px solid var(--color-bone);
position: relative;
line-height: 1.5;
}
.career-list li:last-child { border-bottom: 0; }
.career-list li::before {
content: "·";
position: absolute;
left: 4px;
color: var(--color-indigo);
font-weight: 700;
}
/* Two-column career layout (web) */
.career-cols {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 36px;
}
.career-cols .career-group { margin-bottom: 0; }
/* Collapse long careers behind a toggle */
.career-extra { display: none; }
.career-section.is-expanded .career-extra { display: list-item; }
.career-toggle {
display: flex;
align-items: center;
gap: 6px;
width: fit-content;
margin: 18px auto 0;
padding: 9px 18px;
background: var(--color-bone);
border: 1px solid var(--color-hairline);
color: var(--color-stone);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 4px;
cursor: pointer;
transition: border-color 150ms, color 150ms, background 150ms;
}
.career-toggle:hover {
border-color: var(--color-indigo);
color: var(--color-indigo);
background: var(--color-indigo-soft);
}
.career-toggle .ct-ic { font-size: 10px; }
@media (max-width: 768px) {
.career-cols { grid-template-columns: 1fr; gap: 16px; }
}
.no-profile-msg {
background: var(--color-bone);
border-left: 3px dashed var(--color-stone);
padding: 16px 20px;
font-size: 14px;
color: var(--color-stone);
font-style: italic;
}
/* Sub-tabs (페이지 내 섹션 전환) */
.subtabs {
display: flex;
gap: 0;
border-bottom: 2px solid var(--color-hairline);
margin: 32px 0 40px;
flex-wrap: wrap;
}
/* Mobile-only fallback for sub-tab rows that don't fit on small screens.
Hidden on desktop. Methodology has 7 tabs → use a