/* Approved A design: continuous screen reading on desktop and mobile.
   Screen-only rules keep PDF pagination and print exports independent. */
@media screen {
  body:has(#daily-report, #match-report, #year-report, #saved-report) > main,
  body.integration-detail #info,
  body:has(#app[data-view^="name-"]) > main {
    width: calc(100% - 32px);
    max-width: 1120px;
    box-sizing: border-box;
    margin-inline: auto;
  }
  :is(#daily-report, #match-report, #year-report, #saved-report,
      #decade-result:not(:empty), #date-candidates:not(:empty),
      #app[data-view="name-report-preview"], #app[data-view="name-sample"],
      #app[data-view="name-traditional-sample"]) {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    columns: auto;
    border: 3px solid #237b78;
    border-radius: 16px;
    background: #faf8f1;
    color: #243d31;
    padding: clamp(20px, 4vw, 48px);
    margin-block: 24px;
    box-shadow: 0 8px 28px #2449360a;
    font-family: OttugiBody, 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif;
    font-size: 18px;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  :is(#daily-report, #match-report, #year-report, #saved-report,
      #decade-result:not(:empty), #date-candidates:not(:empty),
      #app[data-view="name-report-preview"], #app[data-view="name-sample"],
      #app[data-view="name-traditional-sample"])::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: url('/assets/saju.png') right bottom / min(85%, 700px) auto no-repeat;
    opacity: .055;
    pointer-events: none;
  }
  :is(#daily-report, #match-report, #year-report, #saved-report,
      #decade-result, #date-candidates, #app[data-view="name-report-preview"],
      #app[data-view="name-sample"], #app[data-view="name-traditional-sample"]) :is(p,li) {
    font-size: inherit;
    line-height: 1.9;
  }
  :is(#daily-report, #match-report, #year-report, #saved-report,
      #decade-result, #date-candidates) :is(section,.report-section) {
    height: auto;
    max-height: none;
    overflow: visible;
    margin-block: 26px;
  }
  @media (max-width: 600px) {
    body:has(#daily-report, #match-report, #year-report, #saved-report) > main,
    body.integration-detail #info,
    body:has(#app[data-view^="name-"]) > main {
      width: calc(100% - 20px);
    }
  }
}

/* Shared with PDF: four pillars remain aligned on narrow screens. */
.report-subjects { width:100%; min-width:0; }
.report-subjects .report-subject { margin-block:20px; }
.report-subjects .report-pillar-table {
 width:100%; max-width:560px; min-width:0; table-layout:fixed;
 border-collapse:collapse; background:#faf8f1; color:#243d31;
}
.report-pillar-table caption { text-align:left; font-weight:700; margin-bottom:10px; }
.report-subjects .report-pillar-table :is(th,td) {
 border:1px solid #afc4b3; padding:12px 3px; text-align:center;
 white-space:normal; overflow-wrap:anywhere; font-size:18px; line-height:1.5;
}
.report-pillar-table thead th { background:#e8efdf; }
.report-pillar-table .day-stem { background:#d4e8c9; font-weight:700; }
@media(max-width:400px) {
 .report-subjects .report-pillar-table :is(th,td) { padding:10px 1px; }
}