@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");

:root {
  --navy: #0d2150;
  --ink: #15264a;
  --sub: #4b5d80;
  --sky-1: #2386e6;
  --sky-2: #57b4f4;
  --sky-3: #bfe6fd;
  --sun: #ffcf23;
  --sun-edge: #c98600;
  --err: #cf2f22;
  --dirt-1: #7a4a23;
  --dirt-2: #4f2d14;
  --font: "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --title: "Jua", "Pretendard Variable", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--sky-2);
  font: 400 17px/1.65 var(--font); letter-spacing: -.01em;
  word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--navy); }

.test-band { background: var(--navy); color: #cfe0f5; font-size: 13px; text-align: center; padding: 3px 12px; position: relative; z-index: 31; }
.test-band[hidden] { display: none; }

body:has(.foot) { background: var(--dirt-2); }

/* 머리글: 짙은 유리 */
.bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center;
  height: 64px; padding: 0 clamp(14px, 4vw, 44px);
  background: rgba(13, 33, 80, .82); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 6px 20px -8px rgba(5, 15, 40, .6);
}
.bar .logo { flex: none; display: block; }
.bar .logo img { height: 54px; width: auto; filter: drop-shadow(0 3px 4px rgba(5, 15, 40, .55)); transition: transform .2s; }
.bar .logo:hover img { transform: rotate(-3deg) scale(1.04); }
.bar nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.bar nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: #dce8fb; font: 400 18px var(--title); }
.bar nav a:hover, .bar nav a.now { color: var(--sun); }
.bar nav a.cta { margin-left: 8px; padding: 7px 18px 8px; background: var(--sun); color: var(--navy); border-radius: 10px; box-shadow: 0 3px 0 var(--sun-edge); }
.bar nav a.cta:hover { background: #ffdb55; color: var(--navy); }

/* 게임 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; padding: 10px 32px 12px; border: 0; border-radius: 14px;
  background: linear-gradient(#ffe066, var(--sun) 60%); color: var(--navy);
  box-shadow: 0 5px 0 var(--sun-edge), 0 12px 18px -6px rgba(5, 15, 40, .45);
  font: 400 22px/1.2 var(--title); text-decoration: none; cursor: pointer; transition: transform .1s, box-shadow .1s, filter .1s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 6px 0 var(--sun-edge), 0 14px 20px -6px rgba(5, 15, 40, .45); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--sun-edge); }
.btn[disabled] { filter: grayscale(1); cursor: default; transform: none; }
.btn.white { background: linear-gradient(#fff, #e3effc 70%); box-shadow: 0 5px 0 #8fb0d6, 0 12px 18px -6px rgba(5, 15, 40, .45); }
.btn.white:active { box-shadow: 0 1px 0 #8fb0d6; }
.btn.off { background: #e3ecf6; color: var(--sub); box-shadow: 0 4px 0 #b6c6da; cursor: default; filter: none; transform: none; }
.btn small { font: 500 14px var(--font); opacity: .85; }
.btn.block { width: 100%; }

/* 첫 화면 */
.hero { position: relative; overflow: hidden; background: var(--sky-1); }
.hero > img.art { width: 100%; height: min(calc(100vh - 64px), 900px); min-height: 560px; object-fit: cover; object-position: 50% 18%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(90% 75% at 8% 100%, rgba(9, 28, 74, .88) 0, rgba(9, 28, 74, .55) 42%, rgba(9, 28, 74, 0) 72%);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 150px; z-index: 2; pointer-events: none;
  background: url("img/clouds.svg") center bottom / 1440px 100% repeat-x;
}
.hero-text { position: absolute; z-index: 3; left: clamp(16px, 6vw, 96px); bottom: 118px; max-width: 640px; color: #fff; }
.hero h1 { font: 400 clamp(46px, 6.6vw, 88px)/1.08 var(--title); letter-spacing: -.01em; text-shadow: 0 4px 0 rgba(9, 28, 74, .55), 0 10px 26px rgba(5, 15, 40, .55); }
.hero p.lead { font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; margin-top: 12px; text-shadow: 0 2px 10px rgba(5, 15, 40, .8); }
.hero .row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.tag { display: inline-flex; gap: 10px; align-items: baseline; margin-top: 22px; padding: 7px 14px; background: rgba(9, 28, 74, .6); border-radius: 10px; font-size: 15.5px; backdrop-filter: blur(6px); }
.tag b { color: var(--sun); font: 400 16px var(--title); }
.star { position: absolute; z-index: 3; right: clamp(8px, 5vw, 90px); bottom: 50px; height: clamp(260px, 36vw, 480px); width: auto; filter: drop-shadow(0 18px 14px rgba(5, 15, 40, .4)); animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* 하늘: 떠 있는 섬 */
.sky {
  position: relative; overflow: hidden; padding: 30px clamp(14px, 4vw, 44px) 100px;
  background: linear-gradient(#ffffff 0, var(--sky-3) 12%, var(--sky-2) 55%, var(--sky-1) 100%);
}
.sky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background: url("img/mural.jpg") center 30% / max(1500px, 110%) auto no-repeat;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
  mask-image: radial-gradient(60% 60% at 50% 45%, #000 40%, transparent 100%);
}
.sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 130px; pointer-events: none; opacity: .75;
  background: url("img/clouds.svg") center bottom / 1440px 100% repeat-x;
}
.sky > * { position: relative; z-index: 1; }
.sec-title { font: 400 clamp(32px, 4.4vw, 52px)/1.15 var(--title); color: var(--navy); text-align: center; margin-bottom: 8px; }
.sec-sub { text-align: center; color: #27457c; font-weight: 500; margin-bottom: 44px; }
.isles { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 46px clamp(24px, 4vw, 64px); }
.isle { animation: bob 7s ease-in-out infinite; }
.isle:nth-child(2) { margin-top: 70px; animation-delay: -2s; }
.isle:nth-child(3) { margin-top: -30px; animation-delay: -4s; }
.isle:nth-child(4) { margin-top: 40px; animation-delay: -5.5s; }
.mons { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 16px; align-items: end; position: relative; z-index: 2; margin-bottom: -18px; }
.mons img { width: 100%; height: clamp(110px, 13vw, 180px); object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 3px rgba(20, 50, 10, .4)); transition: transform .22s cubic-bezier(.3, 1.8, .5, 1); }
.mons li:hover img { transform: translateY(-14px) rotate(-4deg); }
.ground { position: relative; filter: drop-shadow(0 22px 16px rgba(8, 30, 80, .45)); }
.ground .turf { height: 40px; background: url("img/grass.jpg") 0 0 / 150px; border-radius: 30px 30px 8px 8px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -8px 8px -6px rgba(25, 45, 5, .7); }
.ground .rock {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: -6px 10px 0; padding: 12px 8px 44px;
  background: linear-gradient(var(--dirt-1), var(--dirt-2));
  clip-path: polygon(0 0, 100% 0, 97% 44%, 90% 60%, 82% 58%, 73% 82%, 62% 74%, 52% 100%, 42% 78%, 31% 84%, 22% 60%, 11% 66%, 3% 42%);
  color: #ffeeca; text-align: center; font: 400 16.5px/1.25 var(--title);
}

/* 대포 배경: 시작하는 법 */
.scene { position: relative; padding: clamp(60px, 8vw, 110px) clamp(14px, 4vw, 44px); background-size: cover; background-position: 50% 100%; color: #fff; }
.under { position: relative; overflow: hidden; background: linear-gradient(#1b63c4, #0f2f78 38%, #125a55 72%, #3f8a2a); }
.under::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: soft-light;
  background: url("img/mural.jpg") center top / max(1800px, 125%) auto repeat-y;
}
.scene.bell { padding-bottom: clamp(90px, 10vw, 130px); }
.note-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 5vw, 70px); align-items: center; }
.note-mon { justify-self: center; height: clamp(220px, 28vw, 380px); width: auto; filter: drop-shadow(0 18px 14px rgba(5, 15, 40, .45)); }
.scene > * { position: relative; }
.scene .sec-title { color: #fff; text-shadow: 0 3px 0 rgba(9, 28, 74, .55), 0 8px 22px rgba(5, 15, 40, .5); margin-bottom: 34px; }
.cards { list-style: none; counter-reset: s; max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cards li {
  position: relative; counter-increment: s; padding: 30px 24px 26px; border-radius: 20px; color: var(--ink);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); box-shadow: 0 8px 0 rgba(9, 28, 74, .4), 0 24px 34px -14px rgba(5, 15, 40, .6);
}
.cards li::before { content: counter(s); position: absolute; top: -22px; left: 20px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); box-shadow: 0 4px 0 var(--sun-edge); color: var(--navy); font: 400 28px var(--title); }
.cards h3 { font: 400 25px/1.2 var(--title); margin: 6px 0 6px; }
.cards h3 a { text-decoration: none; }
.cards h3 a:hover { color: var(--sky-1); }
.cards p { color: var(--sub); }
.cards .mon { position: absolute; right: 10px; top: -56px; height: 92px; width: auto; filter: drop-shadow(0 5px 3px rgba(5, 15, 40, .35)); }
code { font: 600 .9em Consolas, monospace; background: rgba(35, 134, 230, .14); padding: 1px 5px; border-radius: 5px; }

.note-panel { max-width: 500px; margin-left: auto; color: #fff; }
.note-panel h2 { font: 400 clamp(32px, 4vw, 48px)/1.15 var(--title); text-shadow: 0 3px 0 rgba(9, 28, 74, .55); margin-bottom: 18px; }
.note-panel p { font-size: 18.5px; margin-bottom: 14px; text-shadow: 0 2px 8px rgba(5, 15, 40, .7); }
.note-panel strong { color: var(--sun); font-weight: 700; }
.wide { max-width: 1140px; margin: 0 auto; }

/* 꼬리말: 잔디밭 */
.foot { position: relative; padding: 54px clamp(14px, 4vw, 44px) 26px; color: #ffeeca; font-size: 14.5px; background: linear-gradient(var(--dirt-1), var(--dirt-2)); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; background: url("img/grass.jpg") 0 0 / 150px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 5px 5px -2px rgba(25, 15, 5, .6); }
.foot .wide { position: relative; }
.foot-mons { position: absolute; right: clamp(14px, 5vw, 80px); top: 8px; transform: translateY(-100%); display: flex; align-items: flex-end; gap: 8px; pointer-events: none; z-index: 2; }
.foot-mons img { height: 96px; width: auto; }
.foot-mons img:nth-child(2) { height: 66px; }
.foot-mons img:nth-child(3) { height: 80px; }

/* 가입 */
.auth { position: relative; min-height: calc(100vh - 64px); padding: 90px 16px 64px; display: flex; justify-content: flex-end; background: url("img/canon.jpg") 30% 20% / cover; }
.auth.plain { background: url("img/clouds.svg") center bottom / 1440px 260px repeat-x, linear-gradient(var(--sky-1), var(--sky-3)); }   /* 로그인 없이 보는 화면: 원작 그림 없이 */
.auth .main { width: 100%; max-width: 980px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: flex-start; }
.panel { position: relative; width: 100%; max-width: 460px; background: rgba(255, 255, 255, .95); border-radius: 24px; padding: 34px 32px; box-shadow: 0 10px 0 rgba(9, 28, 74, .35), 0 34px 50px -18px rgba(5, 15, 40, .7); }
.panel h1 { font: 400 42px/1.15 var(--title); color: var(--navy); }
.panel .lede { color: var(--sub); margin: 4px 0 22px; }
.perch { position: absolute; right: 18px; top: -94px; height: 118px; width: auto; filter: drop-shadow(0 6px 4px rgba(5, 15, 40, .3)); }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.field input { width: 100%; height: 54px; padding: 0 16px; font: 500 18px var(--font); color: var(--ink); background: #eef4fb; border: 2px solid #c7d8ec; border-radius: 12px; transition: border-color .15s, background .15s; }
.field input:focus { outline: 0; background: #fff; border-color: var(--sky-1); box-shadow: 0 0 0 4px rgba(35, 134, 230, .2); }
.field input.code { font-family: Consolas, monospace; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.field input[aria-invalid="true"] { border-color: var(--err); background: #fff; }
.hint { color: var(--sub); font-size: 14px; margin-top: 5px; line-height: 1.45; }
.hint[hidden] { display: none; }
.err { color: var(--err); font-size: 14.5px; font-weight: 600; margin-top: 5px; line-height: 1.45; }
.err:empty, .alert:empty { display: none; }
.alert { background: #fdecea; color: var(--err); font-weight: 600; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 15px; }
.info { background: #e4f2fd; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; font-size: 15.5px; }
.info[hidden] { display: none; }
.pw-row { position: relative; }
.pw-row input { padding-right: 68px; }
.pw-toggle { position: absolute; top: 9px; right: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sub); font: 600 14px var(--font); cursor: pointer; }
.pw-toggle:hover { background: #dbe7f5; color: var(--ink); }
.note { color: var(--sub); font-size: 14px; margin-top: 18px; text-align: center; }
.copyline { display: flex; gap: 8px; margin: 10px 0 24px; align-items: stretch; flex-wrap: wrap; }
.copyline code { flex: 1 1 200px; padding: 10px 12px; font-size: 14px; border-radius: 10px; background: #eef4fb; font-weight: 500; }
.copyline button { padding: 0 16px; min-height: 42px; border: 0; border-radius: 10px; background: var(--navy); color: #fff; font: 600 14px var(--font); cursor: pointer; }
.big-id { font: 400 26px var(--title); color: var(--sky-1); }
.done-mon { display: block; height: 170px; width: auto; margin: 0 auto 10px; }

/* 받기·도움말 */
.head { position: relative; overflow: hidden; background: var(--sky-1); padding: 54px 16px 120px; text-align: center; }
.head > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; }
.head::before { content: ""; position: absolute; inset: 0; background: rgba(9, 28, 74, .3); }
.head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 110px; background: url("img/clouds.svg") center bottom / 1440px 100% repeat-x; }
.head h1 { position: relative; color: #fff; font: 400 clamp(44px, 6vw, 76px)/1.1 var(--title); text-shadow: 0 4px 0 rgba(9, 28, 74, .55), 0 10px 26px rgba(5, 15, 40, .5); }
.page-wrap { position: relative; padding: 16px 16px 90px; background: linear-gradient(#fff 0, var(--sky-3) 16%, var(--sky-2) 70%, var(--sky-1)); }
.page { position: relative; max-width: 780px; margin: 0 auto; background: rgba(255, 255, 255, .95); border-radius: 24px; padding: clamp(24px, 4vw, 42px); box-shadow: 0 10px 0 rgba(9, 28, 74, .25), 0 34px 50px -22px rgba(5, 15, 40, .6); }
.page h2 { font: 400 28px/1.2 var(--title); color: var(--navy); margin: 40px 0 14px; }
.page h2:first-of-type { margin-top: 0; }
.page .perch { top: -98px; right: 26px; height: 124px; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dl .btn { flex-direction: column; gap: 2px; min-height: 80px; }
.howto { list-style: none; counter-reset: h; }
.howto li { counter-increment: h; display: grid; grid-template-columns: 50px 1fr; padding: 13px 0; border-top: 2px dashed #d3e0ef; }
.howto li::before { content: counter(h); font: 400 34px/1 var(--title); color: var(--sky-1); }
.howto b { display: block; font: 400 20px var(--title); }
.howto span { color: var(--sub); }
.rows { list-style: none; }
.rows li { padding: 13px 0; border-top: 2px dashed #d3e0ef; }
.faq details { border-bottom: 2px dashed #d3e0ef; }
.faq summary { padding: 14px 0; font: 400 19px var(--title); cursor: pointer; }
.faq details p { padding: 0 0 14px; color: var(--sub); }
.formbox { max-width: 420px; }

@media (max-width: 860px) {
  .isles { grid-template-columns: 1fr; gap: 34px; }
  .isle:nth-child(n) { margin-top: 0; }
  .cards { grid-template-columns: 1fr; gap: 42px; }
  .note-panel { margin: 0; max-width: none; }
  .note-row { grid-template-columns: 1fr; }
  .note-mon { height: 170px; }
  .auth { padding-top: 96px; background-position: 40% 0; }
  .panel { margin: 0 auto; }
  .auth .main { justify-content: center; }
}
@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .bar { height: 58px; padding: 0 10px; }
  .bar .logo img { height: 48px; }
  .bar nav { gap: 0; }
  .bar nav a { padding: 7px 7px; font-size: 16.5px; }
  .bar nav a.cta { margin-left: 3px; padding: 6px 13px 7px; }
  .head > img.bg { object-position: 60% 100%; }
  .hero > img.art { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-position: 50% 0; }
  .hero::before { display: none; }
  .hero::after { display: none; }
  .hero-text { position: relative; left: 0; bottom: 0; max-width: none; padding: 22px 16px 34px; background: linear-gradient(var(--sky-1), #1668c2); }
  .hero h1 { font-size: 44px; }
  .hero .row .btn { flex: 1 1 100%; }
  .star { height: 170px; top: 96px; bottom: auto; right: 2px; }
  .mons img { height: 96px; }
  .ground .rock { font-size: 14.5px; }
  .sky { padding-top: 28px; }
  .dl { grid-template-columns: 1fr; }
  .panel { padding: 26px 20px; }
  .foot-mons img { height: 70px; }
  .foot-mons img:nth-child(2) { height: 48px; }
  .foot-mons img:nth-child(3) { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .star, .isle { animation: none; }
  .btn, .mons img, .bar .logo img { transition: none; }
  .btn:hover, .mons li:hover img { transform: none; }
}