/* 영어 뉴스 (N001). Loaded after site.css on /news/ pages only; reuses the site.css tokens (no new colours, no web fonts,
   corners 0-4px). The pre-JavaScript layout is the plain one: the article, then grammar, words and quiz as sections, with
   the 해석 and 정답 in closed <details>. news.js adds .is-ready on .nw; every rule that hides or shows a part is keyed on
   it, so a page whose script did not load still shows everything. docs/news.md §6, §8. */

.nw-page { max-width: 1080px; margin: 0 auto; }
.nw-page .page-head { padding-bottom: 14px; }      /* N009: the head band holds the h1 alone since the lead is gone */
.nw-serif { font-family: Georgia, "Times New Roman", serif; }

/* =========================================================== chips (list and article) */
.nw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-chip { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 2px;
           border: 1px solid var(--line-2); color: var(--ink-2); background: var(--bg); }
.nw-chip--new { background: var(--hl); color: var(--ink); border-color: var(--hl); }
.nw-chip--topic { background: var(--navy-pale); color: var(--navy); border-color: var(--navy-pale-bd); }

/* =========================================================== the list */
.nw-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.nw-card-link { display: flex; flex-direction: column; height: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.nw-card-link:hover { border-color: var(--navy); text-decoration: none; color: var(--ink); }
.nw-card-link__media { display: block; aspect-ratio: 16 / 9; background: var(--tint); border-bottom: 1px solid var(--line); overflow: hidden; }
.nw-card-link__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nw-card-link__media--plain { display: flex; align-items: center; justify-content: center; color: var(--navy); font-size: 22px; font-weight: 800; }
.nw-card-link__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.nw-card-link__en { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.3; font-weight: 700; color: var(--navy-deep); overflow-wrap: anywhere; }
.nw-card-link__ko { font-size: 15px; color: var(--ink-2); }
.nw-card-link__meta { font-size: 13px; color: var(--muted); }

/* =========================================================== article frame: text column + sidebar */
.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
@media (min-width: 1000px) {
  .nw-layout:not(.nw-layout--one) { grid-template-columns: minmax(0, 720px) 280px; justify-content: center; gap: 40px; }
  .nw-side { position: sticky; top: 16px; }
}
.nw-layout--one { max-width: 720px; margin-left: auto; margin-right: auto; }
.nw { min-width: 0; --nw-size: 20px; }
.nw-h1 { margin: 12px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 34px; line-height: 1.25; font-weight: 700; color: var(--navy-deep); overflow-wrap: anywhere; }
.nw-title-ko { margin: 10px 0 0; font-size: 18px; color: var(--ink-2); }
.nw-meta { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 600px) { .nw-h1 { font-size: 27px; } }

/* =========================================================== switch and tools (JavaScript only) */
.nw-switch, .nw-tools { display: none; }
.nw.is-ready .nw-switch { display: inline-flex; margin-top: 16px; border: 1px solid var(--navy); border-radius: 2px; overflow: hidden; }
.nw-sw { min-height: 44px; min-width: 88px; padding: 0 18px; border: 0; background: var(--bg); color: var(--navy); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.nw-sw + .nw-sw { border-left: 1px solid var(--navy); }
.nw-sw[aria-pressed="true"] { background: var(--navy); color: var(--ink-inv); }
.nw.is-ready[data-mode="study"] .nw-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 5;
                                            margin-top: 14px; padding: 8px 0; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nw-tool { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 2px; background: var(--bg); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.nw-tool[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ink-inv); }
.nw-tool--size { min-width: 44px; padding: 0; color: var(--ink); font-size: 14px; }
.nw-tool--big { font-size: 19px; }
.nw-tools__sp { flex: 1; }
.nw-tools__label { font-size: 13px; color: var(--ink-2); }

/* =========================================================== photo */
.nw-photo { margin: 22px 0 0; }
.nw-photo img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.nw-photo figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.nw-photo__credit { color: var(--muted); }

/* YouTube (N019): our own 16:9 panel until the click, then YouTube's player in the same box */
.nw-video { margin: 22px 0 0; }
.nw-video__box { position: relative; aspect-ratio: 16 / 9; background: var(--navy-deep); overflow: hidden; }
.nw-video__panel { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
                   padding: 16px 20px; text-align: center; color: var(--ink-inv); text-decoration: none; }
.nw-video__panel:hover { color: var(--ink-inv); text-decoration: none; }
.nw-video__panel:focus-visible { outline: 3px solid var(--hl); outline-offset: -3px; }
.nw-video__play { width: 64px; height: 64px; border-radius: 50%; background: var(--ink-inv); position: relative; flex: none; }
.nw-video__play::after { content: ""; position: absolute; left: 25px; top: 18px; border-left: 20px solid var(--navy-deep); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.nw-video__title { font-size: 17px; font-weight: 700; line-height: 1.4; max-width: 34em; }
.nw-video__src { font-size: 13px; color: var(--ink-inv-2); }
.nw-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nw-video figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.nw-video__credit { color: var(--ink-2); text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 600px) { .nw-video__title { font-size: 15px; } .nw-video__play { width: 52px; height: 52px; } .nw-video__play::after { left: 20px; top: 14px; border-left-width: 16px; border-top-width: 12px; border-bottom-width: 12px; } }

/* =========================================================== the text */
.nw-text { margin-top: 26px; display: flex; flex-direction: column; gap: 22px; }
.nw-en { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: var(--nw-size); line-height: 1.9; color: var(--ink); word-break: normal; overflow-wrap: break-word; }
.nw-w { display: inline; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: default; }
.nw.is-ready[data-mode="study"] .nw-w { cursor: pointer; }
.nw.is-ready[data-mode="study"][data-words="on"] .nw-w { padding: 0 2px; border-radius: 2px; background: var(--hl-pale); box-shadow: inset 0 -2px 0 var(--hl); }
.nw.is-ready[data-mode="study"][data-words="on"] .nw-w.is-known { background: var(--navy-pale); box-shadow: inset 0 -2px 0 var(--navy-pale-bd); }
.nw.is-ready[data-mode="study"] .nw-w[aria-expanded="true"] { background: var(--hl); box-shadow: inset 0 -2px 0 var(--hl); }
.nw-w:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* 한글 해석: closed <details> without JavaScript; with it the same text, shown by the 한글 해석 tool */
.nw-kod { margin: 8px 0 0; }
.nw-kod summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.nw-ko { margin: 4px 0 0; padding-left: 14px; border-left: 3px solid var(--hl); font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.nw.is-ready .nw-kod { display: none; }
.nw.is-ready[data-mode="study"][data-ko="on"] .nw-kod { display: block; }
.nw.is-ready .nw-kod > summary { display: none; }

/* the word card, under its paragraph */
.nw-card { margin-top: 10px; padding: 12px 16px 14px; border: 1px solid var(--navy-pale-bd); border-radius: 2px; background: var(--bg-2); }
.nw-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nw-card__w { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 700; color: var(--navy-deep); overflow-wrap: anywhere; }
.nw-card__pos { font-size: 13px; color: var(--ink-2); }
.nw-card__ko { font-size: 16px; font-weight: 700; color: var(--ink); }
.nw-card__sp { flex: 1; }
.nw-card__save { min-height: 44px; padding: 0 12px; border: 1px solid var(--navy-pale-bd); border-radius: 2px; background: var(--bg); color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nw-card__save[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ink-inv); }
.nw-card__x { width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink-2); font-size: 22px; cursor: pointer; }
.nw-card__ex { margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; color: var(--ink); }
.nw-card__exko { margin: 0; font-size: 14px; color: var(--ink-2); }

/* =========================================================== sources, study sections */
.nw-tags { margin-top: 24px; }
.nw-tags h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--navy-deep); }
.nw-taglist { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nw-tag { font-size: 13px; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 2px; color: var(--ink-2); background: var(--bg); }
.nw-sources { margin-top: 28px; }
.nw-sources h2, .nw-grammar h2, .nw-vocab h2, .nw-quiz h2 { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy-deep); }
.nw-sources ul { margin: 8px 0 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.nw-sources li { margin-top: 4px; overflow-wrap: anywhere; }
.nw-study { display: block; }
.nw.is-ready[data-mode="read"] .nw-study { display: none; }
.nw-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nw-count { font-size: 14px; color: var(--ink-2); }

.nw-grammar { margin-top: 28px; padding: 20px 22px; background: var(--bg-2); border: 1px solid var(--line); }
.nw-grammar__list { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.nw-gcard { padding: 14px 16px; background: var(--bg); border: 1px solid var(--line); }
.nw-gcard__quote { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 16px; color: var(--ink); }
.nw-gcard__note { margin: 6px 0 0; font-size: 15px; }
.nw-gcard__note b { color: var(--navy); }
.nw-gcard__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-size: 14px; font-weight: 700; }

.nw-gall__h { margin: 22px 0 0; font-size: 15px; font-weight: 800; color: var(--navy-deep); }
.nw-gall { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.nw-gall__item { padding: 6px 0; border-bottom: 1px solid var(--line); }
.nw-gall__line { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 15px; }
.nw-gall__q { font-family: Georgia, "Times New Roman", serif; color: var(--ink); overflow-wrap: anywhere; }
.nw-gall__p { font-weight: 700; color: var(--navy); }
.nw-gall__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; }
.nw-gall__d summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.nw-gall__d p { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }

.nw-vocab { margin-top: 28px; }
.nw-vlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 520px) { .nw-vlist { grid-template-columns: minmax(0, 1fr); } }
.nw-vk { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nw-vk[aria-pressed="true"] { background: var(--bg-2); border-color: var(--navy-pale-bd); }
.nw-vk:disabled { cursor: default; }
.nw-vk__t { flex: 1; min-width: 0; }
.nw-vk__t b { font-family: Georgia, "Times New Roman", serif; font-size: 16px; color: var(--navy-deep); }
.nw-vk__t span { font-size: 14px; color: var(--ink-2); }
.nw-box { flex: none; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-3); border-radius: 2px; background: var(--bg); color: var(--ink-inv); font-size: 14px; font-weight: 800; }
.nw-vk[aria-pressed="true"] .nw-box { background: var(--navy); border-color: var(--navy); }
.nw-vk[aria-pressed="true"] .nw-box::after { content: "✓"; }

.nw-quiz { margin-top: 32px; padding: 22px; border: 1.5px solid var(--navy-deep); }
.nw-q { margin-top: 18px; }
.nw-q__stem { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.nw-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (max-width: 520px) { .nw-opts { grid-template-columns: minmax(0, 1fr); } }
.nw-opt { min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--line-2); border-radius: 2px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.nw-opt:disabled { cursor: default; color: var(--ink); }
.nw-opt.is-right { border-color: var(--navy); background: var(--navy-pale); color: var(--navy); font-weight: 700; }
.nw-opt.is-right::after { content: " ✓"; }
.nw-opt.is-wrong { border-color: var(--red); background: var(--bg); color: var(--red); font-weight: 700; }
.nw-opt.is-wrong::after { content: " ✗"; }
.nw-fb { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.nw-fb.is-wrong { color: var(--red); }
.nw-fb:empty { display: none; }
.nw-ans { margin: 8px 0 0; }
.nw-ans summary { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; color: var(--navy); cursor: pointer; }
.nw-ans p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.nw.is-ready .nw-ans { display: none; }

.nw-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.nw-pn__a { display: block; padding: 14px 16px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.nw-pn__a:hover { border-color: var(--navy); text-decoration: none; }
.nw-pn__a--next { text-align: right; grid-column: 2; }
.nw-pn__k { display: block; font-size: 12px; color: var(--ink-2); }
.nw-pn__t { display: block; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* =========================================================== sidebar */
.nw-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 999px) { .nw-side-ad { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nw, .nw * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}