/* Visual language adapted from the local s-voucher project.
   The dashboard's content, order, data model and interactions stay unchanged. */
:root {
  --ink: #29262e;
  --muted: #706b76;
  --line: #e8e4ed;
  --surface: #fff;
  --canvas: #fdfdfd;
  --green: #7536d0;
  --green2: #f5f0fb;
  --lime: #e8ddf5;
  --orange: #c75d79;
  --orange2: #fff0f4;
  --blue: #6573ca;
  --yellow: #d0a14c;
  --radius: 14px;
  --shadow: 0 12px 30px rgba(48, 21, 88, .06);
}

@font-face {
  font-family: Pretendard;
  src: url("PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Latin-only variable subset for English labels and titles; Hangul falls through to Pretendard. */
@font-face {
  font-family: Montserrat;
  src: url("Montserrat-latin.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  letter-spacing: -.035em;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { accent-color: var(--green); }
button:focus-visible, input:focus-visible, select:focus-visible,
a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* s-voucher's light application shell and violet active navigation. */
.sidebar {
  padding: 0 16px 20px;
  overflow-y: auto;
  color: #3b3b3b;
  background: #fff;
  border-right: 1px solid #ddd;
}
.brand {
  min-height: 66px;
  margin: 0 -16px;
  padding: 0 20px;
  color: #8151d3;
  border-bottom: 1px solid #e8e4ed;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
}
.side-nav { margin-top: 28px; }
.nav-label { color: #99939e; font-size: 11px; letter-spacing: .12em; }
.workspace-link { display: block; width: fit-content; text-decoration: none; cursor: pointer; }
.workspace-link:hover, .workspace-link:focus-visible { color: #7536d0; text-decoration: underline; }
main section[id] { scroll-margin-top: 16px; }
.nav-item {
  position: relative;
  margin: 3px 0 3px 6px;
  padding: 11px 12px;
  color: #55515a;
  border-radius: 9px;
  font-size: 14px;
}
.nav-item::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: -6px;
  width: 2px;
  background: #ddd;
}
.nav-item:hover { color: #5e2ba8; background: #faf8fd; }
.nav-item.active { color: #7536d0; background: #f1ebfa; font-weight: 700; }
.nav-item.active::before { background: #7536d0; }
.nav-item.active::after { display: none; }
.nav-item span { color: #81738e; opacity: 1; }
.saved-block { border-top-color: #ece9ef; }
.saved-item { color: #5d5862; font-size: 13px; }
.saved-item i { flex: none; }
.saved-item span { min-width: 0; }
.saved-item strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; overflow-wrap: anywhere; }
.saved-item:hover, .saved-item.active { color: #7536d0; background: #f5f0fb; }
.saved-item i { border-color: #b9aec5; }
.saved-item.active i { background: #7536d0; border-color: #7536d0; }
.saved-item small { color: #8d8694; }
.saved-all-button { width: 100%; margin: 0 0 8px; padding: 9px 10px; border: 1px solid #e8ddf5; border-radius: 9px; background: #fff; color: #7536d0; cursor: pointer; text-align: left; font: 700 12px Pretendard, sans-serif; }
.saved-all-button:hover { background: #f5f0fb; }
.saved-empty { margin: 0 10px; color: #8d8694; font-size: 12px; }
.saved-modal-backdrop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(32, 21, 43, .48); backdrop-filter: blur(2px); }
.saved-modal-backdrop[hidden] { display: none; }
.saved-modal { display: flex; flex-direction: column; width: min(780px, 100%); max-height: min(760px, 90vh); overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(32, 21, 43, .22); }
.saved-modal [hidden] { display: none !important; }
.saved-modal-head { display: flex; justify-content: space-between; gap: 16px; padding: 25px 28px 17px; border-bottom: 1px solid #ece9ef; }
.saved-modal-head .nav-label { margin: 0 0 6px; }
.saved-modal-head h2 { margin: 0; color: #29262e; font-size: 24px; }
.saved-modal-head p:last-child { margin: 4px 0 0; color: #8d8694; font-size: 12px; }
.saved-modal-head .modal-close { position: static; flex: none; }
.saved-list-view { display: flex; flex-direction: column; min-height: 0; }
.saved-modal-controls { display: grid; grid-template-columns: 1fr 135px 145px 135px; gap: 10px; padding: 18px 28px; }
.saved-modal-controls label { display: grid; gap: 5px; color: #706b76; font-size: 11px; font-weight: 700; }
.saved-modal-controls input, .saved-modal-controls select { width: 100%; height: 39px; padding: 0 11px; border: 1px solid #ded8e5; border-radius: 9px; background: #fff; color: #29262e; font: 13px Pretendard, sans-serif; }
.saved-results { min-height: 120px; overflow: auto; padding: 0 28px 28px; }
.saved-more-button { flex: none; margin: 0 28px 24px; padding: 10px; border: 1px solid #e8ddf5; border-radius: 9px; background: #fff; color: #7536d0; font: 700 12px Pretendard, sans-serif; cursor: pointer; }
.saved-more-button:hover { background: #f5f0fb; }
.saved-result-row { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.saved-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; min-width: 0; padding: 16px; border: 1px solid #ece9ef; border-radius: 11px; background: #fff; text-align: left; cursor: pointer; }
.saved-result:hover, .saved-result.active { border-color: #cbb5ea; background: #faf7fe; }
.saved-result > span:first-child { min-width: 0; }
.saved-result strong { display: block; color: #29262e; font-size: 15px; overflow-wrap: anywhere; }
.saved-result small { display: block; margin-top: 5px; color: #817a88; font-size: 11px; overflow-wrap: anywhere; }
.saved-result > span:last-child { color: #7536d0; font-size: 12px; font-weight: 700; white-space: nowrap; }
.saved-delete { flex: none; padding: 0 15px; border: 1px solid #efd5d9; border-radius: 11px; background: #fff; color: #ad3445; font: 700 12px Pretendard, sans-serif; cursor: pointer; }
.saved-delete:hover { border-color: #d8959e; background: #fff4f5; }
.saved-delete:disabled { opacity: .5; cursor: wait; }
.saved-results-empty { padding: 32px 8px; color: #817a88; text-align: center; font-size: 13px; }
@media (max-width: 760px) { .saved-modal-backdrop { padding: 0; } .saved-modal { width: 100%; height: 100dvh; max-height: none; border-radius: 0; } .saved-modal-head { padding: 20px 18px 15px; } .saved-modal-controls { grid-template-columns: 1fr 1fr; padding: 15px 18px; } .saved-modal-controls label:first-child, .saved-modal-controls label:last-child { grid-column: 1 / -1; } .saved-results { padding: 0 18px 24px; } .saved-result { gap: 8px; padding: 12px; } .saved-result > span:last-child { display: none; } .saved-delete { padding: 0 11px; } .saved-more-button { margin: 0 18px 24px; } .top-actions #saveButton { display: inline-flex; align-items: center; padding: 0 10px; } .breadcrumbs { min-width: 0; } .breadcrumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.sidebar-note { background: #faf8fd; border-color: #e8ddf5; }

/* CLI 입력과 분석 대기 화면 */
.analysis-request { width: 100%; margin: 0 0 20px; overflow: visible; border: 1px solid #e8e4ed; border-radius: 14px; background: #fff; }
main > section { max-width: none; }
.request-query-row { padding: 18px 22px 20px; border-radius: 0 0 13px 13px; background: #705cf0; }
.analysis-request:has(.request-error:not([hidden])) .request-query-row { border-radius: 0; }
.request-query-row > label { display: block; margin-bottom: 9px; color: #fff; font-size: 13px; font-weight: 700; }
.request-query-field { display: flex; align-items: center; gap: 12px; max-width: 720px; min-height: 48px; padding: 5px 6px 5px 16px; border-radius: 28px; background: #fff; }
.request-query-field svg { flex: none; color: #aeb4be; }
.request-query-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #3b3641; font-size: 15px; }
.request-query-field:focus-within { outline: 2px solid #c4bbff; outline-offset: 2px; }
.request-query-field button { flex: none; min-height: 38px; padding: 0 17px; border: 0; border-radius: 21px; background: #4e35d7; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.request-query-field button:hover { background: #3e25bd; }
.request-query-field button:disabled { opacity: .65; cursor: progress; }
.request-options { display: flex; align-items: end; flex-wrap: wrap; gap: 20px 24px; padding: 18px 22px 20px; }
.request-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; align-self: end; white-space: nowrap; }
.request-actions .top-actions { margin-left: 0; }
.request-options fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.request-options legend, .request-country > label, .request-monthly-target > label { display: block; margin-bottom: 8px; color: #69636e; font-size: 12px; font-weight: 600; }
.request-targets { position: relative; display: flex; align-items: end; gap: 10px; }
.request-monthly-target { width: 160px; }
.request-target-field { display: flex; align-items: center; height: 42px; border: 1px solid #dfdae5; border-radius: 9px; background: #fff; }
.request-target-field:focus-within { border-color: #8772e8; box-shadow: 0 0 0 3px #f1eeff; }
.request-target-field.invalid { border-color: #d43f52; background: #fff1f2; box-shadow: 0 0 0 2px #ffe0e4; }
.request-target-field.invalid:focus-within { border-color: #d43f52; box-shadow: 0 0 0 3px #ffd4da; }
.request-target-field input { flex: 1; width: 0; min-width: 0; height: 100%; padding: 0 11px; border: 0; outline: none; appearance: textfield; background: transparent; color: #3b3641; font-size: 13px; }
.request-target-field.invalid input { color: #a92338; }
.request-target-field input::-webkit-inner-spin-button, .request-target-field input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.request-target-field span { flex: none; padding-right: 11px; color: #77717d; font-size: 12px; }
.request-targets small { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.request-target-error { position: absolute; top: calc(100% + 2px); left: 0; margin: 0; color: #bd2b3d; font-size: 11px; white-space: nowrap; }
.request-target-error[hidden] { display: none; }
.request-months { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #f3f3f6; }
.request-months label { position: relative; display: grid; place-items: center; min-width: 60px; min-height: 34px; padding: 0 9px; border-radius: 8px; color: #77717d; font-size: 13px; cursor: pointer; }
.request-months input { position: absolute; opacity: 0; }
.request-months label:has(input:checked) { background: #fff; color: #6042d9; box-shadow: 0 1px 4px #d9d5df; font-weight: 700; }
.request-months label:has(input:focus-visible) { outline: 2px solid #705cf0; }
.request-country { position: relative; z-index: 3; width: 218px; }
.request-country-field { display: flex; align-items: center; height: 42px; border: 1px solid #dfdae5; border-radius: 9px; background: #fff; }
.request-country-field:focus-within { border-color: #8772e8; box-shadow: 0 0 0 3px #f1eeff; }
.request-country-field input { flex: 1; min-width: 0; height: 100%; padding: 0 0 0 11px; border: 0; outline: none; background: transparent; color: #3b3641; font-size: 12px; }
.request-country-field input:focus-visible { outline: none; }
.request-country-field input::placeholder { color: #817a88; }
.request-country-field button { flex: none; width: 32px; height: 100%; border: 0; background: transparent; color: #69636e; cursor: pointer; font-size: 20px; }
.request-country-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; max-height: 280px; overflow-y: auto; padding: 5px; border: 1px solid #dfdae5; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(48,21,88,.15); }
.request-country-list[hidden] { display: none; }
.request-country-list button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: #3b3641; text-align: left; font-size: 12px; cursor: pointer; }
.request-country-list button:hover, .request-country-list button.active { background: #f1eeff; color: #4e35d7; }
.request-country-list button[aria-selected="true"] { font-weight: 700; }
.request-country-empty { margin: 0; padding: 10px; color: #817a88; font-size: 12px; }
.request-channel-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.request-channel-buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 11px; border: 1px solid #dfdae5; border-radius: 9px; background: #fff; color: #69636e; font-size: 12px; font-weight: 600; cursor: pointer; }
.request-channel-buttons button img { width: 16px; height: 16px; object-fit: contain; }
.request-channel-buttons button[aria-pressed="true"] { border-color: #8772e8; background: #f1eeff; color: #4e35d7; box-shadow: inset 0 0 0 1px #8772e8; }
.request-channel-buttons button:focus-visible { outline: 2px solid #705cf0; outline-offset: 2px; }
.request-channel-buttons button:disabled { opacity: .6; cursor: progress; }
.request-error { margin: 12px 22px 16px; color: #b42c39; font-size: 13px; }
.request-error[hidden], .analysis-skeleton[hidden] { display: none; }
.analysis-running .top-actions button:disabled { opacity: .45; cursor: not-allowed; }
.analysis-running main > :not(#analysisRequestForm):not(#analysisSkeleton) { display: none !important; }
.analysis-skeleton { display: grid; gap: 16px; }
.skeleton-status { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border: 1px solid #e6e4e8; border-radius: 12px; background: #fafafa; }
.skeleton-status-copy { flex: 1; min-width: 0; }
.skeleton-status h1 { margin: 0 0 4px; color: #3b3641; font-size: 18px; }
.skeleton-status p { margin: 0; color: #817a88; font-size: 13px; }
.request-cancel { flex: none; padding: 9px 13px; border: 1px solid #d9d4de; border-radius: 8px; background: #fff; color: #554d5b; font-size: 12px; font-weight: 700; cursor: pointer; }
.request-cancel:hover { border-color: #b42c39; color: #b42c39; }
.request-cancel:disabled { opacity: .55; cursor: progress; }
.request-cancel[hidden] { display: none; }
.request-progress-panel { padding: 19px 22px; border: 1px solid #e6e4e8; border-radius: 12px; background: #fff; }
.request-progress-head, .request-progress-row-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.request-progress-head strong { color: #3b3641; font-size: 14px; }
.request-progress-head span { color: #6e637c; font-size: 12px; font-weight: 700; }
.request-progress-list { display: grid; gap: 15px; margin-top: 17px; }
.request-progress-row-head { margin-bottom: 7px; color: #5d5664; font-size: 12px; }
.request-progress-row-head strong { display: inline-flex; align-items: center; gap: 8px; }
.request-progress-row-head img { width: 17px; height: 17px; object-fit: contain; }
.request-progress-list progress { display: block; width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 10px; appearance: none; background: #eeedf0; }
.request-progress-list progress::-webkit-progress-bar { border-radius: 10px; background: #eeedf0; }
.request-progress-list progress::-webkit-progress-value { border-radius: 10px; background: #705cf0; }
.request-progress-list progress::-moz-progress-bar { border-radius: 10px; background: #705cf0; }
.request-progress-list progress:not([value]) { background: linear-gradient(90deg,#eeedf0 20%,#d6cef8 50%,#eeedf0 80%); background-size: 200% 100%; animation: skeleton-shimmer 1.7s ease-in-out infinite; }
.skeleton-spinner { width: 26px; height: 26px; flex: none; border: 3px solid #d7d4da; border-top-color: #8d8791; border-radius: 50%; animation: skeleton-spin 1s linear infinite; }
.skeleton-hero, .skeleton-card { padding: 24px; border: 1px solid #e6e4e8; border-radius: 12px; background: #f8f8f9; }
.skeleton-hero { display: grid; align-content: center; gap: 18px; min-height: 240px; }
.skeleton-line, .skeleton-chart { display: block; height: 17px; border-radius: 8px; background: linear-gradient(90deg,#e7e7e9 25%,#f2f2f3 50%,#e7e7e9 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.7s ease-in-out infinite; }
.skeleton-line.short { width: 30%; }.skeleton-line.medium { width: 55%; }.skeleton-line.wide { width: 82%; height: 30px; }
.skeleton-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.skeleton-card { display: grid; align-content: start; gap: 22px; min-height: 125px; }
.skeleton-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.skeleton-card.tall { min-height: 270px; }
.skeleton-chart { height: 170px; margin-top: 12px; }
@keyframes skeleton-shimmer { to { background-position-x: -200%; } }
@keyframes skeleton-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .request-query-row { padding: 16px; } .request-query-field { gap: 8px; } .request-query-field button { padding: 0 12px; } .request-options { padding: 16px; } .request-channels { width: 100%; } .skeleton-status { flex-wrap: wrap; } .request-cancel { margin-left: 40px; } .skeleton-metrics, .skeleton-charts { grid-template-columns: 1fr 1fr; } .skeleton-charts .skeleton-card:last-child { display: none; } }
@media (max-width: 760px) {
  .request-options > .menu-button { order: -2; flex: none; }
  .request-actions { order: -1; margin-left: auto; }
  .request-actions .top-actions .text-button { display: inline-flex; }
  .request-actions .top-actions button { height: 34px; padding: 0 8px; font-size: 11px; }
}
@media (max-width: 480px) { .skeleton-metrics { grid-template-columns: 1fr 1fr; } .skeleton-charts { grid-template-columns: 1fr; } .request-months label { min-width: 52px; } }
@media (max-width: 480px) { .request-targets { width: 100%; } .request-monthly-target { flex: 1; width: auto; min-width: 0; } .request-target-error { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .skeleton-spinner, .skeleton-line, .skeleton-chart, .request-progress-list progress { animation: none; } }
.sidebar-note p { color: #817a88; }
.live-dot, .status-dot { background: #7536d0; box-shadow: 0 0 0 5px #eee5fa; }

.saved-status { color: #7536d0; background: #f1ebfa; border-radius: 6px; }
.text-button, .menu-button {
  color: #514b56;
  background: #fff;
  border-color: #e3dfe8;
}
.text-button:hover, .menu-button:hover { background: #f5f0fb; border-color: #d1bbeb; }
.export-button, .refresh-button {
  color: #fff;
  background: #7536d0;
  border-color: #7536d0;
  box-shadow: 0 3px 10px rgba(117, 54, 208, .15);
}
.export-button:hover, .refresh-button:hover { background: #5e2ba8; }

main { padding-top: 20px; }
@media (max-width: 760px) {
  main { padding-top: 16px; }
}
.analysis-bar, .hero, .metric-card, .decision-card,
.chart-card, .sentence-detail, .signal-card, .trend-table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.analysis-bar { padding: 15px; background: #fff; }
.analysis-bar label > span, .control-field > span { color: #69636e; font-size: 12px; }
.query-field div, .control-field select, .keyword-search, .search-box {
  background: #fff;
  border: 1px solid #dfdae5;
  border-radius: 8px;
}
.query-field div:focus-within, .keyword-search:focus-within, .search-box:focus-within {
  border-color: #9663d0;
  box-shadow: 0 0 0 3px #f1ebfa;
}
.query-field b { color: #7536d0; }
.channel-switcher, .period-toggle { background: #f5f5f6; border-radius: 8px; }
.channel-tab { color: #6d6772; font-size: 13px; }
.channel-tab.active { color: #7536d0; box-shadow: 0 1px 5px rgba(48, 21, 88, .1); }
.channel-tab:hover:not(.active) { color: #7536d0; }
.platform-logo { display: block; flex: none; width: 25px; height: 25px; }
.lag-legend { align-items: center; flex-wrap: wrap; gap: 11px; }
.lag-legend span { display: inline-flex; align-items: center; gap: 4px; }
.lag-legend .platform-logo { width: 19px; height: 19px; }
.lag-node.platform-logo { top: -9px; width: 22px; height: 22px; border: 0; background: none; box-shadow: 0 2px 5px rgba(30, 23, 44, .14); }


.eyebrow { color: #7536d0; }








/* Keep the report hero and all its content, but replace the dark campaign look. */
.hero {
  color: #2c2239;
  background: linear-gradient(110deg, #fff 7%, #fbf8ff 58%, #f2eafb 100%);
  border-color: #e5d8f4;
}
.hero-copy { padding: 40px 42px; }
.hero-copy::after {
  border-color: rgba(117, 54, 208, .09);
  box-shadow: 0 0 0 42px rgba(117, 54, 208, .025), 0 0 0 92px rgba(117, 54, 208, .018);
}
.hero-meta { flex-wrap: wrap; gap: 8px; color: #715b89; font-size: 13px; letter-spacing: 0; }
.hero-meta > span:nth-child(2) { font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.hero-meta b { margin: 0; color: #2e243a; font-weight: 600; }
.hero-meta i { color: #c5bcce; font-style: normal; }
/* The headline is this run's conclusion; highlighted terms are the signals it names. */
.hero h1 { margin: 20px 0 0; color: #2e243a; font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; line-height: 1.3; letter-spacing: -.04em; }
.hero h1 em { color: #7536d0; font-family: Pretendard, sans-serif; font-style: normal; font-weight: 700; }
.hero-tags span { color: #633398; background: #f1ebfa; border-color: #e5d8f4; border-radius: 7px; font-size: 12px; }
.hero-side { background: rgba(245, 240, 251, .7); border-left-color: #e5d8f4; }
/* Data quality ring: number and % share one baseline, centered as a pair */
.quality-ring {
  display: flex; flex-wrap: wrap; align-content: center; justify-content: center; align-items: baseline; gap: 1px;
  background: #7536d0; border: 2px solid #7536d0; box-shadow: 0 0 0 7px #eee5fa;
}
.quality-ring::after { content: none; }
.quality-ring strong, .quality-ring span { grid-area: auto; margin: 0; color: #fff; }
.quality-ring span { font-size: 14px; font-weight: 600; }
.hero-side > b { color: #4b3d59; font-size: 14px; font-weight: 600; }
.hero-side > p { margin: 6px 0 0; color: #776c84; font-size: 12px; font-weight: 400; letter-spacing: 0; }

.metric-card, .decision-card, .chart-card, .sentence-detail, .signal-card { background: #fff; }
.metric-card > span { color: #6a6370; font-size: 13px; }
.metric-card strong { color: #33293f; }
.metric-card p { color: #817986; font-size: 12px; }
/* Decision cards (Figma): Montserrat label + title, Pretendard body, blurred tone glow at the top center */
.decision-card {
  --tone: #7536d0; --glow: #e7d6ff;
  display: flex; flex-direction: column; min-height: 0; padding: 32px; overflow: hidden; isolation: isolate;
}
.decision-card.watch { --tone: #117bf6; --glow: #c5e0fe; }
.decision-card.risk { --tone: #ffa100; --glow: #ffeac5; }
.decision-card::before {
  content: ""; position: absolute; z-index: -1; top: -70px; left: 50%; width: 60%; height: 120px;
  background: var(--glow); border-radius: 50%; filter: blur(40px); transform: translateX(-50%); pointer-events: none;
}
.decision-card .decision-label { color: var(--tone); font-family: Montserrat, Pretendard, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.decision-card h2 {
  margin: 30px 0 8px; color: #000; font-family: Montserrat, Pretendard, sans-serif;
  font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em;
}
.decision-card p, .decision-card button { font-family: Pretendard, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -.04em; }
.decision-card p { color: #6b6b6b; line-height: 1.6; }
.decision-card button { position: static; align-self: flex-start; margin-top: auto; padding-top: 20px; color: #000; }
.decision-card button:hover { text-decoration: underline; text-underline-offset: 3px; }

.section-heading h2, .sentence-heading h2 { color: #322a3b; }
.section-heading > p, .sentence-heading > p { font-size: 13px; }
.card-head h3 { color: #37313e; font-size: 17px; }
.card-head p, .chart-note { color: #807984; font-size: 12px; }
.chart-grid-line { stroke: #eeeaf1; }
.chart-axis-label { fill: #827b88; font-size: 11px; }
.chart-point { stroke: #fff; }
.chart-guide { stroke: #aa8bce; }
.time-chart-tooltip { background: rgba(48, 21, 88, .94); }
.time-chart-tooltip > strong { color: #f3eaff; }
.unit-badge, .keyword-panel .card-head b { color: #7536d0; background: #f5f0fb; }
.keyword-option.selected { background: #f7f2fd; }
.keyword-option:hover { background: #fbf8ff; }
.period-toggle button.active, .filter-button.active { color: #fff; background: #7536d0; border-color: #7536d0; }
.period-toggle button:hover:not(.active), .filter-button:hover:not(.active) { color: #7536d0; background: #f5f0fb; }
.lag-track, .rank-track, .trend-table-bar > span { background: #f0ecf3; }
.rank-track span, .trend-table-bar i { background: linear-gradient(90deg, #b490dd, #7536d0); }

.brand-rank-button { border-color: #e8e4ed; color: #5e5865; }
.brand-rank-button:hover { background: #faf7fe; border-color: #d1bbeb; }
.brand-rank-button.active { background: #7536d0; border-color: #7536d0; }
.brand-rank-button.active > span { color: #7536d0; background: #fff; }
.brand-rank-button.active small { color: #ede0fb; }
.relation-reset { background: #f1ebfa; color: #7536d0; }
.brand-node { background: #7536d0; }
.ingredient-node { background: #6573ca; }
.concern-node { background: #d0a14c; }
.relation-rank-card .rank-row:hover, .relation-rank-card .rank-row.active { background: #f7f2fd; }
.relation-source { background: #faf9fb; }
.relation-source:hover { background: #f5f0fb; border-color: #d1bbeb; }
.relation-source-icon, .relation-evidence-card .card-head > b { background: #7536d0; }
.relation-source-tags span { color: #5e2ba8; background: #f1ebfa; }
.relation-node.active text { fill: #301558; }
.center-node circle { fill: #7536d0; }
.sentence-tab.active { background: #7536d0; border-color: #7536d0; }
.sentence-tab.active span { color: #f1e9fb; }
.sentence-metrics span, .flow-row, .structured-head, .individual-observations,
.hashtag-panel, .pattern-evidence, .discovered-pattern, .pattern-empty { background: #faf9fb; }
.discovered-pattern:hover, .discovered-pattern.active { background: #f5f0fb; border-color: #cbaeea; }
.pattern-card-head span, .sentiment-pill { background: #f1ebfa; color: #7536d0; }
.pattern-sequence i { color: #7536d0; }
.hashtag-panel span { color: #5e2ba8; border-color: #e8ddf5; }
.interpretation { background: #f5f0fb; color: #382944; border: 1px solid #e5d8f4; }
.interpretation strong { color: #7536d0; }
.interpretation p { color: #584967; }
.stage-stack button.established, .stage-list i.established { background: #7536d0; }
.stage-pill.established { color: #7536d0; background: #f5f0fb; }
.stage-pill.growing { color: #5365b4; background: #eff1fb; }
.stage-list button { background: #faf9fb; }
.trend-table th { background: #faf9fb; color: #6e6775; font-size: 11px; }
.trend-table td { border-top-color: #eeeaf1; }
.trend-table tbody tr:hover { background: #fbf8ff; }
.signal-card > span { font-size: 11px; }
.signal-card > strong { color: #33293f; }

.drawer { box-shadow: -18px 0 45px rgba(48, 21, 88, .13); }
.drawer-backdrop, .modal-backdrop { background: rgba(32, 21, 43, .4); }
.drawer-reset { color: #7536d0; background: #f5f0fb; }
.widget-toggle:hover { color: #7536d0; }
.toast { background: #301558; }
footer { color: #837c89; }

@media (max-width: 1080px) {
  .hero-side { display: none; }
}
@media (max-width: 760px) {
  .sidebar { box-shadow: 10px 0 35px rgba(48, 21, 88, .12); }
  .hero-copy { padding: 30px 23px; }
  .hero h1 { font-size: clamp(22px, 6vw, 28px); }
  .analysis-bar { padding: 16px; }

}

/* Evidence titles, compact empty states, network labels */
.relation-source h4 { font-size: 13px; color: #241336; }
.relation-source-tags span { flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.pattern-source strong { overflow: hidden; color: #241336; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pattern-source small { display: block; margin-top: 2px; color: #7c7489; font-size: 10px; }
.chart-empty.compact { height: auto; min-height: 96px; padding: 20px; text-align: center; line-height: 1.5; }
.relation-node .node-count { fill: #3a2a52; font-size: 16px; font-weight: 700; }
.relation-node .node-label { fill: #2c2240; font-size: 17px; font-weight: 650; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }

/* Corner radius on Buridge (m-project) scale: 10 card · 8 control/inner box · 6 chip · 20 large panel.
   The hero keeps its own 14px. */
.analysis-bar, .metric-card, .decision-card, .chart-card, .sentence-detail,
.signal-card, .trend-table-wrap, .category-detail, .category-list, .evidence-source { border-radius: 10px; }
.hero { border-radius: 14px; }
.modal { border-radius: 20px; }
.text-button, .export-button, .menu-button, .refresh-button, .outline-button, .drawer-reset,
.filter-button, .sentence-tab, .stage-list button, .brand-rank-button,
.query-field div, .control-field select, .relation-controls select, .search-box, .keyword-search,
.channel-switcher, .period-toggle, .saved-item, .nav-item, .brand-mark, .decision-icon,
.relation-source, .pattern-source, .discovered-pattern, .pattern-evidence, .individual-observations,
.hashtag-panel, .interpretation, .flow-row, .sidebar-note, .chart-empty, .pattern-empty,
.time-chart-tooltip, .toast { border-radius: 8px; }
.channel-tab, .period-toggle button, .relation-reset, .keyword-chip, .hero-tags span,
.hashtag-panel span, .pattern-sequence span, .pattern-matrix td span, .reaction-row q { border-radius: 6px; }

/* Analysis bar: 14px labels, 12px label gap, lucide icons, Buridge-style dropdown */
.analysis-bar label > span, .control-field > span { margin: 0 0 12px 4px; font-size: 14px; }
.query-field svg { flex-shrink: 0; width: 20px; height: 20px; color: #7536d0; }
.refresh-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.refresh-button svg { flex-shrink: 0; width: 20px; height: 20px; }

.select-menu { position: relative; }
.select-trigger {
  width: 100%; height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px 0 14px; color: #3b3b3b; background: #fff; border: 1px solid #dfdae5; border-radius: 8px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s;
}
.select-trigger svg { flex-shrink: 0; width: 20px; height: 20px; color: #cccccc; transition: transform .2s, color .2s; }
.select-trigger:hover, .select-menu.open .select-trigger { border-color: #7536d0; }
.select-trigger:hover svg, .select-menu.open .select-trigger svg { color: #7536d0; }
.select-menu.open .select-trigger svg { transform: rotate(180deg); }
.select-options {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; margin: 0; padding: 4px 0;
  list-style: none; background: #fff; border: 1px solid #cccccc; border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.select-menu.open .select-options { opacity: 1; visibility: visible; transform: translateY(0); }
.select-options [role="option"] {
  padding: 10px 16px; color: #000; cursor: pointer; font-size: 14px; white-space: nowrap; transition: background-color .15s;
}
.select-options [role="option"]:hover, .select-options [role="option"]:focus { background: #f5f5f5; outline: none; }
.select-options [role="option"][aria-selected="true"] { color: #7536d0; font-weight: 500; }
/* The wrapper shows focus for these inputs; drop the global outline on the bare input inside */
.query-field input:focus-visible, .keyword-search input:focus-visible, .search-box input:focus-visible { outline: none; }

/* Analysis bar: one card, title row + one control row */
.analysis-bar { display: block; padding: 0; background: #fff; }
.analysis-fields {
  display: grid; grid-template-columns: minmax(220px, 1.4fr) 200px minmax(310px, 1.6fr) auto;
  align-items: end; gap: 12px; padding: 4px 20px 20px;
}
.analysis-fields .refresh-button { height: 41px; padding: 0 20px; font-size: 14px; font-weight: 600; }
@media (max-width: 1080px) {
  .analysis-fields { grid-template-columns: 1fr 1fr; }
  .analysis-fields .channel-field { grid-column: 1 / -1; }
  .analysis-fields .refresh-button { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 760px) {
  .analysis-bar { padding: 0; }
  .analysis-fields { grid-template-columns: 1fr; padding: 4px 16px 16px; }
  .analysis-fields .channel-field, .analysis-fields .refresh-button { grid-column: auto; }
  .analysis-fields .refresh-button { justify-self: stretch; }
}

/* Flat surfaces: no drop shadows on in-page elements.
   Floating layers (dropdown menu, chart tooltip, drawer, mobile sidebar) keep theirs; focus/decorative rings stay. */
:root { --shadow: none; }
.analysis-bar, .hero, .metric-card, .decision-card, .chart-card, .sentence-detail, .signal-card,
.trend-table-wrap, .channel-tab.active, .period-toggle button.active,
.brand-mark, .export-button, .refresh-button, .lag-node { box-shadow: none; }

/* Channel tabs: Korean label with Buridge platform logo (16px, 8px gap) */
.channel-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.channel-tab img { flex-shrink: 0; width: 16px; height: 16px; object-fit: contain; }
.channel-tab { font-weight: 600; }
.channel-tab.active { color: #6d6772; }

/* Analysis bar accordion (Buridge DrawerPlatformSection: grid-rows 1fr↔0fr, 300ms) */
.analysis-toggle {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  color: var(--ink); background: none; border: 0; border-radius: 10px; cursor: pointer; font: inherit; text-align: left;
}
.analysis-title { flex-shrink: 0; font-size: 15px; font-weight: 500; }
.analysis-summary {
  min-width: 0; overflow: hidden; color: #888888; font-size: 14px; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; transition: opacity .2s;
}
.analysis-bar.collapsed .analysis-summary { opacity: 1; }
.analysis-toggle svg { flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; color: #999999; transition: transform .3s, color .2s; }
.analysis-toggle:hover svg { color: #7536d0; }
.analysis-bar:not(.collapsed) .analysis-toggle svg { transform: rotate(180deg); }
.analysis-collapse { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out; }
.analysis-bar.collapsed .analysis-collapse { grid-template-rows: 0fr; opacity: 0; }
.analysis-collapse-inner { min-height: 0; overflow: hidden; }
.analysis-bar.settled .analysis-collapse-inner { overflow: visible; }
@media (max-width: 760px) {
  .analysis-toggle { padding: 14px 16px; }
}
.analysis-title { color: #000; font-weight: 600; letter-spacing: -.04em; line-height: 1.5; }

/* One control language in the row: white field + #dfdae5 border; active channel = primary-50 fill */
.analysis-bar .channel-switcher { background: #fff; border: 1px solid #dfdae5; }
.analysis-bar .channel-tab.active { background: #f5f0fb; }
.analysis-bar .query-field input { font-size: 14px; font-weight: 500; }
.analysis-bar label > span, .analysis-bar .control-field > span { margin-left: 0; font-weight: 500; }

/* Hero tags: keyword + stage badge (same stage colors as the signal table) */
.hero-tags .hero-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px;
  color: var(--ink); background: #fff; border: 1px solid #e8e4ed; border-radius: 8px; font-size: 13px;
}
.hero-tags .hero-tag strong { font-weight: 500; }
.hero-tags .hero-tag .stage-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px;
  border: 0; border-radius: 6px; font-size: 12px; font-weight: 600;
}
.hero-tags .hero-tag .stage-pill svg { flex-shrink: 0; width: 14px; height: 14px; }

/* KPI notes: week-over-week badge on the observation card (same arrows and colors as stage badges) */
.metric-card p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.delta-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.delta-badge svg { flex-shrink: 0; width: 14px; height: 14px; }
.delta-badge.up { color: #5365b4; background: #eff1fb; }
.delta-badge.down { color: #c03a46; background: #fdecee; }
.delta-badge.flat { color: #7536d0; background: #f5f0fb; }

/* KPI strip: one card split by 1px lines (works for 4/2/1 columns); Buridge MetricCard type scale */
.metrics-grid { gap: 1px; overflow: hidden; background: #eeeeee; border: 1px solid var(--line); border-radius: 10px; }
.metrics-grid .metric-card { padding: 20px; background: #fff; border: 0; border-radius: 0; }
.metric-card > span { color: #6b6b6b; font-size: 13px; font-weight: 500; }
.metric-card div { gap: 4px; margin-top: 10px; }
.metric-card strong { color: #3b3b3b; font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.metric-card small { padding-bottom: 3px; color: #999999; font-size: 14px; }
.metric-card p { margin-top: 8px; color: #999999; }

/* Notes share the badge's height so every KPI note sits on the same line, badge or not */
.metric-card p { min-height: 24px; }
/* Decline reads as red everywhere: KPI delta, hero tag, signal table pill and stage bar */
.stage-pill.cooling { color: #c03a46; background: #fdecee; }
.stage-stack button.cooling, .stage-list i.cooling { background: #e0606b; }
/* KPI numbers one step above the decision-card titles; labels darker so the strip holds its weight */
.metric-card > span { color: #3b3b3b; font-size: 14px; font-weight: 500; }
.metric-card strong { color: #000; font-family: Montserrat, Pretendard, sans-serif; font-size: 32px; font-weight: 600; letter-spacing: -.04em; }

/* Readable floor inside cards: body 13–14px, secondary 12px (was 8–11px) */
.card-head p { font-size: 14px; }
.chart-note, .chart-empty { font-size: 13px; }
.unit-badge { font-size: 12px; }
.period-toggle button { font-size: 13px; }
.chart-axis-label, .chart-series-label, .axis-title { font-size: 12px; }
.time-chart-tooltip > strong { font-size: 13px; }
.time-chart-tooltip > span, .time-chart-tooltip b { font-size: 12px; }
.keyword-panel .card-head b { font-size: 14px; }
.keyword-search input, .keyword-option span { font-size: 14px; }
.keyword-option b { font-size: 13px; }
.mover-head, .mover-row { grid-template-columns: 32px minmax(80px, 1fr) 52px 52px 64px 52px; gap: 8px; }
.mover-head { font-size: 12px; }
.mover-row, .mover-row strong { font-size: 14px; }
.mover-row > b { font-size: 13px; }
.lag-row > b { font-size: 14px; }
.lag-days, .lag-legend { font-size: 12px; }
@media (max-width: 760px) {
  .mover-head, .mover-row { grid-template-columns: 24px minmax(70px, 1fr) 38px 38px 50px 40px; gap: 4px; }
  .mover-head { font-size: 11px; }
  .mover-row, .mover-row strong { font-size: 12px; }
  .mover-row > b { font-size: 12px; }
}
.period-toggle button { font-weight: 600; }
/* Channel lag rows: room between the day count and the dashed divider */
.lag-row { height: 68px; }
.lag-days { top: 14px; line-height: 18px; }

/* Lucide icons: align with text, inherit color */
.lucide { flex-shrink: 0; }
.text-button, .export-button { display: inline-flex; align-items: center; gap: 6px; }
.menu-button svg { display: block; margin: auto; }
.drawer-head button, .modal-close { display: grid; place-items: center; color: #3b3b3b; }
.decision-card button { display: inline-flex; align-items: center; gap: 4px; }
.keyword-search span, .search-box span { display: flex; color: #7536d0; }
.relation-source-arrow, .pattern-source > span[aria-hidden] { display: flex; align-self: center; color: #999999; }
.pattern-sequence i { display: inline-flex; align-items: center; }

/* Rising keywords: rows share the card's height (the card stretches to match the channel-lag card) */
.mover-card { display: flex; flex-direction: column; }
.mover-card .mover-list { flex: 1; grid-template-rows: auto; grid-auto-rows: minmax(52px, 1fr); gap: 0; }
.mover-card .mover-head { align-self: end; padding-bottom: 10px; }
/* Channel lag legend sits at the card head's top right */
.card-head .lag-legend { display: flex; flex-shrink: 0; margin: 0; padding: 2px 0 0; color: #6b6b6b; }
@media (max-width: 760px) { .lag-card .card-head { flex-wrap: wrap; } }

/* Product–ingredient section: same readable floor as the keyword section */
.section-heading > p, .sentence-heading > p { font-size: 14px; }
.brand-ranking-wrap > span, .relation-legend, .relation-reset { font-size: 13px; }
.brand-rank-button > span, .brand-rank-button small { font-size: 12px; }
.brand-rank-button strong { font-size: 14px; }
.relation-grid .card-head h3 { font-size: 17px; }
.relation-grid .card-head p { font-size: 14px; }
.relation-rank-card .rank-row strong, .relation-rank-card .rank-row > b { font-size: 14px; }
.relation-rank-card .rank-row small, .relation-rank-card .rank-row > em { font-size: 12px; }
.relation-evidence-card .card-head > b { font-size: 13px; }
.relation-source-head { font-size: 12px; }
.relation-source h4 { font-size: 14px; }
.relation-source p { font-size: 13px; }
.relation-source-tags span { font-size: 12px; }
.center-label { font-size: 20px; }
.center-count { font-size: 14px; }

/* Relation layout fixes after the type bump */
.section-heading > p { max-width: 680px; text-wrap: balance; }
.relation-controls { display: block; }
.brand-ranking-wrap > span { margin: 0 0 8px; font-size: 13px; }
.brand-ranking-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.brand-ranking-head > span { font-size: 13px; color: #6b6b6b; }
.brand-search { display: flex; align-items: center; gap: 8px; color: #6b6b6b; font-size: 12px; }
.brand-search input { width: min(270px, 42vw); height: 36px; padding: 0 11px; color: #3b3b3b; background: #fff; border: 1px solid #dfdae5; border-radius: 8px; font: inherit; }
.brand-search input:focus-visible { outline: 2px solid #7536d0; outline-offset: 2px; }
@media(max-width:760px) { .brand-ranking-head { align-items: flex-start; flex-direction: column; } .brand-search, .brand-search input { width: 100%; } }
.brand-ranking { gap: 8px; }
/* Brand chips: one line (name + connection count); selected = primary-50 fill like the channel tabs */
.brand-rank-button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  color: #3b3b3b; background: #fff; border: 1px solid #dfdae5; border-radius: 999px;
}
.brand-rank-button strong { max-width: 160px; font-size: 14px; font-weight: 500; }
.brand-rank-button small { margin: 0; color: #999999; font-size: 13px; }
.brand-rank-button:hover { background: #faf7fe; border-color: #d1bbeb; }
.brand-rank-button.active { color: #7536d0; background: #f5f0fb; border-color: #7536d0; }
.brand-rank-button.active strong { font-weight: 600; }
.brand-rank-button.active small { color: #9663d0; }
.relation-rank-card .rank-row > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 6px; }
.relation-rank-card .rank-row > div:first-child i { margin: 0; }
.relation-rank-card .rank-row strong { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relation-rank-card .rank-row small { grid-column: 2; margin: 3px 0 0; }
/* Network: thinner selection ring, hover cue */
.relation-node.active circle { stroke-width: 3; }
.relation-node:hover circle, .relation-node:focus-visible circle { stroke-width: 2.5; }

/* Association bars group keywords by type and show their content share. */
.relation-grid { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); }
.association-group { margin: 18px 0 6px; color: #6b6b6b; font-size: 13px; font-weight: 600; }
.association-group:first-child { margin-top: 0; }
.association-chart .rank-row {
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) 44px 44px; grid-template-areas: none;
  gap: 14px; padding: 12px 8px; border-radius: 8px;
}
/* Beat the old rank-card placements (.relation-rank-card .rank-row > b/em → named areas) */
.association-chart .rank-row > strong, .association-chart .rank-row > div.rank-track,
.association-chart .rank-row > b, .association-chart .rank-row > em { grid-area: auto; grid-row: 1; }
.association-chart .rank-row strong { display: block; overflow: hidden; color: #3b3b3b; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.association-chart .rank-row.active strong { color: #7536d0; font-weight: 600; }
.association-chart .rank-track { height: 8px; }
.association-chart .rank-row > b { color: #3b3b3b; font-size: 14px; font-weight: 600; text-align: right; }
.association-chart .rank-row > em { display: block; color: #999999; font-size: 13px; font-style: normal; text-align: right; }
@media (max-width: 960px) { .relation-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .association-chart .rank-row { grid-template-columns: minmax(90px, 130px) minmax(0, 1fr) 40px; gap: 10px; }
  .association-chart .rank-row > em { display: none; }
}

/* Evidence cards: platform logo instead of a play glyph (logo carries the platform, so meta drops it) */
.relation-source .relation-source-icon { background: #fff; border: 1px solid #eeeaf2; }

/* Draggable product and ingredient network above the association details. */
.relation-grid > .network-card {
  grid-column: 1 / -1;
  height: auto;
  min-height: 490px;
  padding: 22px 24px 16px;
}
.network-card .card-head { align-items: center; margin-bottom: 10px; }
.network-card .relation-legend { justify-content: center; flex-wrap: wrap; gap: 18px; padding-top: 10px; }
.network-card .relation-legend span { display: inline-flex; align-items: center; gap: 7px; }
.network-card .relation-legend i { width: 10px; height: 10px; margin: 0; }
.network-card .brand-node { background: #7536d0; }
.network-card .ingredient-node { background: #8c63d6; }
.network-card .concern-node { background: #d59b46; }
.network-card .relationship-graph {
  min-height: 390px;
  border: 1px solid #f0eaf7;
  border-radius: 12px;
  background: radial-gradient(circle at center, #f7f2fd 0, #fff 62%);
}
.network-card .relationship-graph svg { display: block; width: 100%; max-width: 920px; height: 390px; max-height: none; margin: auto; overflow: visible; }
.network-scroll-hint { display: none; }
.network-edge { stroke: #a688db; opacity: .52; stroke-linecap: round; transition: opacity .2s, stroke-width .2s; }
.network-edge.concern { stroke: #d6a353; }
.network-edge.selected { opacity: 1; stroke-width: 7; }
.network-edge:not(.selected) { animation: network-edge-breathe 5.4s ease-in-out infinite; }
.network-edge:nth-child(2n) { animation-delay: -2.1s; }
.network-node { cursor: grab; touch-action: none; transform-box: fill-box; transform-origin: center; animation: network-node-sway 6.2s ease-in-out infinite; }
.network-node:nth-child(2n) { animation-duration: 7.3s; animation-delay: -2.4s; }
.network-node:nth-child(3n) { animation-duration: 5.6s; animation-delay: -3.8s; }
.network-node:hover, .network-node:focus-visible, .network-node.dragging { animation-play-state: paused; }
.network-node.dragging { cursor: grabbing; }
.network-node circle { fill: #f6f0ff; stroke: #9468d6; stroke-width: 2; filter: drop-shadow(0 5px 8px rgba(55, 26, 94, .1)); transition: fill .2s, stroke-width .2s; }
.network-node.concern circle { fill: #fff8ed; stroke: #d7a459; }
.network-node:hover circle, .network-node:focus-visible circle { fill: #eee2ff; stroke-width: 3; }
.network-node.concern:hover circle, .network-node.concern:focus-visible circle { fill: #fff0d7; }
.network-node.selected circle { stroke-width: 4; }
.network-center { cursor: pointer; animation: network-center-breathe 5.8s ease-in-out infinite; }
.network-center > circle { fill: #7536d0; filter: drop-shadow(0 8px 12px rgba(117, 54, 208, .22)); }
.network-label { fill: #3a2b4e; font-family: Pretendard, sans-serif; font-size: 15px; font-weight: 700; pointer-events: none; }
.network-center .network-label { fill: #fff; font-size: 18px; }
.network-count { fill: #786989; font-family: Pretendard, sans-serif; font-size: 11px; pointer-events: none; }
.network-center .network-count { fill: #e9dcfb; }
.network-node:focus-visible, .network-center:focus-visible { outline: none; }
.network-node:focus-visible circle, .network-center:focus-visible > circle { stroke: #301558; stroke-width: 4; }
@keyframes network-node-sway {
  0%, 100% { translate: -4px 3px; rotate: -1deg; }
  50% { translate: 5px -4px; rotate: 1deg; }
}
@keyframes network-center-breathe {
  0%, 100% { translate: 0 -2px; }
  50% { translate: 0 2px; }
}
@keyframes network-edge-breathe {
  0%, 100% { opacity: .43; }
  50% { opacity: .68; }
}
@media (prefers-reduced-motion: reduce) {
  .network-node, .network-center, .network-edge:not(.selected) { animation: none; }
}
@media (max-width: 760px) {
  .relation-grid > .network-card { min-height: 0; padding: 18px 14px 14px; }
  .network-card .card-head { align-items: flex-start; flex-wrap: wrap; }
  .network-card .relationship-graph { display: block; min-height: 355px; overflow-x: auto; overflow-y: hidden; }
  .network-card .relationship-graph svg { width: 760px; max-width: none; height: 355px; }
  .network-scroll-hint { display: block; margin: 8px 0 0; color: #786989; font-size: 12px; text-align: center; }
}
#patterns { container: relation-patterns / inline-size; }
@container relation-patterns (min-width: 1400px) {
  .relation-grid {
    grid-template-columns: minmax(340px, 1fr) minmax(680px, 1.6fr) minmax(340px, 1fr);
    grid-template-areas: "association network evidence";
  }
  .relation-grid > .association-card { grid-area: association; height: 560px; }
  .relation-grid > .network-card { grid-area: network; grid-column: auto; height: 560px; min-height: 0; padding: 18px; }
  .relation-grid > .relation-evidence-card { grid-area: evidence; height: 560px; }
}
.relation-source-icon img, .source-placeholder img { display: block; object-fit: contain; }
.pattern-source .source-placeholder { background: #f5f5f6; }

/* Evidence tags: cap each at 160px with an ellipsis (full name on hover), wrap instead of clipping */
.relation-source-tags { flex-wrap: wrap; overflow: visible; }
.relation-source-tags span { min-width: 0; max-width: 160px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: default; }

/* Content patterns: chip tabs, one-line summary, single-layer pattern cards */
.sentence-tabs { gap: 8px; }
.sentence-tab {
  height: 36px; padding: 0 14px; color: #3b3b3b; background: #fff; border: 1px solid #dfdae5; border-radius: 999px;
  font-size: 14px; font-weight: 500;
}
.sentence-tab:hover { background: #faf7fe; border-color: #d1bbeb; }
.sentence-tab.active { color: #7536d0; background: #f5f0fb; border-color: #7536d0; font-weight: 600; }
.pattern-card-head strong { color: #000; font-size: 16px; font-weight: 600; line-height: 1.5; }
.pattern-card-head .pattern-status { padding: 3px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.pattern-status.new { color: #7536d0; background: #f1ebfa; }
.pattern-status.recent { color: #5365b4; background: #eff1fb; }
.pattern-status.past { color: #6b6b6b; background: #f2f2f3; }
.pattern-fields { display: grid; gap: 6px; margin-top: 12px; }
.pattern-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
.pattern-field > span:first-child { color: #999999; font-size: 13px; line-height: 1.6; }
.pattern-field > span:last-child { color: #3b3b3b; font-size: 14px; line-height: 1.6; }
.pattern-empty { font-size: 14px; }
.pattern-source strong { font-size: 14px; }
.pattern-source small { font-size: 12px; }
.pattern-source p { font-size: 13px; }


/* Content patterns */
.pattern-highlight { padding: 18px 20px; background: #faf7fe; border: 1px solid #e8ddf5; border-radius: 10px; }
.pattern-highlight-label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; color: #7536d0; font-size: 14px; font-weight: 600; }
.pattern-highlight-label span { color: #999999; font-size: 13px; font-weight: 400; }
.pattern-item + .pattern-item { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e8ddf5; }
.pattern-summary { margin: 8px 0 0; color: #555; font-size: 14px; line-height: 1.6; }
.pattern-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px; }
.pattern-item-foot .pattern-counts { display: block; margin: 0; color: #999999; font-size: 13px; }
.pattern-thumbs { display: flex; gap: 6px; }
.pattern-thumbs a { display: grid; width: 64px; height: 36px; overflow: hidden; place-items: center; background: #fff; border: 1px solid #e8ddf5; border-radius: 6px; }
.pattern-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pattern-thumbs img[width] { width: 20px; height: 20px; object-fit: contain; }

/* Signal status: four highlights as one divided card (same strip as the KPIs) */
.signal-summary { gap: 1px; overflow: hidden; background: #eeeeee; border: 1px solid var(--line); border-radius: 10px; }
.signal-summary .signal-card { min-height: 0; padding: 20px; background: #fff; border: 0; border-radius: 0; }
.signal-label { display: flex; align-items: center; gap: 6px; color: #3b3b3b; font-size: 14px; font-weight: 500; }
.signal-card.up .signal-label svg { color: #5365b4; }
.signal-card.new .signal-label svg { color: #966c09; }
.signal-card.down .signal-label svg { color: #c03a46; }
.signal-card.broad .signal-label svg { color: #6b6b6b; }
.signal-summary .signal-card > strong {
  display: block; margin-top: 12px; overflow: hidden; color: #000; font-family: Montserrat, Pretendard, sans-serif;
  font-size: 24px; font-weight: 600; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap;
}
.signal-summary .signal-card > strong.is-empty { color: #bbbbbb; }
.signal-summary .signal-card > small { display: block; margin-top: 8px; color: #999999; font-size: 13px; }

/* Signal status type: same readable floor as the other sections */
.stage-list strong { font-size: 14px; }
.stage-list span { font-size: 13px; }
.search-box input { font-size: 14px; }
.filter-button { font-size: 13px; font-weight: 600; }
.trend-table { font-size: 14px; }
.trend-table th { font-size: 13px; }
.stage-pill, .delta-pill { font-size: 12px; }
.trend-table.expanded td:nth-child(3) b { font-size: 14px; }
.trend-table-bar > b { font-size: 13px; }

/* Stage filter chips with counts + thin mix bar (replaces the separate stage card) */
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-group .filter-button {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  color: #3b3b3b; background: #fff; border: 1px solid #dfdae5; border-radius: 999px; font-size: 14px; font-weight: 500;
}
.filter-group .filter-button b { color: #999999; font-size: 13px; font-weight: 500; }
.filter-group .filter-button:hover:not(.active) { color: #3b3b3b; background: #faf7fe; border-color: #d1bbeb; }
.filter-group .filter-button.active { color: #7536d0; background: #f5f0fb; border-color: #7536d0; font-weight: 600; }
.filter-group .filter-button.active b { color: #9663d0; }
.filter-group .filter-button.is-zero { color: #bbbbbb; }
.stage-dot { width: 8px; height: 8px; border-radius: 50%; }
.stage-dot.established { background: #7536d0; }
.stage-dot.growing { background: #6573ca; }
.stage-dot.newborn { background: #d0a14c; }
.stage-dot.cooling { background: #e0606b; }
.stage-bar { display: flex; gap: 2px; height: 4px; margin: 12px 0 16px; overflow: hidden; background: #f0ecf3; border-radius: 4px; }
.stage-bar span { height: 100%; }
.stage-bar .established { background: #7536d0; }
.stage-bar .growing { background: #6573ca; }
.stage-bar .newborn { background: #d0a14c; }
.stage-bar .cooling { background: #e0606b; }