:root {
    --navy: #002060;

    --navy-deep: #001845;

    --light-blue: #e6f0fa;

    --yellow: #ffd700;

    --white: #ffffff;

    --text: #1a1f2e;

    --muted: #5c6478;

    --red: #e53935;

    --green: #2e7d32;

    --purple: #7b1fa2;

    --radius: 8px;

    --shadow: 0 4px 14px rgba(0, 32, 96, 0.12);

    /* fluid type: clamp min / vw+k / max */

    --fs-9: clamp(16px, 0.32vw + 14px, 20px);

    --fs-10: clamp(18px, 0.4vw + 16px, 22px);

    --fs-11: clamp(19px, 0.5vw + 17px, 24px);

    --fs-12: clamp(21px, 0.6vw + 18px, 26px);

    --fs-13: clamp(22px, 0.7vw + 19px, 28px);

    --fs-14: clamp(23px, 0.8vw + 20px, 30px);

    --fs-16: clamp(24px, 0.9vw + 21px, 32px);

    --fs-18: clamp(26px, 1.1vw + 22px, 34px);

    --fs-20: clamp(28px, 2.2vw + 24px, 40px);

    --fs-28: clamp(32px, 2.8vw + 22px, 46px);

    --fs-34: clamp(38px, 3.2vw + 26px, 54px);
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;

    background: linear-gradient(
      165deg,
      #d9e6f5 0%,
      #eef4fb 40%,
      #e4edf7 100%
    );

    font-family:
      "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;

    font-size: var(--fs-13);

    color: var(--text);

    line-height: 1.55;

    -webkit-print-color-adjust: exact;

    print-color-adjust: exact;
  }

  .wrap {
    max-width: 1500px;

    margin: 20px auto 30px;

    padding: 0 16px;
  }

  /* ----- 상단 영역 ----- */

  .hero {
    background: linear-gradient(
      135deg,
      var(--navy) 0%,
      #003a8c 55%,
      var(--navy-deep) 100%
    );

    border-radius: var(--radius);

    padding: 28px 32px 30px;

    color: var(--white);

    display: flex;

    flex-direction: column;

    gap: 16px;

    box-shadow: var(--shadow);
  }

  .hero-top {
    width: 100%;
  }

  /* 제목+필(좌)과 날짜+부서(우) 나란히, 부서와 필 하단 정렬 */
  .hero-title-bar {
    display: flex;

    /* flex-direction: row; */

    align-items: stretch;

    justify-content: space-between;

    gap: 20px 32px;

    width: 100%;
  }

  .hero-left {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-start;

    gap: 10px;

    flex: 1 1 auto;

    min-width: 0;
  }

  .hero-title {
    margin: 0;

    font-size: var(--fs-20);

    font-weight: 800;

    letter-spacing: 0.04em;

    flex: 1 1 auto;

    min-width: 0;
  }

  .hero-right {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: flex-end;

    flex: 0 0 auto;

    text-align: right;

    white-space: nowrap;
  }

  .hero-right-dates {
    display: flex;

    flex-direction: column;

    align-items: flex-end;
  }

  @media (max-width: 768px) {
    .hero-title-bar {
      /* flex-direction: column; */
      align-items: stretch;
      gap: 12px;
    }

    .hero-right {
      text-align: left;
      white-space: normal;
      align-items: flex-start;
    }

    .hero-right-dates {
      align-items: flex-start;
    }
  }

  .pill {
    display: inline-block;

    background: var(--yellow);

    color: var(--navy);

    font-weight: 800;

    font-size: var(--fs-11);

    letter-spacing: 0.18em;

    padding: 8px 18px;

    border-radius: 999px;
  }

  .hero-center {
    text-align: center;

    padding-top: 4px;
  }

  .hero-date {
    font-size: var(--fs-12);

    font-weight: 700;

    margin: 0 0 6px;
  }

  .hero-sub {
    margin: 0;

    font-size: var(--fs-12);

    opacity: 0.92;
  }

  .hero-dept {
    margin: 0;

    font-size: var(--fs-11);

    font-weight: 600;

    opacity: 0.88;
  }

  #fill-hero-summary-ul li {
    text-align: justify;
  }

  /* 경제 지표(그래프1 세로 + 그래프2 지수 카드) */
  .eco-panel {
    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.28);

    border-radius: var(--radius);

    padding: 14px 16px 16px;
  }

  .eco-heading {
    margin: 0 0 12px;

    font-size: var(--fs-14);

    font-weight: 800;

    letter-spacing: 0.06em;
  }

  .eco-row {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

    margin: 0 0 12px;

    font-size: var(--fs-12);
  }

  .eco-row-label {
    flex-shrink: 0;

    font-weight: 700;

    opacity: 0.95;
  }

  .eco-row--fx {
    align-items: flex-start;
  }

  .eco-fx-left {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px 12px;

    min-width: 0;
  }

  .eco-fx-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

    min-width: 0;
  }

  .eco-fx-flags {
    width: 42px;

    height: 42px;

    border-radius: 50%;

    object-fit: cover;

    display: block;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.45);

    box-shadow: 0 1px 4px rgba(0, 20, 70, 0.15);
  }

  .eco-fx-closed {
    font-size: var(--fs-10);

    font-weight: 400;

    opacity: 0.88;

    letter-spacing: 0.02em;

    white-space: nowrap;
  }

  .eco-row-value {
    text-align: right;

    font-weight: 700;

    letter-spacing: 0.02em;
  }

  .eco-row-value .eco-fx-ratio--up {
    color: var(--red);
  }

  .eco-row-value .eco-fx-ratio--down {
    color: var(--green);
  }

  .eco-subheading {
    /* display: flex; */

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin: 0 0 10px;

    font-size: var(--fs-12);

    font-weight: 700;

    opacity: 0.95;
  }

  .eco-subheading-closed {
    font-size: var(--fs-10);

    font-weight: 400;

    opacity: 0.88;

    letter-spacing: 0.02em;

    white-space: nowrap;
  }

  .eco-cards {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
  }

  @media (max-width: 900px) {
    /* .eco-cards { grid-template-columns: 1fr; } */
  }

  .eco-card {
    background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(230, 240, 250, 0.9) 48%,
      rgba(214, 228, 245, 0.96) 100%
    );

    border: 1px solid rgba(255, 255, 255, 0.48);

    border-radius: var(--radius);

    padding: 12px 14px;

    color: var(--text);

    box-shadow: 0 2px 10px rgba(0, 24, 80, 0.12);

    backdrop-filter: blur(4px);
  }

  .eco-card-name {
    font-size: var(--fs-12);

    font-weight: 700;

    color: var(--text);

    margin: 0 0 6px;
  }

  .eco-card-value {
    font-size: var(--fs-18);

    font-weight: 800;

    line-height: 1.2;

    margin: 0 0 6px;
  }

  .eco-card-change {
    font-size: var(--fs-10);

    font-weight: 700;
  }

  .eco-card-change--up {
    color: var(--red);
  }

  .eco-card-change--down {
    color: var(--green);
  }

  .summary {
    background: rgba(230, 240, 250, 0.22);

    border: 1px solid rgba(255, 255, 255, 0.25);

    border-radius: var(--radius);

    padding: 12px 14px 12px 44px;

    position: relative;

    font-size: var(--fs-12);

    line-height: 1.6;
  }

  .summary .fa-bullhorn {
    position: absolute;

    left: 14px;

    top: 19px;

    font-size: var(--fs-18);

    opacity: 0.9;
  }

  .summary ul {
    margin: 0;
    padding-left: 16px;
  }

  .kpis {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    justify-content: flex-end;
  }

  .kpi {
    text-align: center;

    min-width: 64px;
  }

  .kpi-num {
    font-size: var(--fs-34);

    font-weight: 900;

    line-height: 1;

    margin-bottom: 4px;
  }

  .kpi-num.blue {
    color: #64b5f6;
  }

  .kpi-num.yellow {
    color: var(--yellow);
  }

  .kpi-num.purple {
    color: #ce93d8;
  }

  .kpi-num.red {
    color: #ff8a80;
  }

  .kpi-lbl {
    font-size: var(--fs-11);
    opacity: 0.9;
  }

  /* ----- 3열 블록 ----- */

  .grid-3 {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;

    margin-top: 16px;
  }

  @media (max-width: 1024px) {
    .grid-3 {
      grid-template-columns: 1fr;
    }
  }

  .grid-2 {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

    margin-top: 14px;
  }

  @media (max-width: 900px) {
    .grid-2 {
      grid-template-columns: 1fr;
    }
  }

  /* 내용 영역(3열 + 하단)에 전체 글꼴보다 +2px */

  .grid-3,
  .grid-2 {
    --fs-9: clamp(13px, 0.2vw + 12px, 14.5px);

    --fs-10: clamp(14.5px, 0.28vw + 13.5px, 16px);

    --fs-11: clamp(15.5px, 0.35vw + 14.2px, 17px);

    --fs-12: clamp(16.5px, 0.45vw + 15px, 18.5px);

    --fs-13: clamp(18px, 0.55vw + 16.5px, 20px);

    --fs-14: clamp(18.5px, 0.62vw + 16.8px, 21px);

    --fs-18: clamp(20px, 0.95vw + 17.5px, 25px);
  }

  html.is-ko-report .grid-3,
  html.is-ko-report .grid-2 {
    --fs-9: clamp(9px, 0.14vw + 8.5px, 11px);
    --fs-10: clamp(10px, 0.15vw + 9px, 12px);
    --fs-11: clamp(11px, 0.16vw + 10px, 13px);
    --fs-12: clamp(12px, 0.18vw + 11px, 14px);
    --fs-13: clamp(13px, 0.2vw + 12px, 15px);
    --fs-14: clamp(13px, 0.22vw + 12.5px, 16px);
    --fs-18: clamp(15px, 0.28vw + 14px, 18px);
  }

  .section {
    background: var(--white);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;

    border: 1px solid rgba(0, 32, 96, 0.08);
  }

  .section-hd {
    background: var(--navy);

    color: var(--white);

    padding: 10px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;
  }

  .section-hd-left {
    display: flex;

    align-items: center;

    gap: 10px;

    font-weight: 800;

    font-size: var(--fs-14);
  }

  .section-hd-left i {
    opacity: 0.95;
  }

  .tag {
    font-size: var(--fs-10);

    font-weight: 800;

    letter-spacing: 0.12em;

    padding: 4px 10px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  .section-body {
    padding: 12px 14px 14px;
    background: var(--light-blue);
    font-size: var(--fs-13);
  }

  .item {
    display: grid;

    grid-template-columns: 28px 48px 1fr;

    gap: 10px;

    align-items: start;

    padding: 10px 0;

    border-bottom: 1px solid rgba(0, 32, 96, 0.08);
  }

  .item:last-child {
    border-bottom: 0;
    padding-bottom: 2px;
  }

  .num-box {
    width: 26px;

    height: 26px;

    background: var(--navy);

    color: var(--white);

    font-weight: 800;

    font-size: var(--fs-12);

    border-radius: 4px;

    display: flex;

    align-items: center;

    justify-content: center;
    margin-top: 6px;
  }

  .logo-img {
    width: 48px;

    height: 48px;

    border-radius: 6px;

    object-fit: cover;

    background: var(--white);

    border: 1px solid rgba(0, 32, 96, 0.1);
  }

  /* 썸네일 포함: 번호 | 본문(좌) | 이미지(우) */
  .item--with-thumb {
    grid-template-columns: 28px 1fr minmax(120px, 32%);

    grid-template-rows: auto;

    align-items: start;
  }

  .item--with-thumb .num-box {
    grid-column: 1;

    grid-row: 1;

    align-self: start;
  }

  .item--with-thumb .item-body {
    grid-column: 2;

    grid-row: 1;

    align-self: center;
    
    /* text-align: justify; */
  }

  .item--with-thumb .item-media-col {
    grid-column: 3;

    grid-row: 1;

    width: 100%;

    max-width: 220px;

    justify-self: end;

    align-self: center;
  }

  #fill-social-body .item--social-stack .item-body {
    align-self: start;
  }

  .item-media-col {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 6px;
  }

  .item-media-col .item-source {
    margin-top: 0;

    padding-right: 0;

    text-align: right;

    line-height: 1.35;
  }

  .item-thumb-wrap {
    aspect-ratio: 16 / 9;

    border-radius: 6px;

    overflow: hidden;

    background: var(--white);

    border: 1px solid rgba(0, 32, 96, 0.1);
  }

  .item-thumb-wrap .item-thumb {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
  }

  .item--car {
    grid-template-columns: 28px 72px 1fr;
  }

  .item--car.item--with-thumb {
    grid-template-columns: 28px 1fr minmax(120px, 32%);
  }

  .item-title {
    font-weight: 800;
    font-size: var(--fs-13);
    margin: 0 0 6px;
    color: var(--navy-deep);
  }

  .item-title-row {
    margin-bottom: 6px;
  }

  .item-title-row .item-title {
    margin: 0;

    line-height: 1.35;
  }

  .item-title-row .item-title .item-title-text {
    display: inline;

    font-weight: inherit;

    font-size: inherit;

    color: inherit;
  }

  .item-title-row .item-title .heat {
    display: inline-flex;

    vertical-align: middle;

    /* margin: 0 0 0 6px; */

    line-height: 1.2;
  }

  .item p {
    margin: 0 0 6px;
    font-size: var(--fs-12);
    color: var(--text);
  }

  .item ul {
    margin: 0;
    padding-left: 18px;
    font-size: var(--fs-12);
  }

  .focus {
    font-size: var(--fs-11);

    color: var(--muted);

    margin-top: 4px;
  }

  .item-source {
    font-size: var(--fs-10);

    color: var(--muted);

    margin-top: 6px;

    text-align: right;

    /* 좌측 번호 열(28px + gap 10px)과 대칭, 카드 우측에 붙지 않도록 */
    padding-right: 38px;

    box-sizing: border-box;
  }

  /* 사회 핫이슈: 좌측(제목+본문) | 우측(이미지), 상단 정렬 */
  .item--social-stack {
    grid-template-columns: 28px minmax(0, 1fr);

    grid-template-rows: auto;

    align-items: start;

    gap: 10px;
  }

  .item--social-stack.item--social-has-thumb {
    grid-template-columns: 28px minmax(0, 1fr) minmax(120px, 32%);
  }

  .item--social-stack .num-box {
    grid-column: 1;

    grid-row: 1;

    align-self: start;

    margin-top: 0;
  }

  .item--social-stack .item-social-main {
    grid-column: 2;

    grid-row: 1;

    min-width: 0;

    align-self: start;
  }

  .item--social-stack:not(.item--social-has-thumb) .item-social-main {
    grid-column: 2 / -1;
  }

  .item--social-stack .item-social-head {
    margin: 0 0 8px;
  }

  .item--social-stack .item-social-head .item-title-row {
    margin-bottom: 0;
  }

  .item--social-stack.item--social-has-thumb .item-media-col {
    grid-column: 3;

    grid-row: 1;

    align-self: start;

    justify-self: end;

    width: 100%;

    max-width: 220px;
  }

  .heat {
    display: inline-flex;

    align-items: center;

    gap: 3px;

    border: none;

    color: var(--red);

    font-weight: 600;

    font-size: 0.72em;

    padding: 0;

    margin: 0;

    line-height: 1.2;

    white-space: nowrap;
  }

  .heat > .fa-fire {
    color: #ff6d00;

    font-size: 0.95em;

    line-height: 1;
  }

  /* ----- IV 현대 브랜드 동향(국내/국제 2열) ----- */

  .buzz-dual {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    align-items: start;
  }

  @media (max-width: 900px) {
    .buzz-dual {
      grid-template-columns: 1fr;
    }
  }

  .buzz-col-hd {
    margin: 0 0 10px;

    padding-bottom: 8px;

    border-bottom: 1px solid rgba(0, 32, 96, 0.12);

    font-size: var(--fs-13);

    font-weight: 800;

    color: var(--navy);
  }

  .buzz-col-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
  }

  .buzz-item {
    background: var(--white);

    border-radius: var(--radius);

    padding: 12px 14px;

    border: 1px solid rgba(0, 32, 96, 0.1);
  }

  .buzz-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;

    font-size: var(--fs-11);

    color: var(--muted);
  }

  .buzz-time {
    flex-shrink: 0;

    white-space: nowrap;
  }

  .plat {
    display: flex;

    align-items: center;

    gap: 8px;

    font-weight: 700;

    color: var(--navy);
  }

  .plat i {
    font-size: var(--fs-18);
  }

  .buzz-item .item-title {
    margin-bottom: 6px;
  }

  .buzz-item p {
    margin: 0 0 6px;
    font-size: var(--fs-12);
    color: var(--text);
  }

  .buzz-item .focus {
    margin-top: 4px;
    margin-bottom: 0;
  }

  .sentiments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }

  .sent {
    font-size: var(--fs-10);

    font-weight: 700;

    padding: 3px 8px;

    border-radius: 999px;
  }

  .sent--neg {
    background: #ffebee;
    color: var(--red);
  }

  .sent--pos {
    background: #e8f5e9;
    color: var(--green);
  }

  .sent--mix {
    background: #f3e5f5;
    color: var(--purple);
  }

  .quote-bar {
    margin-top: 12px;

    padding: 10px 14px;

    background: #eceff4;

    border-radius: var(--radius);

    font-size: var(--fs-12);

    color: var(--muted);

    border-left: 4px solid var(--navy);
  }

  /* ----- V 전략 ----- */

  .action-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
  }

  @media (max-width: 900px) {
    .action-grid {
      grid-template-columns: 1fr;
    }
  }

  .action-card {
    background: var(--white);

    border-radius: var(--radius);

    padding: 12px;

    border: 1px solid rgba(0, 32, 96, 0.1);

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .action-card:has(> img) {
    grid-template-columns: 100px 1fr;
  }

  .action-card img {
    width: 100px;

    height: 70px;

    object-fit: cover;

    border-radius: 6px;

    border: 1px solid rgba(0, 32, 96, 0.1);
  }

  .core-tag {
    display: inline-block;

    background: var(--red);

    color: var(--white);

    font-size: var(--fs-10);

    font-weight: 800;

    padding: 3px 8px;

    border-radius: 4px;

    margin-bottom: 6px;
  }

  .action-h {
    font-weight: 800;

    font-size: var(--fs-13);

    margin: 0 0 8px;
  }

  .lbl {
    font-size: var(--fs-11);
    font-weight: 800;
    color: var(--navy);
    margin: 8px 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .lbl i {
    color: var(--yellow);
  }

  .action-card ol {
    margin: 0;
    padding-left: 18px;
    font-size: var(--fs-12);
  }

  .report-fill-error {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fff3e0;
    border: 1px solid #ffb74d;
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-13);
  }
  .report-fill-error[hidden] {
    display: none !important;
  }

  .report-disclaimer {
    grid-column: 1 / -1;
    margin: 12px 0 8px;
    padding: 0;
    text-align: center;
    font-size: var(--fs-9);
    color: rgba(92, 100, 120, 0.75);
    line-height: 1.45;
  }

  .report-disclaimer i {
    margin-right: 4px;
    opacity: 0.45;
    font-size: 0.9em;
  }