/*
 * 29MU inherited editions
 * Baseline stays in media.css. This file only adds the shared theme control and
 * the approved 20% A/B variation: section rhythm, hero ratio and open-check emphasis.
 */

.theme-toggle {
  display: inline-flex;
  min-width: 52px;
  align-items: center;
  justify-content: center;
  padding: 5px 8px !important;
  border: 1px solid var(--ink) !important;
  font: 700 8px/1 var(--font-mono) !important;
  letter-spacing: .08em;
}

.edition-mark {
  margin-left: 2px;
  color: var(--grey);
  font: 700 8px/1.2 var(--font-mono);
  letter-spacing: .12em;
  white-space: nowrap;
}

html[data-edition] main {
  display: flex;
  flex-direction: column;
}

/* A — original 67/33 cover, then official moving-image programming. */
html[data-edition="premiere"] .channel-section { border-top: 8px solid var(--lime); }

/* B — same components, 60/40 cover and open-check programming first. */
html[data-edition="open"] .opening-story {
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, .8fr);
}
html[data-edition="open"] .opening-story__media {
  display: grid;
  align-items: center;
  background: #08090c;
}
html[data-edition="open"] .opening-story__media img { object-fit: contain; }
html[data-edition="open"] .community-prompt { border-top: 8px solid var(--lime); }

html[data-edition="open"] .community-prompt__head {
  background: var(--ink);
  color: var(--paper);
}
html[data-edition="open"] .community-prompt__head > p:not(.label) { color: var(--paper); opacity: .72; }
html[data-edition="open"] .community-prompt__head .outline-button { border-color: var(--paper); color: var(--paper); }
html[data-edition="open"] .community-ops article { border-bottom-width: 2px; }
html[data-edition="open"] .community-ops .avatar { border-radius: 0; }

.community-ops footer a {
  border-bottom: 1px solid currentColor;
  color: var(--grey);
  font-weight: 750;
}
.community-ops footer a:hover { color: var(--ink); }

/* The user can switch either edition; theme never determines the edition. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111216;
  --ink: #f6f5f1;
  --grey: #adb1ba;
  --hairline: #41454e;
}
html[data-theme="dark"] .editorial-shop {
  --paper: #111216;
  --ink: #f6f5f1;
  --grey: #adb1ba;
  --hairline: #41454e;
  background: #090a0d;
  color: #f6f5f1;
}
html[data-theme="dark"] .commerce-card { border-color: #41454e; }
html[data-theme="dark"] .commerce-card__media { background: #202329; }
html[data-theme="dark"] .editor-note { background: #08090c; }
html[data-theme="dark"] .overlay-dialog { background: #111216; }
html[data-theme="dark"] .mobile-media-nav { background: rgba(17, 18, 22, .92); }
html[data-theme="dark"] .opening-story__media figcaption { background: rgba(246, 245, 241, .86); color: #111216; }
html[data-theme="dark"] .buying-guide { background: var(--paper); }
html[data-theme="dark"] .media-footer { background: var(--paper); }

/* Korean type safety: preserve editorial scale without glyph collisions. */
#opening-title,
#main h2,
#main h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
  /* balance 는 한글 강제 br 제목에서 들쭉날쭉 정렬을 만듦 */
  text-wrap: pretty;
}

#opening-title,
#main h2 {
  line-height: 1.16;
  letter-spacing: -.02em;
}

#main h3 { line-height: 1.2; letter-spacing: -.015em; }

@media (max-width: 1120px) {
  html[data-edition="open"] .opening-story { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .theme-toggle { min-width: 45px; }
  .edition-mark { display: none; }
  #opening-title {
    font-size: clamp(40px, 11.5vw, 52px);
    line-height: 1.18;
    letter-spacing: -.015em;
  }
  #main h2 { line-height: 1.18; letter-spacing: -.015em; }
  .opening-story__media img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    object-position: center;
  }
  html[data-edition="open"] .opening-story__media img { aspect-ratio: 16 / 9; object-fit: contain; }
}

@media (forced-colors: active) {
  .theme-toggle,
  .community-ops article { border: 1px solid CanvasText !important; }
}