/* EtherXync 광고 칸 (D 소유) — uiux-audit §4-1
   칸 높이는 처음부터 예약한다(CLS 0). 광고가 없으면 ads.js 가 하우스 광고로 채운다. 칸을 접지 않는다. */

.ad-slot {
  --ad-h: 250px;
  display: grid;
  gap: 6px;
  margin-block: 48px;
  contain: layout paint;
  justify-items: stretch;
}
.ad-slot::before {
  content: attr(data-ad-label);
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.ad-slot:not([data-ad-label])::before { content: "광고"; }

.ad-box {
  position: relative;
  height: var(--ad-h);
  min-height: var(--ad-h);
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ad-slot.is-leader    { --ad-h: 90px; }
.ad-slot.is-billboard { --ad-h: 250px; }
.ad-slot.is-rect      { --ad-h: 250px; max-width: 336px; margin-inline: auto; width: 100%; }
@media (max-width: 719px) {
  .ad-slot.is-leader    { --ad-h: 100px; }
  .ad-slot.is-billboard { --ad-h: 250px; }
}

/* 광고 네트워크 단위: 칸 가운데, 칸 높이를 넘지 않는다 */
.ad-box > ins { max-width: 100%; max-height: var(--ad-h); }
.ad-box > ins.adsbygoogle { background: transparent; }

/* 게임 중에는 자리를 유지한 채 숨길 수만 있다(display:none 금지) */
body.is-playing .ad-slot.is-hide-on-play { visibility: hidden; }

/* ---------- 하우스 광고 (EtherXync 추천) ---------- */

.ad-house {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5, 20px);
  padding: 16px 24px;
  color: var(--text);
  text-decoration: none;
  background:
    radial-gradient(120% 140% at 0% 0%, var(--ether-dim), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, var(--xync-dim), transparent 55%),
    var(--bg-2);
  transition: background-color var(--d-2, .2s) var(--ease-out, ease);
}
.ad-house, .ad-house:hover, .ad-house * { text-decoration: none; }
.ad-house:hover { background-color: var(--panel); }
.ad-house:hover .ad-house-cta { color: var(--ether-2); }
.ad-house:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--ether)); outline-offset: -4px; border-radius: var(--r-md); }

/* 광고가 안 채워지면 하우스 광고가 칸 전체를 덮는다(.ad-house 는 .ad-box 기준 absolute) */
.ad-house { z-index: 1; }

.ad-house-art { flex: none; display: grid; place-items: center; }
.ad-house-art.is-cover img {
  display: block;
  height: calc(var(--ad-h) - 56px);
  width: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--r-xs, 6px);
  box-shadow: var(--shadow-1, 0 6px 20px rgb(var(--shade-rgb) / calc(.35 * var(--shade-a))));
  background: var(--card);
}
.ad-house-art.is-mark {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line-2);
}

.ad-house-text { display: grid; gap: 6px; min-width: 0; }
.ad-house-eyebrow { font-size: 12px; color: var(--text-3); }
.ad-house.is-book .ad-house-eyebrow { color: var(--ether); }
.ad-house.is-blog .ad-house-eyebrow,
.ad-house.is-app .ad-house-eyebrow { color: var(--xync); }
.ad-house-title {
  font-family: var(--f-display, inherit);
  font-weight: var(--w-display-strong, 560);
  font-size: 20px;
  line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ad-house-sub { font-family: var(--f-sans); font-weight: 400; font-size: 14px; color: var(--text-2); margin-left: 6px; }
.ad-house-line {
  font-size: 14px; line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.ad-house-cta { font-size: 13px; color: var(--ether); margin-top: 4px; }
.ad-house-empty { font-family: var(--f-display-latin, serif); color: var(--text-3); font-size: 18px; }

/* 낮은 칸(728×90 / 320×100): 한 줄짜리 */
.ad-slot.is-leader .ad-house { padding: 10px 16px; gap: 14px; }
.ad-slot.is-leader .ad-house-art.is-cover img { height: calc(var(--ad-h) - 20px); box-shadow: none; }
.ad-slot.is-leader .ad-house-art.is-mark { width: 44px; height: 44px; }
.ad-slot.is-leader .ad-house-art.is-mark svg { width: 22px; height: 22px; }
.ad-slot.is-leader .ad-house-text { gap: 2px; }
.ad-slot.is-leader .ad-house-title { font-size: 16px; }
.ad-slot.is-leader .ad-house-line { -webkit-line-clamp: 1; font-size: 13px; }
.ad-slot.is-leader .ad-house-cta { display: none; }

/* 넓은 칸(970×250): 가운데로 모은다 */
@media (min-width: 720px) {
  .ad-slot.is-billboard .ad-house { padding: 24px 40px; gap: 32px; }
  .ad-slot.is-billboard .ad-house-title { font-size: 24px; }
  .ad-slot.is-billboard .ad-house-line { font-size: 15px; max-width: 56ch; }
}

/* 좁은 칸(300×250 상자, 휴대폰) */
@media (max-width: 719px) {
  .ad-house { padding: 16px; gap: 16px; }
  .ad-house-title { font-size: 18px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ad-house-sub { display: block; margin: 2px 0 0; }
  .ad-slot.is-leader .ad-house-title { white-space: nowrap; display: block; font-size: 15px; }
  .ad-slot.is-leader .ad-house-sub { display: none; }
  .ad-slot.is-leader .ad-house-eyebrow { font-size: 11px; }
}
.ad-slot.is-rect .ad-house { padding: 16px; gap: 16px; }
.ad-slot.is-rect .ad-house-art.is-cover img { height: 150px; }
.ad-slot.is-rect .ad-house-title { font-size: 18px; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ad-slot.is-rect .ad-house-sub { display: block; margin: 2px 0 0; }
.ad-slot.is-rect .ad-house-line { -webkit-line-clamp: 4; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .ad-house { transition: none; }
}

/* ---------- 장 끝 지면 광고 (reading-end) ----------
   잡지의 한 면처럼: 위아래 가는 줄, 왼쪽 위 표시(광고 / EtherXync 추천), 넓은 소재(4:1, 휴대폰은 1:1).
   높이는 처음부터 비율로 예약한다(CLS 0). */
.ad-slot[data-ad="reading-end"] {
  --ad-h: auto;
  gap: 10px;
  padding-block: 14px 12px;
  border-block: 1px solid var(--line-2);
}
.ad-slot[data-ad="reading-end"]::before {
  font-family: var(--f-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ad-slot[data-ad="reading-end"] .ad-box {
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 1;
  border-radius: var(--r-sm, 10px);
  background: var(--bg-2);
}
.ad-slot[data-ad="reading-end"]::after {
  content: attr(data-ad-caption);
  font-size: 12px; line-height: 16px; height: 16px;
  color: var(--text-3);
  text-align: right;
  font-family: var(--f-serif, serif);
  font-style: italic;
}
.ad-slot[data-ad="reading-end"]:not([data-ad-caption])::after { content: ""; }
@media (max-width: 719px) {
  .ad-slot[data-ad="reading-end"] { max-width: 336px; margin-inline: auto; width: 100%; }
  .ad-slot[data-ad="reading-end"] .ad-box { aspect-ratio: 1 / 1; }
  .ad-slot[data-ad="reading-end"]::after { text-align: left; }
}
.ad-mag { position: absolute; inset: 0; margin: 0; }
.ad-mag-link, .ad-mag picture { display: block; width: 100%; height: 100%; }
.ad-mag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-mag-link:focus-visible { outline: var(--focus-w, 2px) solid var(--focus, var(--ether)); outline-offset: 3px; border-radius: var(--r-sm, 10px); }
@media (hover: hover) {
  .ad-mag-link img { transition: filter var(--d-2, .2s) var(--ease-out, ease); }
  .ad-mag-link:hover img { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { .ad-mag-link img { transition: none; } }

/* 낮(밝은)·종이 화면: 어두운 그림 소재가 바탕에서 떠 보이지 않게 얇은 테두리와 옅은 그림자로 액자를 친다 (T 2026-10-23) */
:root:is([data-theme="light"], [data-theme="paper"]) .ad-slot.is-magazine .ad-box {
  border-color: var(--line-2);
  box-shadow: 0 0 0 1px rgb(var(--line-rgb) / .08), 0 14px 30px -22px rgb(var(--shade-rgb) / .55);
}
:root:is([data-theme="light"], [data-theme="paper"]) .ad-house-art.is-cover img { box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }