*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#101c1c;color:#eee9da;font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif;line-height:1.8}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #e8c986;outline-offset:6px}

/* Top Mandatory Probability Notice Banner */
.top-probability-banner{background:#162321;border-bottom:1px solid #c1a868;padding:11px 20px;text-align:center;font-size:13px;color:#f3e4bc;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;z-index:10}
.top-probability-banner .badge{background:#8c2921;color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;letter-spacing:.05em}
.top-probability-banner a{color:#ffdc8b;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.top-probability-banner a:hover{color:#fff}

header{position:sticky;z-index:9;top:0;width:100%;display:flex;gap:24px;align-items:center;padding:18px 6%;border-bottom:1px solid #e8c98630;background:#0b1718f0;backdrop-filter:blur(8px)}
.wordmark{margin-right:auto;font-family:Georgia,serif;letter-spacing:.15em;font-size:18px;font-weight:700}
header nav{display:flex;gap:20px;align-items:center}
header nav a{font-size:14px;color:#d5dfda;transition:color .2s}
header nav a:hover{color:#f3dba8}

.hero{min-height:850px;min-height:100svh;background:linear-gradient(180deg,#0d19162b 0%,#0b151980 47%,#101c1c 100%),url('/hero.png') center top/cover no-repeat;display:flex;align-items:center;justify-content:center;text-align:center;padding:140px 24px 60px}
.hero-copy{max-width:720px;text-shadow:0 3px 28px #000}
.eyebrow{font-size:11px;letter-spacing:.3em;color:#d8c598;text-transform:uppercase}
.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(48px,8vw,108px);line-height:.97;letter-spacing:.055em;margin:28px 0 15px}
.hero h1 span{font-size:1.25em;letter-spacing:.12em;margin-left:.12em}
.korean{letter-spacing:.28em;font-size:16px;color:#ecd7a7}
.tagline{font-size:24px;font-weight:400;line-height:1.5;margin:26px 0}
.cta{display:inline-flex;gap:25px;padding:13px 25px;border:1px solid #d5b375;background:#172b29d9;color:#f3dba8;transition:background .2s}
.cta:hover{background:#345044}
.status{font-size:12px;color:#bbcbc7;margin-top:20px}

.content-section{padding:90px 6% 70px;max-width:1350px;margin:auto}
.content-section.darker{background:#0c1414;border-top:1px solid #20312d;border-bottom:1px solid #20312d;max-width:100%;padding:90px 6%}
.content-section.darker .section-inner{max-width:1350px;margin:auto}
.section-header{text-align:center;margin-bottom:50px}
.section-header h2{font-size:clamp(26px,3.2vw,38px);font-weight:500;line-height:1.4;margin:12px 0 16px;color:#f5eedc}
.section-header .intro{color:#a6b7b0;max-width:760px;margin:auto;font-size:16px}

/* Story Section */
.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:24px;margin-top:40px}
.story-card{background:#142321;border:1px solid #2f443e;padding:28px;border-radius:4px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s}
.story-card:hover{border-color:#c1ab7d}
.story-card .chapter{font-size:12px;letter-spacing:.18em;color:#c1ab7d;text-transform:uppercase}
.story-card h3{font-family:serif;font-size:22px;margin:0;color:#f4ebd9}
.story-card p{color:#bbc8c1;font-size:14px;line-height:1.75;margin:0}
.story-highlight{background:#182b26;border-left:3px solid #c1ab7d;padding:14px 18px;margin-top:8px;font-size:13px;color:#e3dac2}

/* 20 Chapters Campaign Roadmap */
.campaign-showcase{margin-top:50px}
.campaign-showcase h3{font-size:22px;color:#f3e4bc;margin-bottom:12px;border-left:4px solid #c1ab7d;padding-left:12px}
.campaign-showcase p.desc{color:#a9bbb2;font-size:14px;margin-bottom:24px}
.chapter-accordion{display:flex;flex-direction:column;gap:18px;margin-top:20px}
.faction-chapters-box{background:#13211f;border:1px solid #2e443f;border-radius:4px;overflow:hidden}
.faction-chapters-header{padding:18px 24px;background:#182b27;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2e443f}
.faction-chapters-header h4{margin:0;font-size:18px;color:#f3e7ce;font-family:serif}
.faction-chapters-header .badge{font-size:12px;color:#c1ab7d;letter-spacing:.08em}
.faction-chapters-box.human-box{border-top:3px solid #84c5e0}
.faction-chapters-box.elf-box{border-top:3px solid #abd19e}
.faction-chapters-box.demon-box{border-top:3px solid #eaaa87}
.chapter-scroll-table{max-height:420px;overflow-y:auto}
.chapter-scroll-table::-webkit-scrollbar{width:6px}
.chapter-scroll-table::-webkit-scrollbar-thumb{background:#38524a;border-radius:3px}

/* Factions Detail */
.faction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
.faction-card{background:#142220;border:1px solid #2d413b;padding:32px;border-radius:4px;display:flex;flex-direction:column}
.faction-card.human{border-top:3px solid #84c5e0}
.faction-card.elf{border-top:3px solid #abd19e}
.faction-card.demon{border-top:3px solid #eaaa87}
.faction-card .tag{font-size:11px;letter-spacing:.15em;color:#b1a481}
.faction-card h3{font-family:serif;font-size:28px;margin:12px 0 6px;color:#f5ede0}
.faction-card .subtitle{font-size:14px;color:#c9c2ad;margin-bottom:18px}
.faction-card p{color:#b7c4bd;font-size:14px;line-height:1.7}
.unit-list{margin-top:20px;padding-top:16px;border-top:1px dashed #344843}
.unit-list strong{display:block;font-size:13px;color:#ddd2b4;margin-bottom:8px}
.unit-list span{font-size:12.5px;color:#9bb0a6;line-height:1.6}

/* Recipes Section */
.recipe-group{margin-bottom:40px}
.recipe-group h3{font-size:20px;color:#edd9a8;border-left:4px solid #c1ab7d;padding-left:12px;margin-bottom:18px}
.table-responsive{overflow-x:auto;margin-bottom:20px}
.game-table{width:100%;border-collapse:collapse;font-size:13.5px;background:#142321;border:1px solid #2c403b}
.game-table th{background:#1a2e2b;color:#f1e6ce;padding:12px 16px;border-bottom:1px solid #3c544e;text-align:left;font-weight:600}
.game-table td{padding:12px 16px;border-bottom:1px solid #233430;color:#c4cfc9}
.game-table tr:hover td{background:#182b27}
.tier-tag{display:inline-block;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:600}
.tier-1{background:#2a3a36;color:#a5bfb5}
.tier-2{background:#1d394a;color:#7dc1e8}
.tier-3{background:#3b2d54;color:#c9a4f4}
.tier-4{background:#4b3a1a;color:#f0c66a}

/* Probability Section */
.probability-box{background:#142422;border:1px solid #314943;border-radius:4px;padding:32px;margin-bottom:30px}
.probability-box h3{font-size:20px;color:#edd9a8;margin-top:0;margin-bottom:14px}
.probability-box p{color:#bbc8c1;font-size:14px;line-height:1.7}
.prob-notice{border-left:3px solid #e2a046;background:#1b2320;padding:14px 18px;margin-bottom:24px;font-size:13.5px;color:#edd7b2}

.closing{text-align:center;padding:50px 24px 90px}
.closing p:not(.eyebrow){color:#a6b7b0}

footer{padding:32px 6%;border-top:1px solid #b3a47b30;color:#aab9b2;font-size:12px;background:#0c1515}
footer strong{font-weight:500;letter-spacing:.06em}
footer p{margin:10px 0;line-height:1.6}
footer nav{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}
footer nav a{color:#bcc7c2;text-decoration:none}
footer nav a:hover{color:#ffdc8b}
footer small{color:#87958f}

.document{max-width:850px;padding:130px 24px 80px;margin:auto}
.document h1{font-size:32px}
.document h2{font-size:22px;margin-top:35px}
.document p,.document li{color:#c3cdc7}
.document a{text-decoration:underline;color:#e8c986}
.document .notice{border-left:3px solid #bea374;padding:16px 20px;background:#1c2b29}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero.key-art-hero{min-height:0;display:block;padding:0 0 40px;background:#101515}
.key-art{display:block;width:100%;height:auto;max-width:1920px;margin:auto}
.key-art-hero .hero-copy{padding:24px 20px 0;text-align:center;margin:auto}
.key-art-hero .korean{margin:0 0 12px;font-size:22px}
.key-art-hero .cta{margin-top:8px}
.key-art-hero .status{margin-top:18px}

/* The navigation floats over the artwork, matching the company homepage. */
.site-header{position:fixed;background:linear-gradient(180deg,#07110c66,transparent);backdrop-filter:none;border-color:#e8c98626;text-shadow:0 2px 10px #000;transition:background .25s,backdrop-filter .25s}
.site-header.scrolled{background:#0b1718b8;backdrop-filter:blur(12px)}
.site-header nav a{color:#f5eedc}
.content-section{scroll-margin-top:var(--header-height,100px)}
.story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.faction-chapters-header{cursor:pointer;list-style:none;gap:16px;color:#f3e7ce;font-size:18px}
.faction-chapters-header::-webkit-details-marker{display:none}
.faction-chapters-header::after{content:'+';font-size:24px;color:#d8c598}
.faction-chapters-box[open]>.faction-chapters-header::after{content:'−'}
.faction-chapters-header .badge{margin-left:auto;white-space:nowrap}
.faction-chapters-header:focus-visible{outline:2px solid #e8c986;outline-offset:-4px}
.chapter-scroll-table{overflow:auto}

@media(max-width:1000px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .site-header{gap:8px;padding:12px 16px}
  .site-header nav{gap:10px 14px}
  .site-header nav a{font-size:12px}
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .faction-chapters-header{flex-wrap:wrap;padding:16px;font-size:16px;gap:6px}
  .faction-chapters-header .badge{margin-left:0;font-size:11px}
  .chapter-scroll-table .game-table{min-width:570px}
  .probability-box{padding:20px 16px}
}

@media(max-width:860px){
  .faction-grid{grid-template-columns:1fr}
  header{flex-wrap:wrap;gap:12px;padding:15px 20px}
  header nav{flex-wrap:wrap;gap:12px}
}

@media(max-width:640px){
  header{padding:14px 16px;gap:14px;font-size:12px}
  .wordmark{font-size:14px;letter-spacing:.08em}
  .hero{background-position:center top;padding-top:100px}
  .hero h1{font-size:48px}
  .content-section{padding:50px 5% 40px}
  .story-grid{grid-template-columns:1fr}
  .story-card{padding:20px}
  .faction-card{padding:22px}
  .game-table th,.game-table td{padding:10px 12px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}