:root{--navy:#0B1733;--navy-2:#112147;--navy-3:#1A3260;--blue:#7C3AED;--mint:#22C984;--page:#F4F6FA;--card:#FFFFFF;--border:#E3E8F0;--muted:#64748B;--ink:#1A2540;--pos:#0D9E6A;--neg:#E53935;--shadow:0 2px 8px rgba(11,23,51,.06),0 12px 32px rgba(11,23,51,.08);}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif;background:var(--page);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;font-size:18px;}
/* contents.css 768px 이하 body{padding:10px} 영향 제거: pm4 페이지에서만 body 좌우 패딩 제거 */
body.pm4{padding:0;}
a{color:inherit;text-decoration:none;}
.noticebar{background:var(--navy);height:48px;display:flex;align-items:center;padding:0 28px;gap:12px;font-size:15px;color:#7A9CC4;}
.nb-pill{background:rgba(34,201,132,.15);border:1px solid rgba(34,201,132,.35);color:var(--mint);font-size:14px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap;}
.nb-dot{width:4px;height:4px;border-radius:50%;background:#2D4A7A;}
.nb-r{margin-left:auto;}
.nb-r a{background:var(--navy-2);border:1px solid rgba(255,255,255,.12);color:#C7D8F0;font-size:12px;font-weight:600;padding:5px 14px;border-radius:7px;}
.gnb{background:var(--navy);height:56px;display:flex;align-items:center;gap:20px;padding:0 28px;border-bottom:1px solid rgba(255,255,255,.06);position:sticky;top:0;z-index:200;}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:900;color:#fff;letter-spacing:-.3px;flex:none;}
/* 랜딩페이지 보트랩 로고 이미지를 상단바 브랜드 영역에 맞춤 */
.brand-logo{height:26px;}
.brand-sq{width:40px;height:40px;border-radius:8px;background:var(--blue);display:grid;place-items:center;font-size:16px;font-weight:900;color:#fff;}
.gnb-dday{background:rgba(124,58,237,.2);border:1px solid rgba(124,58,237,.35);color:#A78BFA;font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap;}
/* 로고/D-DAY/업데이트를 하나의 왼쪽 그룹으로 묶는다 */
.gnb-meta{display:flex;align-items:center;gap:14px;}
.gnb-nav{display:flex;gap:4px;padding-left:20px;border-left:1px solid rgba(255,255,255,.1);}
.gnb-nav a{font-size:16px;font-weight:600;color:#7A9CC4;padding:8px 15px;border-radius:7px;}
.gnb-nav a.active{color:var(--mint);font-weight:700;}
.gnb-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}
.gbtn{display:flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(255,255,255,.06);color:#C7D8F0;font-size:16px;font-weight:600;padding:9px 16px;cursor:pointer;font-family:inherit;}
.gbtn svg{width:15px;height:15px;flex:none;}
.gbtn-icon{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer;}
.gbtn-icon svg{width:16px;height:16px;color:#7A9CC4;}
.hero{background:linear-gradient(135deg,#F3EFFB 0%,#F6F2FD 55%,#FBF9FF 100%);padding:100px 28px 40px;position:relative;overflow:hidden;}
.hero::before{content:attr(data-month); /* HTML의 data-month 속성에서 보고서 월 숫자를 읽어온다 */position:absolute;top:-10px; /* 배경 숫자를 아래로 42px 내린다 */left:48%; /* 배경 숫자를 더 안쪽(왼쪽)으로 이동하여 화면 안으로 당긴다 */right:auto;font-size:clamp(380px,34vw,620px); /* 배경 월 숫자를 더 크게 확대한다 */font-weight:900;color:transparent;z-index:0;opacity:0.35;line-height:1;background:linear-gradient(180deg,rgba(124,58,237,.22) 0%,rgba(124,58,237,.10) 55%,rgba(124,58,237,.04) 100%);-webkit-background-clip:text;background-clip:text;}
.hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 600px 300px at -60px calc(100% + 80px),rgba(34,201,132,.09) 0%,transparent 65%),radial-gradient(ellipse 500px 500px at calc(100% + 40px) -40px,rgba(124,58,237,.10) 0%,transparent 60%);pointer-events:none;z-index:0;}
.hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:60px;}
.hero-brand{font-size:clamp(48px,6.6vw,92px);font-weight:900;letter-spacing:-1.2px;line-height:1;color:#FFFFFF;margin-bottom:14px;-webkit-text-stroke:3px rgba(124,58,237,.75);text-shadow:0 6px 22px rgba(10,10,30,.18),0 2px 0 rgba(10,10,30,.12),2px 0 0 rgba(124,58,237,.55),-2px 0 0 rgba(124,58,237,.55),0 2px 0 rgba(124,58,237,.55),0 -2px 0 rgba(124,58,237,.55),2px 2px 0 rgba(124,58,237,.45),-2px 2px 0 rgba(124,58,237,.45),2px -2px 0 rgba(124,58,237,.45),-2px -2px 0 rgba(124,58,237,.45);}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:rgba(124,58,237,.95);font-size:16px;font-weight:900;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:18px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.28);border:2px solid rgba(124,58,237,.70);backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(124,58,237,.14);}
.hero-eyebrow::before{content:'';width:10px;height:10px;border-radius:999px;background:#2DD4A0;display:inline-block;}
.hero-title{font-size:clamp(70px,8.4vw,108px);font-weight:900;line-height:1.01;letter-spacing:-1px;color:#6D28D9;margin-bottom:18px;text-align:left;text-shadow:0 10px 28px rgba(10,10,30,.14),0 2px 0 rgba(10,10,30,.10);}
.hero-title .highlight{position:relative;display:inline-block;color:#6D28D9;}
.hero-title .highlight::after{content:'';display:none;}
.hero-desc{font-size:18px;color:#4B4B63;max-width:720px;line-height:1.6;margin-bottom:30px;text-align:left;white-space:nowrap;}
.hero-btns{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin-top:240px;}
.hbtn{display:flex;align-items:center;gap:8px;border-radius:999px;padding:14px 28px;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .18s;border:0;min-width:240px;justify-content:center;}
.hbtn-p{background:#1E1B2E;color:#fff;}
.hbtn-s{background:#fff;border:2px solid #6D5AE6;color:#6D5AE6;font-weight:700;}
.hbtn svg{width:16px;height:16px;flex:none;}
@media (max-width:1024px){
  .hero-btns{margin-top:180px;}
  .hbtn{min-width:220px;padding:13px 24px;}
}
@media (max-width:768px){
  .hero::before{font-size:260px; /* 모바일에서도 배경 월 숫자를 더 크게 한다 */top:0; /* 모바일에서도 배경 숫자를 아래로 내린다 */left:54%;right:auto;opacity:0.22;}
  .hero-inner{flex-direction:column;gap:40px;text-align:center;}
  .hero-content{text-align:center;}
  .hero-brand{text-align:center;font-size:clamp(38px,10vw,56px);}
  .hero-title{text-align:center;}
  .hero-desc{text-align:center;max-width:100%;white-space:normal;}
  .hero-btns{align-items:center;margin-top:44px;}
}
@media (max-width:480px){
  .hbtn{min-width:0;width:100%;}
}
.cand-wrap{max-width:1280px;margin:-100px auto 0;padding:0 28px;position:relative;z-index:10;}
.cand-card{background:var(--card);border:1px solid var(--border);border-radius:22px;box-shadow:0 10px 30px rgba(11,23,51,.10);overflow:hidden;display:grid;grid-template-columns:340px 1fr;}
.cand-profile{display:flex;flex-direction:column;align-items:stretch;border-bottom:0;grid-column:1;grid-row:1 / span 2;min-height:340px;background:linear-gradient(145deg,#3B1C8E 0%,#4B1FA6 45%,#4B1FA6 60%,#1E6FD9 100%);color:#fff;}
.cand-photo{width:auto;flex:none;background:transparent;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:28px 26px 18px;border-right:0;position:relative;overflow:hidden;}
.cand-photo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 420px 220px at 30% 15%,rgba(255,255,255,.10) 0%,transparent 55%);}
.cand-photo-initial{width:76px;height:76px;border-radius:18px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;position:relative;z-index:1;}
.cand-photo-label{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.75);letter-spacing:.6px;text-transform:uppercase;position:relative;z-index:1;}
.cand-info-block{flex:1;padding:0 26px 22px;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;}
.cand-badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
.badge{font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.18);}
.badge-gray{background:rgba(255,255,255,.14);color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.20);}
.badge-warn{background:#FFF7ED;color:#92400E;border:1px solid #FCD9A0;display:inline-flex;align-items:center;gap:4px;}
.cand-name{font-size:32px;font-weight:900;color:#fff;letter-spacing:-.6px;line-height:1.15;}
.cand-sub{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.55;}
.cand-period{font-size:12px;color:rgba(255,255,255,.68);}
.cand-period svg{color:rgba(255,255,255,.68);}

.cand-card .cand-kpis{display:grid;grid-template-columns:repeat(2,1fr)!important;grid-auto-rows:1fr;grid-column:2;grid-row:1;border-left:1px solid #EEF2F7;}
.cand-card .ckpi{padding:30px 34px;border-right:1px solid #EEF2F7;border-bottom:1px solid #EEF2F7;}
.cand-card .ckpi:nth-child(2),.cand-card .ckpi:nth-child(4){border-right:0;}
.cand-card .ckpi:nth-child(3),.cand-card .ckpi:nth-child(4){border-bottom:0;}
.cand-card .ckpi-label{font-size:13px;color:#64748B;font-weight:700;margin-bottom:10px;}
.cand-card .ckpi-val{font-size:56px;font-weight:900;color:#0F172A;letter-spacing:-1.6px;line-height:1.05;}
.cand-card .ckpi:nth-child(2) .ckpi-val{color:#7C3AED;}
.cand-card .ckpi:nth-child(4){background:#FFF6F6;}
.cand-card .ckpi:nth-child(4) .ckpi-val{color:#DC2626;}
.cand-card .ckpi-delta{font-size:13px;font-weight:800;margin-top:10px;}

.cand-chips{grid-column:1 / -1;padding:14px 22px;background:#F8FAFC;border-top:1px solid #EEF2F7;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);}

@media (max-width:980px){
  .cand-card{grid-template-columns:1fr;}
  .cand-profile{grid-column:1;grid-row:auto;}
  .cand-card .cand-kpis{grid-column:1;grid-row:auto;border-left:0;border-top:1px solid #EEF2F7;}
}

.sns-platform-group { margin-bottom: 28px; }
.sns-platform-title { font-size: 20px; font-weight: 900; color: var(--ink); margin-bottom: 4px; }
.sns-platform-period { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.sns-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sns-card-row-4col { grid-template-columns: repeat(4, 1fr); }
@media(max-width:860px){ .sns-card-row-4col { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px){ .sns-card-row, .sns-card-row-4col { grid-template-columns: 1fr; } }

.sns-metric-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.sns-metric-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--ink);
  margin-bottom: 14px;
}
.sns-metric-icon-box {
  width: 34px; height: 34px; border-radius: 9px;
  background: #EEF4FF; display: grid; place-items: center; font-size: 16px;
}
.sns-metric-value {
  font-size: 32px; font-weight: 900; color: var(--ink);
  text-align: right; letter-spacing: -.5px; margin-bottom: 14px;
}
.sns-metric-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 6px 0;
  border-top: 1px solid #F1F5F9;
}
.sns-metric-row .lbl { color: var(--muted); font-weight: 600; }
.sns-metric-row .val { font-weight: 800; }
.sns-metric-row .val.up { color: #2563EB; }
.sns-metric-row .val.dn { color: #EF4444; }
.sns-metric-row .prev-val { color: var(--muted); font-weight: 700; }
.sns-metric-sub { font-size: 11px; color: #94A3B8; text-align: right; margin-top: 2px; }

.sns-notice-banner {
  margin-top: 6px;
  background: #FFF7CC;
  border-left: 6px solid #FBBF24;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  color: #1A2540;
  font-weight: 600;
}

/* 정당 지지율 차트 스타일 */
.party-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-top: 16px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #E3E8F0;
}

.pty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.pty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pty-nm {
    color: var(--ink);
    font-weight: 600;
    min-width: 80px;
}

.pty-vl {
    color: var(--ink);
    font-weight: 700;
    min-width: 35px;
}

.pty-dl {
    font-weight: 700;
    font-size: 12px;
    min-width: 35px;
}

/* 캔버스가 들어가는 차트 박스(지도 박스 chart-box-4는 제외) */
.chart-box-1 .r_graph,
.chart-box-2 .r_graph,
.chart-box-3 .r_graph,
.chart-box-5 .r_graph {
  position: relative;
  padding-top: 24px;          /* 인포 텍스트 자리 */
}

.chart-box .r_graph .data-display {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  margin: 0;
}

/* 이슈 토글도 gov/party와 동일한 컴팩트 인포 스타일 적용 */
.issue-toggle .data-display {
  font-size: 11px;
  color: #334155;
  min-height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-display {
    padding: 12px 16px;
    background: #F8FAFC;
    border: 1px solid #E3E8F0;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.infoBox_up {
    color: var(--pos);
    font-weight: 700;
}

.infoBox_down {
    color: var(--neg);
    font-weight: 700;
}

.infoBox_idtxt {
    color: var(--muted);
    font-size: 12px;
    margin-right: 4px;
}

.box_type1 {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

.box_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: #FAFBFC;
}

.box_title h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon02::before {
    content: "📊";
    font-size: 20px;
}

.date_s {
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
}

.date_move2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date_move2 a {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.date_move2 a:hover {
    background: var(--page);
    border-color: var(--muted);
}

.date_move2 a:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.box_con {
    padding: 24px;
}

.dgraph {
    position: relative;
}

.chart-container {
    position: relative;
}

.mt10 {
    margin-top: 10px;
}

.cand-period{font-size:14px;color:#94A3B8;display:flex;align-items:center;gap:5px;margin-top:2px;}
.cand-period svg{width:13px;height:13px;}
.cand-kpis{display:grid;grid-template-columns:repeat(2,1fr);}
.ckpi{padding:24px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
.ckpi:nth-child(2),.ckpi:nth-child(4){border-right:0;}
.ckpi:nth-child(3),.ckpi:nth-child(4){border-bottom:0;}
.ckpi-label{font-size:13px;color:var(--muted);font-weight:600;margin-bottom:8px;}
.ckpi-val{font-size:36px;font-weight:900;color:var(--ink);letter-spacing:-1px;line-height:1.1;}
.ckpi-delta{font-size:14px;font-weight:700;margin-top:6px;}
.ckpi-delta.up{color:var(--pos);}
.ckpi-delta.dn{color:var(--neg);}
.cand-chips{padding:14px 28px;background:#F8FAFD;border-top:1px solid var(--border);display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);}
.cchip{display:flex;align-items:center;gap:5px;}
.cchip svg{width:13px;height:13px;color:#94A3B8;}
.snav{background:transparent;border-bottom:0;position:sticky;top:56px;z-index:100;margin-top:0;}
.snav-in{width:1226px;margin:0 auto;padding:10px 12px;display:flex;overflow-x:auto;scrollbar-width:none;background:linear-gradient(90deg,#3b1a7a,#6d28d9);border:1px solid rgba(255,255,255,.15);border-radius:14px;box-shadow:0 8px 20px rgba(61,26,122,.22);}
.snav-in::-webkit-scrollbar{display:none;}
.snav-in a{font-size:15px;font-weight:800;color:#fff;padding:12px 16px;border-radius:10px;border-bottom:0;white-space:nowrap;transition:all .15s;}
.snav-in a:hover{background:rgba(255,255,255,.15);color:#fff;}
.snav-in a.active{background:rgba(255,255,255,.25);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
.month-picker{margin-left:auto;display:flex;align-items:center;justify-content:center;gap:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18);}
.month-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.18);color:#fff;font-size:18px;font-weight:800;text-decoration:none;cursor:pointer;transition:background .15s;}
.month-arrow:hover{background:rgba(255,255,255,.35);color:#fff;}
.month-arrow.disabled{opacity:.4;cursor:default;pointer-events:none;}
.month-select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;text-align:center;text-align-last:center;}
.month-select option{color:#1A2540;background:#fff;}
.main{max-width:1226px;margin:0 auto;padding:36px 0 80px;}
.sec-blk{margin-bottom:48px;}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.sec-num{width:32px;height:32px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none;}
.sec-head h2{font-size:23px;font-weight:900;color:var(--ink);letter-spacing:-.4px;}
.sec-head span{font-size:15px;color:var(--muted);}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04);margin-bottom:14px;overflow:hidden;}
.card-head{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;background:#FAFBFF;}
.card-head h4{font-size:17px;font-weight:800;color:var(--ink);}
.period{background:#EEF4FF;color:#2B5FC4;font-size:13px;font-weight:700;padding:4px 11px;border-radius:5px;border:1px solid #C7D7F7;white-space:nowrap;}
.card-bd{padding:24px;}
.card-sub{font-size:15px;color:var(--muted);margin-bottom:18px;}
.eval-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;}
@media(max-width:640px){.eval-grid{grid-template-columns:1fr;}}
.eval-bars{display:flex;flex-direction:column;gap:11px;}
.eval-row{display:flex;align-items:center;gap:10px;}
.eval-row .en{width:78px;font-size:14px;font-weight:700;color:var(--muted);flex:none;}
.ebar{flex:1;height:34px;border-radius:8px;background:#EFF2F8;overflow:hidden;position:relative;}
.ebar span{position:absolute;left:0;top:0;bottom:0;border-radius:8px;display:flex;align-items:center;padding-left:13px;color:#fff;font-weight:800;font-size:15px;}
.gov-gauge-new{display:flex;flex-direction:column;align-items:center;}
.gov-gauge-canvas-wrap{position:relative;width:100%;max-width:340px;}
.gov-gauge-canvas-wrap canvas{width:100%!important;}
.gov-gauge-center-text{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none;}
.gov-gauge-center-total{font-size:21px;font-weight:900;color:var(--ink);letter-spacing:-0.5px;white-space:nowrap;}
.gov-gauge-legend{display:flex;gap:20px;margin-top:12px;flex-wrap:wrap;justify-content:center;}
.gov-legend-item{display:flex;flex-direction:column;align-items:center;gap:4px;}
.gov-legend-dot{width:12px;height:12px;border-radius:3px;}
.gov-legend-name{font-size:13px;color:var(--muted);font-weight:600;}
.gov-legend-val{font-size:19px;font-weight:900;color:var(--ink);}

/* contents.css의 custom-legend-week_gov 스타일 추가 */
.custom-legend-week_gov {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}

.custom-legend-week_gov .legend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.custom-legend-week_gov .legend-box {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-bottom: 6px;
}

.custom-legend-week_gov .legend-label {
  font-size: 12px;
  margin-bottom: 4px;
}

.custom-legend-week_gov .legend-percent {
  font-size: 20px;
  font-weight: bold;
}
/* 정당 지지율 CSS 변경 */
.box_type1 .box_con .dgraph {
  display: flex;
  align-items: flex-start;
  padding: 10px 10px;
  justify-content: space-between;
  margin: auto 0;
}

#chart-container_party {
  width: 100%;
  height: 270px;
  position: relative;
  margin: 0 auto;
}

.data-display {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  text-align: left;
  background: white;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  overflow-x: auto;
  box-sizing: border-box;
  word-break: break-word;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 12px;
  color: #475569;
}

/* 모바일에서 연령별/직업별 세로 막대그래프 셀 잘림 방지 */
@media (max-width: 640px) {
  .chart-box-2,                   /* 연령별 차트 박스 */
  .chart-box-5 {                  /* 직업별 차트 박스 */
    overflow-x: auto;              /* 넘치는 캔버스는 가로 스크롤로 볼 수 있도록 */
    -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
  }
  .chart-box-2 .r_graph,          /* 연령 차트 영역 */
  .chart-box-5 .r_graph {          /* 직업 차트 영역 */
    min-width: 360px;              /* 최소 폭 확보: 막대/라벨이 찌그러지지 않도록 */
  }
}

/* Modal-specific chart legend styling for better spacing */
#surveyModal .chart-legend {
  margin-top: 16px;   /* 기존 공용 8px보다 넓게 */
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;  /* 시각적으로 막대 영역과 확실히 분리 */
}
.pty-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:#FAFBFF;transition:all .14s;}
.pty-row:hover{background:#EEF4FF;border-color:#C7D7F7;}
.pty-dot{width:10px;height:10px;border-radius:4px;flex:none;}
.pty-nm{font-size:15px;font-weight:700;color:var(--ink);flex:1;}
.pty-vl{font-size:16px;font-weight:900;color:var(--ink);min-width:44px;text-align:right;}
.pty-dl{font-size:13px;font-weight:700;min-width:40px;text-align:right;}
.acc{border:1px solid var(--border);border-radius:11px;overflow:hidden;margin-top:14px;}
.acc-item{border-top:1px solid var(--border);}
.acc-item:first-child{border-top:0;}
.acc-btn{width:100%;background:#F0F4FF;border:0;cursor:pointer;font-family:inherit;text-align:left;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:#1A2540;transition:background .14s;}
.acc-btn:hover{background:#E4EBFF;}
.acc-btn .ico{flex:none;width:32px;height:32px;border-radius:8px;background:#D8E4FF;display:grid;place-items:center;font-size:17px;}
.acc-btn .lbl{color:#1A2540;font-weight:700;}
.acc-btn .arr{margin-left:auto;color:#4A6FA5;transition:transform .2s;font-size:14px;font-weight:900;}
.acc-btn[aria-expanded="true"] .arr{transform:rotate(180deg);}
.acc-btn[aria-expanded="true"]{background:#fff;border-bottom:1px solid var(--border);}
.acc-panel{display:none;padding:8px 18px 20px;}
.acc-panel.open{display:block;animation:fi .24s ease;}
/* 종합 평가 추이 전용 스타일 - 토글 없이 항상 보이는 섹션 */
.acc-item-no-toggle{border-top:1px solid var(--border);}
.acc-item-no-toggle:first-child{border-top:0;}
.acc-item-no-toggle .acc-panel-header{width:100%;background:var(--card);border:0;font-family:inherit;text-align:left;padding:14px 18px;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:#1A2540;border-bottom:1px solid var(--border);}
.acc-item-no-toggle .acc-panel-header .ico{flex:none;width:32px;height:32px;border-radius:8px;background:#D8E4FF;display:grid;place-items:center;font-size:17px;}
.acc-item-no-toggle .acc-panel-header .lbl{color:#1A2540;font-weight:700;}
.acc-item-no-toggle .acc-panel{display:block;padding:8px 18px 20px;border-top:1px solid var(--border);}
@keyframes fi{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
.cbox{position:relative;height:270px;}
.sblk{margin-bottom:28px;}
.shead{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding:12px 16px;background:linear-gradient(135deg,#EEF4FF,#F4F6FA);border-radius:10px;border:1px solid #D8E4FF;}
.sbadge{flex:none;width:30px;height:30px;border-radius:8px;background:#fff;border:1px solid #C7D7F7;display:grid;place-items:center;font-size:16px;box-shadow:0 1px 3px rgba(30,111,217,.1);}
.shead h4{font-size:17px;font-weight:900;color:var(--ink);}
.shead .sh{font-size:13px;color:var(--muted);margin-left:auto;font-weight:600;}
.kstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;margin-bottom:16px;}
@media(max-width:860px){.kstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none;padding-bottom:4px;}.kstrip::-webkit-scrollbar{display:none;}}
.kbox{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 12px;box-shadow:0 1px 4px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;position:relative;}
.kbox-diff{position:absolute;top:8px;right:10px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;display:flex;align-items:center;gap:2px;white-space:nowrap;}
.kbox-diff.up{background:#D1FAE5;color:#065F46;}
.kbox-diff.dn{background:#FEE2E2;color:#991B1B;}
.kbox-top{display:flex;align-items:center;gap:6px;margin-bottom:1px;margin-top:18px;}
.kbox-ico{font-size:16px;line-height:1;flex:none;}
.kbox .kl{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kbox .kv{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.4px;line-height:1.2;white-space:nowrap;}
@media(max-width:860px){.kbox{flex:none;width:112px;padding:10px;}.kbox-top{margin-top:16px;}.kbox-ico{font-size:13px;}.kbox .kl{font-size:9.5px;}.kbox .kv{font-size:13px;}.kbox-diff{font-size:9px;padding:1px 5px;top:6px;right:7px;}}
.mention-section{display:flex;flex-direction:column;gap:12px;margin-bottom:0;}
.kstrip5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
@media(max-width:860px){.kstrip5{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none;padding-bottom:4px;}.kstrip5::-webkit-scrollbar{display:none;}}

/* 온라인 트래픽 5개 KPI를 한 줄에 작게 배치한다 */
.kstrip5 .kbox{
    padding: 10px 8px; /* 상하좌우 여백을 줄여 박스를 작게 만든다 */
    border-radius: 10px; /* 모서리 둥글기를 살짝 줄인다 */
    gap: 2px; /* 아이콘-라벨-값 사이 간격을 좁힌다 */
}
.kstrip5 .kbox-top{
    margin-top: 8px; /* 상단 여백을 줄인다 */
    margin-bottom: 0; /* 하단 여백을 제거한다 */
    gap: 4px; /* 아이콘과 라벨 사이 간격을 줄인다 */
}
.kstrip5 .kbox-ico{
    font-size: 14px; /* 아이콘 크기를 줄인다 */
}
.kstrip5 .kbox .kl{
    font-size: 11px; /* 라벨 글자 크기를 줄인다 */
    font-weight: 600; /* 라벨 두께를 약간 줄인다 */
}
.kstrip5 .kbox .kv{
    font-size: 15px; /* 값 글자 크기를 줄인다 */
    letter-spacing: -.3px; /* 좁은 공간에 맞게 자간을 조정한다 */
}

.mbox{background:#fff;border:1px solid var(--border);border-radius:10px;padding:11px 12px;box-shadow:0 1px 4px rgba(0,0,0,.04);min-width:0;position:relative;}
.mbox-diff{position:absolute;top:6px;right:6px;font-size:9px;font-weight:800;padding:1px 5px;border-radius:5px;display:flex;align-items:center;gap:2px;white-space:nowrap;}
.mbox-diff.up{background:#D1FAE5;color:#065F46;}
.mbox-diff.dn{background:#FEE2E2;color:#991B1B;}
.mbox-ico{font-size:17px;margin-bottom:3px;margin-top:14px;}
.mbox-lbl{font-size:11px;color:var(--muted);font-weight:700;margin-bottom:2px;white-space:nowrap;}
.mbox-val{font-size:17px;font-weight:900;color:var(--ink);letter-spacing:-.3px;white-space:nowrap;}
@media(max-width:860px){.mbox{flex:none;width:112px;padding:8px 9px;}.mbox-ico{font-size:14px;margin-top:12px;}.mbox-lbl{font-size:9px;}.mbox-val{font-size:12px;}.mbox-diff{font-size:8px;padding:1px 4px;top:4px;right:4px;}}
.sg{display:grid;gap:12px;}
.sg.c2{grid-template-columns:1fr 1fr;}
.sg.c3{grid-template-columns:1fr 1fr 1fr;}
.sg.mn-split{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:12px;
}
@media(max-width:860px){
  .sg.mn-split{ grid-template-columns: 1fr; }
}
.pnl{background:#fff;border:1px solid var(--border);border-radius:11px;box-shadow:0 1px 3px rgba(0,0,0,.03);padding:14px 16px;display:flex;flex-direction:column;}
.pnl .pt{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:3px;}
.pnl .ps{font-size:12px;color:var(--muted);margin-bottom:11px;}
.pnl .pb{height:220px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.pnl .pb.ch{display:block;}
.pnl .pb canvas{max-height:220px;}
.pnl .pb.kw-net{
  height: 340px;
  overflow: hidden; /* 그래프가 패널 밖으로 삐져나가지 않도록 잘라냄 */
}
.pnl .pb.ch.kw-rank{
  height: auto;
  min-height: 220px;
  overflow-y: auto;
}
.kw-network svg text{
  font-family:"Pretendard","Noto Sans KR",system-ui,sans-serif;
  user-select:none;
}

/* Sentiment block layout styles */
.sn-sent-wide{
  height:auto !important;
  display:block !important;
}
.sn-sent-row{
  display:flex;
  align-items:center;
  gap:24px;
}
.sn-sent-bar-col{
  flex:1;
  min-width:0;
}
.sbar-wide{
  height:40px;
}
@media(max-width:640px){
  .sn-sent-row{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
}
.pnl .pf{margin-top:auto;padding-top:7px;}
.cloud{display:flex;flex-wrap:wrap;gap:7px;align-content:center;justify-content:center;height:100%;}
.word{border-radius:99px;font-weight:700;padding:6px 14px;border:1px solid var(--border);background:#F8FAFC;color:var(--ink);}
.word.w1{font-size:22px;background:var(--navy);color:#fff;border-color:var(--navy);}
.word.w2{font-size:19px;background:#EEF4FF;color:var(--blue);border-color:#C7D7F7;}
.word.w3{font-size:17px;}
.word.w4{font-size:14px;color:var(--muted);}
.cloud.wcloud{height:400px;padding:18px 10px;position:relative;display:block;overflow:hidden;}
.cloud.wcloud .word{border:0;background:transparent;padding:0;border-radius:0;line-height:1;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;user-select:none;}
.cloud.wcloud .word.w1{font-size:50px;font-weight:900;letter-spacing:-1px;}
.cloud.wcloud .word.w2{font-size:40px;font-weight:900;letter-spacing:-.6px;}
.cloud.wcloud .word.w3{font-size:30px;font-weight:800;letter-spacing:-.4px;}
.cloud.wcloud .word.w4{font-size:24px;font-weight:700;}
.cloud.wcloud .word.w5{font-size:18px;font-weight:600;}
/* Remove fixed colors to allow inline styles to set positive/negative colors */
.yt-period-tab{
  border:1px solid var(--border);background:#fff;color:var(--muted);
  font-size:12px;font-weight:800;padding:6px 12px;border-radius:999px;
  cursor:pointer;font-family:inherit;
}
.yt-period-tab.active{border-color:#C7D7F7;background:#EEF4FF;color:var(--ink);}

.sg.sn-split{
  display:grid;
  grid-template-columns: 1fr 1.3fr;
  gap:12px;
  align-items:stretch;
}
@media(max-width:860px){
  .sg.sn-split{ grid-template-columns: 1fr; }
}
.sn-kw-tall{
  display:flex;
  flex-direction:column;
  height:100%;
}
.sn-kw-cloud{
  height:100% !important;
  min-height:480px;
}
.sn-right-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sn-right-col .pnl{
  flex:none;
}
.sbar.sbar-square{
  border-radius:0 !important;
}
.sbar.sbar-square > div{
  border-radius:0 !important;
}
.sn-trend-tall .pb.ch{
  height:340px;
}
.sn-trend-tall .pb.ch canvas{
  max-height:340px;
}
.sn-sent-short{
  padding-bottom:12px;
}
.sn-hashtag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-top:14px;
}
.sn-hashtag{
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
}
.sn-hashtag-pos{ color:#2B6CB0; }
.sn-hashtag-neg{ color:#C0392B; }
.rt{width:100%;border-collapse:collapse;font-size:14px;}
.rt th{text-align:left;color:var(--muted);font-weight:700;font-size:12px;padding:6px 9px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.4px;}
.rt td{padding:10px 9px;border-bottom:1px solid #F1F5F9;}
.rt td.k{font-weight:700;color:var(--ink);}
.rt td.n{text-align:right;color:var(--muted);}
.rt .chg{font-weight:800;font-size:13px;}

/* 연관어 TOP 10 — desktop/mobile split */
.kwtop-mobile-wrap{display:none;}
@media(max-width:640px){
  .kwtop-table-wrap{display:none;}
  .kwtop-mobile-wrap{display:block;}
}
.kwtop-list .kwtop-row{display:flex;align-items:center;gap:12px;padding:14px 6px;border-bottom:1px solid #EEF2FA;}
.kwtop-list .kwtop-rank{flex:none;width:26px;font-weight:900;font-style:italic;color:#94A3B8;font-size:15px;}
.kwtop-list .kwtop-main{flex:1;min-width:0;}
.kwtop-list .kwtop-word{font-weight:900;color:#0F172A;font-size:15px;}
.kwtop-list .kwtop-cate{display:inline-block;margin-top:4px;font-size:12px;font-weight:800;padding:2px 8px;border-radius:99px;background:#F1F5F9;}
.kwtop-list .kwtop-count{flex:none;font-weight:900;color:#64748B;font-size:14px;text-align:right;}
#kwtop-prev:disabled,#kwtop-next:disabled{opacity:.35;cursor:default;}

/* 연관어 카테고리 레이더 차트 — 모바일에서만 반으로 줄임 */
@media(max-width:640px){
  .kw-radar-wrap{height:340px !important;}
  #kw-radar-youtube{height:240px !important;width:100% !important;max-width:360px !important;margin-top:40px !important;}
}
.therm{display:flex;align-items:center;gap:14px;margin-bottom:10px;}
.therm .big{font-size:44px;font-weight:900;color:var(--ink);letter-spacing:-2px;line-height:1;}
.therm .lb{font-size:12px;color:var(--muted);font-weight:600;line-height:1.5;}
.sbar{height:28px;border-radius:8px;overflow:hidden;display:flex;}
.sbar>div{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;}
.sleg{display:flex;gap:14px;margin-top:11px;font-size:12px;color:var(--muted);font-weight:600;justify-content:space-between;width:100%;}

/* 언급량 추이 비교 차트 스타일 */
.toggle-switch.active{background:#3B7EF5;}
.toggle-switch.active .toggle-slider{transform:translateX(16px);}
.period-tab:hover{background:#F1F5F9;}
.period-tab.active{color:#1A2540;background:#fff;border:1px solid #E2E8F0;}
.legend-item input:checked + .legend-checkbox{background:currentColor;}
.legend-item input:not(:checked) + .legend-checkbox{background:transparent;}
.legend-item input:not(:checked) + .legend-checkbox span{display:none;}
.excel-download:hover{background:#F1F5F9;border-color:#CBD5E1;}
@media(max-width:860px){
  .period-tabs{flex-direction:column;gap:2px;}
  .excel-download span:last-child{display:none;}
}
.sleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px;}
.yt-kstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
@media(max-width:860px){.yt-kstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none;padding-bottom:4px;}.yt-kstrip::-webkit-scrollbar{display:none;}}
.yt-kbox{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.04);display:flex;flex-direction:column;gap:3px;min-width:0;position:relative;}
.yt-kbox-diff{position:absolute;top:8px;right:10px;font-size:10px;font-weight:800;padding:2px 6px;border-radius:5px;display:flex;align-items:center;gap:2px;white-space:nowrap;}
.yt-kbox-diff.up{background:#D1FAE5;color:#065F46;}
.yt-kbox-diff.dn{background:#FEE2E2;color:#991B1B;}
.yt-kbox-top{display:flex;align-items:center;gap:6px;margin-bottom:1px;margin-top:18px;}
.yt-kbox-ico{font-size:16px;line-height:1;flex:none;}
.yt-kbox .kl{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.yt-kbox .kv{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.4px;line-height:1.2;white-space:nowrap;}
.yt-video-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed;}
.yt-video-table th{text-align:left;color:var(--muted);font-weight:700;font-size:12px;padding:8px 10px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.4px;background:#FAFBFF;white-space:nowrap;}
.yt-video-table td{padding:12px 10px;border-bottom:1px solid #F1F5F9;vertical-align:middle;}
.yt-video-table th:nth-child(1),.yt-video-table td:nth-child(1){width:64px;}
.yt-video-table th:nth-child(3),.yt-video-table td:nth-child(3){width:96px;text-align:right;}
.yt-video-table th:nth-child(4),.yt-video-table td:nth-child(4){width:86px;text-align:right;}
.yt-video-table th:nth-child(5),.yt-video-table td:nth-child(5){width:78px;text-align:right;}
.yt-video-table th:nth-child(6),.yt-video-table td:nth-child(6){width:72px;text-align:center;}
.yt-video-table tr:last-child td{border-bottom:0;}
.yt-video-table tr:hover td{background:#F8FBFF;}
.yt-thumb{width:48px;height:30px;border-radius:5px;background:linear-gradient(135deg,#1A3260,#1E6FD9);display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none;}
.yt-title{font-weight:700;color:var(--ink);font-size:14px;line-height:1.4;}
.yt-channel{font-size:12px;color:var(--muted);margin-top:3px;}
.yt-stat{font-size:14px;font-weight:700;color:var(--ink);text-align:right;white-space:nowrap;}
.yt-sent-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;}
.yt-sent-badge.pos{background:#DBEAFE;color:#1D4ED8;}
.yt-sent-badge.neg{background:#FEE2E2;color:#991B1B;}
.yt-sent-badge.neu{background:#F1F5F9;color:#64748B;}
.yt-sent-pending{display:inline-flex;align-items:center;padding:4px 10px;border-radius:99px;font-size:12px;font-weight:700;background:#F1F5F9;color:#64748B;}
.yt-comment-box{background:#F8FBFF;border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
.yt-comment-box .cm-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.yt-comment-box .cm-ico{font-size:20px;}
.yt-comment-box .cm-ch{font-size:12px;font-weight:700;color:var(--muted);}
.yt-comment-box .cm-sent{margin-left:auto;}
.yt-comment-box .cm-text{font-size:14px;color:var(--ink);line-height:1.6;}
.yt-comment-box .cm-stat{font-size:12px;color:#94A3B8;margin-top:8px;display:flex;gap:14px;}
/* 주요 댓글 더보기/접기 버튼 */
.yt-comment-toggle{
  grid-column:1 / -1;
  margin:0 auto;
  padding:8px 16px;
  border:1px solid #E5EAF3;
  border-radius:99px;
  background:#fff;
  color:#64748B;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  width:100%;
  max-width:320px;
  text-align:center;
}
.yt-comment-toggle.is-open{background:#F1F5F9;}
footer{background:var(--navy);color:#4A6A9A;font-size:14px;}
footer .fi{max-width:1280px;margin:0 auto;padding:24px 28px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.fl{display:flex;align-items:center;gap:10px;color:#8AABD4;font-weight:800;font-size:16px;}
.drawer-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.45);}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;top:0;left:0;right:0;z-index:600;background:#1E1E25;transform:translateY(-100%);transition:transform .28s ease;border-bottom-left-radius:20px;border-bottom-right-radius:20px;}
.drawer.open{transform:translateY(0);}
.drawer-head{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;} /* 서랍 상단에 MY/로그아웃/닫기 버튼을 양쪽 정렬한다 */
.drawer-top-btns{display:flex;align-items:center;gap:8px;} /* MY/로그아웃 버튼 그룹 */
.drawer-top-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 18px;border-radius:99px;background:transparent;border:1px solid #6D28D9;color:#fff;font-size:13px;font-weight:700;text-decoration:none;} /* 보라색 테두리 투명 배경 버튼 */
.drawer-close{width:38px;height:38px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer;color:#C7D8F0;margin-left:auto;} /* X 닫기 버튼 */
.drawer-body{padding:0 16px 24px;display:flex;flex-direction:column;gap:12px;} /* 서랍 본문: 카드, 업데이트, 메뉴를 세로로 배치 */
.drawer-dday-card{background:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 4px 14px rgba(0,0,0,.08);} /* 흰색 D-Day 카드 */
.drawer-dday-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;} /* 카드 안 정보와 카운터를 양쪽 배치 */
.drawer-dday-info{display:flex;align-items:center;gap:10px;} /* 시계 아이콘과 선거일 문구를 가로 배치 */
.drawer-dday-ico{width:36px;height:36px;border-radius:50%;background:#FEE2E2;color:#E53935;display:grid;place-items:center;font-size:18px;flex:none;} /* 빨간 원형 시계 아이콘 */
.drawer-dday-meta{display:flex;flex-direction:column;gap:2px;} /* 선거일과 선거명 텍스트 */
.drawer-dday-date{font-size:12px;font-weight:700;color:#E53935;} /* 2028년 4월 12일(수) */
.drawer-dday-title{font-size:13px;font-weight:800;color:#111;} /* 제23대 국회의원 선거 */
.drawer-dday-counter{display:flex;align-items:center;gap:4px;} /* D- 접두어와 자릿수 블록 */
.drawer-dday-label{font-size:26px;font-weight:900;color:#111;margin-right:2px;} /* D- 또는 D+ 텍스트 */
.drawer-dday-digit{display:inline-flex;align-items:center;justify-content:center;width:28px;height:34px;background:#111;color:#fff;border-radius:6px;font-size:20px;font-weight:800;} /* 검은색 둥근 자릿수 블록 */
.drawer-update{background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 2px 10px rgba(0,0,0,.05);} /* 흰색 최근 업데이트 바 */
.drawer-update-label{font-size:13px;font-weight:700;color:#111;} /* '최근 업데이트' 라벨 */
.drawer-update-value{font-size:13px;font-weight:600;color:#64748B;} /* 날짜/시간 값 */
.drawer-update-ico{width:18px;height:18px;color:#6D28D9;flex:none;} /* 새로고침 아이콘 */
.drawer-links{display:flex;flex-direction:column;gap:2px;margin-top:6px;} /* 서랍 메뉴 리스트 */
.drawer-links a{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:15px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;} /* 메뉴 항목 */
.drawer-links a:last-child{border-bottom:0;} /* 마지막 항목 하단 구분선 제거 */
.drawer-links a.active{color:var(--mint);} /* 현재 메뉴 표시 */
.drawer-chevron{color:#94A3B8;font-size:16px;} /* 오른쪽 › 화살표 */
.drawer-btns{padding:16px 20px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.drawer-btn{padding:13px;border-radius:9px;text-align:center;font-size:16px;font-weight:700;cursor:pointer;border:0;font-family:inherit;}
.drawer-btn-o{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#C7D8F0;}
.drawer-btn-p{background:var(--blue);color:#fff;}
.party-chart-box canvas,.cbox canvas,.pnl .pb canvas{width:100% !important;height:100% !important;}
.pnl .pb,.cbox,.party-chart-box{min-width:0;}
.dnt-wrap{display:flex;flex-direction:column;align-items:center;gap:0;height:auto!important;min-height:220px;}
.dnt-wrap canvas{flex:none;max-height:180px;}
.dnt-legend{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;margin-top:10px;padding:0 8px;}
.dnt-leg-item{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink);}
.dnt-leg-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.dnt-leg-name{color:var(--muted);font-weight:600;}
.dnt-leg-pct{font-weight:800;color:var(--ink);}

 .comp-donut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
 .comp-donut-item{border:1px solid #EEF2F7;border-radius:12px;padding:12px;background:#fff;}
 .comp-donut-title{font-size:12px;font-weight:800;color:#64748B;margin-bottom:8px;text-align:center;}
 .comp-donut-body{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;}
 .comp-donut-canvas{height:180px;width:180px;position:relative;flex:none;}
 .comp-donut-canvas canvas{width:100%!important;height:100%!important;}
 .comp-donut-legend{display:flex;flex-direction:row;gap:12px;justify-content:center;align-items:center;margin-top:8px;}
 .comp-donut-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink);}
 .comp-donut-leg-dot{width:10px;height:10px;border-radius:3px;flex:none;}
 .comp-donut-leg-name{color:var(--muted);font-weight:700;}
.comp-donut-leg-pct{color:var(--ink);font-weight:800;margin-left:4px;}
 @media(max-width:860px){.comp-donut-grid{grid-template-columns:repeat(2,1fr);}}
 @media(max-width:520px){.comp-donut-grid{grid-template-columns:1fr;}}

.comp-donut-grid-2x3{display:grid;grid-template-columns:1fr 56px 1fr;gap:0;align-items:stretch;}
.comp-donut-col{display:flex;flex-direction:column;gap:14px;}
.comp-donut-divider{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 8px;}
.comp-donut-divider-line{width:1px;height:100%;background:#E3E8F0;}
@media(max-width:860px){.comp-donut-grid-2x3{grid-template-columns:1fr;gap:14px;}.comp-donut-divider{display:none;}}

/* Combo chart legend styles - checkbox style chips */
.mt-combo-legend{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px;
}
.mt-leg-chip{
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  border:1.5px solid var(--chip-color);
  background:#fff;font-size:12px;font-weight:700;color:#1A2540;
  cursor:pointer;font-family:inherit;transition:opacity .15s;
}
.mt-leg-chip .mt-leg-check{
  width:14px;height:14px;border-radius:4px;
  background:var(--chip-color);color:#fff;font-size:10px;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.mt-leg-chip:not(.on){opacity:.4;}
.mt-leg-chip:not(.on) .mt-leg-check{background:transparent;color:transparent;border:1.5px solid var(--chip-color);}
.mt-leg-val{color:var(--chip-color);font-weight:900;}
.segparty-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 10px;}
.segparty-group{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.segparty-sep{color:#94A3B8;font-weight:900;margin:0 2px;}
.segparty-seg .mt-leg-chip{--chip-color:#64748B;background:#F8FAFC;border-color:#CBD5E1;color:#334155;}
.segparty-seg .mt-leg-chip:hover{background:#F1F5F9;}
.shead-name{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.6px;margin-left:8px;}
.subsec-head{display:flex;align-items:center;gap:12px;margin:28px 0 16px;padding:12px 18px;background:linear-gradient(135deg,#F8FAFF,#F4F6FA);border-radius:10px;border-left:3px solid var(--blue);border-top:0.5px solid var(--border);border-right:0.5px solid var(--border);border-bottom:0.5px solid var(--border);}
.subsec-badge{font-size:16px;flex:none;}
.subsec-title{font-size:16px;font-weight:900;color:var(--ink);}
.subsec-desc{font-size:13px;color:var(--muted);margin-left:6px;}
.age-chart-card{background:#fff;border:1px solid var(--border);border-radius:11px;box-shadow:0 1px 3px rgba(0,0,0,.03);padding:14px 16px;}
.age-chart-title{font-size:16px;font-weight:800;color:var(--ink);margin-bottom:14px;}
.age-legend-box{display:flex;align-items:center;gap:10px;background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:14px;color:#991B1B;font-weight:600;}
.age-legend-dot{width:10px;height:10px;border-radius:50%;background:#E24B4A;flex-shrink:0;}
.age-chart-wrap{position:relative;height:220px;}
.comp-wrap{display:flex;flex-direction:column;gap:14px;}
.comp-cards{display:grid;grid-template-columns:1fr 110px 1fr;gap:14px;align-items:stretch;}
@media(max-width:860px){.comp-cards{grid-template-columns:1fr;}.comp-vs{display:none;}}
.comp-card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04);overflow:hidden;}
.comp-card-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:#FAFBFF;}
.comp-card-title{font-size:16px;font-weight:900;color:var(--ink);}
.comp-badge{margin-left:auto;font-size:12px;font-weight:800;padding:4px 11px;border-radius:999px;border:1px solid #C7D7F7;background:#EEF4FF;color:#2B5FC4;white-space:nowrap;}
.comp-badge.right{border-color:#FECACA;background:#FEF2F2;color:#991B1B;}
.comp-card-bd{padding:16px 18px;display:flex;flex-direction:column;gap:14px;}
.comp-sec-ttl{font-size:13px;font-weight:900;color:var(--ink);margin-bottom:8px;}
.comp-tags{display:flex;flex-wrap:wrap;gap:6px;}
.comp-tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:#F8FAFC;color:var(--muted);}
.comp-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.comp-metric{border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 12px;}
.comp-metric .l{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px;}
.comp-metric .v{font-size:18px;color:var(--ink);font-weight:900;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comp-vs{display:flex;align-items:center;justify-content:center;}
.vs-circle{width:62px;height:62px;border-radius:999px;background:var(--blue);color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 10px 24px rgba(124,58,237,.22);}
.comp-chart-card{border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.04);overflow:hidden;}
.comp-chart-hd{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:#FAFBFF;}
.comp-chart-hd .t{font-size:16px;font-weight:900;color:var(--ink);}
.comp-tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.comp-tab{border:1px solid var(--border);background:#fff;color:var(--muted);font-size:12px;font-weight:800;padding:7px 11px;border-radius:999px;cursor:pointer;font-family:inherit;}
.comp-tab.active{border-color:#C7D7F7;background:#EEF4FF;color:var(--ink);}
.comp-chart-bd{padding:16px 18px;}
.comp-chart-box{position:relative;height:260px;}
@media(max-width:860px){
  .noticebar{padding:0 10px;gap:8px;font-size:11px;overflow:hidden;}
  .gnb{padding:0 12px;}.gnb-nav,.gnb-dday,.gnb-actions{display:none;}.gnb-hamburger{display:flex !important;}.brand{margin-right:0;}
  .hero{padding:64px 12px 40px;}.hero-title{font-size:clamp(36px,10vw,58px);} /* pm4m 모바일: 하단 여백은 hero-btns가 채우므로 축소 */
  .hero-btns{flex-direction:column;gap:8px;width:100%;}
  .cand-wrap{padding:0 12px;margin-top:-60px;}.cand-photo{width:110px;}
  .cand-info-block{padding:16px 18px;}.cand-name{font-size:22px;}
  .cand-kpis{grid-template-columns:1fr 1fr;}
  .snav{top:56px;margin-top:6px;}.snav-in{padding:10px 10px;}.month-picker{display:none;}.main{padding:18px 12px 60px;}
  .sg.c2,.sg.c3{grid-template-columns:1fr;}
  footer .fi{padding:20px 16px;flex-direction:column;gap:8px;}
  .gov-gauge-legend{gap:12px;}
  .yt-kstrip{display:flex;flex-wrap:nowrap;overflow-x:auto;}
}

 /* =============================================
   VOTE LAB AI Summary Widget
   반응형 · 모바일 우선
   ============================================= */
:root {
  --navy: #0B1733;
  --blue: #7C3AED;
  --mint: #22C984;
  --border: #E3E8F0;
  --surface-0: #F4F6FA;
  --surface-1: #F8FAFD;
  --surface-2: #FFFFFF;
  --ink: #1A2540;
  --muted: #64748B;
  --pos: #0D9E6A;
  --neg: #E53935;
}

.ai-summary-wrap{max-width:1282px;margin:24px auto 0;padding:0 28px;}
@media(max-width:860px){.ai-summary-wrap{padding:0 12px;margin-top:10px;}}

/* ── 카드 래퍼 ── */
.ai-slider-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  max-width: 1226px;
  margin: 0 auto;
  box-shadow: 0 4px 20px rgba(11,23,51,.12);
  padding-bottom: 24px;
}

/* ── 헤더 ── */
.ai-slider-header {
  background: linear-gradient(135deg, #6B21A8, #7C3AED);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.ais-icon { font-size: 22px; }
.ais-title { font-size: 20px; font-weight: 600; color: #fff; }
.ais-badge {
  margin-left: auto;
  font-size: 13px;
  background: rgba(34,201,132,.2);
  border: 1px solid rgba(34,201,132,.35);
  color: #6EE7B7;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── 탭 ── */
.ai-tabs {
  display: flex;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ai-tabs::-webkit-scrollbar { display: none; }
.ai-tab {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  border: none;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  flex-shrink: 0;
  transition: color .14s, border-color .14s;
}
.ai-tab.on { color: var(--blue); border-bottom-color: var(--blue); }

/* ── 슬라이드 ── */
.ai-slides-outer { overflow: hidden; }
.ai-slides-track { display: flex; transition: transform .32s cubic-bezier(.4,0,.2,1); }

/* 슬라이드 내부: flex column */
.ai-slide {
  min-width: 100%;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── AI 요약 (상단 가로) ── */
.ai-top {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.ai-sum-label {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  background: #EDE9FE;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  margin-top: 2px;
}

/* ── 십자 그리드 레이아웃 ── */
.ai-cross-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:0;
  border:1px solid var(--border);
  margin:16px 18px 0;
  border-radius:14px;
  overflow:hidden;
}
.ai-quad{
  padding:16px 18px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.ai-quad:nth-child(2){border-right:0;}
.ai-quad:nth-child(3),.ai-quad:nth-child(4){border-bottom:0;}
.ai-quad-title{font-size:14px;font-weight:900;color:var(--ink);margin-bottom:10px;}
@media(max-width:640px){
  .ai-cross-grid{grid-template-columns:1fr;}
  .ai-quad{border-right:0;border-bottom:1px solid var(--border);}
}
.ai-sum-text { font-size: 16px; color: var(--ink); line-height: 1.7; flex: 1; }
.ai-sum-text p { margin-bottom: 4px; }
.ai-sum-text p:last-child { margin-bottom: 0; }

/* 스켈레톤 */
.ai-sum-skeleton { display: flex; flex-direction: column; gap: 5px; }
.ai-skel-line {
  height: 15px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 하단 2컬럼 ── */
.ai-body-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
/* 모바일: 세로 1컬럼 */
@media (max-width: 500px) {
  .ai-body-cols { grid-template-columns: 1fr; }
}
.ai-col { display: flex; flex-direction: column; gap: 14px; }
.ai-col .ai-panel {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* ── 패널 ── */
.ai-panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
}
.ai-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── KPI 4개 ── */
.ai-mini-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ai-mkpi {
  background: var(--surface-0);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.ai-mkpi-v { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; }
.ai-mkpi-l { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ai-mkpi-d { font-size: 12px; font-weight: 600; margin-top: 4px; }
.ai-mkpi-d.up { color: var(--pos); }
.ai-mkpi-d.dn { color: var(--neg); }

/* ── 채널별 도넛 ── */
.ai-donut-row { display: flex; align-items: center; gap: 14px; }
.ai-donut-wrap { flex: none; width: 110px; height: 110px; position: relative; }
.ai-donut-legend { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.ai-legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); }
.ai-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ai-legend-pct { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--muted); }

/* ── 워드클라우드 ── */
.ai-cloud-wrap {
  position: relative !important;
  height: 160px;
  margin-top: 12px;
  overflow: hidden;
  background: var(--surface-0);
  border-radius: 10px;
}

.ai-cloud-word {
  position: absolute !important;
  transform: translate(-50%, -50%) !important;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
}

/* ── 더 큰 워드클라우드 ── */
.ai-cloud-large {
  height: 280px !important;
}

.ai-panel-large {
  height: 100%;
  min-height: 320px;
}

/* ── 감성 분포 ── */
.ai-big-num { font-size: 33px; font-weight: 700; color: var(--ink); letter-spacing: -.4px; }
.ai-therm { height: 28px; border-radius: 6px; overflow: hidden; display: flex; margin: 8px 0; }
.ai-therm > div {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
}
.ai-sleg { display: flex; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 600; flex-wrap: wrap; }
.ai-sleg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.ai-tag { font-size: 12px; padding: 4px 9px; border-radius: 20px; font-weight: 600; }
.ai-tag.pos { background: #D1FAE5; color: #065F46; }
.ai-tag.neg { background: #FEE2E2; color: #991B1B; }

/* ── 이슈 ── */
.ai-issue-row {
  display: flex; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--surface-0);
  border: 1px solid var(--border);
  margin-bottom: 6px;
}
.ai-issue-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.ai-issue-text { font-size: 13px; color: var(--ink); line-height: 1.4; }
.ai-issue-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ── 여론조사 ── */
.ai-pty-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-pty-nm { font-size: 12px; width: 75px; flex-shrink: 0; color: var(--ink); font-weight: 600; }
.ai-pty-bar { flex: 1; height: 20px; border-radius: 4px; background: var(--border); overflow: hidden; }
.ai-pty-fill { height: 100%; display: flex; align-items: center; padding-left: 5px; font-size: 9px; font-weight: 700; color: #fff; border-radius: 3px; }
.ai-pty-pct { font-size: 10px; font-weight: 700; color: var(--ink); width: 28px; text-align: right; }

/* ── 자세히 보기 텍스트 ── */
.ai-detail-btn {
  display: inline-block; align-items: center; justify-content: center; gap: 4px;
  padding: 0;
  border: none; border-radius: 0;
  color: var(--ink); font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; width: auto;
  margin-left: auto; flex-shrink: 0;
  background: transparent;
  transition: color .14s;
}
.ai-detail-btn:hover { color: var(--blue); }

/* ── 콘텐츠 카드 섹션 ── */
.content-cards-wrap {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--surface-1);
  border-top: 1px solid var(--border);
}

@media (max-width: 860px) {
  .content-cards-wrap {
    padding: 0;
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.content-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11,23,51,.06);
  transition: transform .14s, box-shadow .14s;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(11,23,51,.12);
}

.content-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #F8FAFF, #F4F6FA);
  border-bottom: 1px solid var(--border);
}

.content-card-icon {
  font-size: 18px;
  flex: none;
}

.content-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}

.content-card-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--blue);
  color: #fff;
  flex: none;
}

/* 기존 .content-card-badge 에 추가 */
.content-card-badge.news {
  background: #F5F0EB;
  color: #6B5B4E;
  border: 1px solid #D9CEC3;
}
.content-card-badge.blog {
  background: #EEF4FF;
  color: #2B5FC4;
  border: 1px solid #C7D7F7;
}
.content-card-badge.insta {
  background: #F9F0FF;
  color: #8B35C4;
  border: 1px solid #DDB8F7;
}

.content-card-body {
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
}

/* Custom scrollbar for content cards */
.content-card-body::-webkit-scrollbar {
  width: 6px;
}

.content-card-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.content-card-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.content-card-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.content-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color .14s;
}

.content-item:hover {
  background: var(--surface-1);
}

.content-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-item-time {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  flex: none;
  margin-left: 12px;
}

 .pm2-feed {
   background: #fff;
 }

 .pm2-feed-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 16px;
   padding: 10px 0 0;
 }

 .pm2-feed-tabs {
   display: flex;
   align-items: flex-end;
   gap: 16px;
 }

 .pm2-feed-tab {
   appearance: none;
   background: transparent;
   border: 0;
   padding: 8px 0 10px;
   font-size: 14px;
   font-weight: 600;
   color: #64748b;
   cursor: pointer;
   position: relative;
   font-family: inherit;
 }

 .pm2-feed-tab.is-active {
   color: #2563eb;
 }

 .pm2-feed-tab.is-active::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -1px;
   height: 3px;
   background: #2563eb;
   border-radius: 2px;
 }

 .pm2-feed-pill {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   height: 18px;
   min-width: 18px;
   padding: 0 6px;
   margin-left: 6px;
   background: #e2e8f0;
   color: #64748b;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 700;
   line-height: 18px;
 }

 .pm2-feed-range {
   font-size: 13px;
   color: #94a3b8;
   white-space: nowrap;
   padding-bottom: 10px;
 }

 .pm2-feed-list {
   border-top: 2px solid #cbd5e1;
   max-height: 420px;
   overflow: auto;
 }

 .pm2-feed-row {
   display: grid;
   grid-template-columns: 34px 1fr 160px;
   gap: 12px;
   padding: 14px 0;
   border-bottom: 1px solid #e5e7eb;
 }

 .pm2-feed-ic {
   width: 26px;
   height: 26px;
   border-radius: 6px;
   display: grid;
   place-items: center;
   font-size: 11px;
   font-weight: 800;
   line-height: 1;
   text-transform: lowercase;
 }

 .pm2-feed-ic-blog {
   background: #16a34a;
   color: #fff;
 }

 .pm2-feed-ic-com {
   background: #4f46e5;
   color: #fff;
   font-size: 12px;
 }

 .pm2-feed-txt {
   min-width: 0;
 }

 .pm2-feed-ttl {
   font-size: 14px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1.35;
   margin-bottom: 6px;
 }

 .pm2-feed-sub {
   font-size: 13px;
   color: #64748b;
   line-height: 1.45;
 }

 .pm2-feed-hl {
   color: #2563eb;
   font-weight: 800;
 }

 .pm2-feed-meta {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 14px;
   font-size: 13px;
   color: #94a3b8;
   white-space: nowrap;
 }

 .pm2-feed-list::-webkit-scrollbar {
   width: 6px;
 }

 .pm2-feed-list::-webkit-scrollbar-track {
   background: transparent;
 }

 .pm2-feed-list::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 999px;
 }

/* ── 네비게이션 ── */
.ai-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
.ai-nav-btn {
  display: flex; align-items: center; gap: 3px;
  font-size: 11px; color: var(--muted);
  background: var(--surface-0); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 10px;
  cursor: pointer; font-family: inherit; font-weight: 600;
  transition: opacity .14s;
}
.ai-nav-btn[disabled] { opacity: .35; cursor: not-allowed; }
.ai-dots { display: flex; gap: 4px; }
.ai-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: all .15s;
}
.ai-dot.on { background: var(--blue); width: 18px; border-radius: 3px; }

/* ============================================================
   AI Summary Widget — 충돌 방지 Override
   ============================================================ */

/* 슬라이드 전체: 세로 flex */
.ai-slide {
  min-width: 100% !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}

/* 하단 2컬럼 그리드 — 기존 .sg.c2 충돌 방지 */
.ai-body-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100% !important;
}

/* 컬럼 */
.ai-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
}

/* KPI 그리드 — 기존 .sg.c2 오버라이드 방지 */
.ai-mini-kpis {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px !important;
  margin-bottom: 8px !important;
}

/* 도넛 row */
.ai-donut-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ai-donut-wrap {
  flex: none !important;
  width: 70px !important;
  height: 70px !important;
  position: relative !important;
}

/* 패널 */
.ai-panel {
  background: #F8FAFD !important;
  border: 1px solid #E3E8F0 !important;
  border-radius: 10px !important;
  padding: 9px 11px !important;
  box-sizing: border-box !important;
}

/* 슬라이더 overflow 확보 */
.ai-slides-outer {
  overflow: hidden !important;
}

.ai-slides-track {
  display: flex !important;
  transition: transform .32s cubic-bezier(.4,0,.2,1) !important;
}

/* 모바일 500px 이하: 1컬럼 */
@media (max-width: 500px) {
  .ai-body-cols {
    grid-template-columns: 1fr !important;
  }
}

/* 이슈 여론 카드 레이아웃 */
.issue-gauge-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 20px;
}

@media (max-width: 860px) {
  .issue-gauge-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* 모바일에서 막대그래프 범례가 다음 "조사 기관 및 조사 표본" 영역과 겹치지 않도록 차트 영역 높이 조정 */
  .issue-gauge-row .issue-gauge-col {
    /* 고정 높이를 해제해 범례가 컨테이너 아래로 자연스럽게 배치되도록 함 */
    height: auto !important;
  }
  .issue-gauge-row .issue-gauge-col canvas {
    /* 컨테이너 높이 대신 모바일에서 적당한 고정 높이 사용 */
    height: 240px !important;
  }
  /* 이슈 막대그래프 범례(색상 점 + 후보 이름)가 좁은 화면에서 여러 줄로 감싸지도록 설정 */
  #issue_fixed_legend {
    /* 아이템들이 넘치면 다음 줄로 내려감 */
    flex-wrap: wrap;
    /* 줄이 바뀔 때 행 간격을 추가해 가독성 확보 */
    row-gap: 8px;
    /* 범례 마지막 줄이 아래 "조사 기관 및 조사 표본" 헤더와 겹치지 않도록 하단 여백 추가 */
    margin-bottom: 16px !important;
  }
}

.issue-gauge-col {
  position: relative;
  height: 280px;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.issue-gauge-col canvas {
  width: 100% !important;
  height: 100% !important;
}

.issue-survey-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.issue-survey-dot {
  width: 4px;
  height: 16px;
  background: var(--blue);
  border-radius: 2px;
  flex: none;
}

.issue-survey-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.issue-survey-table th {
  width: 150px;
  text-align: left;
  padding: 12px 14px;
  color: var(--muted);
  font-weight: 700;
  background: #FAFBFF;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.issue-survey-table td {
  padding: 12px 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.issue-survey-table tr:last-child th,
.issue-survey-table tr:last-child td {
  border-bottom: none;
}

/* 이슈 여론 조사기관 표(범례) 모바일 반응형 처리 */
@media (max-width: 640px) {
  /* 조사기관 라벨 열을 모바일 너비에 맞게 유연하게 조정 */
  .issue-survey-table th {
    /* 고정 150px에서 벗어나 내용 기반 너비 사용 */
    width: auto;
    /* 라벨이 너무 좁아지지 않도록 최소 너비 보장 */
    min-width: 90px;
    /* 필요 시 줄바꿈 허용 (기존 white-space:nowrap 덮어씀) */
    white-space: normal;
    /* 한글 단어 단위로 줄바꿈 (한 글자씩 세로 쌓이지 않도록) */
    word-break: keep-all;
  }
  /* 긴 값 셀이 박스를 벗어나지 않도록 줄바꿈 처리 */
  .issue-survey-table td {
    /* 긴 영문/숫자 조합이 셀 밖으로 나가면 줄바꿈 */
    word-break: break-word;
    /* 최신 브라우저용 overflow-wrap 처리 */
    overflow-wrap: anywhere;
  }
}

/* 검색 + 목록 + 페이지네이션 */
.t_bbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.bbs-sum {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}

.bbs-sum strong {
  color: var(--ink);
  font-weight: 900;
  font-size: 17px;
}

.bbs-srch {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  padding: 0;
  margin: 0;
}

.bbs-srch select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}

.bbs-srch input[type="text"] {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  width: 200px;
}

.bbs-srch input[type="text"]:focus,
.bbs-srch select:focus {
  outline: none;
  border-color: var(--blue);
}

.bbs-srch input[type="button"] {
  height: 38px;
  padding: 0 18px;
  border: none;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.bbs-srch input[type="button"]:hover {
  background: var(--navy-2);
}

.table0 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table0 thead tr {
  border-bottom: 2px solid var(--border);
}

.table0 th {
  text-align: center;
  padding: 12px 8px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  background: #FAFBFF;
}

.table0 th:nth-child(2) {
  text-align: left;
}

.table0 td {
  padding: 14px 8px;
  border-bottom: 1px solid #F1F5F9;
  color: var(--ink);
  text-align: center;
}

.table0 td:nth-child(2) {
  text-align: left;
}

.table0 tbody tr {
  cursor: pointer;
  transition: background .12s;
}

.table0 tbody tr:hover {
  background: #F8FAFF;
}

.bt_page {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.paging {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paging a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid transparent;
}

.paging a:hover {
  background: #F1F5FF;
  color: var(--ink);
}

.paging a.active {
  background: var(--blue);
  color: #fff;
  font-weight: 900;
}

.paging a.prev,
.paging a.next {
  color: var(--muted);
  font-size: 16px;
}

/* 모바일 640px 이하: content-cards-row 1컬럼 */
@media (max-width: 640px) {
  .content-cards-row {
    grid-template-columns: 1fr !important;
  }
}

/* .sg.c2 가 .ai-body-cols 에 적용되지 않도록 */
.ai-slider-card .sg.c2 {
  grid-template-columns: 1fr 1fr !important;
}

.gov-toggle,
.party-toggle {
  margin-top: 16px;
  border-top: 1px solid #eef2f7;
  padding-top: 0;
}

.toggle_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 14px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #1a2540;
  user-select: none;
}

.toggle_header:hover {
  color: #2b5fc4;
}

.toggle_arrow {
  transition: transform 0.25s ease;
  color: #64748b;
  flex-shrink: 0;
}

.gov-toggle.open .toggle_arrow,
.party-toggle.open .toggle_arrow,
.pres-traffic-toggle.open .toggle_arrow {
  transform: rotate(180deg);
}

.issue-toggle.open .toggle_arrow {
  transform: rotate(180deg);
}

.toggle_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.gov-toggle.open .toggle_body,
.party-toggle.open .toggle_body,
.pres-traffic-toggle.open .toggle_body {
  max-height: 5000px; /* 토글 콘텐츠가 2000px보다 길어질 때 잘리지 않도록 여유 확보 */
  opacity: 1;
}

.gov-toggle.open .toggle_body,
.party-toggle.open .toggle_body {
  padding-top: 20px;
}

.issue-toggle.open .toggle_body {
  max-height: 5000px; /* 토글 콘텐츠가 2000px보다 길어질 때 잘리지 않도록 여유 확보 */
  opacity: 1;
  padding-top: 20px;
}

.survey-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.issue-toggle .survey-stats {
  margin-bottom: 20px;
}

.stat-box {
  flex: 1;
  background: #fafbff;
  border: 1px solid #e3e8f0;
  border-radius: 10px;
  padding: 14px 16px;
}

.all_pnum .text {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.all_pnum .count {
  font-size: 18px;
  font-weight: 800;
  color: #1a2540;
}

.bull01 .count { color: #1e6fd9; }
.bull02 .count { color: #1eb87a; }

.survey-charts {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
}

.survey-charts_l,
.survey-charts_r {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.chart-box {
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 10px;
  padding: 12px 14px;
}

.r_cate {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}

.r_graph {
  position: relative;
}

.gov-toggle .data-display,
.party-toggle .data-display {
  font-size: 11px;
  color: #334155;
  margin-bottom: 6px;
  min-height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

#gov_mapWrapper,
#party_mapWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#gov_legendBox,
#party_legendBox {
  width: 100%;
  max-width: 320px;
  margin-bottom: 10px;
}

#gov_gradientBar,
#party_gradientBar {
  height: 10px;
  background: linear-gradient(to right, #f3ebde, #b58b4c);
  border-radius: 5px;
  margin-bottom: 4px;
}

#gov_legendLabels,
#party_legendLabels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}

#modal_legendBox {
  width: 100%;
  max-width: 360px;
  margin-bottom: 8px;
}

#modal_gradientBar {
  height: 10px;
  background: linear-gradient(to right, #f3ebde, #b58b4c);
  border-radius: 5px;
  margin-bottom: 4px;
}

#modal_legendLabels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #666;
}

#gov_mapWrapper,
#party_mapWrapper {
  display: flex;
  justify-content: center;
}

#gov_map,
#party_map {
  width: 100%;
  max-width: 360px;
  height: 400px;
}

.region {
  stroke: #fff;
  stroke-width: 1;
  transition: opacity 0.3s ease;
}

#gov_map .connector-line,
#party_map .connector-line {
  stroke: #a1a1a1;
  stroke-width: 1;
  opacity: 0.7;
}

#gov_map .center-dot,
#party_map .center-dot {
  r: 4;
}

/* CSS override for reduced spacing */
.ai-quad{
  padding:12px 14px;      /* 16px 18px → 축소 */
  min-height: auto;
}
.ai-mini-kpis{
  margin-bottom: 8px;     /* 12px → 축소 */
}
.ai-donut-row{
  gap: 16px;              /* 도넛이 커진 만큼 legend와 간격 살짝 확보 */
}
.ai-donut-wrap{
  width: 140px !important;
  height: 140px !important;
}


/* yt-sent-dist canvas 크기 확장 */
#yt-sent-dist {
  width: 280px !important;
  height: 280px !important;
  max-width: 280px !important;
  max-height: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
}

/* yt-ch-type canvas 크기 확장 */
#yt-ch-type {
  width: 280px !important;
  height: 280px !important;
  max-width: 280px !important;
  max-height: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
}

/* 언급량, 긍부정, 감성지표 등 추가 도넛 그래프 크기 확장 */
#chart-mentions,
#chart-pos-neg,
#chart-sentiment,
#cand-mention-chart,
#cand-sentiment-chart,
#comp-donut-5,
#comp-donut-6,
#comp-donut-kim-posneg,
#comp-donut-park-posneg,
#comp-donut-kim-sentiment,
#comp-donut-park-sentiment {
  width: 280px !important;
  height: 280px !important;
  max-width: 280px !important;
  max-height: 280px !important;
  min-width: 280px !important;
  min-height: 280px !important;
}

/* Card and column styles to accommodate larger donut charts */
.col-lg-4 {
  min-width: 320px !important;
  flex: 0 0 320px !important;
}

.card {
  min-width: 300px !important;
}

/* comp-donut-canvas 크기 확장 */
.comp-donut-canvas {
  width: 280px !important;
  height: 280px !important;
}

.comp-donut-canvas canvas {
  width: 280px !important;
  height: 280px !important;
}

/* Modal chart specific styles */
#surveyModal canvas {
  max-width: 100%;
}

#modal_map {
  width: 100%;
  max-width: 360px;
  height: 400px;
}

#modal_mapWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#modal_map .region-group {
  cursor: pointer;
}

#modal_map .tooltips text {
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
}

#modal_map .connector-line {
  stroke: #af8148;
  stroke-width: 1;
  opacity: 0.6;
}

/* 세그먼트화된 추이 차트 스타일 - 아코디언 패널 내부용 */
.seg-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0 14px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .seg-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  
  .seg-tabs::-webkit-scrollbar {
    display: none;
  }
}

.seg-tab {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex: none;
}

.seg-tab:hover {
  background: #f8f9fa;
  border-color: #d1d5db;
}

.seg-tab.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.seg-summary-bar {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.8;
  letter-spacing: normal;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.seg-summary-bar b {
  font-weight: 900;
}

.seg-summary-bar .up {
  color: #E53935;
  font-weight: 800;
}

.seg-summary-bar .dn {
  color: #1D4ED8;
  font-weight: 800;
}

/* 세그먼트 차트 컨테이너 높이 수정 */
.acc-panel .cbox {
  height: auto;
  min-height: 300px;
}

.acc-panel .cbox canvas {
  width: 100% !important;
  height: 280px !important;
}

@media (max-width: 768px) {
  .survey-charts {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   정치 이슈 키워드 2주 단위 슬라이더 스타일
   iw- prefix 사용 (기존 issue-week-slider와 구분)
   ============================================= */
.iw-slider-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.iw-slides-outer {
  flex: 1;
  overflow: hidden;
}

.iw-slides-track {
  display: flex;
  transition: transform 0.3s ease;
}

.iw-slide {
  min-width: 100%;
  display: flex;
  gap: 16px;
}

.iw-week-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: #FAFBFF;
  position: relative;
}

.iw-week-card.current {
  border-color: #7C3AED;
  box-shadow: 0 0 0 1px #7C3AED inset;
}

.iw-week-date {
  margin-bottom: 12px;
}

.iw-week-label {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
}

.iw-week-range {
  font-size: 13px;
  color: var(--muted);
  margin-left: 8px;
}

.iw-day-list {
  position: relative;
  max-height: 420px;
  overflow-y: auto;
  padding-left: 20px;
  list-style: none;
}

.iw-timeline-line {
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
}

.iw-day-list li {
  position: relative;
  margin-bottom: 16px;
}

.iw-dot {
  position: absolute;
  left: -20px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7C3AED;
}

.iw-day {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  margin-right: 6px;
}

.iw-bullet-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: inline;
}

.iw-bullet-sub {
  font-size: 13px;
  color: var(--muted);
  margin-left: 2px;
}

.iw-nav {
  flex: none;
  width: 36px;
  align-self: center;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.iw-nav[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.iw-nav svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.iw-nav-group {
  display: flex;               /* flex 컨테이너로 버튼과 라벨을 함께 배치 */
  flex-direction: column;      /* 세로 방향(위:버튼, 아래:라벨) 스택 구성 */
  align-items: center;         /* 자식 요소들을 가로 중앙 정렬 */
  justify-content: center;     /* 세로 방향으로도 중앙 정렬 (슬라이더 높이 내 중앙) */
  gap: 4px;                    /* 버튼과 라벨 사이 4px 간격 */
}
.iw-nav-label {
  font-size: 11px;             /* 라벨 글자 크기 11px (작은 안내 텍스트) */
  font-weight: 700;            /* 볼드체로 방향성 강조 */
  color: #64748B;              /* 중간 회색(#64748B)으로 비활성 버튼과 조화 */
  white-space: nowrap;         /* 줄바꿈 방지: 라벨이 항상 한 줄로 표시 */
}

/* 모바일 반응형 */
@media (max-width: 640px) {
  .iw-slide {
    flex-direction: column;
  }
  
  .iw-week-card {
    margin-bottom: 12px;
  }
}

/* ===== 표본 분포 호버 툴팁 ===== */
#sample-tooltip{
  position:fixed;
  z-index:9999;
  background:rgba(11,23,51,.82); /* 반투명 배경으로 뒤 그래프가 비쳐 보이게 처리 */
  backdrop-filter:blur(2px);     /* 살짝 블러를 줘 반투명이어도 글자 가독성 유지 */
  color:#fff;
  border-radius:10px;
  padding:12px 14px;
  min-width:170px;
  box-shadow:0 8px 24px rgba(11,23,51,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .08s ease;
  transform:translate(-50%, calc(-100% - 14px));
  font-family:'Pretendard','Noto Sans KR',system-ui,sans-serif;
}
#sample-tooltip::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  width:12px;
  height:12px;
  background:rgba(11,23,51,.82); /* 화살표도 본체와 동일한 반투명 배경 적용 */
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
}
/* 라인차트 추이 툴팁: 호버 포인트 왼쪽에 표시 (종합 평가 추이와 동일) */
#sample-tooltip.st-left{
  transform:translate(calc(-100% - 14px), -50%); /* 포인트 기준 왼쪽·세로중앙 정렬 */
}
#sample-tooltip.st-left::after{
  left:auto;                                   /* 기본(가운데 아래) 화살표 위치 해제 */
  right:-6px;                                  /* 화살표를 오른쪽 모서리로 이동 */
  bottom:auto;                                 /* 아래 고정 해제 */
  top:50%;                                     /* 세로 중앙 배치 */
  transform:translateY(-50%) rotate(45deg);    /* 세로 중앙 기준 45도 회전 */
}
/* 화면 왼쪽에 공간이 없을 때: 포인트 오른쪽에 표시 */
#sample-tooltip.st-right{
  transform:translate(14px, -50%);             /* 포인트 기준 오른쪽·세로중앙 정렬 */
}
#sample-tooltip.st-right::after{
  left:-6px;                                   /* 화살표를 왼쪽 모서리로 이동 */
  bottom:auto;                                 /* 아래 고정 해제 */
  top:50%;                                     /* 세로 중앙 배치 */
  transform:translateY(-50%) rotate(45deg);    /* 세로 중앙 기준 45도 회전 */
}
#sample-tooltip .st-title{
  font-size:13.5px; font-weight:800; color:#fff;
  margin-bottom:8px;
}
#sample-tooltip .st-row{
  display:flex; align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:2px 0;
  font-size:12px;
  color:#c3c9d9;
  white-space:nowrap;
}
#sample-tooltip .st-row .st-k{ text-align:left; }
#sample-tooltip .st-row .st-v{
  text-align:right;
  font-weight:800;
  color:#fff;
}

/* 언급 리스트 카드 스타일 */
.mn-feed-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:22px 24px 16px;display:flex;flex-direction:column;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.mn-feed-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.mn-feed-name{font-size:20px;font-weight:900;color:var(--ink);letter-spacing:-.3px;}
.mn-feed-period{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:6px 12px;white-space:nowrap;
}
.mn-feed-period svg{flex:none;color:#7C3AED;}
.mn-feed-list{
  display:flex;flex-direction:column;gap:10px;
  max-height:400px;overflow-y:auto;
  padding-right:2px;
}
.mn-feed-list::-webkit-scrollbar{width:5px;}
.mn-feed-list::-webkit-scrollbar-thumb{background:#E3E8F0;border-radius:99px;}
.mn-feed-item{
  display:flex;gap:12px;align-items:flex-start;
  background:#F8FAFD;border:1px solid #F0F2F7;border-radius:12px;
  padding:12px 14px;
}
.mn-feed-ic{
  flex:none;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;font-weight:800;
}
.mn-feed-ic.blog{background:#16A34A;}
.mn-feed-ic.news{background:#F2A93B;}
.mn-feed-ic.insta{background:linear-gradient(135deg,#F58529,#DD2A7B,#8134AF);}
.mn-feed-ic.community{background:#4F46E5;}
.mn-feed-body{min-width:0;flex:1;}
.mn-feed-title{
  font-size:14px;font-weight:700;color:var(--ink);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;
}
.mn-feed-title b{color:#2B5FC4;font-weight:800;}
.mn-feed-sub{
  font-size:12.5px;color:var(--muted);margin-top:4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mn-feed-sub a{color:#2B5FC4;font-weight:700;}

/* Mention Feed Pagination */
.mn-feed-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-top:16px;
  padding:16px 0;
  border-top:1px solid var(--border);
}

.mn-page-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  color:var(--ink);
  font-size:14px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:all 0.2s ease;
}

.mn-page-btn:hover:not(:disabled){
  background:#EEF4FF;
  border-color:#2B5FC4;
  color:#2B5FC4;
}

.mn-page-btn.active{
  background:#2B5FC4;
  border-color:#2B5FC4;
  color:#fff;
}

.mn-page-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
  background:var(--page);
}

.mn-page-btn.mn-page-prev,
.mn-page-btn.mn-page-next{
  min-width:36px;
  padding:0;
  font-size:16px;
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:16px;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.filter-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--page);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:all 0.2s ease;
}

.filter-btn:hover{
  background:#EEF4FF;
  border-color:#2B5FC4;
  color:#2B5FC4;
}

.filter-btn.active{
  background:#2B5FC4;
  border-color:#2B5FC4;
  color:#fff;
}

@media(max-width:980px){
  .metrics-grid{grid-template-columns:repeat(2, 1fr);}
}

@media (max-width:640px){
  .mn-feed-pagination{
    gap:4px;
    margin-top:12px;
    padding:12px 0;
  }
  
  .mn-page-btn{
    min-width:32px;
    height:32px;
    font-size:13px;
    padding:0 8px;
  }
  
  .mn-page-btn.mn-page-prev,
  .mn-page-btn.mn-page-next{
    min-width:32px;
    font-size:14px;
  }
}

/* == RESPONSIVE PATCH == */

/* Fix fixed px widths that cause horizontal scroll */
@media(max-width:860px){
  .snav-in{
    width:100% !important;
    max-width:100% !important;
    padding:10px 16px;
  }
}

/* Fix candidate profile layout for mobile */
@media(max-width:640px){
  .cand-profile{
    flex-direction:column;
  }
  .cand-photo{
    width:100%;
    border-right:0;
    border-bottom:1px solid var(--border);
    padding:20px;
  }
  .cand-photo-initial{
    width:70px;
    height:70px;
    font-size:28px;
  }
}

/* Fix candidate KPI values for very small screens */
@media(max-width:400px){
  .ckpi-val{
    font-size:28px;
  }
}

/* Fix section navigation sticky top for mobile GNB height */
@media(max-width:860px){
  .snav{
    top:56px;
  }
}

/* Add missing 1-column conversions for grids */
@media(max-width:860px){
  .sg.c2,
  .sg.c3,
  .ai-body-cols,
  .issue-gauge-row,
  .survey-charts{
    grid-template-columns:1fr;
  }
}

/* Fix comparison analysis Venn diagram grid */
@media(max-width:400px){
  .comp-rows-main,
  .party-comp-rows-main{
    grid-template-columns:1fr 56px 1fr;
  }
}

/* Fix wordcloud height for mobile */
@media(max-width:640px){
  .cloud.wcloud,
  .sn-kw-cloud{
    min-height:320px;
  }
}

/* Fix map height for mobile */
@media(max-width:640px){
  #gov_map,
  #party_map,
  #modal_map{
    height:320px;
  }
}

/* Fix table responsive wrappers */
@media(max-width:860px){
  .rt,
  .gov_survey_tbody,
  .party_survey_tbody{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
}

/* Fix issue slider navigation for mobile */
@media(max-width:640px){
  .iw-nav{
    position:static;
    margin-top:10px;
    justify-content:center;
  }
}

/* Fix noticebar overflow for mobile */
@media(max-width:640px){
  .noticebar{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* 표본 합계 토글에 추이 그래프 토글 디자인 적용 */
.title_stotal.toggle_header {
  width:100%;
  background:#F0F4FF;
  border:0;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:700;
  color:#1A2540;
  transition:background .14s;
  border-radius:0;
  border-top:1px solid var(--border);
}

.title_stotal.toggle_header:hover {
  background:#E4EBFF;
}

.title_stotal.toggle_header span {
  color:#1A2540;
  font-weight:700;
}

.title_stotal.toggle_header .toggle_arrow {
  margin-left:auto;
  color:#4A6FA5;
  transition:transform .2s;
  font-size:14px;
  font-weight:900;
}

.toggle_content.open .title_stotal.toggle_header .toggle_arrow {
  transform:rotate(180deg);
}

.toggle_content.open .title_stotal.toggle_header {
  background:#fff;
  border-bottom:1px solid var(--border);
}

/* 정당비교분석 토글 스타일 */
.party-comparison-toggle.open .toggle_arrow {
  transform: rotate(180deg);
}

.party-comparison-toggle.open .toggle_body {
  max-height: 2000px;
  opacity: 1;
  padding-top: 20px;
}

.party-comparison-toggle .toggle_body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}

.party-comparison-toggle.open .title_stotal.toggle_header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* 정당비교분석 차트 스타일 */
.comp-donut-grid-2x3 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
}

.comp-donut-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comp-donut-item {
  background: #fff;
  border: 1px solid #EEF2F7;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

.comp-donut-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748B;
  margin-bottom: 12px;
  text-align: center;
}

.comp-donut-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.comp-donut-canvas {
  width: 120px;
  height: 120px;
  position: relative;
}

.comp-donut-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
}

.comp-donut-divider-line {
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #E2E8F0, transparent);
}

/* ================================================================
   다이나믹 UI 효과: 3D 틸트 카드 / 스크롤 리빌 / 버튼 피드백
   ================================================================ */

/* 1. 3D 틸트 카드 */
.tilt-card {
  transition: transform .15s ease-out, box-shadow .25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: 0 20px 40px -12px rgba(26,37,64,.25);
}

/* 2. 스크롤 리빌 (섹션이 화면에 들어올 때 아래에서 슥 올라옴) */
.sec-blk {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.sec-blk.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 3. 버튼 눌림 피드백 */
.gbtn, .hbtn, .mn-page-btn, .filter-btn {
  transition: transform .12s ease, box-shadow .2s ease;
}
.gbtn:active, .hbtn:active, .mn-page-btn:active, .filter-btn:active {
  transform: scale(.94);
}
.gbtn:hover, .hbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -4px rgba(26,37,64,.2);
}

/* 접근성: 애니메이션 어지러움 완화 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .sec-blk { opacity: 1 !important; transform: none !important; }
}

/* 워드클라우드: 포커스(spotlight) 효과 — 마우스가 올라간 단어만 선명해짐 */
.cloud.wcloud .word {
  transition: opacity .3s ease, color .3s ease; /* opacity와 color가 0.3초에 걸쳐 부드럽게 전환 */
  cursor: default;                               /* 커서 모양 기본 유지 (선택 영역처럼 보이지 않게) */
}
.cloud.wcloud:hover .word {
  opacity: .35;                                  /* 워드클라우드 위에 마우스가 들어가면 모든 단어를 흐리게 */
}
.cloud.wcloud .word:hover {
  opacity: 1;                                    /* 실제로 커서가 올라간 단어만 다시 선명하게 */
  color: var(--primary, #7C3AED);                /* 포인트 컬러로 변경, --primary 미정의 시 #7C3AED 폴백 */
}

/* HTML 막대 행(.hbar-row) 호버 시 살짝 배경 강조 */
.hbar-row {
  transition: background-color .2s ease; /* 배경색 변화에 0.2s 전환 */
  border-radius: 6px; /* 모서리 둥글게 */
  padding: 2px 4px; /* 강조 영역 여백 */
  margin: -2px -4px 6px -4px; /* padding만큼 좌우/위로 당겨서 레이아웃 흔들림 최소화 */
}
.hbar-row:hover {
  background-color: #F8FAFC; /* 연한 회색 배경으로 현재 행 표시 */
}


/* ===== pm4m 모바일 버전에서 이식한 모바일 전용 스타일 (2026-07-28) ===== */
/* 0차 모바일 스캐폴딩: .pm4-weekly / #secnav / 전체 레이아웃 */
@media (max-width: 768px) {
  .pm4-weekly {
    width: 100%;            /* 뷰포트 폭에 맞춤 */
    max-width: 100%;        /* 가로 확장 방지 */
    min-width: 0;           /* flex/grid 자식 축소 허용 */
    box-sizing: border-box; /* padding/border 포함한 폭 계산 */
  }
  #secnav .snav-in {
    width: auto;            /* 고정 1226px 제거 */
    max-width: 100%;        /* 화면 너비 초과 금지 */
    margin: 0 12px;         /* 좌우 여백 축소 */
    padding: 8px 10px;      /* 내부 여백 축소 */
    box-sizing: border-box; /* padding/보더 포함 폭 */
  }
  #secnav .snav-in a {
    padding: 10px 12px;     /* 터치 타겟 유지 */
    font-size: 13px;        /* 폰트 축소 */
  }
  .main {
    padding: 18px 12px 40px;/* 모바일 세로 여백 조정 */
  }
  .sec-blk {
    margin-bottom: 32px;    /* 섹션 간격 축소 */
  }
  .sec-head {
    flex-wrap: wrap;        /* 좁은 폭에서 제목 줄바꿈 */
    gap: 8px;               /* 줄바꿈 시 간격 */
  }
  .sec-head h2 {
    font-size: 19px;        /* 제목 축소 */
  }
  .sec-head span {
    width: 100%;            /* 부제목을 다음 줄로 */
    font-size: 13px;        /* 부제목 축소 */
  }
  .sec-num {
    width: 28px;            /* 번호 아이콘 축소 */
    height: 28px;           /* 번호 아이콘 축소 */
    font-size: 11px;        /* 번호 폰트 축소 */
  }
}
@media (max-width: 480px) {
  #secnav .snav-in {
    margin: 0 8px;          /* 더 좁은 좌우 여백 */
    padding: 6px 8px;       /* 더 작은 내부 여백 */
  }
  #secnav .snav-in a {
    padding: 8px 10px;      /* 더 작은 링크 간격 */
    font-size: 12px;        /* 더 작은 폰트 */
  }
  .main {
    padding: 14px 10px 32px;/* 더 좁은 메인 여백 */
  }
}

/* 국정평가/정당지지율 섹션 모바일 */
@media (max-width: 640px) {
  #sec-poll .gender-chart-wrap {
    flex-direction: column !important;  /* 좌우 차트를 세로로 쌓음 */
    gap: 20px !important;               /* 세로 간격 축소 */
    height: auto !important;            /* 고정 높이 해제 */
    align-items: stretch !important;    /* 자식이 가로 폭 채우도록 */
  }
  #sec-poll .gender-chart2 {
    width: 100% !important;             /* 한 줄 전체 사용 */
    height: 220px !important;           /* 모바일 차트 높이 축소 */
    min-width: 0;                       /* 축소 허용 */
  }
  #sec-poll .gov_info {
    display: flex;                      /* 사진과 캡션 중앙 정렬 */
    flex-direction: column;             /* 세로 배치 */
    align-items: center;                /* 중앙 정렬 */
  }
  .survey-orgs {
    overflow-x: auto;                   /* 좁은 화면에서 표 가로 스크롤 */
    -webkit-overflow-scrolling: touch;  /* iOS 스크롤 부드럽게 */
  }
  .survey-orgs table {
    width: max-content !important;      /* 셀 너비 유지하며 넘칠 때 스크롤 */
    min-width: 100%;                    /* 컨테이너보다 작으면 늘리지 않음 */
    white-space: nowrap;                /* 표 전체 줄바꿈 방지 */
  }
  .survey-orgs table td,
  .survey-orgs table th {
    white-space: nowrap;                /* 셀 줄바꿈 방지 */
  }
}

/* 벤다이어그램 모바일 대응 (좌표 하드코딩으로 인한 찌그러집/잘림 방지) */
.venn-wrap {
  overflow-x: auto !important;          /* 좁은 화면에서 SVG 가로 스크롤 허용 */
  -webkit-overflow-scrolling: touch;    /* iOS 스크롤 부드럽게 */
}
.venn-wrap svg {
  min-width: 620px !important;          /* 버블/텍스트가 찌그러지지 않는 최소 폭 */
  width: 100%;                          /* 컨테이너가 충분히 넓을 때는 꽉 채움 */
  max-width: 860px;                     /* 원본 좌표계가 깨지지 않는 최대 폭 */
}

/* 비교분석 섹션 480px 대응 (도넛 차트 + 카드 레이아웃 조밀 항목) */
@media (max-width: 480px) {
  .comp-donut-canvas {
    width: 140px !important;              /* 480px에서 도넛 캔버스 축소 */
    height: 140px !important;             /* 동일 비율 높이 축소 */
  }
  .comp-donut-canvas canvas {
    width: 140px !important;              /* 캔버스 태그 폭 동기화 */
    height: 140px !important;             /* 캔버스 태그 높이 동기화 */
  }
  .comp-donut-grid-2x3 .comp-donut-canvas,
  .comp-donut-grid .comp-donut-canvas {
    width: 120px !important;              /* 그리드 내부 도넛은 더 작게 */
    height: 120px !important;
  }
  .comp-donut-grid-2x3 .comp-donut-canvas canvas,
  .comp-donut-grid .comp-donut-canvas canvas {
    width: 120px !important;              /* 그리드 내부 캔버스 동기화 */
    height: 120px !important;
  }
  .comp-donut-legend {
    flex-wrap: wrap;                      /* 범례가 좁으면 줄바꿈 */
    gap: 6px 10px;                        /* 범례 간격 축소 */
  }
  .comp-donut-title {
    font-size: 11px;                      /* 제목 폰트 축소 */
  }
  .comp-donut-leg-name,
  .comp-donut-leg-pct {
    font-size: 10px;                      /* 범례 폰트 축소 */
  }
  .comp-card-hd,
  .comp-chart-hd {
    flex-wrap: wrap;                      /* 카드 헤더 줄바꿈 */
    gap: 8px;                             /* 줄바꿈 시 간격 */
  }
  .comp-tabs {
    margin-left: 0;                       /* 탭이 다음 줄로 내려갈 때 여백 제거 */
    justify-content: flex-start;          /* 왼쪽 정렬 */
  }
}

/* 빅카인즈/키워드 2열 그리드 및 flex 모바일 스택 */
.bk-grid {
  display: grid;                          /* 템플릿 inline style 과 동일한 display */
  grid-template-columns: 1fr 1fr;         /* 기존 2열 유지 */
}
.bk-flex {
  display: flex;                          /* 템플릿 inline flex 유지 */
}
@media (max-width: 480px) {
  .bk-grid {
    grid-template-columns: 1fr !important; /* 480px에서 세로로 한 줄씩 쌓기 */
  }
  .bk-flex {
    flex-direction: column !important;    /* 워드클라우드+연관키워드 flex 세로 쌓기 */
  }
  .bk-flex > div {
    min-width: 0;                         /* flex 자식이 좁은 화면에서 넘치지 않도록 */
    width: 100%;                          /* flex 자식이 한 줄을 꽉 채움 */
    box-sizing: border-box;               /* padding/border 포함한 폭 계산 */
  }
  .bk-grid .wcloud {
    height: 220px !important;             /* 모바일에서 워드클라우드 높이 축소 */
  }
}

/* 480px 추가 보강 — 카드 및 콘텐츠 잘림/넘침 방지 */
@media (max-width: 480px) {
  .card {
    min-width: 0;                         /* 카드가 뷰포트를 벗어나 늘어나지 않도록 */
  }
  .card-bd {
    min-width: 0;                         /* 카드 본문 축소 허용 */
    overflow-wrap: break-word;            /* 긴 텍스트/숫자 줄바꿈 */
    word-break: break-word;               /* 긴 영문/숫자 줄바꿈 */
  }
  .card-head {
    flex-wrap: wrap;                      /* 제목+뱃지 줄바꿈 */
    gap: 8px;                             /* 줄바꿈 시 간격 */
  }
  .card-head .period {
    white-space: normal;                  /* 날짜 뱃지도 좁으면 줄바꿈 */
  }
  .bk-grid > * {
    min-width: 0;                         /* 그리드 1열 자식 축소 허용 */
    width: 100%;                          /* 컨테이너 폭 채우기 */
    box-sizing: border-box;               /* padding 포함 폭 계산 */
  }
  .bk-flex > * {
    min-width: 0;                         /* flex 자식 축소 허용 */
    width: 100%;                          /* flex 자식 폭 채우기 */
    box-sizing: border-box;               /* padding 포함 폭 계산 */
  }
  .ai-rect-grid {
    grid-template-columns: 1fr !important; /* AI KPI 2열을 1열로 */
  }
  .chips {
    max-width: 100%;                      /* 칩 컨테이너 제한 */
  }
  .chips > * {
    max-width: 100%;                      /* 개별 칩 제한 */
    white-space: normal;                  /* nowrap 방지 */
    word-break: keep-all;                 /* 한글은 어절 단위로 줄바꿈 */
    overflow-wrap: break-word;            /* 긴 영문/숫자는 mid-word 줄바꿈 */
  }
  .cloud.wcloud .word.w1 { font-size: 28px !important; } /* 워드클라우드 단어 축소 */
  .cloud.wcloud .word.w2 { font-size: 22px !important; }
  .cloud.wcloud .word.w3 { font-size: 18px !important; }
  .cloud.wcloud .word.w4 { font-size: 14px !important; }
}

/* 480px 글로벌/후보자 카드 글자 및 배지 축소 */
@media (max-width: 480px) {
  body {
    font-size: 15px;                     /* 전체 베이스 폰트 1단계 축소 */
  }
  .cand-photo-initial {
    width: 48px;                         /* 후보자 사진/이니셜 더 작게 */
    height: 48px;
    font-size: 18px;                     /* 이니셜 글자 축소 */
    border-radius: 12px;                 /* 모서리 비율 유지 */
  }
  .cand-photo-label {
    font-size: 9px;                      /* 사진 아래 라벨 축소 */
  }
  .cand-badges {
    gap: 4px;                            /* 뱃지 간격 축소 */
  }
  .cand-badges .badge {
    font-size: 9px;                      /* 태그/뱃지 글자 축소 */
    padding: 2px 6px;                    /* 태그 여백 축소 */
  }
  .cand-name {
    font-size: 18px !important;          /* 후보자 이름 축소 */
  }
  .cand-sub {
    font-size: 11px;                     /* 부제목/설명 축소 */
  }
  .cand-period {
    font-size: 10px;                     /* 기간 문구 축소 */
  }
  .cand-info-block {
    gap: 6px;                            /* 이름-태그-설명 간격 축소 */
  }
  .ckpi-val {
    font-size: 22px;                     /* KPI 큰 숫자 축소 */
  }
  .ckpi-label {
    font-size: 10px;                     /* KPI 라벨 축소 */
  }
  .ckpi {
    padding: 14px 16px;                  /* KPI 셀 여백 축소 */
  }
  .sec-head h2 {
    font-size: 18px;                     /* 섹션 제목 축소 */
  }
  .card-head h4 {
    font-size: 14px;                     /* 카드 제목 축소 */
  }
  .card-head {
    padding: 12px 16px;                  /* 카드 헤더 여백 다이어트 */
  }
  .card-bd {
    padding: 14px;                       /* 카드 본문 여백 다이어트 */
  }
  .sec-blk {
    margin-bottom: 24px;                 /* 섹션 간 간격 축소 */
  }
  .cand-photo::after {
    display: none;                       /* 모바일에서 장식 그라데이션 제거 */
  }
  .kstrip, .kstrip5, .yt-kstrip {
    scroll-snap-type: x mandatory;       /* KPI 가로 스크롤 스냅 */
  }
  .kstrip .kbox, .kstrip5 .mbox, .yt-kstrip .yt-kbox {
    scroll-snap-align: start;            /* 아이템 시작점에 스냅 */
  }
  body {
    line-height: 1.45;                   /* 모바일 줄 간격 타이트하게 */
  }
}

/* 390px 이하 초소형 폰 추가 대응 */
@media (max-width: 390px) {
  body {
    font-size: 14px;                     /* 더 작은 폰 베이스 폰트 축소 */
  }
  .cand-photo-initial {
    width: 40px;                         /* 이니셜 더 축소 */
    height: 40px;
    font-size: 15px;
    border-radius: 10px;
  }
  .cand-name {
    font-size: 16px;                     /* 이름 더 축소 */
  }
  .cand-sub {
    font-size: 10px;                     /* 부제목 더 축소 */
  }
  .cand-period {
    font-size: 9px;                      /* 기간 문구 더 축소 */
  }
  .cand-badges .badge {
    font-size: 8px;                      /* 태그 더 축소 */
    padding: 1px 4px;
  }
  .sec-head h2 {
    font-size: 16px;                     /* 섹션 제목 더 축소 */
  }
  .card-head h4 {
    font-size: 13px;                     /* 카드 제목 더 축소 */
  }
  .card-head {
    padding: 10px 12px;                  /* 카드 헤더 더 축소 */
  }
  .card-bd {
    padding: 10px;                       /* 카드 본문 더 축소 */
  }
  .ckpi-val {
    font-size: 18px;                     /* KPI 숫자 더 축소 */
  }
  .bk-grid .wcloud {
    height: 180px !important;            /* 초소형 폰 워드클라우드 높이 */
  }
  .comp-donut-canvas {
    width: 100px !important;             /* 도넛 차트 더 축소 */
    height: 100px !important;
  }
  .comp-donut-canvas canvas {
    width: 100px !important;
    height: 100px !important;
  }
  .comp-donut-grid-2x3 .comp-donut-canvas,
  .comp-donut-grid .comp-donut-canvas {
    width: 90px !important;
    height: 90px !important;
  }
  .comp-donut-grid-2x3 .comp-donut-canvas canvas,
  .comp-donut-grid .comp-donut-canvas canvas {
    width: 90px !important;
    height: 90px !important;
  }
}

@media (max-width: 768px) {
  .bk-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .ai-rect-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ai-rect-box {
    height: 72px !important;
    padding: 6px !important;
  }
  .ai-rect-box > div:first-child {
    font-size: 10px !important;
  }
  .ai-rect-box > div:last-child {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .ai-mini-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .ai-mkpi {
    padding: 8px 10px !important;
  }
  .ai-mkpi-v {
    font-size: 12px !important;
  }
  .ai-mkpi-d {
    font-size: 10px !important;
  }
}

@media (max-width: 768px) {
  #quad-traffic .bk-grid > div:nth-child(2) {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .ai-quad,
  .ai-cross-grid > * {
    min-width: 0 !important;
  }
  .ai-quad canvas {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  .dnt-wrap > div:first-child {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
  }
  .dnt-wrap > div:first-child > div {
    width: 200px !important;
    height: 200px !important;
  }
}

@media (max-width: 860px) {
  .sg.c2 > .pnl,
  .sg.c3 > .pnl {
    min-width: 0 !important;
  }
  .sg.c2 canvas,
  .sg.c3 canvas {
    max-width: 100% !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .yt-video-table {
    table-layout: auto !important;
    min-width: 480px !important;
  }
  .yt-video-table td:nth-child(2),
  .yt-title {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 200px !important;
  }
}

@media (max-width: 640px) {
  .yt-video-table td:nth-child(2),
  .yt-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important; /* 표준 속성 병기 (호환성) */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    max-width: 180px !important;
  }
}

@media (max-width: 860px) {
  .comp-donut-col {
    min-width: 0 !important;
  }
  .comp-donut-canvas,
  #comp-donut-5, #comp-donut-6,
  #comp-donut-kim-posneg, #comp-donut-park-posneg {
    width: 140px !important;
    height: 140px !important;
  }
}

@media (max-width: 860px) {
  .comp-donut-grid-2x3 {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .comp-donut-divider {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .comp-donut-canvas,
  .comp-donut-canvas canvas,
  #comp-donut-5, #comp-donut-6,
  #comp-donut-kim-posneg, #comp-donut-park-posneg {
    width: 140px !important;
    height: 140px !important;
  }
  .comp-donut-legend {
    margin-top: 12px !important;
  }
}

@media (max-width: 860px) {
  .comp-donut-body {
    flex-direction: column !important;
    gap: 12px !important;
  }
}

/* 640px 이하에서 .profile-top을 사진 위 / 텍스트 아래의 세로 1열로 쌓기 위한 미디어 쿼리 */
@media (max-width: 640px) {
  /* .profile-top 컨테이너(사진+텍스트+KPI)를 세로로 쌓인 하나의 열로 변경 */
  .profile-top {
    /* 기존 2열(auto 1fr) 레이아웃을 단일 열(1fr)로 덮어씀 */
    grid-template-columns: 1fr !important;
    /* 그리드 아이템(사진, 텍스트)을 가로 중앙에 배치 */
    justify-items: center;
    /* 텍스트 요소들을 가운데 정렬 */
    text-align: center;
  }
  /* .profile-top 안의 KPI 컬럼이 단일 열 전체 너비를 사용하도록 설정 */
  .profile-top .kpi-col {
    /* 첫 번째 그리드 선부터 마지막 그리드 선까지 차지하여 전체 열 너비 사용 */
    grid-column: 1 / -1 !important;
  }
}

/* 640px 이하에서 언급 피드(게시글) 제목 줄바꿈/말줄임과 페이지네이션 반응형 처리 */
@media (max-width: 640px) {
  /* 피드 제목이 2줄까지 줄바꿈되고 2줄을 넘어가면 말줄임(...) 처리 */
  .mn-feed-title {
    /* 최대 표시 줄 수를 2줄로 변경 */
    -webkit-line-clamp: 2;
    /* 표준 line-clamp 속성도 2줄로 동기화 */
    line-clamp: 2;
    /* 긴 URL/영문 단어가 박스를 벗어나지 않도록 줄바꿈 허용 */
    word-break: break-all;
  }
  /* 페이지네이션 버튼이 좁은 화면에서 다음 줄로 내려가도록 설정 */
  .mn-feed-pagination {
    /* 가로 공간이 부족하면 버튼들을 다음 줄로 감쌈 */
    flex-wrap: wrap;
  }
}

/* 768px 이하에서 정치 이슈 키워드 슬라이더를 세로 전체 보기로 전환 */
@media (max-width: 768px) {
  #iw-slides-track {
    /* 플렉스 컨테이너는 유지하되 아이템을 세로로 쌓음 */
    display: flex !important;
    flex-direction: column !important;
    /* JS가 인라인으로 넣는 translateX를 무효화해 세로 스크롤/고정 상태로 만듦 */
    transform: none !important;
    /* 트랙이 부모(.iw-slides-outer) 가로 폭 전체를 사용 */
    width: 100% !important;
  }
  .iw-week-card {
    /* 카드가 가로 전체 폭을 사용하는 가로 직사각형 형태로 변경 */
    width: 100% !important;
    /* max-width 제한을 해제해 화면 전체를 채움 */
    max-width: 100% !important;
    /* flex-basis 자동 축소/확대를 막고 지정한 width만 사용 */
    flex: none !important;
  }
  .iw-nav-group {
    /* 세로 전체 보기에서는 좌우 화살표가 필요 없으므로 숨김 */
    display: none !important;
  }
}

/* 768px 이하에서 정치 이슈 키워드 카드를 2개씩 페이지로 넘기기 위한 표시/숨김 */
@media (max-width: 768px) {
  /* 기본적으로 모든 카드를 숨김 */
  .iw-week-card {
    display: none !important;
  }
  /* JS가 추가하는 .iw-page-visible 클래스가 있을 때만 카드를 보임 */
  .iw-week-card.iw-page-visible {
    display: block !important;
  }
}

@media (max-width: 640px) {
  #sec-poll .gender-chart-wrap {
    flex-direction: column !important;
  }
  #sec-poll .gender-chart2 {
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    padding-bottom: 16px !important;
  }
}

@media (max-width: 640px) {
  #sec-poll .gender-chart2:has(.gov_info) {
    margin-bottom: 24px !important; /* 다음 섹션(조사 기관 표)과 겹치지 않도록 사진 블록 아래 여백 추가 */
  }
  #sec-poll .president-photo {
    max-width: 160px !important;    /* 모바일에서 사진이 컨테이너를 넘지 않도록 최대 너비 제한 */
    height: auto !important;        /* 원본 비율 유지 */
  }
}

@media (max-width: 640px) {
  #sec-poll .gender-chart2:has(canvas) {
    height: 340px !important;      /* Chart.js 캔버스용 컨테이너는 고정 높이 유지 */
    min-height: 340px !important;  /* 캔버스 최소 높이 보장 */
  }
  #sec-poll .gender-chart2:has(.gov_info) {
    height: auto !important;       /* 사진/배지 블록은 콘텐츠 높이에 맞춤 */
    min-height: 0 !important;      /* 불필요한 최소 높이 제거 */
  }
}

@media (max-width: 640px) {
  #sec-poll .gov_info {
    margin-top: 24px !important; /* 범례와 사진/배지 영역 사이 간격 확보 */
  }
}

/* pm4m 모바일: 도넛 확대 + 범례 옆 배치 */
@media (max-width: 640px) {
  #comp-rows-main .comp-donut-grid-2x3 .comp-donut-body,
  #party-comp-rows-main .comp-donut-grid-2x3 .comp-donut-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  #comp-rows-main .comp-donut-grid-2x3 .comp-donut-canvas,
  #party-comp-rows-main .comp-donut-grid-2x3 .comp-donut-canvas,
  #comp-rows-main .comp-donut-grid-2x3 .comp-donut-canvas canvas,
  #party-comp-rows-main .comp-donut-grid-2x3 .comp-donut-canvas canvas {
    width: 180px !important;
    height: 180px !important;
    max-width: none !important;
    flex: none !important;
  }
  #comp-rows-main .comp-donut-grid-2x3 .comp-donut-legend,
  #party-comp-rows-main .comp-donut-grid-2x3 .comp-donut-legend {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 4px !important;
    min-width: 0 !important;
  }
  #comp-rows-main .comp-donut-grid-2x3 .comp-donut-leg-item,
  #party-comp-rows-main .comp-donut-grid-2x3 .comp-donut-leg-item {
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
}

/* 기사 목록 카테고리 필터 - 더보기 아코디언 */
.bk-filter-toggle .toggle_arrow {                   /* 화살표 아이콘 */
  transition: transform 0.25s ease;
  color: #64748b;
}
.bk-filter-toggle.open .toggle_arrow {              /* 펼침 시 화살표 회전 */
  transform: rotate(180deg);
}
.bk-filter-toggle .toggle_body {                    /* 기본 상태: 접힘 */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
}
.bk-filter-toggle.open .toggle_body {               /* 펼침 시 표시 */
  max-height: 500px;
  opacity: 1;
}

/* 모바일 출처별 구성 도넛 크기 축소 */
@media (max-width: 640px) {
  .mn-mc-donut {
    width: 160px !important;
    height: 160px !important;
    margin: 50px auto 0 !important;
  }
  #mn-mc-cand_mention {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* ===== 데스크탑 보존용 오버라이드 (pm4 통합 시 추가) ===== */
@media (min-width: 861px) {
  /* 히어로 버튼(pm4m 모바일 전용)은 데스크탑에서 숨김 - 기존 데스크탑 화면 유지 */
  .hero-btns {
    display: none;
  }
}
@media (min-width: 769px) {
  /* 기사 목록 카테고리 필터 아코디언은 모바일 전용 - 데스크탑에서는 항상 펼침 */
  .bk-filter-toggle .toggle_header {
    display: none; /* 데스크탑에서는 토글 헤더 숨김 */
  }
  .bk-filter-toggle .toggle_body {
    max-height: none !important; /* 접힘 해제 */
    opacity: 1 !important;       /* 항상 표시 */
  }
  /* iw 모바일 페이저(이전/다음 버튼)도 데스크탑에서 숨김 */
  .iw-toggle-wrap {
    display: none !important;
  }
}


/* 비활성화된 히어로 버튼 컨테이너 숨김 (주석 처리로 인한 여백 제거) */
.hero-btns {
  display: none;
}

@media (max-width: 640px) {
  #yt-sent-dist,
  #yt-ch-type,
  #chart-mentions,
  #chart-pos-neg,
  #chart-sentiment,
  #cand-mention-chart,
  #cand-sentiment-chart,
  #comp-donut-5,
  #comp-donut-6,
  #comp-donut-kim-posneg,
  #comp-donut-park-posneg,
  #comp-donut-kim-sentiment,
  #comp-donut-park-sentiment,
  .comp-donut-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .comp-donut-canvas {
    width: 180px !important;
    height: 180px !important;
  }
}

/* AI 요약 카드 토글 */
.ai-section-toggle { margin: 0 0 16px; }
.ai-section-toggle .toggle_body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.25s ease; }
.ai-section-toggle.open .toggle_body { max-height: 5000px; opacity: 1; }
.ai-section-toggle .toggle_header .toggle_arrow { transition: transform 0.25s ease; }
.ai-section-toggle.open .toggle_header .toggle_arrow { transform: rotate(180deg); }
.ai-section-toggle .ai-summary { margin-bottom: 0; }