/* 월간 민들레 향기 — page styles on top of site.css (prototype V.monthly): the issue page,
   an article's page and 월간지 글. Only magazine-specific rules live here; .cover, .shelf, .toc, .box,
   .empty-state, .prose and the page head come from site.css. Colours are tokens only.
   Cover palettes are data-driven: Issue.cover_theme → class cv-<theme>; an issue with a
   cover photo shows the photo instead (.cover-photo, ADR-0017 decision 7).
   Motion: press feedback ≤160ms ease-out, hover effects only on fine pointers, and
   nothing moves under prefers-reduced-motion or the "움직임 멈추기" setting. */

/* Cover palettes (prototype ISSUES c1/c2): c2 is derived from c1 (lighter, softer). */
.cover{--cv1:var(--c-poem);--cv-lift:.6;--cv-chroma:.4;color:var(--on-yellow);background-color:var(--cv1);box-shadow:0 30px 60px -34px var(--shadow)}
/* The gradient only where relative colour syntax exists. A var() inside oklch(from …) is
   parsed as valid, so an older engine would drop the whole background at computed-value
   time (blank cover, R4-XB-07); the flat --cv1 fill above is never touched by this rule. */
@supports (color: oklch(from red l c h)){
  .cover{background-image:linear-gradient(155deg,var(--cv1),oklch(from var(--cv1) calc(l + (1 - l) * var(--cv-lift)) calc(c * var(--cv-chroma)) h))}
}
.cover.cv-yellow{--cv1:var(--c-poem)}
.cover.cv-mint{--cv1:var(--c-essay)}
.cover.cv-orange{--cv1:var(--c-orange)}
.cover.cv-sky{--cv1:var(--c-novel)}
.cover.cv-pink{--cv1:var(--c-verse)}
.cover.cv-lavender{--cv1:var(--c-etc)}
.cover .seed{color:var(--on-yellow)}
/* The cover photo: the whole picture in the cover's 3:4 box (a printed cover is never
   cropped), its own width and height attributes reserving the space. */
.cover.cover-photo{padding:0;background:var(--sunk)}
.cover-photo picture,.cover-photo img{display:block;width:100%;height:100%}
.cover-photo img{object-fit:contain}
.cover .cover-title{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:0;text-wrap:balance}

/* Issue page. Source order is title → cover and formats → note and contents, so the
   title is read (and shown on narrow screens) first; the grid keeps the prototype look. */
.issue-picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-weight:600}
#issue-view[aria-busy="true"]{opacity:.6;cursor:progress;transition:opacity 150ms ease-out 120ms}
.monthly{grid-template-areas:"aside head" "aside body";grid-template-rows:auto 1fr;row-gap:0}
.issue-head{grid-area:head}
.issue-aside{grid-area:aside}
.issue-body{grid-area:body}
.issue-title{font-size:clamp(1.8rem,3vw,2.4rem);font-weight:500;letter-spacing:-.03em;margin:8px 0 22px;text-wrap:balance}
.editions{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.editions .file-info{font-weight:400;font-variant-numeric:tabular-nums;opacity:.85}
.editions-pending{margin-top:8px}
.edition-help{margin-top:10px;font-size:1rem}
.edition-help summary{cursor:pointer;font-weight:600;min-height:var(--target-min);display:flex;align-items:center;justify-content:space-between;gap:10px;list-style:none}
.edition-help summary::-webkit-details-marker{display:none}
.edition-help summary::after{content:"+";content:"+" / "";flex:none;width:26px;height:26px;border-radius:50%;background:var(--sunk);border:1px solid var(--line);display:grid;place-items:center;font-weight:500;line-height:1;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.edition-help[open] summary::after{transform:rotate(45deg);background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.edition-help dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:8px 0}
.edition-help dt{font-weight:600}
.edition-help dd{margin:0;color:var(--ink-2)}

/* Contents: links look like links (arrow, hover fill); plain lines are quieter. */
.toc{scroll-margin-top:calc(var(--hh,82px) + 16px)}
.toc a,.toc .r{position:relative;grid-template-columns:3.6em minmax(0,1fr) auto 1em}
.toc.no-pages a,.toc.no-pages .r{grid-template-columns:minmax(0,1fr) auto 1em}
.toc a{border-radius:8px}
.toc a:focus-visible{outline:3px solid var(--focus);outline-offset:0}
.toc .go{color:var(--muted);font-weight:600;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.toc .r .tt{color:var(--ink-2);font-weight:500}
.toc-empty{padding:15px 4px}
@media (hover: hover) and (pointer: fine){
  .toc a{transition:background-color 150ms ease}
  .toc a:hover{background:var(--sunk)}
  .toc a:hover .go{color:var(--ink);transform:translateX(3px)}
  .edition-help summary:hover{text-decoration:underline;text-underline-offset:3px}
}

.empty-issue{grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,40px)}
.empty-issue .issue-title{margin-bottom:10px}
.empty-issue-text{display:grid;gap:8px}

/* Shelf of past issues: links (the prototype used buttons) */
ul.shelf{list-style:none;margin:0;padding:0}
.shelf a{display:block;text-decoration:none;transition:transform 160ms cubic-bezier(.23,1,.32,1)}
.shelf .cover{transition:transform 120ms ease-out}
@media (hover: hover) and (pointer: fine){
  .shelf a:hover{transform:translateY(-4px) rotate(-1deg)}
}
.shelf a:active .cover{transform:scale(.97)}
.shelf .cover .cover-title{font-size:1.05rem}
.shelf a[aria-current="page"] .cover{outline:3px solid var(--ink);outline-offset:3px}
:root[data-motion="off"] .shelf a:hover,:root[data-motion="off"] .shelf a:active .cover{transform:none}
@media (prefers-reduced-motion: reduce){
  .shelf a:hover,.shelf a:active .cover,.toc a:hover .go{transform:none}
}
:root[data-motion="off"] .toc a:hover .go{transform:none}

/* An article (ADR-0017 decision 8): kind, author and printed page above the text; the
   articles before and after it, and the way back to the contents, below. */
.article-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:1.6em;font-family:var(--sans);font-size:.92rem;color:var(--muted)}
.article-meta .g{font-weight:600;color:var(--ink)}
.article-nav{max-width:38em;margin-top:40px;display:grid;gap:18px}
.article-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.article-nav li a{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-height:var(--target-min);padding:10px 0;border-top:1px solid var(--line);font-weight:600;text-decoration:none}
.article-nav li:last-child a{border-bottom:1px solid var(--line)}
.article-nav .k{font-family:var(--sans);font-size:.86rem;font-weight:500;color:var(--muted)}
.article-nav .back{display:flex;flex-wrap:wrap;gap:8px 24px}
@media (hover: hover) and (pointer: fine){
  .article-nav li a:hover{text-decoration:underline;text-underline-offset:3px}
}

/* Forced colours: the drawn cover and the note keep an outline (their fills are dropped). */
@media (forced-colors: active){
  .cover,.edit-note{border:1px solid CanvasText}
}

@media (max-width: 980px){
  .monthly{grid-template-areas:"head" "aside" "body";grid-template-rows:auto;row-gap:24px}
  .issue-head .issue-title{margin-bottom:0}
  .issue-aside{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;align-items:start}
  .issue-read .editions{margin-top:0}
}
/* 월간지 글 (user request 2026-10-14): the board of every article, grouped by issue. The
   filter is a plain GET form; each group's list is the issue page's contents list. */
.article-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:12px;font-weight:600}
.article-ignored{margin-bottom:6px}
.article-count{margin-bottom:8px}
.article-group{margin-top:clamp(24px,4vw,40px)}
.article-group:first-child{margin-top:16px}
.article-group__t{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;margin:0 0 10px}
.article-group__t a{text-decoration:none}
@media (hover: hover) and (pointer: fine){
  .article-group__t a:hover{text-decoration:underline;text-underline-offset:4px}
}
.article-search{margin-top:clamp(28px,4vw,40px)}
.article-search input[type=search]{flex:1 1 auto;min-width:0}
.article-search .btn{flex:none}

@media (max-width: 640px){
  /* Phone toolbar: the picker's label on its own line, then the select (the leftover
     width, so a whole "2026년 12월호" shows) and 이 호 보기; the calls to action under it,
     two equal buttons, so 인쇄본 보기 is in the first screen as in the prototype. Rows are
     set by the grid, never by glyph widths (R5-PERF-10: the web font's arrival cannot
     rewrap the toolbar, CLS). At the largest text size the button takes a line of its
     own, so the select keeps the whole width for its value. */
  #issue-view .toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .issue-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .issue-picker label{grid-column:1/-1}
  .issue-picker select{width:100%;min-width:0}
  :root[data-font-scale="xlarge"] .issue-picker{grid-template-columns:minmax(0,1fr)}
  :root[data-font-scale="xlarge"] .issue-picker .btn{justify-self:start}
  #issue-view .cta-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #issue-view .cta-row .btn{width:100%;text-align:center}
  /* Phone issue (RD-11): the contents start near the first screen. The cover shrinks to
     a thumbnail beside the title and 웹으로 읽기 sits right under the title. The cover is
     decorative (aria-hidden) and the reading order stays the source order: title →
     formats → help → note → contents. */
  .monthly{grid-template-columns:minmax(0,1fr) min(140px,40%);grid-template-areas:none;grid-template-rows:auto 1fr;column-gap:16px;row-gap:0}
  .issue-aside,.issue-read{display:contents}
  .issue-head{grid-area:1/1}
  .issue-aside .cover{grid-area:1/2;align-self:start;padding:12px;border-radius:12px;box-shadow:0 18px 30px -24px var(--shadow)}
  .issue-aside .cover .vol{font-size:.6rem}
  .issue-aside .cover .cover-title{font-size:1.15rem}
  .issue-aside .cover .cover-title~p{display:none}
  .issue-head .issue-title{margin:6px 0 0}
  /* The ways to read take the whole width under the title and cover, one full-width
     button each: a file's name and size stay on one line instead of breaking in a
     pill beside the cover (ADR-0017 decision 13). */
  .issue-read .editions{grid-area:2/1/auto/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:16px}
  .issue-read .editions .btn{width:100%;justify-content:center;text-align:center;flex-wrap:wrap;column-gap:6px}
  .issue-read>:not(.editions),.issue-body{grid-area:auto/1/auto/-1}
  .issue-read .editions-pending{margin-top:14px}
  .issue-body{margin-top:20px}
  #issue-view .toolbar{margin-bottom:20px}
  .issue-body .edit-note{padding:16px 18px;margin-bottom:16px;line-height:1.75}
  .empty-issue{grid-template-columns:1fr}
  .empty-issue .cover{max-width:200px}
  /* Information at 15px or more on a phone (the site's floor, site.css): an article's
     kind, author and printed page, and the 이전 글 / 다음 글 marks. */
  .article-meta,.article-nav .k{font-size:.9375rem}
  /* 월간지 글: two rows, each label beside its select, 보기 after 호; the selects take
     the width left (a whole "2026년 12월호" shows). At the largest text size 보기 takes a
     row of its own, so 호 keeps the width for its value. */
  .article-filter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 10px}
  .article-filter select{width:100%;min-width:0}
  .article-filter select[name=kind]{grid-column:2/-1}
  :root[data-font-scale="xlarge"] .article-filter select[name=issue]{grid-column:2/-1}
  :root[data-font-scale="xlarge"] .article-filter .btn{grid-column:1/-1;justify-self:start}
}