/* 육목 원정대 게임 소개 전용. 게임의 하늘·구름·나무 판·크림 종이 색을 따른다. */
.hx-page{--hx-sky:#c3e6ff;--hx-sky2:#a9d8fb;--hx-ink:#3b2d4f;--hx-wood:#b8703f;--hx-wood2:#d9955e;--hx-cream:#fdf1d8;--hx-peach:#f9ab8b;--hx-gold:#f2b33d;--hx-night:#2e2742;--hx-muted:#6b5f78;color:var(--hx-ink);background:var(--hx-cream)}
.hx-page img{image-rendering:pixelated}
.hx-page h2{font-size:clamp(30px,3.6vw,44px);line-height:1.25;letter-spacing:-1.6px;margin:12px 0 0}
.hx-kicker{font:12px/1.5 monospace;letter-spacing:2px;text-transform:uppercase;margin:0;display:flex;align-items:center;gap:10px;color:#6e5a86}
.hx-kicker:before{content:'';width:8px;height:8px;background:currentColor}
.hx-hero .hx-kicker:before{display:none}
.hx-lead{font-size:16px;line-height:1.85;color:var(--hx-muted);margin:18px 0 0;max-width:640px}
.hx-section{padding-block:88px;border-bottom:2px solid var(--hx-ink)}
.hx-heading{margin-bottom:42px}
.hx-heading-row{display:flex;align-items:end;justify-content:space-between;gap:24px}
.hx-heading-row>p{font-size:13px;color:var(--hx-muted);margin:0}
.hx-button{min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:11px 22px;border:3px solid var(--hx-ink);border-radius:10px;background:var(--hx-cream);font-size:15px;font-weight:800;box-shadow:0 5px 0 var(--hx-ink);transition:transform .12s,box-shadow .12s;color:var(--hx-ink)}
.hx-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--hx-ink)}
.hx-button:active{transform:translateY(4px);box-shadow:0 1px 0 var(--hx-ink)}
.hx-button-peach{background:var(--hx-peach)}
.hx-button:disabled{cursor:not-allowed;background:#ebe3d4;color:#7d7186;box-shadow:0 3px 0 #a99db2;border-color:#a99db2;transform:none}

/* Hero */
.hx-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--hx-sky) 0%,#d6eeff 70%,#eef7ff 100%);border-bottom:2px solid var(--hx-ink)}
.hx-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-block:56px 110px}
.hx-breadcrumb{font-size:13px;margin-bottom:26px}.hx-breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.hx-dot{width:10px;height:10px;background:#5fbf6a;border:2px solid var(--hx-ink);border-radius:50%}
.hx-status{font:700 12px/1 system-ui,sans-serif;letter-spacing:0;background:var(--hx-cream);border:2px solid var(--hx-ink);border-radius:6px;padding:5px 9px;color:var(--hx-ink)}
.hx-logo{width:min(520px,100%);height:auto;margin:30px 0 4px}
.hx-hero h1{font-size:clamp(40px,5vw,64px);letter-spacing:-2.5px;line-height:1.15;margin:12px 0 18px;font-weight:900}
.hx-tagline{font-size:clamp(19px,2vw,24px);font-weight:800;margin:0 0 14px;letter-spacing:-.6px}
.hx-desc{font-size:16px;line-height:1.85;color:#4f4462;margin:0 0 30px}
.hx-actions{display:flex;gap:14px;flex-wrap:wrap}
.hx-phone{margin:0;justify-self:center;width:min(330px,100%);border:4px solid var(--hx-ink);border-radius:28px;overflow:hidden;background:var(--hx-sky);box-shadow:10px 10px 0 #7fa9d6;transform:rotate(2deg)}
.hx-phone img{width:100%;height:auto}
.hx-clouds{position:absolute;inset:0;pointer-events:none}
.hx-cloud{position:absolute;height:28px;background:#fff;border-radius:2px;box-shadow:0 4px 0 #b9c3ea}
.hx-cloud:before,.hx-cloud:after{content:'';position:absolute;background:#fff;bottom:100%}
.hx-cloud-a{width:150px;top:70px;right:46%;animation:hx-drift 9s ease-in-out infinite}.hx-cloud-a:before{left:24px;width:56px;height:24px}.hx-cloud-a:after{left:70px;width:40px;height:14px}
.hx-cloud-b{width:110px;top:180px;right:4%;opacity:.9;animation:hx-drift 11s ease-in-out infinite reverse}.hx-cloud-b:before{left:18px;width:44px;height:18px}.hx-cloud-b:after{left:56px;width:30px;height:10px}
.hx-cloud-c{width:200px;bottom:120px;left:-40px;opacity:.85}.hx-cloud-c:before{left:40px;width:70px;height:30px}.hx-cloud-c:after{left:110px;width:50px;height:18px}
.hx-stones{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;justify-content:center;gap:10px;align-items:center;background:repeating-linear-gradient(90deg,var(--hx-wood) 0 46px,#a7633a 46px 48px);border-top:3px solid var(--hx-ink)}
.hx-stones span{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7b6c95 0 18%,#3b2d4f 20%);border:2px solid #20172d;position:relative}
.hx-stones span+span:before{content:'';position:absolute;right:100%;top:50%;width:12px;height:3px;background:var(--hx-gold);margin-right:0}
@keyframes hx-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(18px)}}

/* Section nav */
.hx-section-nav{background:var(--hx-ink);position:sticky;top:0;z-index:5}
.hx-section-nav .wrap{display:flex;gap:6px 26px;overflow-x:auto;scrollbar-width:none;padding-block:13px}
.hx-section-nav a{color:#f4ecdc;font-size:13px;font-weight:700;white-space:nowrap;padding:2px 0}
.hx-section-nav a:hover{color:var(--hx-gold)}

/* Rules */
.hx-rules{background:var(--hx-cream)}
.hx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hx-steps li{background:#fffaf0;border:3px solid var(--hx-ink);border-radius:14px;padding:26px 26px 28px;box-shadow:0 6px 0 var(--hx-ink)}
.hx-step-no{font:700 13px monospace;color:var(--hx-wood);letter-spacing:1px}
.hx-steps h3{font-size:22px;letter-spacing:-.6px;margin:16px 0 8px}
.hx-steps p{font-size:14.5px;line-height:1.8;color:var(--hx-muted);margin:0}
.hx-mini{margin-top:16px;width:132px;height:132px;display:grid;grid-template-columns:repeat(3,1fr);background:#e9c58f;border:3px solid var(--hx-ink);border-radius:6px;padding:10px;gap:4px;background-image:linear-gradient(#8d6a3f 2px,transparent 2px),linear-gradient(90deg,#8d6a3f 2px,transparent 2px);background-size:37px 37px;background-position:22px 22px}
.hx-mini i{border-radius:50%}
.hx-mini i.b{background:radial-gradient(circle at 35% 30%,#7b6c95 0 16%,#3b2d4f 18%);border:2px solid #20172d}
.hx-mini i.w{background:radial-gradient(circle at 35% 30%,#fff 0 20%,#efe4cc 22%);border:2px solid #9b8c76}
.hx-mini i.n{box-shadow:0 0 0 3px var(--hx-gold)}
.hx-mini-line,.hx-energy{margin-block:51px 35px!important}
.hx-mini-line{grid-template-columns:repeat(6,1fr);width:100%;max-width:260px;height:62px;align-items:center;background-size:40px 40px;background-position:-2px 26px}
.hx-mini-line i{aspect-ratio:1;box-shadow:0 0 0 3px #ffe48a}
.hx-energy{margin-top:16px;display:flex;align-items:center;gap:4px;height:62px;padding:0 12px;background:var(--hx-wood);border:3px solid var(--hx-ink);border-radius:8px;max-width:280px}
.hx-energy i{flex:1;height:16px;background:#f6ecd8;border:2px solid var(--hx-ink)}
.hx-energy i.on{background:var(--hx-gold)}
.hx-energy b{font:800 18px monospace;color:#fff;margin-left:6px;text-shadow:2px 2px 0 var(--hx-ink)}
.hx-bolt{color:var(--hx-gold);font-size:18px;margin-right:4px;text-shadow:1px 1px 0 var(--hx-ink)}

/* Tools */
.hx-tools{background:#f6e3c2;background-image:radial-gradient(#b8703f22 1.5px,transparent 1.5px);background-size:18px 18px}
.hx-tools-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.hx-count{margin:28px 0 0;display:grid;gap:12px}
.hx-count div{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;font-size:14px}
.hx-count dt{display:flex;align-items:center;gap:10px;font-weight:800}
.hx-count dd{margin:0;color:var(--hx-muted)}
.hx-kind{width:22px;height:22px;border:3px solid var(--hx-ink);display:inline-flex;align-items:center;justify-content:center;background:#fff;font-size:13px;line-height:1;flex-shrink:0}
.hx-kind-round{border-radius:50%;background:radial-gradient(circle,var(--hx-ink) 0 40%,#fff 45%)}
.hx-kind-square{border-radius:4px;background:linear-gradient(135deg,#fff 0 44%,var(--hx-ink) 44% 56%,#fff 56%)}
.hx-kind-time{border-radius:4px;background:#ffe9a8;color:#a4701b;font-weight:900}
.hx-note{margin:24px 0 0;font-size:14px;font-weight:700;background:var(--hx-cream);border:2px dashed var(--hx-wood);border-radius:8px;padding:12px 16px;display:inline-block}
.hx-tool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hx-tool-list li{display:flex;gap:16px;align-items:center;background:var(--hx-cream);border:3px solid var(--hx-ink);border-radius:12px;padding:14px 16px;box-shadow:0 4px 0 var(--hx-ink)}
.hx-tool-icon{flex-shrink:0;width:72px;height:72px;border-radius:10px;background:#3a2e47;border:3px solid #6b4a32;display:flex;align-items:center;justify-content:center}
.hx-tool-icon img{width:56px;height:56px}
.hx-tool-list h3{font-size:17px;margin:0 0 3px}
.hx-tool-list p{font-size:13.5px;line-height:1.6;color:var(--hx-muted);margin:0}

/* Story */
.hx-story{background:var(--hx-night);color:#f4ecdc;background-image:radial-gradient(#ffffff26 1px,transparent 1.2px),radial-gradient(#ffe48a40 1px,transparent 1.2px);background-size:46px 46px,83px 83px;background-position:0 0,20px 31px}
.hx-heading-light .hx-kicker{color:#c8b9ec}
.hx-prologue{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hx-prologue li{margin:0}
.hx-prologue img{width:100%;height:auto;border:3px solid #0f0b17;border-radius:8px;box-shadow:0 0 0 2px #6a5c8a}
.hx-prologue p{font-size:14.5px;line-height:1.75;margin:14px 2px 0;color:#eae1f7}
.hx-story-body{max-width:680px;margin:46px 0 0;font-size:16px;line-height:1.95;color:#d9cfea}
.hx-story-body p{margin:0 0 14px}
.hx-crew-title{font-size:22px;margin:54px 0 20px;color:#fff;letter-spacing:-.5px}
.hx-crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hx-crew li{background:#3d3456;border:2px solid #6a5c8a;border-radius:12px;padding:18px 16px}
.hx-portrait{display:flex;width:84px;height:84px;align-items:center;justify-content:center;background:var(--hx-sky);border:3px solid var(--hx-ink);border-radius:10px;margin-bottom:12px}
.hx-portrait img{width:72px;height:72px}
.hx-crew h4{font-size:18px;margin:0 0 6px;color:#fff}
.hx-crew small{font:11px monospace;letter-spacing:1px;color:#b9a9df;margin-left:4px}
.hx-crew p{font-size:13px;line-height:1.7;color:#cfc4e2;margin:0}

/* Worlds */
.hx-worlds{background:var(--hx-sky);background-image:linear-gradient(180deg,var(--hx-sky),#dff1ff)}
.hx-world-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hx-world{background:var(--hx-cream);border:3px solid var(--hx-ink);border-radius:14px;padding:0 0 18px;box-shadow:0 6px 0 var(--hx-ink);overflow:hidden;display:flex;flex-direction:column}
.hx-world-top{display:flex;flex-direction:column;gap:2px;padding:14px 16px;color:#fff;border-bottom:3px solid var(--hx-ink);margin-bottom:16px}
.hx-world-top span{font:12px monospace;letter-spacing:1px;opacity:.9}
.hx-world-top strong{font-size:19px;letter-spacing:-.5px}
.hx-world-moss .hx-world-top{background:#8a7a64}.hx-world-hoo .hx-world-top{background:#3f8c5a}.hx-world-conch .hx-world-top{background:#3f86c6}.hx-world-bolt .hx-world-top{background:#c58a3e}.hx-world-mira .hx-world-top{background:#4b3f78}
.hx-world .hx-portrait,.hx-world h3,.hx-world p,.hx-world-kind{margin-inline:16px}
.hx-world h3{font-size:17px;margin-top:0;margin-bottom:6px}
.hx-world p{font-size:13px;line-height:1.7;color:var(--hx-muted);margin-top:0;margin-bottom:14px;flex:1}
.hx-world-kind{align-self:flex-start;font-size:12px;font-weight:800;background:#ffe9a8;border:2px solid var(--hx-ink);border-radius:6px;padding:3px 8px}

/* Gameplay */
.hx-gameplay{background:var(--hx-cream)}
.hx-screens{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.hx-screen{margin:0}
.hx-screen-link{display:block;position:relative;border:3px solid var(--hx-ink);border-radius:14px;overflow:hidden;background:var(--hx-sky);box-shadow:0 5px 0 var(--hx-ink);transition:transform .15s}
.hx-screen-link:hover{transform:translateY(-4px)}
.hx-screen-link img{width:100%;height:auto}
.hx-zoom{position:absolute;right:8px;bottom:8px;background:var(--hx-ink);color:#fff;font:11px monospace;padding:4px 8px;border-radius:5px;opacity:0;transition:opacity .15s}
.hx-screen-link:hover .hx-zoom,.hx-screen-link:focus-visible .hx-zoom{opacity:1}
.hx-screen figcaption{padding:14px 2px 0}
.hx-screen figcaption span{font:11px monospace;letter-spacing:1px;color:var(--hx-wood)}
.hx-screen h3{font-size:17px;margin:4px 0 6px}
.hx-screen p{font-size:13px;line-height:1.7;color:var(--hx-muted);margin:0}
.hx-capture-note{font-size:12px;color:var(--hx-muted);margin:30px 0 0}

/* Modes */
.hx-modes{background:#f6e3c2}
.hx-mode-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.hx-mode-list li{background:var(--hx-cream);border:3px solid var(--hx-ink);border-radius:14px;padding:22px;box-shadow:0 5px 0 var(--hx-ink)}
.hx-mode-no{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center;background:var(--hx-peach);border:3px solid var(--hx-ink);border-radius:50%;font:800 13px monospace}
.hx-mode-list h3{font-size:20px;margin:14px 0 8px}
.hx-mode-list p{font-size:14px;line-height:1.75;color:var(--hx-muted);margin:0}

/* Release */
.hx-release{background:var(--hx-cream);border-bottom:0}
.hx-release-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.hx-release-grid>div>p:not(.hx-kicker){font-size:15px;line-height:1.85;color:var(--hx-muted)}
.hx-store{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hx-store-note{font-size:13px!important;margin-top:16px}
.hx-info{background:#fffaf0;border:3px solid var(--hx-ink);border-radius:14px;padding:26px;box-shadow:0 6px 0 var(--hx-ink)}
.hx-info-label{font:12px monospace;letter-spacing:2px;color:var(--hx-wood)}
.hx-info dl{margin:12px 0 0}
.hx-info dl div{display:grid;grid-template-columns:90px 1fr;gap:14px;padding:12px 0;border-bottom:1px dashed #d6c3a2;font-size:14px}
.hx-info dt{color:var(--hx-muted)}
.hx-info dd{margin:0;font-weight:600}
.hx-help-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;font-size:13px;font-weight:700}
.hx-help-links a{text-decoration:underline;text-underline-offset:4px}

/* Lightbox */
.hx-lightbox{border:3px solid var(--hx-ink);border-radius:14px;padding:0;background:var(--hx-cream);width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:hidden}
.hx-lightbox::backdrop{background:#1d1630d9}
.hx-lightbox-top,.hx-lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px}
.hx-lightbox-top h2{font-size:16px!important;margin:0!important;letter-spacing:0!important}
.hx-lightbox button{background:var(--hx-cream);border:2px solid var(--hx-ink);border-radius:8px;padding:6px 12px;font-weight:700;color:var(--hx-ink)}
.hx-lightbox-bottom p{margin:0;font:13px monospace}
.hx-lightbox-image{width:100%;height:auto;max-height:calc(100vh - 150px);object-fit:contain;background:var(--hx-sky)}

@media(max-width:1100px){
  .hx-screens{grid-template-columns:repeat(3,1fr)}
  .hx-world-list{grid-template-columns:repeat(3,1fr)}
  .hx-crew{grid-template-columns:repeat(3,1fr)}
  .hx-mode-list{grid-template-columns:repeat(2,1fr)}
  .hx-tools-grid{grid-template-columns:1fr;gap:36px}
}
@media(max-width:760px){
  .hx-section{padding-block:56px}
  .hx-hero-inner{grid-template-columns:1fr;padding-block:34px 96px;gap:34px}
  .hx-phone{width:min(260px,80%);transform:rotate(1.5deg)}
  .hx-logo{margin-top:22px}
  .hx-desc{font-size:15px}
  .hx-desc br{display:none}
  .hx-stones{height:52px;gap:6px}.hx-stones span{width:26px;height:26px}.hx-stones span+span:before{width:8px}
  .hx-steps{grid-template-columns:1fr}
  .hx-heading-row{flex-direction:column;align-items:start}
  .hx-tool-list{grid-template-columns:1fr}
  .hx-count div{grid-template-columns:1fr;gap:2px}
  .hx-prologue{grid-template-columns:1fr 1fr;gap:16px}
  .hx-prologue p{font-size:13.5px}
  .hx-crew{grid-template-columns:1fr 1fr}
  .hx-world-list{grid-template-columns:1fr 1fr}
  .hx-screens{grid-template-columns:1fr 1fr;gap:14px}
  .hx-mode-list{grid-template-columns:1fr}
  .hx-release-grid{grid-template-columns:1fr;gap:36px}
  .hx-cloud-a{right:8%;top:40px}.hx-cloud-b{display:none}
}
@media(max-width:420px){
  .hx-crew,.hx-world-list{grid-template-columns:1fr}
  .hx-actions .hx-button{width:100%}
  .hx-info dl div{grid-template-columns:72px 1fr}
}
@media(prefers-reduced-motion:reduce){.hx-cloud{animation:none!important}.hx-button,.hx-screen-link{transition:none}}

/* Online */
.hx-online{background:#2f2745;color:#f4ecdc;background-image:linear-gradient(180deg,#342b49 0%,#4a3c6b 55%,#f3b8a6 140%)}
.hx-online .hx-lead{color:#d9cfea;margin:0;max-width:420px}
.hx-online-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start}
.hx-online-shot:nth-child(odd){transform:rotate(-1.5deg)}
.hx-online-shot:nth-child(even){transform:rotate(1.5deg);margin-top:36px}
.hx-online .hx-screen-link{border-color:#14101d;box-shadow:0 6px 0 #14101d,0 0 0 3px #f2b33d33}
.hx-online .hx-screen figcaption span{color:var(--hx-gold)}
.hx-online .hx-screen h3{color:#fff}
.hx-online .hx-screen p{color:#d4c9e6}
@media(max-width:1100px){.hx-online-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.hx-online-grid{gap:16px}.hx-online-shot:nth-child(even){margin-top:24px}.hx-online .hx-lead br{display:none}}
.hx-online .hx-heading-row>p{font-size:15px;line-height:1.8}

/* Hero key art (게임 스프라이트로 만든 일러스트) */
.hx-hero{background:#2c2442}
.hx-keyart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 82%;z-index:0}
.hx-hero:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#211a35e6 0%,#2a2144b3 28%,#2a214440 46%,transparent 58%);pointer-events:none}
.hx-hero-inner{grid-template-columns:1fr;min-height:600px;padding-block:56px 120px;z-index:2}
.hx-stones{z-index:2}
.hx-hero-copy{max-width:540px}
.hx-hero .hx-breadcrumb a,.hx-hero .hx-kicker{color:#efe6ff}
.hx-hero h1{color:#fff;text-shadow:4px 4px 0 #1b1430}
.hx-hero .hx-tagline{color:#ffe7a8;text-shadow:2px 2px 0 #1b1430}
.hx-hero .hx-desc{color:#e4daf4}
.hx-logo{filter:drop-shadow(4px 4px 0 #1b1430)}
@media(max-width:760px){
  .hx-keyart{position:relative;display:block;height:250px;object-position:88% 40%}
  .hx-hero:before{display:none}
  .hx-hero-inner{min-height:0;padding-block:34px 100px}
}
/* 꾸미기 (판 세트·프로필·상점) */
.hx-style{background:linear-gradient(180deg,#cfe8f7 0%,#e9f4fb 100%)}
.hx-style .hx-heading-row>p{max-width:460px;line-height:1.8}
.hx-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
@media(max-width:1100px){.hx-style-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.hx-style-grid{grid-template-columns:1fr 1fr;gap:14px}}