@charset "utf-8";
/* ============================================================
   강호 온라인 · 江湖 ONLINE — official site
   Design: 먹과 금(ink & gold). 세로 한자 난외주(欄外註), 주사(朱砂) 인장,
           전면 아트 + 비대칭 편집 레이아웃.
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root{
  --ink:#07080a;
  --ink-2:#0b0d10;
  --ink-3:#101318;
  --panel:#12151a;

  --paper:#ece3d1;      /* 본문 */
  --paper-2:#b8ad98;    /* 보조 */
  --dim:#7a7264;        /* 흐린 */
  --faint:#4c4740;

  --gold:#c6a86c;
  --gold-2:#8d7846;
  --cin:#9b3339;        /* 주사 */
  --cin-2:#c85049;
  --jade:#6f8f7e;

  --line:rgba(232,220,193,.13);
  --line-2:rgba(232,220,193,.07);

  --f-disp:"Song Myung","Nanum Myeongjo","Gowun Batang",AppleMyungjo,Batang,serif;
  --f-body:"Noto Serif KR","Nanum Myeongjo",AppleMyungjo,Batang,serif;
  --f-lat:"Cormorant Garamond","Song Myung",Georgia,serif;

  --head:64px;
  --pad:clamp(20px,5vw,72px);
  --col:min(1280px,92vw);
  --read:min(74ch,100%);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--f-body);font-weight:300;font-size:17px;line-height:1.95;
  word-break:keep-all;overflow-wrap:anywhere;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:400;margin:0;line-height:1.16;letter-spacing:-.02em}
p{margin:0}
::selection{background:rgba(155,51,57,.45);color:#fff}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* 종이 결 — 아주 얇게 */
body::after{
  content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:14px;z-index:9999;background:var(--cin);color:#fff;padding:12px 18px;font-size:13px;transition:top .2s}
.skip:focus{top:14px}

/* ---------- 3. 헤더 ---------- */
.hd{
  position:fixed;top:0;left:0;right:0;z-index:800;height:var(--head);
  display:flex;align-items:center;gap:24px;padding:0 var(--pad);
  transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.hd::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,7,.82),rgba(5,6,7,0));
  transition:opacity .4s;
}
.hd.stuck{background:rgba(7,8,10,.9);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line-2)}
.hd.stuck::before{opacity:0}

.bd{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.bd .seal{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--cin);color:#f3e6d4;font-family:var(--f-disp);font-size:16px;
  transform:rotate(-3deg);box-shadow:0 2px 14px rgba(155,51,57,.4);
}
.bd b{font-family:var(--f-disp);font-weight:400;font-size:17px;letter-spacing:.06em;color:var(--paper)}
.bd i{font-style:normal;font-family:var(--f-lat);font-size:10px;letter-spacing:.32em;color:var(--gold-2);display:block;margin-top:-2px}

.nv{margin-left:auto;display:flex;gap:2px}
.nv a{
  position:relative;padding:8px 13px;font-size:13.5px;color:var(--paper-2);
  letter-spacing:.02em;transition:color .25s;
}
.nv a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;
  background:var(--cin-2);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nv a:hover{color:var(--paper)}
.nv a:hover::after{transform:scaleX(1)}
.nv a[aria-current]{color:var(--gold)}
.nv a[aria-current]::after{transform:scaleX(1);background:var(--gold)}

.burger{margin-left:auto;display:none;width:42px;height:42px;place-items:center}
.burger span{display:block;width:20px;height:1px;background:var(--paper);position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1px;background:var(--paper);transition:.3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:790;background:rgba(6,7,9,.97);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:2px;padding:var(--head) 8vw 8vh;
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.drawer.on{opacity:1;visibility:visible}
.drawer a{
  font-family:var(--f-disp);font-size:clamp(26px,7vw,38px);color:var(--paper-2);
  padding:10px 0;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:14px;
  opacity:0;transform:translateY(14px);
}
.drawer.on a{animation:dIn .5s var(--ease) forwards}
.drawer a small{font-family:var(--f-lat);font-size:11px;letter-spacing:.3em;color:var(--gold-2)}
.drawer a:hover,.drawer a[aria-current]{color:var(--gold)}
@keyframes dIn{to{opacity:1;transform:none}}

/* 읽기 진행선 */
.prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:850;
  background:linear-gradient(90deg,var(--cin),var(--gold));box-shadow:0 0 12px rgba(198,168,108,.5)}

/* ---------- 4. 이미지 그릇 ---------- */
/* ⚠️ isolation 이 있어야 한다 — 아래에서 img 에 z-index 를 주기 때문이다.
   가두지 않으면 그 z-index 가 바깥까지 올라가 부모의 가림막(.bleed::after 등)을
   그림이 덮는다. 실측으로 잡혔다: 전면 그림의 어둠막이 통째로 사라졌다. */
.im{position:relative;overflow:hidden;background:#0a0b0d;isolation:isolate}
/* 흐린 밑그림은 그림 "뒤"에 둔다 — 앞에 두면 .ready 가 한 번이라도 안 붙는 순간
   (JS 실패 · load 이벤트 유실) 작품이 통째로 가려진다. z-index 로 순서를 못 박는다. */
.im>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.im::before{
  content:"";position:absolute;inset:0;z-index:0;background-image:var(--lq);background-size:cover;background-position:center;
  filter:blur(18px);transform:scale(1.08);opacity:1;transition:opacity .6s .05s;
}
.im.ready::before{opacity:0}

/* ---------- 5. 홈 키비주얼 ---------- */
.kv{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--head) + 4vh) var(--pad) 8vh;overflow:hidden}
.kv-bg{position:absolute;inset:-6%;z-index:0}
.kv-bg img{width:100%;height:100%;object-fit:cover;filter:blur(46px) saturate(.75) brightness(.42);transform:scale(1.12)}
.kv::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 34%,transparent 34%,rgba(6,7,9,.82) 100%),
             linear-gradient(180deg,rgba(6,7,9,.7),transparent 26%,transparent 58%,var(--ink) 100%);
}
.kv-in{position:relative;z-index:2;width:var(--col);margin:0 auto;text-align:center}
.kv-art{
  position:relative;max-width:1180px;margin:0 auto;aspect-ratio:1672/941;
  border:1px solid rgba(232,220,193,.1);
  box-shadow:0 48px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6);
  opacity:0;transform:scale(.985);animation:kvIn 1.5s .15s var(--ease) forwards;
}
@keyframes kvIn{to{opacity:1;transform:none}}
.kv-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,rgba(7,8,10,.55) 100%)}
.kv-corner{position:absolute;width:18px;height:18px;border:1px solid var(--gold-2);opacity:.55;z-index:3}
.kv-corner.tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.kv-corner.tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.kv-corner.bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.kv-corner.br{bottom:-1px;right:-1px;border-left:0;border-top:0}

.kv-tag{margin:34px auto 0;max-width:46ch;font-size:clamp(15px,1.55vw,18.5px);color:var(--paper-2);line-height:2}
.kv-tag b{color:var(--paper);font-weight:400}
.kv-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;
  opacity:0;animation:kvIn .9s 1.05s var(--ease) forwards}
.kv-scroll{margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--f-lat);font-size:10px;letter-spacing:.42em;color:var(--faint)}
.kv-scroll span{display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--gold-2),transparent);
  animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 버튼 */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;font-size:13.5px;letter-spacing:.06em;
  border:1px solid var(--line);color:var(--paper-2);overflow:hidden;isolation:isolate;
  transition:color .3s,border-color .3s,transform .3s var(--ease);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cin);
  transform:translateY(101%);transition:transform .38s var(--ease)}
.btn:hover{color:#fff;border-color:var(--cin);transform:translateY(-2px)}
.btn:hover::before{transform:none}
.btn.gold{border-color:rgba(198,168,108,.42);color:var(--gold)}
.btn.gold::before{background:var(--gold)}
.btn.gold:hover{color:#14100a;border-color:var(--gold)}
.btn i{font-style:normal;font-family:var(--f-lat);font-size:11px;letter-spacing:.24em;opacity:.7}

/* ---------- 6. 페이지 히어로 ---------- */
.ph{position:relative;min-height:clamp(440px,74svh,760px);display:flex;align-items:flex-end;
  padding:calc(var(--head) + 7vh) var(--pad) clamp(46px,7vh,88px);overflow:hidden;isolation:isolate}
.ph .im{position:absolute;inset:0;z-index:-2}
.ph .im img{transform:scale(1.06);animation:phZoom 16s var(--ease) forwards}
@keyframes phZoom{to{transform:scale(1)}}
.ph::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,7,9,.9) 0%,rgba(6,7,9,.34) 34%,rgba(6,7,9,.86) 78%,var(--ink) 100%),
             linear-gradient(94deg,rgba(6,7,9,.86) 4%,rgba(6,7,9,.1) 56%);
}
.ph-in{position:relative;width:var(--col);margin:0 auto}
.ph h1{font-size:clamp(46px,8.4vw,112px);letter-spacing:-.045em;margin:14px 0 0}
.ph-sub{margin-top:24px;max-width:56ch;font-size:clamp(15.5px,1.6vw,19px);color:var(--paper-2);line-height:2.05}
.ph-glyph{
  position:absolute;right:var(--pad);bottom:-.14em;z-index:-1;
  font-family:var(--f-disp);font-size:clamp(150px,26vw,380px);line-height:.8;
  color:rgba(232,220,193,.055);pointer-events:none;user-select:none;
}

/* 세로 한자 난외주 */
.rail{
  position:absolute;top:calc(var(--head) + 4vh);left:calc(var(--pad) * .38);z-index:2;
  writing-mode:vertical-rl;font-family:var(--f-disp);font-size:12.5px;letter-spacing:.42em;
  color:rgba(198,168,108,.5);display:flex;align-items:center;gap:16px;
}
.rail::after{content:"";width:1px;height:clamp(50px,11vh,120px);background:linear-gradient(180deg,rgba(198,168,108,.45),transparent)}

.eyebrow{
  font-family:var(--f-lat);font-size:11px;font-weight:500;letter-spacing:.38em;
  text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:clamp(18px,3vw,44px);height:1px;background:var(--cin-2)}

/* ---------- 7. 본문 틀 ---------- */
.wrap{width:var(--col);margin:0 auto;padding:clamp(72px,11vh,148px) 0}
.wrap.tight{padding-top:clamp(48px,7vh,86px)}
.prose{max-width:var(--read);margin:0 auto}
.prose.left{margin-left:0}
.prose p{margin:0 0 1.55em;color:#cfc6b6;font-size:clamp(16px,1.42vw,17.6px)}
.prose p:last-child{margin-bottom:0}
.prose p.lead{font-size:clamp(18.5px,2.05vw,23px);color:#efe6d5;line-height:1.94;font-weight:300}
.prose p.small{font-size:15px;color:var(--dim)}
.prose strong{font-weight:500;color:var(--paper)}
.prose em{font-style:normal;color:var(--gold);font-weight:400}
/* ⚠️ 한글에서 띄우는 두문자(float drop cap)는 **낱말을 쪼갠다** — ::first-letter 가 무는
   것은 음절 하나라, 「강호 온라인은」이 「강    호 온라인은」으로 읽힌다(실측으로 잡혔다).
   그래서 띄우지 않고 **키워서 줄에 앉히는** 방식을 쓴다 — 낱말이 안 갈라진다. */
.drop::first-letter{
  font-family:var(--f-disp);font-size:2.55em;line-height:.9;
  color:var(--gold);padding-right:.03em;vertical-align:-.17em;
}

/* 장(章) 제목 */
.chap{margin:0 0 clamp(34px,5vh,64px)}
.chap.mid{margin-top:clamp(70px,10vh,128px)}
.chap h2{font-size:clamp(30px,4.6vw,60px);margin-top:16px;letter-spacing:-.035em;max-width:22ch}
.chap .no{font-family:var(--f-lat);font-size:11px;letter-spacing:.4em;color:var(--gold-2)}
.chap hr{width:74px;height:1px;background:var(--cin);border:0;margin:22px 0 0}
.chap p{margin-top:20px;max-width:58ch;color:var(--paper-2);font-size:clamp(15.5px,1.5vw,17.5px)}

h3.sub{font-size:clamp(22px,2.7vw,32px);margin:clamp(48px,6vh,78px) 0 20px;letter-spacing:-.03em}
h3.sub::before{content:"";display:block;width:26px;height:1px;background:var(--gold-2);margin-bottom:18px}
h4.mini{font-family:var(--f-body);font-weight:500;font-size:15px;letter-spacing:.02em;color:var(--gold);margin:34px 0 10px}

/* 인용 */
.pull{
  margin:clamp(44px,6vh,72px) 0;padding:6px 0 6px clamp(22px,3.4vw,42px);
  border-left:2px solid var(--cin);
  font-family:var(--f-disp);font-size:clamp(21px,2.9vw,33px);line-height:1.62;color:#f2e9d8;letter-spacing:-.02em;
}
.pull small{display:block;margin-top:16px;font-family:var(--f-body);font-size:13.5px;letter-spacing:.06em;color:var(--dim)}

/* 인장 인용 — 화면 전폭 띠 */
.band{
  position:relative;margin:clamp(72px,11vh,140px) 0;padding:clamp(60px,9vh,116px) var(--pad);
  text-align:center;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:radial-gradient(70% 130% at 50% 50%,rgba(155,51,57,.11),transparent 68%);
}
.band .stamp{
  width:46px;height:46px;margin:0 auto 26px;display:grid;place-items:center;
  border:1.5px solid rgba(155,51,57,.72);color:var(--cin-2);
  font-family:var(--f-disp);font-size:21px;transform:rotate(-4deg);
}
.band q{display:block;quotes:none;font-family:var(--f-disp);font-size:clamp(24px,3.9vw,46px);
  line-height:1.52;color:#f5ecda;max-width:22ch;margin:0 auto;letter-spacing:-.03em}
.band cite{display:block;margin-top:24px;font-style:normal;font-family:var(--f-lat);
  font-size:10.5px;letter-spacing:.4em;color:var(--gold-2);text-transform:uppercase}

/* 옛 기록 상자 */
.relic{
  margin:clamp(34px,4.5vh,54px) 0;padding:clamp(24px,3.4vw,34px);
  border:1px solid rgba(198,168,108,.2);background:linear-gradient(135deg,rgba(198,168,108,.05),transparent 62%);
  position:relative;
}
.relic::before{content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:linear-gradient(180deg,var(--gold-2),transparent)}
.relic .src{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-2)}
.relic .src.ko{font-family:var(--f-body);font-size:11.5px;letter-spacing:.22em}
.relic q{display:block;quotes:none;margin-top:14px;font-family:var(--f-disp);
  font-size:clamp(18px,2.2vw,25px);line-height:1.7;color:#e9dfcd}

/* 주(註) */
.note{margin:clamp(30px,4vh,48px) 0;padding:22px 26px;border:1px solid var(--line);
  background:rgba(232,220,193,.02);color:var(--paper-2);font-size:15.5px}
.note b{display:block;color:var(--gold);font-weight:500;font-size:13px;letter-spacing:.06em;margin-bottom:8px}

/* ---------- 8. 좌우 분할 (아트 고정) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start;
  margin:clamp(62px,9vh,116px) 0}
.split.rev>.split-art{order:2}
.split-art{position:sticky;top:calc(var(--head) + 4vh);margin:0}
.split-art .im{aspect-ratio:1672/941;border:1px solid var(--line-2)}
.split-art.tall .im{aspect-ratio:1122/1402}
.split-art figcaption{margin-top:14px;font-size:12.5px;color:var(--dim);letter-spacing:.04em;
  display:flex;gap:10px;align-items:baseline}
.split-art figcaption b{font-family:var(--f-disp);font-weight:400;color:var(--gold-2);font-size:14px}
.split-txt{padding-top:4px}
.split-txt>*:first-child{margin-top:0}

/* ---------- 9. 전폭 아트 ---------- */
.bleed{position:relative;margin:clamp(70px,10vh,132px) calc(50% - 50vw);width:100vw;overflow:hidden}
.bleed .im{aspect-ratio:1672/941;max-height:82vh}
/* ⚠️ 그림이 밝으면 이 가림막이 글의 유일한 바탕이다 — 실측으로 잡혔다:
   밝은 강마을 그림 위에서 아래 22~56% 구간이 투명이라 흰 글씨가 흰 하늘에 묻혔다.
   세로는 글이 앉는 아래쪽을 일찍·짙게 덮고, 가로는 글이 있는 왼쪽을 덧댄다. */
.bleed::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,var(--ink),rgba(7,8,10,.30) 20%,rgba(7,8,10,.26) 38%,
                    rgba(7,8,10,.72) 62%,rgba(7,8,10,.94) 84%,var(--ink) 100%),
    linear-gradient(90deg,rgba(7,8,10,.72) 0%,rgba(7,8,10,.30) 46%,transparent 72%)}
.bleed-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--pad) clamp(34px,6vh,70px);
  text-shadow:0 1px 2px rgba(7,8,10,.7),0 2px 22px rgba(7,8,10,.85)}
.bleed-cap .in{width:var(--col);margin:0 auto}
.bleed-cap h3{font-size:clamp(25px,3.7vw,46px);margin-top:14px;letter-spacing:-.035em;max-width:20ch}
.bleed-cap p{margin-top:14px;max-width:50ch;color:var(--paper-2);font-size:clamp(14.5px,1.4vw,16.5px)}

/* ---------- 10. 카드 격자 ---------- */
.grid{display:grid;gap:clamp(12px,1.4vw,20px);margin:clamp(40px,6vh,72px) 0}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;padding:clamp(24px,2.6vw,34px);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(232,220,193,.022),rgba(232,220,193,.004));
  transition:border-color .35s,transform .35s var(--ease),background .35s;overflow:hidden;
}
.card::before{content:"";position:absolute;left:0;top:0;width:2px;height:46px;background:var(--cin);
  transition:height .4s var(--ease)}
.card:hover{border-color:rgba(198,168,108,.3);transform:translateY(-3px)}
.card:hover::before{height:100%}
.card .no{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.34em;color:var(--gold-2);text-transform:uppercase}
.card h3{font-size:clamp(19px,2vw,24px);margin:11px 0 12px;letter-spacing:-.025em}
.card p{font-size:14.5px;color:#9d9689;line-height:1.86}
.card .tags{margin-top:16px;font-size:12.5px;color:var(--gold-2);letter-spacing:.06em}

/* 링크 카드(아트 포함) */
.lcard{position:relative;display:block;border:1px solid var(--line-2);overflow:hidden;
  transition:border-color .35s,transform .4s var(--ease)}
.lcard .im{aspect-ratio:16/10}
.lcard .im img{transition:transform 1s var(--ease),opacity .7s}
.lcard:hover{border-color:rgba(198,168,108,.4);transform:translateY(-4px)}
.lcard:hover .im img{transform:scale(1.07)}
/* ⚠️ 카드 그림은 밝은 것이 절반이다 — 옛 값(18%에서 92%까지 한 번에)은 글이 앉는
   아래 45% 구간에서 아직 절반쯤 투명이라, 밝은 아침 하늘 위에서 설명글이 사라졌다. */
.lcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 10%,rgba(7,8,10,.50) 40%,
             rgba(7,8,10,.88) 66%,rgba(7,8,10,.97) 100%)}
.lcard .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.2vw,28px);
  text-shadow:0 1px 2px rgba(7,8,10,.65),0 2px 16px rgba(7,8,10,.8)}
.lcard .cap .no{font-family:var(--f-lat);font-size:10px;letter-spacing:.34em;color:var(--gold)}
.lcard .cap h3{font-size:clamp(20px,2.1vw,26px);margin:8px 0 7px}
.lcard .cap p{font-size:13.5px;color:#c6bfb2;line-height:1.75}
.lcard .cap .go{margin-top:13px;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.3em;
  color:var(--gold-2);display:flex;align-items:center;gap:8px;transition:gap .3s,color .3s}
.lcard:hover .cap .go{gap:14px;color:var(--gold)}

/* ---------- 11. 흐름 / 표 ---------- */
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin:clamp(34px,5vh,58px) 0}
.flow .step{flex:1 1 130px;padding:18px 16px;border:1px solid var(--line-2);position:relative;
  background:rgba(232,220,193,.014)}
.flow .step b{display:block;font-family:var(--f-lat);font-size:10px;letter-spacing:.3em;color:var(--gold-2)}
.flow .step span{display:block;margin-top:8px;font-family:var(--f-disp);font-size:17px;color:var(--paper)}
.flow .step small{display:block;margin-top:5px;font-size:12.5px;color:var(--dim);line-height:1.6}

table.tb{width:100%;border-collapse:collapse;margin:clamp(30px,4vh,50px) 0;font-size:15px}
table.tb th,table.tb td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line-2);vertical-align:top}
table.tb thead th{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-2);font-weight:500;border-bottom-color:var(--line);padding-bottom:12px}
table.tb tbody th{font-family:var(--f-disp);font-weight:400;font-size:17px;color:var(--paper);white-space:nowrap}
table.tb td{color:#a8a092;line-height:1.82}
table.tb tbody tr:hover{background:rgba(232,220,193,.018)}

/* 용어 목록 */
.terms{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);margin:clamp(34px,5vh,56px) 0}
.terms>div{background:var(--ink);padding:clamp(22px,2.4vw,30px)}
.terms .k{font-family:var(--f-disp);font-size:clamp(19px,2vw,23px);color:var(--paper)}
.terms .k em{font-style:normal;font-size:.62em;color:var(--gold-2);margin-left:9px;letter-spacing:.14em}
.terms p{margin-top:11px;font-size:14.5px;color:#9d9689;line-height:1.84}

/* 무기 4종 */
.arms{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);margin:clamp(36px,5vh,62px) 0}
.arms>div{background:var(--ink-2);padding:clamp(24px,2.6vw,34px);text-align:center;transition:background .35s}
.arms>div:hover{background:var(--ink-3)}
.arms .gl{font-family:var(--f-disp);font-size:clamp(42px,5.6vw,68px);line-height:1;color:var(--gold);opacity:.9}
.arms h3{font-size:20px;margin:14px 0 10px}
.arms p{font-size:13.5px;color:#918a7e;line-height:1.8;text-align:left}

/* ---------- 12. 문파 ---------- */
.sect{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(26px,4vw,62px);
  align-items:start;padding:clamp(48px,7vh,90px) 0;border-top:1px solid var(--line-2);
}
.sect:first-of-type{border-top:0}
.sect .por{position:relative}
.sect .por .im{aspect-ratio:1122/1402;border:1px solid var(--line-2)}
.sect .por::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(7,8,10,.78) 100%)}
.sect .por .han{
  position:absolute;top:16px;left:16px;z-index:3;writing-mode:vertical-rl;
  font-family:var(--f-disp);font-size:clamp(22px,2.4vw,29px);letter-spacing:.14em;
  color:#f0e6d3;text-shadow:0 2px 16px rgba(0,0,0,.9);
}
.sect .por .lat{position:absolute;left:18px;bottom:16px;z-index:3;font-family:var(--f-lat);
  font-size:10.5px;letter-spacing:.36em;color:var(--gold)}
.sect-h{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.sect-h h2{font-size:clamp(32px,4.4vw,54px);letter-spacing:-.04em}
.sect-h .tag{font-size:13px;color:var(--cin-2);letter-spacing:.14em}
.sect .tagline{margin-top:14px;font-family:var(--f-disp);font-size:clamp(17px,1.9vw,22px);color:var(--gold);line-height:1.66}
.sect .body{margin-top:24px}
.sect .body p{color:#bcb3a5;font-size:16px;margin:0 0 1.4em}
.sect-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);margin-top:30px}
.sect-meta>div{background:var(--ink);padding:20px}
.sect-meta b{display:block;font-family:var(--f-lat);font-size:9.5px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold-2);margin-bottom:9px}
.sect-meta span{font-size:14px;color:#a49c8e;line-height:1.78}
.arts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.arts div{border:1px solid rgba(198,168,108,.16);padding:16px 18px;background:rgba(198,168,108,.026)}
.arts b{display:block;font-family:var(--f-disp);font-weight:400;font-size:17.5px;color:var(--paper)}
.arts small{display:block;margin-top:6px;font-size:12.5px;color:var(--dim);line-height:1.7}
.arts .k{font-family:var(--f-lat);font-size:9.5px;letter-spacing:.28em;color:var(--gold-2);display:block;margin-bottom:7px}

/* 사대검절 */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px);margin:clamp(40px,6vh,70px) 0}
.four figure{margin:0;position:relative}
.four .im{aspect-ratio:1122/1402;border:1px solid var(--line-2)}
.four .im img{transition:transform 1.1s var(--ease),opacity .7s}
.four figure:hover .im img{transform:scale(1.05)}
.four figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(7,8,10,.94) 96%)}
.four figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px}
.four figcaption b{display:block;font-family:var(--f-disp);font-weight:400;font-size:clamp(19px,2.1vw,25px);color:#f2e8d6}
.four figcaption .al{display:block;margin-top:6px;font-size:12px;letter-spacing:.2em;color:var(--gold)}
.four figcaption p{margin-top:10px;font-size:13px;color:#a29a8d;line-height:1.72}

/* ---------- 13. 시스템 상세 칩 네비 ---------- */
.chips{position:sticky;top:var(--head);z-index:600;background:rgba(7,8,10,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-2);padding:0 var(--pad)}
.chips .in{width:var(--col);margin:0 auto;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.chips .in::-webkit-scrollbar{display:none}
.chips a{flex:0 0 auto;padding:15px 14px;font-size:13px;color:var(--dim);white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.chips a:hover{color:var(--paper-2)}
.chips a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}

.crumb{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--faint);display:flex;gap:10px;align-items:center;margin-bottom:18px}
.crumb a:hover{color:var(--gold)}

/* ---------- 14. 페이저 / 푸터 ---------- */
.pager{width:var(--col);margin:0 auto;padding:clamp(40px,6vh,72px) 0 clamp(70px,10vh,120px);
  display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line-2)}
.pager a{padding:26px 28px;border:1px solid var(--line-2);transition:border-color .3s,background .3s}
.pager a:hover{border-color:rgba(198,168,108,.35);background:rgba(232,220,193,.02)}
.pager a small{font-family:var(--f-lat);font-size:10px;letter-spacing:.32em;color:var(--gold-2);text-transform:uppercase}
.pager a b{display:block;margin-top:9px;font-family:var(--f-disp);font-weight:400;font-size:clamp(19px,2.2vw,26px)}
.pager a.nx{text-align:right}

.ft{border-top:1px solid var(--line-2);padding:clamp(48px,7vh,80px) var(--pad) 46px;
  background:linear-gradient(180deg,transparent,rgba(232,220,193,.014))}
.ft .in{width:var(--col);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,60px)}
.ft .mk b{font-family:var(--f-disp);font-weight:400;font-size:22px;letter-spacing:.06em;display:block}
.ft .mk i{font-style:normal;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.36em;color:var(--gold-2)}
.ft .mk p{margin-top:18px;max-width:38ch;font-size:14px;color:var(--dim);line-height:1.9}
.ft h4{font-family:var(--f-lat);font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold-2);font-weight:500;margin:0 0 16px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ft ul a{font-size:14px;color:var(--paper-2);transition:color .25s}
.ft ul a:hover{color:var(--gold)}
.ft .btm{width:var(--col);margin:clamp(40px,6vh,64px) auto 0;padding-top:24px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--faint);letter-spacing:.04em}

/* ---------- 15. 스크롤 연출 ---------- */
/* 숨기는 것은 자바스크립트가 살아 있을 때뿐이다 — `html.js` 는 <head> 인라인에서 붙는다.
   스크립트가 안 돌면(꺼짐 · 오류 · 전송 실패) 글과 그림은 그대로 읽힌다. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.js .rv.d4{transition-delay:.32s}.js .rv.d5{transition-delay:.4s}.js .rv.d6{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* 맨 위로 */
.top{position:fixed;right:22px;bottom:22px;z-index:700;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(10,11,13,.85);backdrop-filter:blur(10px);color:var(--paper-2);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.35s var(--ease)}
.top.on{opacity:1;visibility:visible;transform:none}
.top:hover{border-color:var(--gold-2);color:var(--gold)}

/* ---------- 16. 반응형 ---------- */
@media (max-width:1080px){
  .nv{display:none}.burger{display:grid}
  .g4{grid-template-columns:repeat(2,1fr)}
  .four{grid-template-columns:repeat(2,1fr)}
  .sect{grid-template-columns:1fr;gap:26px}
  .sect .por{max-width:420px}
  .ft .in{grid-template-columns:1fr 1fr}
  .ft .mk{grid-column:1/-1}
}
@media (max-width:860px){
  :root{--head:58px}
  body{font-size:16.5px}
  .split{grid-template-columns:1fr;gap:26px}
  .split.rev>.split-art{order:0}
  .split-art{position:static}
  .g3,.g2{grid-template-columns:1fr}
  .terms,.arms{grid-template-columns:1fr}
  .arms>div{text-align:left}
  .sect-meta{grid-template-columns:1fr}
  .arts{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.nx{text-align:left}
  .rail{display:none}
  .kv-art{aspect-ratio:auto}
  table.tb{font-size:14px}
  table.tb th,table.tb td{padding:13px 10px}
  table.tb tbody th{white-space:normal}
}
@media (max-width:560px){
  .four{grid-template-columns:1fr}
  .ft .in{grid-template-columns:1fr}
  .bleed .im{aspect-ratio:4/3}
  .bleed .im img{object-position:60% center}
}