@font-face{font-family:Jua;src:url(../fonts/Jua-ko.woff) format("woff");font-display:swap}
@font-face{font-family:"Gowun Dodum";src:url(../fonts/GowunDodum-ko.woff) format("woff");font-display:swap}

:root{
  --paper:#f7eedd;--paper-2:#f1e3c8;--ink:#46301f;--ink-2:#6d5340;
  --brass:#b68a3e;--brass-hi:#e3c27a;--rust:#a0492f;--green:#274a40;--green-2:#1f3b33;--cream:#fbf4e6;
  --disp:Jua,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --body:"Gowun Dodum","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --gut:clamp(16px,4vw,56px);
  --hero-h:100vh;
}
@supports (height:100svh){:root{--hero-h:100svh}}
@media (max-width:800px){:root{--hero-h:82vh}@supports (height:100svh){:root{--hero-h:82svh}}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font:400 clamp(17px,.5vw + 15px,19px)/1.8 var(--body);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .16 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  word-break:keep-all;overflow-wrap:anywhere;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px;border-radius:4px}
.wrap{position:relative;max-width:1400px;margin:auto;padding-inline:var(--gut)}
main{overflow-x:clip}

/* 상단 띠 */
.bar{position:fixed;z-index:30;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px var(--gut);background:rgba(247,238,221,.93);border-bottom:2px solid rgba(182,138,62,.55);
  font-family:var(--disp);translate:0 -110%;transition:translate .35s ease}
.bar.on{translate:0 0}
.bar a{text-decoration:none}
.bar-top{font-size:20px;color:var(--rust);white-space:nowrap}
.bar-links{display:flex;gap:clamp(12px,3vw,30px);font-size:16px;white-space:nowrap}
.bar-links a:hover{color:var(--rust)}

/* 첫 화면 */
.hero{position:relative;height:var(--hero-h);min-height:520px;overflow:hidden;background:#cfe0e6}
.hero-stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(var(--hero-h)*2.05));aspect-ratio:16/9;margin-left:calc(max(100vw,calc(var(--hero-h)*2.05))/-2);transform:translateY(-50%)}
.hero-art{width:100%;height:100%;object-fit:cover}
.ship{position:absolute;left:51.76%;top:10.42%;width:7.03%;animation:sail 46s ease-in-out infinite alternate}
@keyframes sail{from{transform:translate(-90%,6%)}50%{transform:translate(30%,-8%)}to{transform:translate(170%,4%)}}
.steam{position:absolute;width:3.4%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));filter:blur(3px);opacity:0;animation:puff 7s linear infinite}
.s1{left:83.2%;top:43%}.s2{left:83.6%;top:43%;animation-delay:-3.2s}
.s3{left:66.4%;top:31%;animation-delay:-1.6s}.s4{left:66.2%;top:31%;animation-delay:-5s}
.s5{left:38.6%;top:10%;animation-delay:-2.4s}
@keyframes puff{0%{transform:translateY(0) scale(.45);opacity:0}15%{opacity:.8}100%{transform:translate(32%,-190%) scale(1.5);opacity:0}}

.hero::after{content:"";position:absolute;inset:auto 0 0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(transparent,rgba(58,38,22,.5) 62%,rgba(58,38,22,.62))}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(58px,9vh,104px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.6vh,18px);padding-inline:var(--gut);z-index:2}
.logo{width:min(58vw,calc(var(--hero-h)*.84),900px);filter:drop-shadow(0 6px 14px rgba(70,48,31,.35))}
.logo img{width:100%}
.js .logo{animation:drop 1s cubic-bezier(.2,.9,.3,1.15) both .1s}
@keyframes drop{from{transform:translateY(-22px) scale(.95);opacity:0}}
.hero-tag{font-family:var(--disp);color:#fff8ea;font-size:clamp(16px,1.25vw + 8px,25px);line-height:1.4;text-align:center;
  padding:6px 18px 7px;background:rgba(70,48,31,.62);border-radius:3px 14px 4px 12px}
.hero-tag em{font-style:normal;color:var(--brass-hi);white-space:nowrap;margin-left:.5em}
.more{position:absolute;z-index:3;right:clamp(16px,3vw,44px);bottom:clamp(34px,5vh,62px);width:48px;height:48px;color:var(--brass-hi);filter:drop-shadow(0 2px 3px rgba(40,25,10,.6))}
.more svg{width:100%;height:100%}
.spin-slow{animation:turn 14s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.edge{position:absolute;left:0;right:0;width:100%;height:clamp(26px,3.6vw,54px);fill:var(--paper);z-index:4}
.hero .edge{bottom:-1px}
.edge.top{top:-2px;bottom:auto;fill:var(--paper)}

/* 공통 머리 */
.kicker{font-family:var(--disp);color:var(--rust);font-size:clamp(17px,1vw + 10px,22px);letter-spacing:.04em}
.kicker::before{content:"";display:inline-block;width:.62em;height:.62em;margin-right:.45em;border:3px solid var(--brass);border-radius:50%;vertical-align:.02em}
h2{font:400 clamp(32px,3.6vw + 12px,66px)/1.2 var(--disp);margin:.2em 0 .35em;color:var(--ink)}
h3{font:400 clamp(25px,1.2vw + 18px,36px)/1.28 var(--disp);color:var(--ink)}
.lead{font-size:clamp(18px,.5vw + 16px,22px);max-width:34em;color:var(--ink-2)}
.sec-head.center{text-align:center}

/* 세계관 */
.world{position:relative;padding:clamp(70px,9vw,140px) 0 clamp(50px,6vw,90px);overflow:clip}
.blot{position:absolute;width:clamp(320px,46vw,760px);pointer-events:none;mix-blend-mode:multiply}
.b1{right:-9%;top:2%}.b2{left:-14%;top:48%}.b3{right:-12%;top:24%}
.cog{position:absolute;color:var(--brass);opacity:.26;pointer-events:none}
.c1{width:clamp(120px,17vw,260px);height:clamp(120px,17vw,260px);right:5%;top:clamp(46px,7vw,110px)}
.notes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px) clamp(28px,5vw,80px);margin-top:clamp(40px,5vw,76px)}
.note{display:grid;gap:14px;align-content:start}
.note:nth-child(even){margin-top:clamp(0px,7vw,110px)}
.note h3{margin-top:2px}
.note img{width:100%;max-width:520px;rotate:-1.2deg}
.note.flip img{rotate:1.4deg}
.note img.note-link{width:clamp(120px,14vw,186px);rotate:-9deg;animation:bob 5s ease-in-out infinite alternate;filter:drop-shadow(0 12px 10px rgba(70,48,31,.25))}
@keyframes bob{to{transform:translateY(-10px)}}
.sub{font-family:var(--disp);color:var(--rust);font-size:1.05em;line-height:1.5;margin-bottom:.35em}

/* 게임 소개 */
.game{position:relative;padding:clamp(60px,7vw,110px) 0 clamp(110px,12vw,190px);background:linear-gradient(var(--paper),var(--paper-2));overflow:clip}
.journey{position:relative;margin-top:clamp(36px,5vw,70px);display:grid;gap:clamp(70px,10vw,150px)}
.paws{position:absolute;inset:0;pointer-events:none;color:#8a6a48;z-index:0}
.paws svg{position:absolute;width:30px;height:30px;opacity:0;transition:opacity .5s}
.paws svg.on{opacity:.3}
.chapter{position:relative;z-index:1;display:grid;grid-template-columns:5fr 7fr;gap:clamp(24px,5vw,72px);align-items:center}
.chapter.flip{grid-template-columns:7fr 5fr}
.ch-text p{margin-top:.55em}
.tag{display:inline-block;margin:0 0 .6em!important;padding:1px 13px 2px;font-family:var(--disp);font-size:.92em;color:var(--cream);background:var(--green);border-radius:2px 10px 3px 9px}
.small{font-size:.86em;color:var(--ink-2)}
.ch-art img{width:100%}
.stack{position:relative;padding-bottom:17%}
.stack .sm{position:absolute;width:44%;bottom:0;filter:drop-shadow(0 6px 8px rgba(70,48,31,.22))}
.stack .a{left:2%;rotate:-3deg}.stack .b{right:4%;rotate:2.4deg}
.stack.one{padding-bottom:12%}
.stack.one .a{left:auto;right:-2%;width:40%;rotate:2.6deg}
.pick{grid-template-columns:5fr 7fr}
.trio{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.6vw,22px)}
.trio li{text-align:center;font-family:var(--disp);font-size:clamp(18px,1.3vw + 8px,26px)}
.trio li:nth-child(2){translate:0 16%}
.trio img{width:100%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.trio li:hover img{transform:translateY(-8px) rotate(-3deg)}

/* 플레이 */
.play{position:relative;background:var(--green);color:var(--cream);padding:clamp(90px,10vw,160px) 0 clamp(70px,9vw,130px);overflow:clip}
.play .edge.top{fill:var(--paper-2)}
.play h2{color:var(--cream)}
.play .kicker{color:var(--brass-hi)}
.play .lead{color:#d9dcc7}
.c2{width:clamp(180px,27vw,430px);height:clamp(180px,27vw,430px);left:-7%;top:34%;opacity:.13;color:var(--brass-hi)}
.c3{width:clamp(120px,17vw,270px);height:clamp(120px,17vw,270px);right:-3%;top:9%;opacity:.16;color:var(--brass-hi)}
.reel{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,4vw,60px) clamp(18px,3vw,44px);margin-top:clamp(34px,5vw,64px)}
.clip{grid-column:span 6}
.clip.big{grid-column:1/span 9}
.clip.big.right{grid-column:4/span 9}
.clip.low{margin-top:clamp(0px,6vw,90px)}
.lens{position:relative;padding:7px;border-radius:7px;background:linear-gradient(135deg,#ecd08d,#8e6a2a 42%,#d7b163 72%,#7d5b23);box-shadow:0 18px 34px rgba(8,22,18,.45)}
.lens::after{content:"";position:absolute;inset:2px;border-radius:5px;pointer-events:none;
  background:radial-gradient(circle at 7px 7px,#fbe9b8 0 2px,#4c3512 2.5px 3px,transparent 3.5px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 7px) 7px,#fbe9b8 0 2px,#4c3512 2.5px 3px,transparent 3.5px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 7px calc(100% - 7px),#fbe9b8 0 2px,#4c3512 2.5px 3px,transparent 3.5px) 0 0/100% 100% no-repeat,
    radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),#fbe9b8 0 2px,#4c3512 2.5px 3px,transparent 3.5px) 0 0/100% 100% no-repeat}
.lens video{width:100%;aspect-ratio:16/9;border-radius:3px;background:#17302a;object-fit:cover}
.toggle{position:absolute;inset:7px;width:calc(100% - 14px);height:calc(100% - 14px);border:0;padding:0;background:none;cursor:pointer;z-index:1;border-radius:3px}
.toggle::after{content:"";position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;
  background:rgba(39,74,64,.84) center/15px 15px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fbf4e6' d='M2 1h2v8H2zM6 1h2v8H6z'/%3E%3C/svg%3E");
  opacity:.72;transition:opacity .2s}
.toggle:hover::after,.toggle:focus-visible::after{opacity:1}
.toggle.paused::after{opacity:1;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fbf4e6' d='M2.5 1l6 4-6 4z'/%3E%3C/svg%3E")}
figcaption{margin-top:12px;display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline;line-height:1.55}
figcaption b{font:400 clamp(21px,1vw + 14px,27px)/1.3 var(--disp);color:var(--brass-hi)}
figcaption span{color:#e7e4d2}

/* 끝 */
.foot{background:var(--green-2);color:#d9dcc7;text-align:center;padding:44px var(--gut) 40px;display:grid;justify-items:center;gap:6px}
.foot img{border-radius:50%;width:58px;margin-bottom:6px}
.foot .small{color:#a9b3a0}

/* 나타나는 움직임 */
.js .r{opacity:0;transform:translateY(30px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.3,1)}
.js .r.in{opacity:1;transform:none}

@media (max-width:800px){
  .notes{grid-template-columns:1fr}
  .note:nth-child(even){margin-top:0}
  .chapter,.chapter.flip,.pick{grid-template-columns:1fr}
  .chapter.flip .ch-text{order:-1}
  .clip,.clip.big,.clip.big.right{grid-column:1/-1}
  .clip.low{margin-top:0}
  .logo{width:min(90vw,520px)}
  .more{display:none}
  .paws svg{width:22px;height:22px}
  .paws svg.on{opacity:.2}
  .c1{right:-8%;top:30px}
  .trio li:nth-child(2){translate:0 8%}
  .trio{padding-bottom:6%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ship{transform:none}
  .steam{display:none}
  .js .r{opacity:1;transform:none}
}