/* 개발 일지 글 상세 — WoW 뉴스 글 페이지 구성(폭 전체 대표 그림 위 제목 · 공유 줄 · 목차 상자 · 금색 구분선 · 캡션 상자 · 고스트 버튼).
   수치 근거: docs/WOW_NEWS_DESIGN_CACHE.md "글 상세". 본문 마크업은 tools/build_articles.py 가 만든다. */
:root{
  /* 옛 글의 인라인 style 이 쓰는 변수(landing.css 시절 이름) — 새 색으로 이어 준다 */
  --bg:#170e09;--bg2:#211510;--bg3:#2a1b13;--accent:#f8b700;--accent2:#c99a2e;--text:#ebdec2;--text-dim:#b1997f;--border:#504137;
  --fx-post-w:920px;
  --fx-heading:#daa520;
}

/* ── 대표 그림 + 제목 ── */
.fx-post-hero{position:relative;height:min(74vh,760px);min-height:460px;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:#000}
.fx-post-hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.fx-post-hero::before{content:"";position:absolute;inset:0;z-index:-1;box-shadow:inset 0 -180px 200px rgba(0,0,0,.6);background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 55%,rgba(23,14,9,.55) 100%)}
.fx-post-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-post-head{position:relative;z-index:1;padding-bottom:40px}
.fx-post-crumb{display:inline-block;margin-bottom:10px;font-weight:800;font-size:14px;color:var(--fx-gold);text-shadow:var(--fx-shadow)}
.fx-post-crumb:hover{color:#fff}
.fx-post-head h1{max-width:980px;font-size:clamp(28px,3vw,40px);line-height:1.4;font-weight:800;color:#fff;letter-spacing:-.01em;text-shadow:0 1px 2px rgba(0,0,0,.8),0 2px 18px rgba(0,0,0,.45)}
.fx-post-meta{margin-top:12px;font-size:14px;color:var(--fx-beige);text-shadow:var(--fx-shadow)}
.fx-post-meta a{color:var(--fx-gold)}
.fx-post-meta span+span::before{content:"·";margin:0 8px;color:var(--fx-beige-dim)}

/* ── 본문 칸 ── */
.fx-post-wrap{width:min(var(--fx-post-w),calc(100% - 2*var(--fx-gutter)));margin:0 auto;padding-top:34px}
.fx-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:30px}
.fx-share a,.fx-share button{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border:0;font:700 13px/1 var(--fx-font);color:#fff;cursor:pointer;transition:background .25s var(--fx-ease),color .25s var(--fx-ease)}
.fx-share svg{width:16px;height:16px;fill:currentColor}
.fx-share-x{background:#1d1d1d}.fx-share-x:hover{background:#000}
.fx-share-fb{background:#3a5795}.fx-share-fb:hover{background:#25375e}
.fx-share-copy{background:var(--fx-beige-dim)}.fx-share-copy:hover{background:var(--fx-gold);color:#1d1205}
.fx-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;height:36px;border:1px solid #c77e19;background:rgba(0,0,0,.4);color:#f7b10a;font:700 13px/1 var(--fx-font);transition:background .2s,color .2s}
.fx-ghost:hover{background:#b06601;color:#ffd36b}
.fx-ghost svg{width:14px;height:14px;fill:currentColor}
.fx-ghost--block{display:flex;width:100%;height:52px;margin-top:44px;font-size:15px}

.fx-post-body{font-size:16px;line-height:1.95;color:var(--fx-beige)}
.fx-post-body::after{content:"";display:table;clear:both}
.fx-post-body p{margin:0 0 1.5em}
.fx-post-body>p.fx-lead{font-weight:700;color:#fff}
.fx-post-body a{color:var(--fx-gold)}
.fx-post-body a:hover{color:#ffc72c}
.fx-post-body strong,.fx-post-body b{color:#fff}
.fx-post-body h2{clear:both;margin:64px 0 22px;font-size:clamp(22px,2.2vw,28px);line-height:1.45;font-weight:800;color:var(--fx-heading);scroll-margin-top:24px}
.fx-post-body h2::before{content:"";display:block;width:50%;height:2px;margin:0 auto 52px;background:linear-gradient(90deg,rgba(201,141,29,0),#c98d1d 28%,#ffd77a 50%,#c98d1d 72%,rgba(201,141,29,0));box-shadow:0 0 14px rgba(248,183,0,.35)}
.fx-post-body h3{margin:34px 0 12px;font-size:19px;line-height:1.55;font-weight:800;color:var(--fx-heading)}
.fx-post-body ul,.fx-post-body ol{margin:0 0 1.6em;padding-left:1.6em}
.fx-post-body ul{list-style:square}
.fx-post-body li{margin:.3em 0}
.fx-post-body li::marker{color:var(--fx-gold)}
.fx-post-body code{font-size:.92em}
.fx-post-body pre{overflow-x:auto}
.fx-post-body table{width:100%;margin:0 0 1.6em;border-collapse:collapse;font-size:14.5px;line-height:1.7}
.fx-post-body caption{caption-side:top;text-align:left;margin-bottom:10px;color:var(--fx-beige-dim);font-size:13px}
.fx-post-body th,.fx-post-body td{padding:10px 14px;border:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:top}
.fx-post-body th{background:rgba(255,255,255,.07);color:#fff;font-weight:800}

/* 그림: 테두리 + 아래 캡션 상자. 작은 그림은 데스크톱에서 오른쪽에 띄운다(WoW pull-right). */
.fx-post-body figure{clear:both;margin:0 0 1.9em}
.fx-post-body figure img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}
.fx-post-body figure a{display:block;cursor:zoom-in}
.fx-post-body figcaption{padding:1em 1.1em;background:rgba(255,255,255,.08);font-size:14px;line-height:1.75;color:rgba(235,222,194,.75)}
.fx-post-body figure.fx-pull{clear:right;float:right;width:46%;margin:6px 0 1.4em 1.75rem}

/* 목차·메모 상자(WoW blockquote): 반투명 판 + 왼쪽 굵은 띠 */
.fx-post-body .fx-box,.fx-post-body .journal-toc,.fx-post-body .journal-note{margin:0 0 1.9em;padding:1.1em 1.4em;background:rgba(255,255,255,.08);border:0;border-left:.5em solid rgba(255,255,255,.2);border-radius:0}
.fx-post-body .fx-box h2,.fx-post-body .journal-toc h2{margin:0 0 10px;font-size:22px}
.fx-post-body .fx-box h2::before,.fx-post-body .journal-toc h2::before{display:none}
.fx-post-body .fx-box ol,.fx-post-body .fx-box ul{margin:0;columns:2;column-gap:36px}
.fx-post-body .fx-box li{break-inside:avoid;font-size:15px}
.fx-post-body .fx-box a,.fx-post-body .journal-toc a{color:var(--fx-beige)}
.fx-post-body .fx-box a:hover,.fx-post-body .journal-toc a:hover{color:var(--fx-gold)}
.fx-post-body .journal-note{font-size:14px;color:var(--fx-beige-dim)}
.fx-post-body .fx-kicker{clear:both;margin:64px 0 4px;font-weight:800;font-size:13px;letter-spacing:.06em;color:var(--fx-beige-dim)}
.fx-post-body .fx-kicker::before{content:"";display:block;width:50%;height:2px;margin:0 auto 52px;background:linear-gradient(90deg,rgba(201,141,29,0),#c98d1d 28%,#ffd77a 50%,#c98d1d 72%,rgba(201,141,29,0));box-shadow:0 0 14px rgba(248,183,0,.35)}
.fx-post-body .fx-kicker+h2{margin-top:4px}
.fx-post-body .fx-kicker+h2::before{display:none}
.fx-post-body .fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.6em}
.fx-post-body .fx-chips a{padding:6px 14px;border:1px solid var(--fx-line);background:var(--fx-panel);color:var(--fx-beige);font-weight:800;font-size:14px}
.fx-post-body .fx-chips a:hover{border-color:var(--fx-gold);color:var(--fx-gold)}
.fx-post-body .fx-cover{max-width:360px;margin:0 auto 1.9em}
.fx-post-body .fx-cover img{border:0;box-shadow:none;image-rendering:pixelated}

/* ── 글 끝: 이전·다음 + 다른 일지 ── */
.fx-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--fx-gutter);margin-top:28px}
.fx-post-nav a{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:center;padding:14px;background:var(--fx-panel);border:1px solid var(--fx-line);transition:border-color .25s var(--fx-ease)}
.fx-post-nav a:hover{border-color:var(--fx-gold)}
.fx-post-nav img{width:120px;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--fx-line)}
.fx-post-nav small{display:block;font-size:12px;letter-spacing:.06em;color:var(--fx-beige-dim)}
.fx-post-nav b{display:block;margin-top:4px;font-size:15px;line-height:1.45;color:var(--fx-gold)}
.fx-post-nav a:hover b{color:#fff}
.fx-post-nav .is-next{text-align:right;grid-template-columns:minmax(0,1fr) 120px}
.fx-post-nav .is-next img{order:2}
.fx-post-nav .is-empty{visibility:hidden}
.fx-post-more{margin-top:72px}
.fx-post-more .fx-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-post-more .fx-tile{aspect-ratio:16/9}

/* ── 그림 크게 보기 ── */
.fx-viewer{max-width:min(1600px,96vw);max-height:94vh;padding:0;border:1px solid var(--fx-line);background:#000}
.fx-viewer::backdrop{background:rgba(8,5,3,.86)}
.fx-viewer img{display:block;max-width:min(1600px,96vw);max-height:calc(94vh - 2px);width:auto;height:auto}
.fx-viewer button{position:absolute;top:8px;right:8px;width:40px;height:40px;border:1px solid var(--fx-line);background:rgba(0,0,0,.6);color:#fff;font-size:20px;cursor:pointer}

@media (max-width:900px){
  .fx-post-hero{height:auto;min-height:0;aspect-ratio:4/3;padding-top:var(--fx-nav-h)}
  .fx-post-head{padding-bottom:24px}
  .fx-post-body figure.fx-pull{float:none;width:auto;margin:0 0 1.9em}
}
@media (max-width:640px){
  .fx-post-hero{aspect-ratio:auto;min-height:340px}
  .fx-post-head h1{font-size:25px}
  .fx-post-meta{font-size:13px}
  .fx-post-body{font-size:15.5px;line-height:1.9}
  .fx-post-body .fx-box ol,.fx-post-body .fx-box ul{columns:1}
  .fx-post-nav{grid-template-columns:1fr}
  .fx-post-nav .is-empty{display:none}
  .fx-post-more .fx-tiles{grid-template-columns:1fr}
}