@media (min-width: 48rem) {
  .app-main .app-view-frame {
    inline-size: min(var(--app-content-max-inline), calc(100% - (var(--app-page-gutter) * 2)));
    margin-inline: auto var(--app-page-gutter);
    padding-block-start: var(--space-4);
    box-sizing: border-box;
  }

  .app-view-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    min-inline-size: 0;
  }

  .app-view-header__copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    min-inline-size: 0;
  }

  .app-view-header h1,
  .app-view-header p {
    margin: 0;
    white-space: nowrap;
  }

  .app-view-header h1 {
    font-size: var(--type-title);
    line-height: 1.35;
    letter-spacing: -0.02em;
  }

  .app-view-header p {
    min-inline-size: 0;
    max-inline-size: 100%;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--type-caption);
    line-height: 1.45;
    text-overflow: ellipsis;
  }

  .app-view-header--detailed {
    flex-wrap: nowrap;
    align-items: flex-start;
    block-size: 5rem;
  }

  .app-view-header--detailed .app-view-header__copy {
    display: grid;
    flex: 1 1 auto;
    align-content: start;
    align-items: start;
    gap: 0;
  }

  .app-view-header--detailed .app-view-header__eyebrow {
    display: block;
    color: var(--accent-primary);
    font-size: var(--type-micro);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .app-view-header--detailed h1 {
    margin-block: var(--space-1) 0;
    line-height: 1.25;
  }

  .app-view-header--detailed p {
    display: block;
    max-inline-size: 100%;
    margin-block-start: 0.125rem;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: var(--type-small);
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .knowledge-add-page__inner {
    gap: var(--space-3);
  }

  .cohort-page__header,
  .customer-info-page__header {
    max-inline-size: none;
    margin-block-end: var(--space-3);
  }

  .kakao-metrics {
    margin-block-start: var(--space-3);
  }
}

@media (max-width: 47.999rem) {
  .app-view-frame:has(> .app-view-header--detailed),
  .message-page__inner {
    inline-size: 100%;
    margin-inline: 0;
    padding: var(--space-4) var(--space-3) var(--space-8);
    row-gap: 0;
    align-content: start;
    box-sizing: border-box;
  }

  .app-view-header--detailed {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: var(--space-3);
    block-size: calc((var(--space-8) * 2) + var(--space-3));
    margin: 0 0 var(--space-3);
    padding: 0;
  }

  .app-view-header--detailed + * {
    margin-block-start: 0;
  }

  .app-view-header--detailed .app-view-header__copy {
    display: grid;
    align-content: center;
    gap: 0;
    min-inline-size: 0;
  }

  .app-view-header--detailed .app-view-header__eyebrow {
    display: block !important;
    color: var(--accent-primary);
    font-size: var(--type-micro);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .app-view-header--detailed h1 {
    margin-block: var(--space-1) 0;
    font-size: var(--type-title);
    line-height: 1.25;
    white-space: nowrap;
  }

  .app-view-header--detailed p {
    display: none !important;
  }

  .app-view-header--detailed > :not(.app-view-header__copy):not([hidden]) {
    align-self: center;
    inline-size: 100%;
    min-inline-size: 0;
  }

  .app-view-header--detailed:has(> dl) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--space-2);
    block-size: auto;
  }

  .app-view-header--detailed:has(> dl) .app-view-header__copy,
  .app-view-header--detailed:has(> dl) > dl {
    grid-column: 1;
    inline-size: 100%;
  }

  .app-view-header--detailed:has(> dl) .app-view-header__copy {
    grid-row: 1;
    align-content: start;
  }

  .app-view-header--detailed:has(> dl) > dl {
    grid-row: 2;
    align-self: start;
  }

  .app-view-header--detailed .marketing-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-inline-size: 0;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .app-view-header--detailed .marketing-kpis > div {
    min-inline-size: 0;
    padding: var(--space-1);
  }

  .app-view-header--detailed .knowledge-add-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .app-view-header--detailed .knowledge-add-summary > div {
    min-inline-size: 0;
    padding: var(--space-1) var(--space-2);
  }

  .knowledge-page__inner.app-view-frame,
  .knowledge-add-page__inner.app-view-frame {
    row-gap: var(--space-3);
  }

  .knowledge-page__header.app-view-header--detailed {
    margin-block-end: 0;
  }

  .knowledge-add-page__header.app-view-header--detailed {
    display: contents;
  }

  .knowledge-add-page__heading {
    grid-row: 1;
    min-block-size: calc((var(--space-8) * 2) + var(--space-3));
  }

  .knowledge-add-page__inner > [data-knowledge-scope-host] {
    grid-row: 2;
  }

  .knowledge-add-page__inner > .knowledge-add-page__header > .knowledge-add-summary {
    grid-row: 3;
  }
}