/* 무명강호 공식 사이트 공통 꾸밈
   방향: 무협 영화 포스터 + 한지 칙서. 먹색 바탕, 핏빛 빨강은 강조 한 곳씩, 금색은 가는 선.
   글꼴: 함렛(제목·숫자, 굵게) / 프리텐다드(본문). 간격은 8px 배수. 모서리는 픽셀 계단. */
:root {
  --ink: #0b0908;
  --ink-2: #14100d;
  --ink-3: #1d1712;
  --line: #3b2f23;
  --paper: #f1e8d6;
  --paper-2: #e4d6bb;
  --paper-ink: #1a1410;
  --muted: #b3a690;
  --blood: #b01e1a;
  --blood-hi: #dc3a30;
  --gold: #c9a35a;
  --gold-hi: #e8c77e;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --px: 4px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: hidden;
}
/* 먹 번짐 같은 잔 결 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); text-underline-offset: 3px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.sm { font-family: "Hahmlet", serif; font-weight: 700; }

/* 픽셀 계단 모서리 */
.px {
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}
/* 금 테 픽셀 액자 */
.frame { padding: var(--px); background: linear-gradient(var(--gold), #7d6232); }
.frame > * { display: block; }

/* 낙관(붉은 도장) */
.seal {
  display: inline-grid; place-items: center;
  width: 2.2em; height: 2.2em;
  background: var(--blood); color: var(--paper);
  font-family: "Hahmlet", serif; font-size: 18px; line-height: 1;
  writing-mode: vertical-rl; letter-spacing: 2px;
  box-shadow: inset 0 0 0 3px var(--blood), inset 0 0 0 4px rgba(241,232,214,.7);
  transform: rotate(-4deg);
}

/* ── 머리 띠 ── */
.top {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 9, 8, .94);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: var(--s2); }
.logo { font-family: "Hahmlet", serif; font-size: 24px; color: var(--paper); text-decoration: none; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
.logo b { color: var(--blood-hi); font-weight: 400; }
.logo .seal { font-size: 9px; width: 22px; height: 22px; box-shadow: none; }
.top nav { display: flex; gap: var(--s3); font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .top nav a:focus-visible { color: var(--gold-hi); }
.top nav .go { color: var(--paper); border-bottom: 2px solid var(--blood); }

/* ── 단추 ── */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Hahmlet", serif; font-size: 20px; letter-spacing: 1px;
  padding: 14px 28px;
  color: var(--paper); background: var(--blood); text-decoration: none; border: 0;
  box-shadow: inset 0 -4px 0 #5f0f0c, inset 0 4px 0 var(--blood-hi);
  cursor: pointer;
}
.btn::after { content: ""; width: 8px; height: 8px; background: var(--paper); box-shadow: 4px 4px 0 var(--gold-hi); }
.btn:hover { background: var(--blood-hi); }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.btn.wait { background: var(--ink-3); box-shadow: inset 0 0 0 2px var(--blood); cursor: default; }
.btn.wait::after { background: var(--blood); box-shadow: none; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── 첫 화면 ── */
.hero { position: relative; background: #000; overflow: hidden; }
.hero > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--ink)); pointer-events: none; }
/* 떠오르는 불티(픽셀 네모) */
.embers { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.embers i { position: absolute; bottom: -8px; width: 4px; height: 4px; background: var(--blood-hi); box-shadow: 0 0 6px var(--blood-hi); animation: rise linear infinite; opacity: 0; }
.embers i:nth-child(1) { left: 58%; animation-duration: 7s; }
.embers i:nth-child(2) { left: 64%; animation-duration: 9s; animation-delay: 2s; background: var(--gold-hi); box-shadow: 0 0 6px var(--gold-hi); }
.embers i:nth-child(3) { left: 71%; animation-duration: 8s; animation-delay: 4s; }
.embers i:nth-child(4) { left: 79%; animation-duration: 10s; animation-delay: 1s; }
.embers i:nth-child(5) { left: 86%; animation-duration: 7.5s; animation-delay: 3s; background: var(--gold-hi); box-shadow: 0 0 6px var(--gold-hi); }
.embers i:nth-child(6) { left: 92%; animation-duration: 9.5s; animation-delay: 5s; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-40px, -90vh); opacity: 0; }
}

.lede { position: relative; z-index: 2; padding: var(--s4) 0 var(--s12); }
.lede .wrap { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: end; }
.campaign { font-size: clamp(40px, 11vw, 96px); line-height: 1.15; margin: 0; letter-spacing: -1px; }
.campaign em { font-style: normal; color: var(--blood-hi); }
.lede-side { display: grid; gap: var(--s3); justify-items: start; }
.fixed-line { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--gold); font-size: 17px; letter-spacing: 3px; }
.fixed-line::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.meta { margin: 0; color: var(--muted); font-size: 15px; }

/* ── 구역 공통 ── */
section { padding: var(--s12) 0; position: relative; }
.kicker { display: flex; align-items: center; gap: 12px; color: var(--gold); font-size: 14px; letter-spacing: 4px; margin: 0 0 var(--s2); }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--blood); box-shadow: 4px 4px 0 var(--gold); }
.h2 { font-family: "Hahmlet", serif; font-weight: 700; font-size: clamp(30px, 6.4vw, 52px); line-height: 1.25; margin: 0 0 var(--s3); }
.h2 em { font-style: normal; color: var(--blood-hi); }
.body-lg { font-size: 18px; max-width: 34em; color: var(--paper-2); margin: 0; }
.body-lg strong { color: var(--paper); font-weight: 700; box-shadow: inset 0 -6px 0 rgba(176, 30, 26, .55); }

/* 픽셀 산 능선 구분선 */
.ridge { height: 24px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 24V20h8v-4h8v-4h8V8h8v4h8v4h8v-8h8V4h8V0h8v4h8v8h8v12z'/%3E%3C/svg%3E") repeat-x bottom / 96px 24px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 24V20h8v-4h8v-4h8V8h8v4h8v4h8v-8h8V4h8V0h8v4h8v8h8v12z'/%3E%3C/svg%3E") repeat-x bottom / 96px 24px;
}
.ridge.to-paper { background: var(--paper); margin-top: -24px; position: relative; z-index: 1; }

/* ── 세 막 ── */
.acts-head { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
.acts {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%;
  gap: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 16px var(--s2); margin: 0 -16px;
  scrollbar-width: none;
}
.acts::-webkit-scrollbar { display: none; }
.act { scroll-snap-align: center; margin: 0; }
.act .frame img { aspect-ratio: 2 / 3; object-fit: cover; width: 100%; }
.act figcaption { padding-top: var(--s2); display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; }
.act .no { font-family: "Hahmlet", serif; color: var(--blood-hi); font-size: 15px; }
.act .tt { font-family: "Hahmlet", serif; font-size: 26px; line-height: 1.2; }
.act .ds { grid-column: 1 / -1; color: var(--muted); font-size: 15px; }
.swipe-hint { color: var(--muted); font-size: 13px; margin: var(--s1) 0 0; }

/* ── 실제 화면 ── */
.real { background: var(--ink-2); border-block: 1px solid var(--line); }
.shots { display: grid; gap: var(--s2); }
.shot { margin: 0; position: relative; }
.shot img { width: 100%; image-rendering: pixelated; }
.shot .tag { position: absolute; left: 12px; top: 12px; background: rgba(11,9,8,.85); color: var(--paper); font-size: 12px; padding: 2px 8px; border-left: 3px solid var(--blood); letter-spacing: 1px; }
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: 15px; }
.shot figcaption b { color: var(--paper); font-weight: 700; margin-right: 8px; }

/* ── 네 갈래 특징(장 구성) ── */
.chapters { display: grid; gap: var(--s12); }
.chapter { display: grid; gap: var(--s3); align-items: center; }
.chapter .frame img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.chapter .num { font-family: "Hahmlet", serif; font-size: 72px; line-height: 1; color: var(--gold); opacity: .85; display: block; margin-bottom: var(--s1); }
.chapter h3 { font-family: "Hahmlet", serif; font-weight: 700; font-size: clamp(28px, 5.6vw, 40px); line-height: 1.25; margin: 0 0 var(--s2); }
.chapter p { margin: 0; color: var(--paper-2); }
.chips { list-style: none; padding: 0; margin: var(--s2) 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 14px; padding: 2px 10px; border: 1px solid var(--line); color: var(--muted); }

/* ── 숫자 띠 ── */
.numbers { padding: var(--s8) 0; border-block: 1px solid var(--line); }
.numbers dl { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s2); }
.numbers div { border-left: 2px solid var(--blood); padding-left: var(--s2); }
.numbers dt { order: 2; color: var(--muted); font-size: 14px; }
.numbers dd { margin: 0; font-family: "Hahmlet", serif; font-size: 48px; line-height: 1; color: var(--paper); }
.numbers dd small { font-size: 18px; color: var(--gold); margin-left: 4px; }
.numbers div { display: flex; flex-direction: column-reverse; gap: 6px; }

/* ── 한지 칙서: 뽑기 없는 강호 ── */
.edict { background: var(--paper); color: var(--paper-ink); padding: var(--s12) 0; position: relative; }
.edict::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: radial-gradient(ellipse at 20% 10%, rgba(160,120,60,.18), transparent 60%), radial-gradient(ellipse at 90% 90%, rgba(120,80,40,.16), transparent 55%); }
.edict .wrap { position: relative; display: grid; gap: var(--s4); }
.edict .kicker { color: #7a5a24; }
.edict .h2 { color: var(--paper-ink); }
.edict .h2 em { color: var(--blood); }
.edict ol { list-style: none; margin: 0; padding: 0; counter-reset: e; display: grid; }
.edict li { counter-increment: e; display: grid; grid-template-columns: 40px 1fr; gap: var(--s2); padding: var(--s2) 0; border-top: 1px solid rgba(26,20,16,.2); font-size: 18px; }
.edict li:last-child { border-bottom: 1px solid rgba(26,20,16,.2); }
.edict li::before { content: counter(e, cjk-ideographic); font-family: "Hahmlet", serif; color: var(--blood); font-size: 22px; line-height: 1.5; }
.edict .stamp { justify-self: end; font-size: 28px; }
.edict .note { font-size: 14px; color: #5d5040; margin: 0; }

/* ── 트레일러 자리 ── */
.trailer { aspect-ratio: 2.39 / 1; position: relative; display: grid; place-items: center; background: #000; overflow: hidden; }
.trailer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; filter: grayscale(.4); }
.trailer .play { position: relative; display: grid; justify-items: center; gap: 10px; color: var(--paper); text-align: center; }
.trailer .play i { width: 48px; height: 48px; display: block; background: var(--blood);
  clip-path: polygon(0 0, 0 100%, 25% 100%, 25% 87.5%, 50% 87.5%, 50% 75%, 75% 75%, 75% 62.5%, 100% 62.5%, 100% 37.5%, 75% 37.5%, 75% 25%, 50% 25%, 50% 12.5%, 25% 12.5%, 25% 0); }
.trailer .play span { font-family: "Hahmlet", serif; font-size: 22px; }
.trailer .play small { color: var(--muted); font-size: 14px; }

/* ── 마지막 부름 ── */
.final { padding-bottom: var(--s16); }
.final .wrap { display: grid; gap: var(--s6); align-items: center; }
.final .frame { max-width: 360px; }
.final .frame img { aspect-ratio: 2 / 3; object-fit: cover; }
.final .h2 { font-size: clamp(34px, 8vw, 64px); }
.final .btn-note { display: block; margin-top: var(--s2); font-size: 14px; color: var(--muted); }

/* ── 바닥 ── */
footer { border-top: 1px solid var(--line); padding: var(--s6) 0 var(--s8); font-size: 14px; color: var(--muted); }
footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); }
footer .links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
footer p { margin: 6px 0; }

/* ── 문서 쪽(개인정보·계정 삭제) ── */
.doc-page { padding: var(--s8) 0 var(--s12); }
.doc { max-width: 860px; }
.doc h1 { font-family: "Hahmlet", serif; font-weight: 700; font-size: clamp(32px, 7vw, 48px); line-height: 1.25; margin: 0 0 var(--s3); }
.doc h2 { font-family: "Hahmlet", serif; font-weight: 700; font-size: clamp(22px, 4.6vw, 28px); color: var(--gold-hi); margin: var(--s6) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.doc p, .doc li { color: var(--paper-2); }
.doc strong { color: var(--paper); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 4px 0; }
.table-wrap { overflow-x: auto; margin: var(--s2) 0; border: 1px solid var(--line); }
.doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.65; }
.doc th, .doc td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.doc th { background: var(--ink-3); color: var(--gold); font-weight: 400; white-space: nowrap; }
.doc td:first-child { color: var(--paper); white-space: nowrap; }
.doc tr:last-child td { border-bottom: 0; }
.todo { display: inline-block; background: #3a1210; color: #ffb3a8; padding: 0 8px; border: 1px dashed var(--blood-hi); font-size: .92em; line-height: 1.6; white-space: normal; }
.notice { background: var(--ink-3); border-left: 3px solid var(--blood); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); color: var(--paper-2); font-size: 15px; }
.notice b { color: var(--paper); }
.doc-meta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s1) var(--s3); }
.doc-meta div { display: grid; grid-template-columns: 8em 1fr; gap: var(--s1); padding: 6px 0; border-bottom: 1px solid var(--line); }
.doc-meta dt { color: var(--muted); font-size: 14px; }
.doc-meta dd { margin: 0; }
.app-id { font-size: 18px; margin: 0 0 var(--s4); }
.steps { display: grid; gap: var(--s2); }
.step { background: var(--ink-3); padding: var(--s3); border-top: 3px solid var(--blood); }
.step h2 { border: 0; padding: 0; margin: 0 0 var(--s1); color: var(--paper); }
.step ol, .step ul { margin: 0; }
.step p { margin: 0 0 var(--s1); }
.warn { font-family: "Hahmlet", serif; font-size: 22px; color: var(--blood-hi) !important; margin: var(--s4) 0; }
.en { font-size: 15px; }
.more { margin-top: var(--s6); font-size: 15px; }

/* ── 넓은 화면 ── */
@media (min-width: 760px) {
  .lede { padding-top: 0; margin-top: calc(-1 * var(--s8)); }
  .lede .wrap { grid-template-columns: 1.4fr 1fr; gap: var(--s8); }
  .lede-side { padding-bottom: 14px; }
  .acts { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: var(--s4); }
  .act:nth-child(2) { transform: translateY(var(--s6)); }
  .swipe-hint { display: none; }
  .acts-head { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s8); }
  .shots { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
  .shots .shot:first-child { grid-row: span 2; }
  .shots .shot:first-child img { aspect-ratio: auto; }
  .chapter { grid-template-columns: 7fr 5fr; gap: var(--s8); }
  .chapter:nth-child(even) .frame { order: 2; }
  .numbers dl { grid-template-columns: repeat(5, 1fr); }
  .edict .wrap { grid-template-columns: 1fr 1.3fr; gap: var(--s8); align-items: start; }
  .edict .stamp { justify-self: start; margin-top: var(--s4); }
  .final .wrap { grid-template-columns: 360px 1fr; gap: var(--s12); }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .top nav { gap: var(--s2); font-size: 14px; }
  .top nav .hide-sm { display: none; }
  section { padding: var(--s8) 0; }
  .chapters { gap: var(--s8); }
  .chapter .num { font-size: 64px; }
  .lede { padding: var(--s3) 0 var(--s4); }
  .lede .wrap { gap: var(--s3); }
  .fixed-line { letter-spacing: 1px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .embers { display: none; }
  .btn.wait::after { animation: none; }
}

/* 트레일러 영상 */
.trailer-video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; display: block; }
.trailer-note { margin: var(--s2) 0 0; color: var(--muted); font-size: 14px; }

/* 시험판 받기 */
.download { background: var(--ink-2); border-block: 1px solid var(--line); }
.build-ver { margin: var(--s2) 0 var(--s4); color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.dl-grid { display: grid; gap: var(--s3); }
.dl { background: var(--ink-3); padding: var(--s3); border-top: 3px solid var(--blood); display: grid; gap: var(--s2); align-content: start; }
.dl header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--s2); }
.dl h3 { font-family: "Hahmlet", serif; font-weight: 700; font-size: 30px; margin: 0; line-height: 1.2; }
.dl-spec { color: var(--muted); font-size: 14px; }
.dl .btn { justify-self: start; }
.dl ol { margin: 0; padding-left: 1.3em; color: var(--paper-2); font-size: 15px; }
.dl ol b { color: var(--paper); }
.keys { margin-top: var(--s4); border: 1px solid var(--line); padding: 0 var(--s3); }
.keys summary { cursor: pointer; padding: var(--s2) 0; color: var(--gold-hi); font-size: 16px; }
.keys dl { margin: 0 0 var(--s3); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 var(--s3); }
.keys dl div { display: grid; grid-template-columns: 9em 1fr; gap: var(--s1); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.keys dt { color: var(--muted); }
.keys dd { margin: 0; }
.dl-note { margin: var(--s3) 0 0; color: var(--muted); font-size: 14px; }
@media (min-width: 760px) { .dl-grid { grid-template-columns: 1fr 1fr; } }

/* 글꼴 굵기 맞춤(함렛) */
.logo, .logo b, .btn, .act .no, .act .tt, .numbers dd, .chapter .num, .warn, .trailer .play span { font-weight: 700; }
.campaign { font-weight: 800; letter-spacing: -1.5px; }
.seal { font-weight: 600; }
.kicker { font-weight: 600; }
.seal { letter-spacing: 0; line-height: 1; width: 2.4em; height: 2.4em; font-size: 16px; }
.logo .seal { width: 22px; height: 22px; font-size: 9px; }
.edict .stamp { font-size: 26px; }
.campaign { font-size: clamp(38px, 10.5vw, 88px); }
@media (min-width: 760px) { .campaign { font-size: clamp(44px, 5.6vw, 84px); } }
.seal { font-family: "Pretendard Variable", Pretendard, sans-serif; font-weight: 800; }