/* MONDKIM — shared foundation. Every page links this first; page styles build on these tokens and parts.
   The look: a 6-column grid with 10px outer margins whose column lines show as hairlines · a 204px header band (logo top-left,
   very large bold menu words in the artist's order — ROSE IN FLUX across columns 3–4, its five parts always under it · WORKS · ABOUT — the chosen word's sub menu under it,
   a small magnifier on the band's rule at its right end) closed by a #d9d9d9 rule ·
   one Helvetica-family sans · ink on white · hairline tables. Phones: 2 columns (their middle line only where two columns stand — not
   through the header band), a 95px header, a menu button that opens an ink panel.
   Its colours and motifs: the logo's ink for every black, silk for the place of a picture before it arrives, the artist's rose — whole, in the header
   band's empty column, under the logo's line, standing on the band's rule (.rose-drift), at the foot of the page on phones (.rose-foot) —
   and the colour of a browsing picture spreading from its middle as ink spreads in wet silk, a wet front ahead of it (.bw · .bw-veil).

   Widths: phones (up to 767px: 2 columns) · tablets (768–1023px: 4 columns, phone header) · wide (1024px and up: 6 columns).

   Parts
     .site-header   > .brand · nav.site-nav#site-nav > ul.menu > li.menu-rose|menu-works|menu-about(.is-current) > a + ul.sub-menu · button.menu-toggle
                    (MK marks the current word and sub link from <body data-section data-sub>)
                    the last li.menu-search > form.search-form > input.search-input + button.search-go (the magnifier: opens the field on wide screens, sends it)
                    (.is-open while its field is open · .is-current while the projects page shows a search: MK.search)
     .top-bar       phones: the header made small, down while the reader turns back up a long page (base.js) — .top-bar-brand · .top-bar-menu (☰);
                    while it is down html has .bar-on and :root --bar: 51px, the bar less its hairline (else 0px), set at once as the bar turns:
                    a page's sticky part takes top: var(--bar,0px) — its own top rule then lies on the bar's — and transition: top var(--t-fast)
                    var(--ease), so it slides with the bar (below: the riders this file knows have it)
     main           opens with the header's rule
     .page-title    the page's title (35px/700 in column 1)
     .tag / .tag.is-solid   small square label (outlined / ink)
     .info          hairline table of label | value (two columns of the grid)
     .filters       words in thinned ink (--grey), the chosen one in ink, separated by ' / '
     .on-paper      a block that stands on white: the column lines stop above it and go on below
     .mid-off       phones: a full-width band where one column stands — white between the two outer lines, so the middle line does not run
                    through it (the header band gets the same paper by its own rule; a block inside the margins takes .on-paper).
                    Never on a block holding .info or a two-column grid — their middle line is this line; wrap only the empty band itself
                    (margins turned into the block's padding). It is a background-image: a page rule giving the same element the background
                    shorthand later turns it off without a word — give such an element background-color only.
     .bw (black and white until looked at) · .bw-veil (its colour's bloom, laid by base.js)
     .reveal · img.fade · MK.viewer (zooms in: .viewer.is-zoomed · on a phone edge to edge, or 20px in: .is-inset · .viewer-hint on a finger
                    screen, its room kept under the caption while it is there: .is-hinted — in the top line on a screen on its side) · page fade */

/* The site's own colours come from the artist's materials, not from a palette:
   ink   — the logo's own ink, rgb(7,16,16) (measured from media/brand/mondkim.png): a black with the blue-green of 먹 in it.
           Every black on the site is this one — words, tags, the phone menu's panel, selection, focus rings.
   ink-2 · grey — the same ink thinned with water (농담): 62% for secondary words (5.4:1 on paper, 4.8:1 on silk),
           58% for every word not chosen — the header's big words and sub links, the filters, programme words (4.7:1: words read on white,
           axe/WCAG AA, and the one chosen word stays the ink).
   mat   — silk: the warm undyed ground of her silk, organza and fans — where a picture sits before it arrives (ink-2 on it 4.8:1).
           Never round a picture that is there: a work is seen on the white wall, so its own silk and colours are not changed by its ground.
   bw-rest — a browsing picture before it is looked at (.bw): grey, and a touch paler, as ink with a little water in it: its darks lifted
           by some 3% (6바퀴 r2: at 7% the black rose read as a faded copy), its white kept white. Most of her paintings are photographed in
           grey, so a change of colour alone would show nothing in them; looked at, the ink comes to its full depth as the colour comes (below).
   paper stays white: the wall the works hang on. */
:root{
  --paper:#fff;
  --ink:#071010;            /* the logo's ink */
  --ink-2:#656b6b;          /* secondary text — ink at 62% */
  --grey:#6f7474;           /* every word not chosen — the header's words and sub links · filters · programme words — ink at 58% (4.7:1) */
  --pale:#d9d9d9;           /* hairlines · column lines */
  --line:#d9d9d9;
  --mat:#f4f1ea;            /* a picture's place before it arrives — silk */
  --bw-rest:grayscale(1) contrast(.94) brightness(1.03);   /* a browsing picture at rest — a little pale (black 0 → 8, 16 → 23; white stays white: .97 × 1.03) */
  --wet:7%;                 /* the colour's wet front (.bw-veil): the ink at 7% — silk's white 255 → 238, as wet silk darkens */
  --sans:'Helvetica Neue',Arial,'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;   /* Helvetica Neue on Apple, Arial elsewhere; Hangul in Noto Sans KR */
  --m:10px;                                     /* outer margin: the grid runs from 10px to (width − 10px) */
  --cols:6;
  --col:calc((100vw - 2*var(--m)) / var(--cols)); /* one column (236.7px at 1440) */
  --pad:10px;                                   /* text sits 10px inside its column */
  --head:204px;                                 /* header band */
  --fs-body:19px; --lh-body:1.8;                /* 19 / 34.2 */
  --fs-menu:45px; --fs-sub:24px; --fs-title:35px; --fs-filter:24px;
  --fs-15:15px; --fs-14:14px; --fs-13:13px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --t-fast:.25s;
}
@media(max-width:1023px){:root{--cols:4;--head:95px}}
/* phones: names and table values 14px (--fs-15), second lines and captions 13px (--fs-14, with --ink-2) — one scale for every page */
@media(max-width:767px){:root{--cols:2;--fs-body:15px;--fs-title:23px;--fs-filter:19px;--fs-15:14px;--fs-14:13px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:767px){body{font-weight:500}}
/* the grid shows: a hairline at every column edge, behind everything (pictures cover it, words let it through) — .grid-lines, added by base.js */
.grid-lines{position:fixed;top:0;bottom:0;left:calc(var(--m) - 1px);right:calc(var(--m) - 1px);z-index:-1;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));pointer-events:none}
.grid-lines i{border-left:1px solid var(--line)}
.grid-lines i:last-child{border-right:1px solid var(--line)}
/* the column lines run behind pictures and empty space, but not through headings, filter words or running text: those stand on white
   (a heading or a line of filter words is masked as wide as its words; running text as one block, so the lines stop above it and go on below;
   the footer as one band, so they end on its rule).
   Inside tables the lines run on through every row, as the table's own column lines. A page masks its other blocks with .on-paper. */
.page-title,.filter-head,.filters,.work-text,.work-nav,.about-text,.ex-title,.ex-period,.site-footer,.on-paper{background-color:var(--paper)}
.page-title,.filter-head,.filters,.ex-title,.ex-period{width:fit-content;max-width:100%}
html:not(.has-intro) .brand{background-color:var(--paper)}
@media(max-width:1023px){.grid-lines i:nth-child(n+5){display:none}.grid-lines i:nth-child(4){border-right:1px solid var(--line)}}
@media(max-width:767px){.grid-lines i:nth-child(n+3){display:none}.grid-lines i:nth-child(2){border-right:1px solid var(--line)}}
/* phones: the middle line stands only where two columns do — a list's grid, an info table, cards — and not in the header band (logo · ☰),
   where it ran between the logo's D and K and showed as two stubs, 10px over the logo and 40px under it (7바퀴 F4). The band is paper
   between the two outer lines (x 10 · 380 at 390), which still run from the top of the screen. .mid-off does the same for a page's own
   full-width band where one column stands (an empty band, a single column of words); a block inside the margins takes .on-paper.
   Never .mid-off on a block holding .info or a two-column grid: on a phone their middle line is this one (an info table's Year | 2026) —
   wrap only the empty band itself, its margins turned into its padding. (A background-image: background-color only beside it.)
   Not while the first screen's intro lies under the header (its photographs), and not from 768px: there the rose stands in the band under
   the header, and the lines cross the band to its rule as the band's own. */
@media(max-width:767px){html:not(.has-intro) .site-header,.mid-off{background-image:linear-gradient(90deg,transparent var(--m),var(--paper) var(--m) calc(100% - var(--m)),transparent calc(100% - var(--m)))}}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,p,dl,dd,ol,ul,figure,table{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
::selection{background:var(--ink);color:var(--paper)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--m);top:8px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;background:var(--ink);color:var(--paper);font-size:var(--fs-14);transform:translateY(-300%)}
.skip-link:focus{transform:none}

/* ---------- Header ----------
   The menu in the artist's order (창작자 10-16): ROSE IN FLUX — the black-rose series, her main work — then WORKS (everything else), then ABOUT.
   Wide screens (1024px and up): the logo top-left; the big words 10px inside their column lines — ROSE IN FLUX across columns 3–4 (it is
   longer than one column; its words stand on white, so column 4's line starts under them), WORKS in 5, ABOUT in 6. The current word is ink,
   the others thinned (--grey, 4.7:1). ROSE IN FLUX's five parts stand under it on every page — her main work is one step away wherever one
   is, in its two columns: the works themselves (Paintings · Objects · Editions) under its first word, the times they met people
   (Exhibitions · Experience) beside them; the part shown is ink. WORKS's and ABOUT's sub menus show only under the current word, in their
   column. Everything stays inside the 204px band: 10 + 45 + 4 + five lines of 27.6px = 197px at the most (WORKS).
   The words are 45px from about 1215px up and smaller below, so the longest (WORKS in one column, ROSE IN FLUX in two, «Digital Artwork»
   under them) never leave their columns — the divisors leave some 8% for wider faces than the one measured (Helvetica Neue against Arial/Inter).
   The search is not a big word: a 44px magnifier, in the thinned ink, standing on the band's rule at its right end. Pressed, a one-line field
   opens to its left in column 6, on ABOUT's text line and under its sub menu (which ends at 142px), in 18px bold (some 20 letters show at
   1440): its line is the band's rule itself — pale while empty (its hint and the caret mark it), ink once words are in it. */
.site-header{position:relative;z-index:30;height:var(--head)}
/* the logo: 322px — but never nearer than 40px to ROSE IN FLUX, which starts 10px into column 3 (below about 1110px the logo narrows to
   two columns less 40px, 295px at 1024, so «MONDKIM» and «ROSE IN FLUX» never read as one line) */
.brand{--bw:min(322px,calc(2*var(--col) - 40px));position:absolute;left:20px;top:13px;display:block;width:var(--bw);height:max(44px,calc(var(--bw)*124/776));overflow:hidden}
.brand img{position:absolute;width:calc(var(--bw)*851/776);max-width:none;height:auto;left:calc(var(--bw)*-36/776);top:calc(var(--bw)*-362/776)}
.site-nav .menu{--word:min(var(--fs-menu),calc((var(--col) - 2*var(--pad)) / 4.1),calc((2*var(--col) - 2*var(--pad)) / 7.5));--subword:min(var(--fs-sub),calc((var(--col) - 2*var(--pad)) / 7.9));
  position:absolute;top:10px;left:calc(var(--m) + 2*var(--col));display:grid;grid-template-columns:calc(2*var(--col)) var(--col) var(--col)}
.site-nav .menu>li{min-width:0;padding:0 var(--pad)}
.site-nav .menu>li>a{display:block;font-size:var(--word);font-weight:700;line-height:1;letter-spacing:-.005em;white-space:nowrap;color:var(--grey);transition:color var(--t-fast) var(--ease)}
/* ROSE IN FLUX crosses column 4's line: its paper runs from the top of the band to the word's foot and 10px past its last letter, so that
   line starts under the word (wherever it falls across the letters at this width) instead of piercing it */
.site-nav .menu-rose>a{width:fit-content;max-width:calc(100% + 10px);padding:10px 10px 0 0;margin:-10px -10px 0 0;background-color:var(--paper)}
.site-nav .menu>li.is-current>a,.site-nav .menu>li>a:hover{color:var(--ink)}
.sub-menu{display:none;margin-top:4px}
.site-nav .menu>li.is-current>.sub-menu{display:block}
.sub-menu a{display:block;font-size:var(--subword);font-weight:700;line-height:1.15;white-space:nowrap;color:var(--grey);transition:color var(--t-fast) var(--ease)}   /* the links not chosen: the same thinned ink as the big words and the filter words */
.sub-menu a[aria-current],.sub-menu a:hover{color:var(--ink)}
@media(min-width:1024px){
  .site-nav .menu>li.menu-rose>.sub-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;margin:4px calc(-1*var(--pad)) 0}
  .is-home .site-nav .menu>li.menu-rose>.sub-menu{display:none}   /* the first screen: its photographs start under the words */
  .menu-rose .sub-menu>li{min-width:0;padding:0 var(--pad)}
  .site-nav .menu-search{position:absolute;right:0;top:calc(var(--head) - 10px - 43px);width:var(--col);padding:0}   /* (top: from the menu's own top, 10px down; the form's foot lies on the rule) */
  .is-home .site-nav .menu-search{display:none}   /* the first screen has no band (its photographs start under the words): the list's own page searches */
}
.search-form{position:relative;display:flex;align-items:stretch;justify-content:flex-end;height:44px}
.search-input{display:none;flex:1 1 auto;min-width:0;height:44px;margin:0;padding:0 0 4px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);caret-color:var(--ink);font-family:var(--sans);font-size:min(18px,var(--subword));font-weight:700;line-height:1.2;letter-spacing:0;-webkit-appearance:none;appearance:none}
.search-input:focus,.search-input:focus-visible{outline:0}   /* the caret marks it */
.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search-input::placeholder{color:var(--grey);opacity:1}
.search-input:placeholder-shown{border-bottom-color:var(--line)}
.search-go{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--grey);transition:color var(--t-fast) var(--ease)}
.search-go svg{display:block;width:22px;height:22px}
.search-go:hover,.menu-search.is-open .search-go,.menu-search.is-current .search-go{color:var(--ink)}   /* open, or a search showing on the list */
.menu-search.is-open .search-input,html:not(.js) .search-input{display:block}
.menu-toggle{display:none}
main{display:block;flex:1 0 auto;border-top:1px solid var(--line);outline:0}   /* short pages: the footer rests at the foot of the screen */
main:focus,main:focus-visible{outline:0}   /* the skip link's target (tabindex -1): the page itself is not a control — no ring round all of it */
/* the first screen after the intro: every menu word is black, no band, no rule */
.is-home .site-header{height:77px}
.is-home .site-nav .menu>li>a{color:var(--ink)}
.is-home main{border-top:0}

@media(max-width:1023px){
  .brand{--bw:min(270px,calc(100vw - 97px));top:11px}   /* at 320px the logo stops short of the menu button */
  .menu-toggle{position:absolute;right:0;top:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:67px;height:44px}
  .menu-toggle span{display:block;width:27px;height:2px;background:currentColor;transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
  /* the ink panel: the same order in white words — ROSE IN FLUX and its five, WORKS and its five, ABOUT and its three — then the search.
     Taller than the screen (a small phone), it scrolls inside itself. */
  .site-nav{position:fixed;inset:0;z-index:1;background:var(--ink);color:var(--paper);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
  .site-nav .menu{position:static;display:block;padding:5px 10px 30px}
  .site-nav .menu>li{padding:0}
  .site-nav .menu>li+li{margin-top:24px}   /* the three groups stand apart */
  /* white words on the black panel: the three heads at 31.2px on a 37.44px pitch, their parts smaller (24px on 30px) and set in under
     them, so ROSE IN FLUX · WORKS · ABOUT read as the three heads they are; each link still offers a 44px target (padding, given back
     by a margin) — and the whole panel, search and all, fits a 667px screen */
  .site-nav .menu>li,.sub-menu li{display:flow-root}
  .site-nav .menu>li>a,.is-home .site-nav .menu>li>a,.site-nav .menu>li.is-current>a,.site-nav .menu>li>a:hover{font-size:31.2px;line-height:37.44px;color:var(--paper);background:none;min-height:0;padding:3.28px 0;margin:-3.28px 0}
  .sub-menu,.site-nav .menu>li.is-current>.sub-menu{display:block;margin:0;padding-left:62px}
  .sub-menu a,.sub-menu a[aria-current],.sub-menu a:hover{font-size:24px;line-height:30px;color:var(--paper);min-height:0;padding:7px 0;margin:-7px 0}
  .sub-menu a[aria-current]::before{content:'+';position:absolute;margin-left:-62px}
  /* the search, after the words and smaller than them: one line in white on a white line, 44px high, its hint in thinned white
     (6.6:1 on the ink), the magnifier at its right end sending it */
  .site-nav .menu>li.menu-search{margin-top:30px}
  .site-nav .search-input{display:block;height:44px;margin:0;padding:0 44px 2px 0;border-bottom-color:var(--paper);background:transparent;color:var(--paper);caret-color:var(--paper);font-size:24px}
  .site-nav .search-input::placeholder{color:rgba(255,255,255,.6)}
  .site-nav .search-go,.site-nav .search-go:hover,.site-nav .menu-search.is-current .search-go{position:absolute;right:0;bottom:0;color:var(--paper)}   /* a 44px target over the line's right end */
  .site-nav :focus-visible,.menu-open .menu-toggle:focus-visible{outline-color:var(--paper)}
  .menu-open .site-nav{visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .site-header{transition:z-index 0s .3s}   /* (closing, it stays over them while it fades) */
  .menu-open .site-header{z-index:50;transition:none}   /* the panel over all of the page — its ↑ buttons too (z-index 40), now that the phone's bar opens it far down a page */
  .menu-open .menu-toggle{color:var(--paper)}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  html.menu-open{overflow:hidden}
  .is-home .site-header{height:77px}
}

/* ---------- The header's bar on phones (.top-bar — base.js, 8바퀴 F1) ----------
   A long page read on a phone lost its header — the logo and ☰ — once it was scrolled past, and the menu was two presses away (↑, then ☰),
   the place read lost on the way (세 바퀴째 심사 ③: 19 pages of 19). Under 768px, a page taken down more than a screen and then turned
   upwards by more than 8px brings down a bar: the header band made small — paper, its two outer column lines running through it as they
   run through the band, one hairline under it (the band's own rule), the logo in its ink where the band's logo starts (x 20), 24px high, and
   ☰ where the band's ☰ is (67px from the right), its lines shorter and finer than the band's, at the band's pitch — where the panel's ×
   comes when it opens — so the name stays the heavier, as in the band. Going on down sends it back up.
   Near the top of the page it lies over the band (z-index 31, over the header's 30) down to the head of the band's logo: under it the
   band's logo and ☰ are covered whole, never cut, and the band's rule is let go (html.bar-on main), so one rule shows, not two. Above the
   logo's head base.js takes it away at once, and the band's logo stands where the small one was — one logo for the other.
   52px high, its last pixel the hairline. It slides by its own transform (the compositor's: nothing else is styled again while it moves).
   While it is down html has .bar-on and :root --bar: 51px — the bar less its hairline — else 0px, both set at once as it turns: a page's
   sticky part sits under it with top: var(--bar,0px) — a top rule of its own then lies on the bar's (one line, not two) — and takes
   transition: top var(--t-fast) var(--ease): starting in the same change as the bar's slide, on the same curve, it comes down and goes up
   with it, a pixel at most between them. (8바퀴 고침 2: --bar itself used to glide, from :root — every element of the page styled again in
   every frame of the slide, 216–390ms of a 4× slowed phone's 700ms; now one change when it turns.)
   The ink panel (the header at z-index 50 while it is open) covers the bar; the panel's × — the header's own button, held at the top of the
   screen while the panel is open (it may be opened far down the page now) — stands where the bar's ☰ was, its lines on the ☰'s. */
:root{--bar:0px}
.top-bar{display:none}
@media(max-width:767px){
  .top-bar{position:fixed;left:0;right:0;top:0;z-index:31;display:flex;align-items:flex-start;justify-content:space-between;height:52px;
    border-bottom:1px solid var(--line);
    background:linear-gradient(90deg,transparent calc(var(--m) - 1px),var(--line) calc(var(--m) - 1px) var(--m),transparent var(--m) calc(100% - var(--m)),
      var(--line) calc(100% - var(--m)) calc(100% - var(--m) + 1px),transparent calc(100% - var(--m) + 1px)) var(--paper);   /* the grid's outer lines (.grid-lines) go on through it */
    transform:translateY(-100%);visibility:hidden;transition:transform var(--t-fast) var(--ease),visibility 0s var(--t-fast)}
  .top-bar.is-on{transform:none;visibility:visible;transition:transform var(--t-fast) var(--ease)}
  .top-bar-brand{display:block;height:51px;padding:14px 14px 13px 20px}   /* 184 × 51 to press; the logo 24px high, centred on 26px */
  .top-bar-logo{--bw:150px;position:relative;display:block;width:var(--bw);height:calc(var(--bw)*124/776);overflow:hidden}   /* the band's logo, cut the same way (.brand) */
  .top-bar-logo img{position:absolute;width:calc(var(--bw)*851/776);max-width:none;height:auto;left:calc(var(--bw)*-36/776);top:calc(var(--bw)*-362/776)}
  .top-bar-menu{display:flex;flex-direction:column;align-items:center;gap:7px;width:67px;height:51px;padding-top:17px;color:var(--ink)}   /* the band's ☰ (.menu-toggle), centred with the logo */
  /* its lines (at 17 · 25 · 33, the band's pitch — the ×'s lines when the panel opens from here) are to the small logo what the band's
     are to the band's logo: a little finer than its strokes (1px to some 1.3; the band's 2px to some 2.5) — at 2px they would outweigh
     the letters, and 1.5px draws as 2 on a 3× screen. 23 wide, odd as the button's 67, so they start on a whole pixel (x 345 at 390) */
  .top-bar-menu span{display:block;flex:none;width:23px;height:1px;background:currentColor}
  .top-bar :focus-visible{outline-offset:-2px}   /* inside the bar: its edge would cut a ring drawn outside */
  .bar-on main{border-top-color:transparent}   /* near the top, the band's rule would show under the bar as a second line: the bar's is the rule */
  .menu-open .menu-toggle{position:fixed}   /* the panel's ×: at the top of the screen wherever the page stands */
  .menu-at-bar .menu-toggle{top:4px}        /* … where the bar's ☰ was, when that opened it */
  /* the sticky parts riding under the bar that this file knows — the series' strip (rose-in-flux.html .rif-nav) and the list's group
     heads (projects.html .list-group) — slide with it; :where() weighs nothing, so a page's own transition for them stands */
  :where(.rif-nav,.list-group){transition:top var(--t-fast) var(--ease)}
}
html.bar-cut .top-bar,html.bar-cut :is(.rif-nav,.list-group,.work-info){transition:none}   /* (base.js: the top of the page takes the bar away at once — them too) */
@media print{.top-bar{display:none!important}}

/* ---------- Black and white until looked at ----------
   (창작자 10-16): browsing pictures — cards, rows, lists, grids — start in black and white and take their
   own colour when looked at: a pointer over the picture or the link round it (or that link's focus), or, on a touch screen, the middle of
   the screen (base.js). Only what shows changes: the files keep their colour, and a work's own page and the viewer show it in colour.
   .bw goes on the picture, or on the box holding it and whatever is drawn from its edge, so the two turn together.
   At rest it is the pale ink of --bw-rest. The colour does not come evenly over the whole picture: it spreads from the middle of the
   photograph outwards, as ink spreads in wet silk (6바퀴 — whatever turns it: the middle band, the pointer, a focus, a page's own rule).
   base.js ends the fade as it starts and lays a veil of the same grey over the picture (.bw-veil — a backdrop filter, so the picture
   under it is already in its colour), then opens a hole in the veil from the photograph's middle (the middle of what of it is on the
   screen) to its farthest corner: --bloom, the hole's edge as a share of that reach, its last 35% a soft rim, in 1.4s (twice the
   picture's own fade, so a page that makes it quicker makes this quicker too), its front going out at an even pace — the middle has its
   colour in a sixth of a second, the sides at about half a second, the corners at about one (6바퀴 r2: at first it was all but open in
   0.4s, a blink rather than a spread). Ahead of the hole's edge goes a wet front: a soft ring of the ink at 7% (--wet), as water darkens
   silk before the colour it carries — so the bloom shows on her paintings too, which are photographed in grey and have no colour to turn
   (6바퀴 r3: there rest and colour differed by 11 at the most, and the spread went unseen); the picture at rest and in its colour are as
   before (her ink is not paled to make a change to see). Turned back to grey before the hole is open, the veil
   stands (.is-held) and the plain fade greys what the hole had opened; the veil goes once it is all colour, or all grey again.
   Where the browser cannot draw it (backdrop filters, masks, registered custom properties) or motion is not wanted, the plain fade (none). */
.bw{filter:var(--bw-rest);transition:filter .7s var(--ease)}
.js img.fade.bw{transition:opacity .6s var(--ease),filter .7s var(--ease)}   /* a picture that also fades in keeps its colour's fade (6바퀴: img.fade's own transition had taken it — the colour came at once) */
.bw.is-color{filter:none}
@media(hover:hover){a:hover .bw,a:focus-visible .bw,.bw:hover,a.bw:focus-visible{filter:none}}
@media(prefers-reduced-motion:reduce){.bw,.js img.fade.bw{transition:none}}
@property --bloom{syntax:'<percentage>';inherits:false;initial-value:0%}
.bw-veil{position:absolute;display:block;margin:0;padding:0;pointer-events:none;-webkit-backdrop-filter:var(--bw-rest);backdrop-filter:var(--bw-rest);
  -webkit-mask-image:radial-gradient(circle farthest-corner at var(--bx,50%) var(--by,50%),transparent calc(var(--bloom) - 35%),#000 var(--bloom));
          mask-image:radial-gradient(circle farthest-corner at var(--bx,50%) var(--by,50%),transparent calc(var(--bloom) - 35%),#000 var(--bloom));
  background:radial-gradient(circle farthest-corner at var(--bx,50%) var(--by,50%),transparent var(--bloom),
    rgb(7 16 16/min(var(--wet),calc(var(--bloom)*.3))) calc(var(--bloom) + 8%),transparent calc(var(--bloom) + 22%));   /* the wet front, ahead of the colour */
  animation:bw-bloom var(--bloom-t,1.4s) cubic-bezier(.2,.2,.5,1) forwards}   /* it starts at once, goes out evenly, and slows only in the corners */
.bw-veil.is-held{animation-play-state:paused;background:none}   /* turned back: no front stands still on the picture */
@keyframes bw-bloom{to{--bloom:135%}}
@media print{.bw-veil{display:none}}

/* ---------- Page title · tags · info table · filters ---------- */
.page-title{padding:10px 10px 0 20px;font-size:var(--fs-title);font-weight:700;line-height:1.2;letter-spacing:-.005em}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{display:inline-block;padding:0 5px;border:1px solid var(--ink);font-size:var(--fs-14);line-height:1.6;white-space:nowrap}
.tag.is-solid{background:var(--ink);color:var(--paper)}
.info{width:100%;border-collapse:collapse;font-size:var(--fs-15);line-height:1.3}
.info th,.info td{width:50%;padding:5px 10px;border-top:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.info tr:last-child th,.info tr:last-child td{border-bottom:1px solid var(--line)}
.filters{font-size:var(--fs-filter);font-weight:700;line-height:1.4;color:var(--grey)}
.filters a,.filters button{color:var(--grey);transition:color var(--t-fast) var(--ease)}
.filters a:hover,.filters button:hover,.filters [aria-current],.filters [aria-pressed=true]{color:var(--ink)}

/* ---------- Footer ----------
   The page stands on it: the whole band is paper (above, with the other blocks on white), so the column lines end on its rule — 8바퀴 F8:
   with only its words on paper, the lines between them stood as 24–37px stubs under the rule on every page. */
.site-footer{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:80px;padding:12px 20px 24px;border-top:1px solid var(--line);font-size:var(--fs-14);line-height:1.4;color:var(--ink)}
@media(min-width:768px){.site-footer{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:0;padding:12px var(--m) 24px}.site-footer>*{padding:0 var(--pad)}}   /* one item per column, on the grid */
.site-footer a{display:inline-flex;align-items:center;min-height:44px}
@media(min-width:1024px){.site-footer a[href^="mailto:"]{grid-column:span 2}}   /* six columns: the address is longer than one at 1024 (it was cut: «…@mondkim.co») */
.site-footer .push{margin-left:auto}
/* the rose's 「모션 정지 Ⅱ / 모션 재생 ▷」 (base.js, the artist's own words in 11aaa2c — the words are its name): the footer's last column — only where the rose moves (not on phones, where it stands still) */
.motion-toggle{display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-size:var(--fs-14);line-height:1.4;color:var(--ink-2);white-space:nowrap;transition:color var(--t-fast) var(--ease)}
.motion-toggle:hover{color:var(--ink)}
.motion-toggle span{margin-left:.45em;font-variant-numeric:tabular-nums}
@media(min-width:768px){.site-footer .motion-toggle{grid-column:-2/-1}}

/* ---------- The artist's rose (her own commit 11aaa2c, 10-14 — 「subtle drifting rose petals」) ----------
   Her black rose — the ink painting media/motion/rose-original.png, as its web copies (720px, and 240px for small screens), its white
   paper multiplied away. Wide screens: the whole flower stands in the header band's second column — the band's one empty place once the
   menu takes columns 3–6, so the painting stands just before the word that names it, ROSE IN FLUX — head, drips, stem and leaves, the
   foot of her paper (where the stem leaves it) on the band's rule, as if it grew from it; nothing of it is cut (6바퀴: cut at the rule
   its head read as a grey smudge). One order at every width (6바퀴 r3: under the logo at 1024, touching its foot at 1440 and risen beside
   it at 1920, the band was laid three ways): the logo above, the rose below — its head's top 26px under the logo's foot, so the two stand
   as two marks, and its ink 28px inside the column's right line (so it stands clear of the grey sub menu after it: at 15px it read as one
   with 「Paintings」), whatever the width — some 125px tall from 1280 (the logo stops growing there), 130px at 1024.
   Its size is the largest that keeps those clearances, from the painting's own ink as measured on its 720px copy (the ink spans .067–.903
   of the width and starts at .096 of the height) — never from the file.
   It is drawn in the ink of the work, not as a shadow of it (6바퀴: at .09–.21 it read as dust; r2: at .42–.5 its darkest was #888, a pale
   copy): .52–.6 at its sway, so its darkest comes to the thinned ink of the words not chosen (--grey) and stays behind the menu's black
   words; a little more contrast than the file (r3: its darks and its washes had come out as one grey), so the dark of the ink and the
   water in it part as they do in the painting. It sways on its stem, where the stem meets the rule (34s, ±1.5°: the head moves some 3px).
   Petals cut from the same painting, in her petal's form (border-radius as she drew it, its edge softened by half a pixel — 6바퀴 r2: cut
   sharp at a darker ink they read as chips; r3: let go in a wide soft mask they read as smudges), each a piece of the head where its
   brush shows (her background-position at 160px, a fold or a lit edge in it), leave now and then from the head — from its left edge,
   some 10px of them still on it, a third of the way down — and come down leftwards, inside the column — never nearer than 20px to its line (6바퀴: they left from
   on the line and read as specks) — to just above the rule, each in some 9s (about her speed), then rest unseen; from 1200px, where the
   column leaves them room.
   Tablets: the whole flower, small, in column 3 of the 95px band; no petals. Phones: no motion — the whole flower, still, at the
   foot of the page beside the footer's last line (.rose-foot), as a seal under the page, in the same ink.
   Only where nothing is: under the header, never over words, pictures or anything to press (pointer-events none), not on the first
   screen (the photographs are its own), and it scrolls away with the band. base.js adds it once the page has loaded and keeps one clock
   for it across pages (so the petals go on where they were); the footer's button (.motion-toggle) stops it (html.motion-paused: the bloom
   stands, the petals go), as does a hidden tab (html.motion-hidden); with reduced motion, no petals and the bloom stands still. */
.rose-drift{position:absolute;left:0;top:0;width:100%;height:var(--head);overflow:hidden;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity 2.4s var(--ease);
  --c1:calc(var(--m) + var(--col));                                 /* column 2's left line (247px at 1440) */
  --ink-r:calc(var(--m) + 2*var(--col) - 28px);                     /* the ink's right edge: 28px inside column 2's right line (455px) */
  --logo-f:calc(13px + min(322px,calc(2*var(--col) - 40px))*124/776);   /* the logo's foot (.brand — 64.5px) */
  /* the size: as wide as the column but 28px a side, and as tall as the room under the logo's foot, 26px below it, allows */
  --rose:min(calc((var(--col) - 56px)/.836),calc((var(--head) - var(--logo-f) - 26px)/.904));
  --rose-l:calc(var(--ink-r) - .903*var(--rose));                   /* the picture's square: its ink's right edge on --ink-r, */
  --rose-top:calc(var(--head) - var(--rose));                       /* the foot of her paper on the rule */
  --p-left:calc(var(--rose-l) + .17*var(--rose) - 12px);           /* petals leave from the head's left edge, 10px of them on it (352px at 1440), */
  --p-top:calc(var(--rose-top) + .3*var(--rose));                   /* a third of the way down it (116px), */
  --drift:max(calc(var(--c1) + 20px - var(--p-left)),calc(-.42*var(--rose)));          /* come down leftwards, to 20px short of column 2's line, */
  --fall:calc(var(--head) - 42px - var(--p-top))}                                       /* and are gone 8px over the rule */
.rose-drift.is-on{opacity:1}
.rose-drift.at-once{transition:none}   /* a later page of the visit: the rose is already there */
.rose-drift i{position:absolute;background-image:url('media/motion/rose-original-720.webp');background-repeat:no-repeat}
.rose-bloom{left:var(--rose-l);top:var(--rose-top);width:var(--rose);height:var(--rose);background-position:center;background-size:contain;opacity:.56;filter:contrast(1.2);
  transform-origin:68% 100%;animation:rose-sway 34s ease-in-out infinite alternate}   /* (68% 100%: where the stem leaves her paper, on the rule) */
.rose-petal{top:calc(var(--p-top) + var(--y,0px));left:calc(var(--p-left) + var(--x,0px));width:22px;height:34px;background-size:160px 160px;
  border-radius:80% 12% 75% 20%;filter:blur(.35px);   /* her petal's form, its edge just softened */
  opacity:0;animation:rose-petal 40s linear infinite;will-change:transform,opacity}
.rose-petal.p1{--x:-4px;--y:14px;--k:.85;width:14px;height:23px;background-position:68% 22%;animation-duration:47s}   /* a lit fold at the head's top right */
.rose-petal.p2{--x:0px;--y:0px;background-position:17% 49%;animation-duration:38s}                           /* the outer petal's curled edge, at the left */
.rose-petal.p3{--x:6px;--y:-12px;--k:.7;width:21px;height:29px;background-position:70% 36%;animation-duration:43s}   /* a fold in the heart (hers) */
.motion-paused .rose-drift i,.motion-hidden .rose-drift i{animation-play-state:paused}
.motion-paused .rose-petal{visibility:hidden}
@keyframes rose-sway{from{transform:rotate(-1.5deg);opacity:.52}to{transform:rotate(1.5deg);opacity:.6}}
/* her fall (her sway of −5 · 8 · −8 · 6px and turn of −25° to 145°; her opacities .23 · .19 · .13, here in the bloom's ink, always paler
   than the flower: .45 · .37 · .24),
   told in the first 22% of the turn, drifting leftwards as it falls; the rest of the turn the petal rests unseen */
@keyframes rose-petal{   /* (--k: a petal's own share of the way, so two in the air at once do not go as one) */
  0%{transform:translate3d(-5px,0,0) rotate(-25deg);opacity:0}
  2.6%{opacity:.45}
  7.7%{transform:translate3d(calc(var(--drift)*var(--k,1)*.3 + 8px),calc(var(--fall)*var(--k,1)*.34),0) rotate(36deg)}
  14.3%{transform:translate3d(calc(var(--drift)*var(--k,1)*.62 - 8px),calc(var(--fall)*var(--k,1)*.65),0) rotate(95deg);opacity:.37}
  19.8%{opacity:.24}
  22%,100%{transform:translate3d(calc(var(--drift)*var(--k,1) + 6px),calc(var(--fall)*var(--k,1)),0) rotate(145deg);opacity:0}}
@media(max-width:1599px){.rose-petal.p1{display:none}}   /* two petals; a third where the room is wide */
@media(max-width:1199px){.rose-petal{display:none}}      /* the head stands near column 2's line: no room for them to fall */
@media(max-width:1023px){   /* tablets: the whole flower, 90px, in the middle of column 3 of the 95px band (the logo ends at 290px, the menu button is at the right) */
  .rose-drift{--rose:90px;--rose-l:calc(var(--m) + 2.5*var(--col) - .485*var(--rose))}
}
/* phones: the whole flower, still, at the foot — after the footer's last line, at its right (base.js adds it there, once the page has loaded) */
.rose-foot{display:none}
@media(max-width:767px){
  .rose-drift,.motion-toggle{display:none}
  .site-footer>.rose-foot{display:block;flex:none;order:9;align-self:flex-end;width:104px;height:104px;margin:0 -4px -18px auto;background:url('media/motion/rose-original-240.webp') center/contain no-repeat;
    mix-blend-mode:multiply;opacity:.6;pointer-events:none}   /* the band's ink at its darkest (6바퀴: at .2 it was hardly there) */
}
@media(prefers-reduced-motion:reduce){.rose-petal{display:none}.rose-bloom{animation:none!important}.motion-toggle{display:none}}
@media print{.rose-drift,.rose-foot,.motion-toggle{display:none!important}}

/* ---------- Reveal · image fade ---------- */
.js .reveal{opacity:0;transition:opacity .8s var(--ease);transition-delay:var(--reveal-delay,0s)}
.js .reveal.is-in,.js .reveal:focus-within{opacity:1}
.js img.fade{opacity:0;transition:opacity .6s var(--ease)}
.js img.fade.is-loaded{opacity:1}

/* ---------- Viewer: one picture at a time on the whole screen (MK.viewer) — on the white wall (--paper): the picture's own colours, nothing round them ----------
   Its line at the top, the way the work's own slider has it: the work's name (15/700, as a card's — 6바퀴 r3: opened from a shared link,
   the white screen did not say whose work it was), the count, ‹ › beside it (44px, the slider's own thin chevrons, in ink:
   6바퀴 — the arrows at the sides were a pale 28px ← → hardly seen on white), and 「닫기 ×」 at the right, the pair of the page's
   「크게 보기」. The sides of the stage stay what a tap or a click steps by (and a swipe, anywhere); a pointer over one shows its arrow
   there, on a small white square, so it reads over any picture. Nothing of the controls lies on the picture on a phone.
   Close up: a double-tap / double-click (or a pinch) zooms the picture into the stage, where a finger or the mouse moves it;
   meanwhile the prev/next zones and the caption step aside. The picture scales from its top-left corner (MK.viewer sets the transform).
   Phones: the picture runs from edge to edge of the screen, as the first screen's photographs do (7바퀴 F2c: inside the stage's 20px sides
   The Rose in Black's first photograph was 350px wide here and 370 in the page's own slider — 「크게 보기」 showed it smaller); the top line
   and the caption keep their 20px. Edge to edge or those 20px in, nothing between: a picture the screen's height holds a few px short of
   the edges stands 20px in (.is-inset, set by MK.viewer from its place once it is there — r2: 2:3 photographs on a 390 × 664 screen stood
   13.7px in, off the name above, and the edge moved at each step).
   A finger screen's hint (.viewer-hint — MK.viewer: once a tab; a step leaves only 「두 번 눌러 크게」 for one picture, the next step or a
   zoom takes it) hangs 10px under the caption, out of the flow, in the thinned ink at the second lines' size (--fs-14: 13px on a phone) —
   set apart, so it is not read as the work's second line (r2). While it is there the caption keeps a room under it (.is-hinted: 10px +
   its line, 30px), so it never sits on the screen's bottom edge (r2: 8px off it) and nothing moves when it fades; the room goes with the
   next picture. The room comes first out of the 20px the stage keeps spare (--viewer-chrome's own: top line 44 + caption 40 + the
   stage's foot 16 + 20) and the picture gives only 20px of height (r3: it gave all 30, and 2:3 photographs on a 390 × 664 screen stood
   23.7px in, off the name above, and those that ran edge to edge stood 20px in — the hint moved them off their lines). A picture the room
   still pulls a few px past the 20px line stands on it (MK.viewer: .is-inset while hinted) and gives only 10px — then the figure fills
   the stage to its foot, and the hint still ends 18px or more over the screen's bottom edge.
   A screen held on its side (500px tall or less: a phone turned) has no height to spare: there the hint stands in the top line's empty
   middle, between ‹ › and 「닫기 ×」 (MK.viewer moves it there), and the picture keeps the whole stage (r3: under the caption it took 30px
   of 390, and The Rose in Black's street view came down to 357 × 240 — smaller than in the page's own slider, which F2c was to end). */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:hidden}
.viewer::backdrop{background:var(--paper)}
.viewer[open]{display:flex;flex-direction:column;animation:viewer-in .3s var(--ease) both}
.viewer-top{flex:none;display:flex;align-items:center;gap:0;min-height:44px;padding:0 0 0 20px}
.viewer-name{flex:0 1 auto;min-width:0;margin:0 14px 0 0;font-size:var(--fs-15);font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* the work's name: on a phone it gives way first (…) */
.viewer-count{flex:none;margin:0 6px 0 0;font-size:var(--fs-15);font-variant-numeric:tabular-nums}
.viewer-steps{flex:none;display:flex;margin-right:auto}
.viewer-step{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink)}
.viewer-step svg{width:10px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible;transition:transform var(--t-fast) var(--ease)}
@media(hover:hover){.viewer-step.is-back:hover svg{transform:translateX(-3px)}.viewer-step.is-fwd:hover svg{transform:translateX(3px)}}
.viewer-close{flex:none;display:inline-flex;align-items:center;gap:.35em;min-width:67px;min-height:44px;margin-left:auto;padding:0 20px;font-size:var(--fs-15);font-weight:700;white-space:nowrap}
.viewer-close span{font-size:1.25em;font-weight:400;line-height:1}
.viewer-stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 20px 16px;overflow:hidden;touch-action:none}   /* every touch here is the viewer's: swipe, double-tap, pinch, drag */
.viewer-figure{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center}
.viewer-img{display:block;max-width:100%;max-height:calc(100dvh - var(--viewer-chrome,120px));width:auto;height:auto;object-fit:contain;opacity:0;transform-origin:0 0;transition:opacity .35s var(--ease),transform .3s var(--ease);cursor:zoom-in;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.viewer-img.is-loaded{opacity:1}
.viewer-img.is-held{transition:opacity .35s var(--ease)}   /* under a finger or the mouse it follows at once */
.viewer.is-zoomed .viewer-img{cursor:zoom-out}
.viewer.is-dragging .viewer-img{cursor:grabbing}
.viewer.is-zoomed .viewer-prev,.viewer.is-zoomed .viewer-next{pointer-events:none}
.viewer.is-zoomed .viewer-prev span,.viewer.is-zoomed .viewer-next span,.viewer.is-zoomed .viewer-caption{opacity:0}
.viewer-prev,.viewer-next{position:absolute;z-index:1;top:0;bottom:0;width:30%;display:flex;align-items:center;color:var(--ink)}
.viewer-prev{left:0;justify-content:flex-start;padding-left:20px;cursor:w-resize}
.viewer-next{right:0;justify-content:flex-end;padding-right:20px;cursor:e-resize}
.viewer-prev span,.viewer-next span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--paper);border:1px solid var(--line);opacity:0;transition:opacity var(--t-fast) var(--ease)}
.viewer-prev svg,.viewer-next svg{width:10px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
@media(hover:hover){.viewer-prev:hover span,.viewer-next:hover span{opacity:1}}
.viewer.single .viewer-prev,.viewer.single .viewer-next,.viewer.single .viewer-steps{display:none}
.viewer-caption{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 14px;padding-top:10px;text-align:center;min-height:40px;font-size:var(--fs-15);transition:opacity var(--t-fast) var(--ease)}
.viewer-meta{color:var(--ink-2)}
.viewer-hint{position:absolute;left:50%;top:calc(100% + 10px);width:max-content;max-width:calc(100vw - 40px);margin:0;transform:translateX(-50%);font-size:var(--fs-14);line-height:1.4;color:var(--ink-2);text-align:center;pointer-events:none;transition:opacity var(--t-fast) var(--ease)}
.viewer-hint.is-gone{opacity:0}   /* (centred on the caption, which is as wide as its words; zoomed, it fades with it) */
.viewer.is-hinted .viewer-caption{margin-bottom:30px}   /* the hint's room: 10px apart + its line (18–20px) */
.viewer.is-hinted .viewer-img{max-height:calc(100dvh - var(--viewer-chrome,120px) - 20px)}   /* (10 of the 30 are the stage's spare) */
.viewer.is-hinted.is-inset .viewer-img{max-height:calc(100dvh - var(--viewer-chrome,120px) - 10px)}   /* on the 20px line: the spare's all */
/* a screen on its side: in the top line, centred in what ‹ › and 「닫기 ×」 leave (its auto margins share that space with theirs), whole —
   it gives way to the work's name, not the name to it: where the name would be cut for it, MK.viewer leaves only 「두 번 눌러 크게」
   (fitTop) — never a cut sentence, and never 「닫기 ×」 pushed off the screen */
.viewer-top .viewer-hint{position:static;flex:none;width:auto;max-width:none;margin:0 auto;transform:none;white-space:nowrap}
@media(max-width:767px){
  .viewer-stage{padding:0 0 16px}   /* the picture: the screen's whole width */
  .viewer.is-inset .viewer-stage{padding:0 20px 16px}   /* … or 20px in, with the top line — never a sliver between */
  .viewer-caption{padding:10px 20px 0}   /* its line: inside the same 20px as the top line */
}
html.viewer-open{overflow:hidden}
@keyframes viewer-in{from{opacity:0}to{opacity:1}}

/* ---------- Page fade ---------- */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:mk-fade-out .2s var(--ease) both}
  ::view-transition-new(root){animation:mk-fade-in .35s var(--ease) .05s both}
}
@keyframes mk-fade-out{to{opacity:0}}
@keyframes mk-fade-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1}
  .js img.fade{opacity:1}
}