/* ============================================================
   작품 영역 전용 — 작품 쪽(work.html) · 작품 100 목록(works_index.html) · 작품 아카이브(works_archive.html)
   토큰은 site.css 의 :root 만 쓴다. 공통 부품(.wgrid .wcard .rel-box .filters .era-h …)은 site.css 에 있다.
   ============================================================ */

/* hidden 속성이 .wcard{display:flex} 같은 규칙에 밀리지 않게 한다 (목록의 검색·시기 단추가 이 속성으로 숨긴다) */
.kind-works-index [hidden],.kind-works-archive [hidden]{display:none!important}

/* ---- 작품 쪽: 그림 → 기본 정보 → 짧은 해설 → 작품 글 ----
   좁은 화면은 문서 순서 그대로 한 줄. 넓은 화면은 그림·기본 정보를 왼쪽에 띄우고 제목·해설·글을 오른쪽에 둔다. */
.work-hero .wk{max-width:var(--max);margin:auto;padding:32px var(--gap) 40px;display:flow-root;--wk-col:clamp(280px,47%,560px);--wk-gap:44px}
.work-hero .wk-fig{margin:0 0 24px}
.wk-head{margin:0 0 26px}
.wk-head h1{overflow-wrap:anywhere}
.work-hero .wk-head .en-title{margin-bottom:0}
.work-hero .wk-head .en-title[lang="ko"]{font-style:normal;font-family:var(--serif)}     /* 영문판의 한글 원제는 기울이지 않는다 */
.wk-info,.wk-note{margin:0 0 30px}
@media (min-width:901px){
  .work-hero .wk-fig,.wk-info{float:left;clear:left;width:var(--wk-col)}
  .wk-head,.wk-note,.wk-text{margin-left:calc(var(--wk-col) + var(--wk-gap))}
  [dir="rtl"] .work-hero .wk-fig,[dir="rtl"] .wk-info{float:right;clear:right}
  [dir="rtl"] .wk-head,[dir="rtl"] .wk-note,[dir="rtl"] .wk-text{margin-left:0;margin-right:calc(var(--wk-col) + var(--wk-gap))}
}

/* 기본 정보 */
.wk-info table{font-size:15px;line-height:1.6;border-bottom:1px solid var(--line-2)}
.wk-info th,.wk-info td{padding:8px 0;text-align:start}
.wk-info th{width:1%;white-space:nowrap;padding-inline-end:18px;font:600 12px/2 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.wk-info td{color:var(--ink);overflow-wrap:anywhere}
.wk-tbd{color:var(--muted)}
.wk-sep{color:var(--muted-2)}
.wk-legend{display:flex;flex-wrap:wrap;gap:3px 14px;margin:6px 0 5px;font:12px/1.8 var(--sans);color:var(--muted)}
.wk-legend > span{display:inline-flex;align-items:baseline;gap:5px;min-width:0}
.wk-legend .grade{flex:0 0 auto}
.wk-more{display:inline-block;font:600 12px/1.6 var(--sans);color:var(--gold-2);border-bottom:1px solid var(--gold-soft)}
.wk-more:hover{border-color:var(--gold-2)}

/* 짧은 해설 */
.wk-summary{font-size:clamp(19px,1.75vw,23px);line-height:1.5;letter-spacing:-.015em;color:var(--ink);margin:0}

/* 작품 글 (시·에세이) — 해설과 나누어 문학임을 밝힌다 */
.wk-text{border-top:1px solid var(--line-2);padding-top:24px}
.wk-text .eyebrow{margin-bottom:2px}
.wk-by{font:12px/1.6 var(--sans);letter-spacing:.02em;color:var(--muted);margin:0 0 18px}

/* 관계 지도: 관련 구술 · 이야기·연구 · 생애·시간 · 근거 등급 */
.wk-rel .wk-core{font-size:clamp(18px,1.8vw,24px);margin-bottom:14px}
.wk-reading{color:var(--muted);font-size:16px;max-width:900px;margin:0 0 14px}
.wk-rel .rel-box li a{text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:5px}
.wk-rel .rel-box li a:hover{color:var(--gold-2);text-decoration-color:var(--gold)}
.wk-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;font:600 12px/1.6 var(--sans);color:var(--gold-2)}
.wk-links a:hover{border-bottom:1px solid var(--gold)}
.wk-gl{display:block;font:600 11px/1.7 var(--sans);letter-spacing:.03em;color:var(--gold-2)}
.wk-relnote{margin-top:18px}
.wk-relnote p{margin:0}
.wk-relnote p + p{margin-top:5px}

/* ---- 작품 100 목록: 안내 · 검색 ---- */
.wi-head{margin-bottom:20px}
.wi-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;flex:1 1 100%;margin:0}
@media (max-width:1100px){.wi-head > .grid{order:2}}      /* 머리가 접히는 폭에서는 안내가 카드보다 먼저 */
.wi-notice p{margin:0}
.wi-notice > p:first-child{flex:1 1 420px;max-width:860px}
.wi-notice > p:first-child a{color:var(--gold-2);font-weight:600;border-bottom:1px solid var(--gold-soft)}
.wi-notice > p:first-child a:hover{border-color:var(--gold-2)}
.wi-roles{display:flex;flex-wrap:wrap;gap:8px}
.wi-roles a{display:flex;flex-direction:column;gap:1px;padding:7px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--paper-2)}
.wi-roles a:hover{border-color:var(--gold)}
.wi-roles b{font:600 13px/1.4 var(--sans);color:var(--gold-2)}
.wi-roles small{font:11px/1.4 var(--sans);color:var(--muted)}
.filters .wi-q{margin-inline-start:auto;width:220px;min-width:0;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:13px var(--sans)}
.filters .wi-q:focus{outline:2px solid var(--gold-soft);outline-offset:1px}
@media (max-width:640px){.filters .wi-q{flex:1 1 100%;width:auto;margin-inline-start:0}}
.wi-empty{display:none;margin:28px 0 0;font:14px/1.6 var(--sans);color:var(--muted)}
/* 검색으로 한 묶음이 모두 숨으면 그 제목도 접는다 (:has 를 아는 브라우저에서만) */
@supports selector(:has(a)){
  .kind-works-index [data-era-block]:not(:has(.wcard:not([hidden]))){display:none}
  .kind-works-index .wrap:not(:has(.wcard:not([hidden]))) .wi-empty{display:block}
  .arc-group:not(:has(tr[data-era]:not([hidden]))),.arc-period:not(:has(tr[data-era]:not([hidden]))){display:none}
  .arc:not(:has(tr[data-era]:not([hidden]))) .wi-empty{display:block}
}

/* 좁은 화면: 작품 카드를 두 줄로 (한 줄이면 목록이 지나치게 길다) */
@media (max-width:540px){
  .kind-works-index .wgrid,.kind-work .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kind-works-index .wcard .cb,.kind-work .wcard .cb{padding:10px 11px 12px}
  .kind-works-index .wcard .ct,.kind-work .wcard .ct{font-size:15px;overflow-wrap:anywhere}
  .kind-works-index .wcard .cy,.kind-work .wcard .cy{letter-spacing:.08em}
}

/* ---- 작품 아카이브 ---- */
.arc .head{margin-bottom:22px}
.arc-roles{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-s);padding:18px 22px 6px;margin:0 0 18px}
.arc-roles h2{font:600 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.arc-roles table{font-size:15.5px;line-height:1.6}
.arc-roles th,.arc-roles td{padding:11px 20px 11px 0;text-align:start;vertical-align:baseline}
.arc-roles thead th{border-top:0;padding-top:4px;padding-bottom:6px;font-size:11px}
.arc-roles tbody th{width:1%;white-space:nowrap;font:600 18px/1.3 var(--serif);letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.arc-roles tbody th a{color:var(--gold-2);border-bottom:1px solid var(--gold-soft)}
.arc-roles tbody th a:hover{border-color:var(--gold-2)}
.arc-roles tbody th small{display:inline-block;margin-inline-start:10px;padding:2px 8px;border:1px solid var(--gold);border-radius:999px;font:600 10px/1.5 var(--sans);letter-spacing:.06em;color:var(--gold-2);vertical-align:middle}
.arc-roles td{color:var(--ink-2)}
.arc-roles td:last-child{padding-right:0;font:13px/1.9 var(--sans);color:var(--muted)}
.arc-count{font:600 13px/1.6 var(--sans);letter-spacing:.04em;color:var(--gold-2);margin:0 0 10px}
.arc-note{margin:0 0 24px}
.arc-note p{margin:0}
.arc-note p + p{margin-top:4px}
.arc-note a{color:var(--gold-2);border-bottom:1px solid var(--gold-soft)}
.arc-note a:hover{border-color:var(--gold-2)}
.arc-sub{display:flex;align-items:baseline;gap:12px;font-size:19px;margin:28px 0 10px}
.arc-sub span{font:12px var(--sans);letter-spacing:.08em;color:var(--muted)}
.arc-period > .arc-group:first-of-type .arc-sub{margin-top:8px}
.arc-list{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.arc-table{font-size:15px;line-height:1.45}
.arc-table th,.arc-table td{padding:10px 12px;text-align:start;vertical-align:middle}
.arc-table thead th{border-top:0;background:var(--paper-2);font-size:11px;white-space:nowrap}
.arc-table tbody tr:hover{background:var(--paper-2)}
.arc-table .arc-ph{width:72px;padding-inline-end:4px}
.arc-table td.arc-ph img,.arc-table td.arc-ph .noimg{display:block;width:56px;height:56px}
.arc-table td.arc-ph img{object-fit:contain;background:var(--paper-2);border:1px solid var(--line-2)}
.arc-table td.arc-ph .noimg{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);background:var(--paper-2);color:var(--muted);font:11px/1.2 var(--sans);letter-spacing:.04em}
.arc-table td.arc-ph .noimg b{font-weight:600}
.arc-table .arc-id{width:150px;white-space:nowrap}
.arc-table td.arc-id{font:600 12px/1.5 var(--sans);letter-spacing:.06em;color:var(--gold-2)}
.arc-table td.arc-id.tbd{font-weight:400;letter-spacing:.02em;color:var(--muted)}
.arc-table td.arc-ti a,.arc-table td.arc-ti .t{font-size:16.5px;line-height:1.3;color:var(--ink)}
.arc-table td.arc-ti a:hover{color:var(--gold-2)}
.arc-table td.arc-ti small{display:block;margin-top:2px;font:12px/1.5 var(--sans);color:var(--muted)}
.arc-table td.arc-ti small.reading{display:inline;margin:0 0 0 4px;font:13px/1.5 var(--serif);color:var(--muted-2)}   /* 한자 제목의 독음 (2026-10-04) */
.arc-table .arc-yr{width:70px}
.arc-table td.arc-yr{font:13px/1.5 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.arc-table .arc-sz{width:190px}
.arc-table td.arc-sz{font:13px/1.5 var(--sans);color:var(--ink-2)}
.arc-table td.arc-sz.none{color:var(--line)}
.arc-table .arc-st{width:100px}
.arc-table td.arc-st{font:600 12px/1.5 var(--sans);color:var(--ink-2)}
.arc-table .arc-go{width:130px;white-space:nowrap;text-align:end}
.arc-table td.arc-go a{font:600 12px/1.5 var(--sans);color:var(--gold-2)}
.arc-table td.arc-go a:hover{border-bottom:1px solid var(--gold)}
@media (max-width:1100px){
  .arc-table .arc-id{width:128px}.arc-table .arc-sz{width:150px}.arc-table .arc-st{width:84px}.arc-table .arc-go{width:112px}
}
/* 좁은 화면: 표를 접어 한 작품 = 한 덩이 (도판 왼쪽, 글 오른쪽) */
@media (max-width:900px){
  .arc-roles{padding:14px 18px 4px}
  .arc-roles thead,.arc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .arc-roles table,.arc-roles tbody,.arc-roles tbody tr,.arc-roles tbody th,.arc-roles tbody td{display:block;width:auto}
  .arc-roles tbody tr{padding:12px 0;border-top:1px solid var(--line-2)}
  .arc-roles tbody tr:first-child{border-top:0}
  .arc-roles tbody th,.arc-roles tbody td{padding:0;border:0;white-space:normal}
  .arc-roles tbody th{margin-bottom:3px}
  .arc-table,.arc-table tbody{display:block}
  .arc-table tbody tr{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:start;padding:12px;border-top:1px solid var(--line-2)}
  .arc-table tbody tr:first-child{border-top:0}
  .arc-table tbody td{display:block;width:auto;padding:0;border:0}
  .arc-table td.arc-ph{grid-column:1;grid-row:1 / span 5}
  .arc-table td.arc-id{grid-column:2;grid-row:1;white-space:normal}
  .arc-table td.arc-yr{grid-column:3;grid-row:1;text-align:end}
  .arc-table td.arc-ti{grid-column:2 / -1;grid-row:2}
  .arc-table td.arc-sz{grid-column:2 / -1;grid-row:3}
  .arc-table td.arc-st{grid-column:2 / -1;grid-row:4}
  .arc-table td.arc-go{grid-column:2 / -1;grid-row:5;margin-top:3px;text-align:start;white-space:normal}
  .arc-table td.none{display:none}
}

/* ---- 초기 작품 한 쪽 (works/early/<stem>/, 2026-10-04) ---- */
.ew-fig .ew-zoom{display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-s);padding:clamp(8px,1.2vw,16px)}
.ew-fig .ew-zoom img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain}
.ew-reading,.ew-reading-h{font:400 .62em/1 var(--serif);color:var(--muted-2);letter-spacing:0}
.ew-reading-h{margin-inline-start:.3em}
.ew-note b{font-weight:600}
.ew-records{margin:0 0 14px;padding:0;list-style:none}
.ew-records li{position:relative;padding:6px 0 6px 18px;font-size:16px;line-height:1.75;color:var(--ink-2);border-top:1px solid var(--line)}
.ew-records li:first-child{border-top:0;padding-top:0}
.ew-records li::before{content:"";position:absolute;left:0;top:16px;width:8px;border-top:1px solid var(--gold)}
.ew-stories{margin:0;padding:0;list-style:none}
.ew-stories li a{display:flex;gap:12px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.ew-stories li:first-child a{border-top:0;padding-top:0}
.ew-stories b{font:600 12px/1.8 var(--sans);letter-spacing:.06em;color:var(--gold-2);white-space:nowrap}
.ew-same .wcard .ph img{object-fit:contain}