:root{
  color-scheme:dark;
  --night:#101728;
  --cream:#f5e3d0;
  --muted:#b9b4be;
  --line:#6c6378;
  --lavender:#8e78db
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body{
  margin:0;
  background:var(--night);
  color:var(--cream);
  font-family:"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all
}
a{
  color:inherit;
  text-decoration:none
}
button,a{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible{
  outline:3px solid #f4daa6;
  outline-offset:6px
}
img{
  display:block;
  max-width:100%
}
svg{
  width:1em;
  height:1em;
  flex-shrink:0
}
.icon-defs{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}
.skip-link{
  position:fixed;
  top:10px;
  left:12px;
  z-index:100;
  transform:translateY(-160%);
  background:var(--cream);
  color:var(--night);
  padding:12px 18px;
  border-radius:6px
}
.skip-link:focus{
  transform:none
}
/* 상단 메뉴 */
.site-header{
  position:absolute;
  inset:0 0 auto;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:22px 3.35%;
  height:67px
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font:18px Georgia,"Times New Roman",serif;
  color:#f5e3d5;
  white-space:nowrap
}
.brand svg{
  width:25px;
  height:23px
}
.main-nav{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:52px;
  white-space:nowrap
}
.main-nav a{
  position:relative;
  padding:7px 0 10px;
  color:#e4deee;
  font-size:15px;
  letter-spacing:.045em
}
.main-nav a:hover{
  color:#fff0df
}
.main-nav .current{
  font-weight:700
}
.main-nav .current:after{
  content:"";
  position:absolute;
  height:2px;
  left:-18px;
  right:-18px;
  bottom:0;
  background:linear-gradient(90deg,transparent,#f5e5e9 25% 75%,transparent);
  box-shadow:0 2px 10px #b9c0ff80
}
.header-flourish{
  display:flex;
  align-items:center;
  gap:8px;
  color:#e8ddcc
}
.header-flourish svg{
  width:19px;
  height:19px
}
.header-flourish span{
  height:1px;
  width:52px;
  background:linear-gradient(90deg,#e8ddcc,transparent)
}
/* 달빛 마을의 첫 화면 */
.hero{
  position:relative;
  width:100%;
  height:52.14vw;
  min-height:640px;
  max-height:950px;
  isolation:isolate;
  overflow:hidden;
  background:#14223d
}
.hero-art{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  z-index:-3
}
.hero-shade{
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,rgba(3,10,23,.19),transparent 44%),linear-gradient(0deg,rgba(6,15,29,.2),transparent 17%)
}
.hero-copy{
  position:absolute;
  top:19.2%;
  left:6.1%;
  width:27%;
  max-width:470px;
  text-align:center
}
h1{
  margin:0;
  width:100%;
  position:relative;
  height:8.36vw;
  max-height:146px;
  filter:drop-shadow(0 6px 12px #01091666)
}
h1 img{
  position:absolute;
  top:-.9vw;
  left:-9%;
  width:110%;
  max-width:none;
  height:auto;
  object-fit:contain
}
.hero-tagline{
  margin:7px 0 0;
  font-family:"Nanum Pen Script","AppleMyungjo","Batang",serif;
  font-size:clamp(22px,2.05vw,34px);
  letter-spacing:.12em;
  white-space:nowrap;
  color:#fff0dd;
  text-shadow:0 2px 8px #000b
}
.hero-actions{
  display:grid;
  gap:18px;
  margin:44px auto 0;
  width:82%
}
.button{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  font-weight:600;
  letter-spacing:.025em;
  transition:filter .2s,transform .2s
}
.button svg{
  position:absolute;
  right:19%;
  width:16px;
  height:18px
}
.button-start{
  min-height:64px;
  border:1px solid #d4b8ff;
  border-radius:40px;
  background:linear-gradient(180deg,#b09de9 0%,#8871d6 49%,#7753c7 100%);
  box-shadow:inset 0 1px 2px #ffffffb0,0 0 24px #9964dc42,0 7px 18px #0004;
  font-size:26px;
  color:#fff7ff
}
.button-start svg{
  right:18%
}
.button-community{
  min-height:50px;
  border:1px solid #beb2c8;
  border-radius:30px;
  background:linear-gradient(180deg,#232a3dd1,#141d2bd9);
  box-shadow:inset 0 2px 5px #d3c3e51a;
  font-size:19px;
  width:94%;
  margin-inline:auto
}
.button-community svg{
  right:28%
}
.button:hover{
  filter:brightness(1.13);
  transform:translateY(-2px)
}
.hero-poem{
  position:absolute;
  left:4.35%;
  bottom:8.8%;
  margin:0;
  color:#c9c3c7;
  font-family:"AppleMyungjo","Batang",serif;
  font-size:15px;
  line-height:1.8;
  letter-spacing:.08em;
  text-shadow:0 1px 5px #000b
}
.hero-poem span{
  display:block;
  height:2px;
  width:27px;
  margin-top:19px;
  background:#f8e6cd
}
.hero-signature{
  position:absolute;
  right:4.1%;
  bottom:7.2%;
  font-family:"AppleMyungjo","Batang",serif;
  font-size:13px;
  line-height:1.45;
  font-style:italic;
  letter-spacing:.025em;
  text-align:right;
  color:#c3bcca;
  text-shadow:0 2px 5px #0009
}
.hero-signature svg{
  position:absolute;
  right:-9px;
  top:-7px;
  width:15px;
  height:15px
}
.scroll-cue{
  position:absolute;
  bottom:4.1%;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  width:35px;
  padding:5px
}
.scroll-cue span{
  position:relative;
  border:1px solid #ede2cf;
  width:21px;
  height:34px;
  border-radius:15px;
  background:#111b2b20;
  box-shadow:0 0 10px #070c1e
}
.scroll-cue span:after{
  content:"";
  position:absolute;
  left:9px;
  top:6px;
  width:1px;
  height:8px;
  background:#f7e4cf
}
.scroll-cue i{
  height:12px;
  width:1px;
  background:#d8c9b9
}
/* 새 소식 콜라주와 이야기 카드: 여섯 그림은 같은 아틀라스를 재사용 */
.community-surface{
  position:relative;
  z-index:2;
  margin-top:-5px;
  background:radial-gradient(ellipse at 19% 35%,#1c2037aa,transparent 62%),var(--night)
}
.surface-edge{
  position:absolute;
  top:-35px;
  left:0;
  width:100%;
  height:68px;
  overflow:visible
}
.edge-leaf{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-3px);
  color:#ead0bd;
  z-index:2
}
.edge-leaf svg{
  width:16px;
  height:20px
}
.updates-grid{
  position:relative;
  max-width:1660px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  padding:34px 3.8% 55px;
  gap:5.9%
}
.updates-grid:after{
  content:"";
  position:absolute;
  left:50%;
  top:43px;
  bottom:0;
  width:1px;
  background:linear-gradient(#36314311,#63556a55,#36314311)
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px
}
.section-heading h2{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0;
  font-family:"AppleMyungjo","Batang",serif;
  font-size:25px;
  font-weight:600;
  letter-spacing:.035em;
  white-space:nowrap
}
.section-heading h2 svg{
  width:27px;
  height:28px;
  color:#f3d8c3
}
.more-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  color:#d5cbd7;
  white-space:nowrap;
  padding:6px 0
}
.more-link svg{
  width:11px;
  height:12px
}
.more-link:hover{
  color:#fff2dc
}
.news-collage{
  display:grid;
  grid-template-columns:1.68fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:7px 12px;
  height:190px
}
.news-tile{
  position:relative;
  display:block;
  border:1px solid #777086;
  border-radius:17px;
  overflow:hidden;
  background:#1c2a3c
}
.news-featured{
  grid-row:span 2
}
.atlas-art{
  display:block;
  background-image:url("/assets/slimeline/tiles.webp");
  background-size:300% 200%;
  background-repeat:no-repeat;
}
.tile-community-free{background-position:0% 0%}
.tile-community-guide{background-position:50% 0%}
.tile-community-gallery{background-position:100% 0%}
.tile-news-welcome{background-position:0% 100%}
.tile-news-guide{background-position:50% 100%}
.tile-news-feedback{background-position:100% 100%}
.news-tile .atlas-art{
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  aspect-ratio:1;
  transform:translateY(-50%);
  transition:filter .3s;
}
.news-tile:hover .atlas-art{filter:brightness(1.12)}
.tile-caption{
  position:absolute;
  inset:auto 0 0;
  padding:22px 12px 9px;
  background:linear-gradient(transparent,#101729ed);
  color:#fff1de;
  font-size:12px;
  line-height:1.5;
  transform:translateY(100%);
  transition:transform .25s
}
.news-featured .tile-caption{
  font-size:14px;
  padding:32px 16px 12px
}
.news-tile:hover .tile-caption,.news-tile:focus-visible .tile-caption{
  transform:translateY(0)
}
.community-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  height:190px
}
.community-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  isolation:isolate;
  overflow:hidden;
  padding:21px 0 0;
  border:1px solid #756c7b;
  border-bottom-color:transparent;
  border-radius:48px 48px 20px 20px;
  background:radial-gradient(ellipse at 50% 10%,#34324472,transparent 80%);
  transition:background .2s,transform .2s
}
.community-card h3{
  position:relative;
  z-index:2;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:500;
  white-space:nowrap
}
.community-card h3 svg{
  width:29px;
  height:29px;
  color:#ecd4bf;
  filter:drop-shadow(0 2px 3px #0005)
}
.community-card .atlas-art{
  position:absolute;
  bottom:-16px;
  left:-5%;
  z-index:0;
  width:110%;
  aspect-ratio:1;
  -webkit-mask-image:linear-gradient(transparent 0%,#000 34%);
  mask-image:linear-gradient(transparent 0%,#000 34%);
}
.community-card:hover{
  transform:translateY(-4px);
  background:radial-gradient(ellipse at 50% 10%,#71628150,transparent 90%)
}
/* 게임 소개와 공통 안내 */
.about-section{
  max-width:1140px;
  margin:0 auto;
  padding:75px 35px 85px;
  text-align:center;
  border-top:1px solid #5e52643d
}
.about-sprout{
  width:25px;
  height:25px;
  color:#dbc2b1
}
.eyebrow{
  margin:21px 0 12px;
  font-size:13px;
  color:#b4a3c5;
  letter-spacing:.12em
}
.about-section h2{
  font-family:"AppleMyungjo","Batang",serif;
  font-size:31px;
  font-weight:500;
  letter-spacing:.025em;
  margin:0 0 22px
}
.about-intro{
  font-size:16px;
  line-height:1.9;
  color:#d0c7d0;
  margin:0
}
.about-details{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px;
  margin:52px auto 0;
  text-align:left
}
.about-details article{
  padding-left:20px;
  border-left:1px solid #80718355
}
.about-details article>span{
  font-size:11px;
  color:#a89cb4;
  letter-spacing:.15em
}
.about-details h3{
  font-size:17px;
  font-weight:500;
  margin:13px 0
}
.about-details p{
  font-size:14px;
  line-height:1.85;
  color:#b8b0c1;
  margin:0
}
.about-community{
  display:inline-flex;
  align-items:center;
  gap:18px;
  font-size:14px;
  border-bottom:1px solid #8f7c9f;
  padding-bottom:9px;
  margin-top:45px;
  color:#e2cce6
}
.site-footer{
  max-width:1338px;
  margin:0 auto;
  padding:33px 35px 38px;
  border-top:1px solid #6e5d723d;
  color:#a49baa;
  font-size:12px;
  display:flex;
  flex-wrap:wrap;
  gap:17px 35px;
  align-items:center;
  justify-content:space-between
}
.footer-brand{
  color:#d9c6b7;
  font:18px Georgia,serif
}
.site-footer>div{
  display:flex;
  flex-wrap:wrap;
  gap:13px 22px;
  align-items:center
}
.site-footer a:hover{
  color:#f4e2cc
}
.site-footer p{
  width:100%;
  margin:0;
  font-family:"AppleMyungjo","Batang",serif;
  font-size:12px;
  color:#877c91
}
/* 화면 크기에 따른 재배치 */
@media(min-width:1650px){
  .hero-copy{
    top:20%
  }
  .hero-actions{
    margin-top:50px
  }
  .news-collage,.community-cards{
    height:210px
  }
}
@media(max-width:1100px) and (min-width:701px){
  .main-nav{
    gap:30px
  }
  .brand{
    font-size:15px
  }
  .hero{
    min-height:600px
  }
  .hero-copy{
    top:23%;
    left:5%;
    width:32%
  }
  .hero-tagline{
    font-size:23px
  }
  h1{
    height:107px
  }
  .hero-actions{
    margin-top:34px;
    width:86%
  }
  .button-start{
    font-size:22px;
    min-height:55px
  }
  .button-community{
    font-size:17px;
    min-height:44px
  }
  .button-start svg{
    right:12%
  }
  .button-community svg{
    right:22%
  }
  .hero-poem{
    font-size:13px
  }
  .updates-grid{
    padding-inline:3%;
    gap:5%
  }
  .section-heading h2{
    font-size:21px;
    gap:8px
  }
  .section-heading h2 svg{
    width:23px
  }
  .community-cards{
    gap:10px
  }
  .community-card h3{
    font-size:13px;
    gap:6px
  }
  .community-card h3 svg{
    width:22px;
    height:22px
  }
  .community-card{
    padding-top:22px;
    border-radius:35px 35px 15px 15px
  }
  .news-collage{
    grid-template-columns:1.5fr 1fr;
    gap:7px
  }
  .hero-signature{
    font-size:11px
  }
}
@media(max-width:700px){
  html{
    scroll-padding-top:20px
  }
  .site-header{
    height:auto;
    padding:18px 20px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:21px
  }
  .brand{
    font-size:16px
  }
  .brand svg{
    width:22px;
    height:20px
  }
  .header-flourish{
    margin-top:2px
  }
  .header-flourish span{
    width:30px
  }
  .header-flourish svg{
    width:17px;
    height:17px
  }
  .main-nav{
    position:static;
    transform:none;
    order:3;
    width:100%;
    justify-content:space-between;
    gap:14px;
    padding-inline:3px
  }
  .main-nav a{
    font-size:12px;
    letter-spacing:0;
    padding:5px 0 9px
  }
  .main-nav .current:after{
    left:-8px;
    right:-8px
  }
  .hero{
    height:890px;
    min-height:0;
    max-height:none;
    background:#14223d
  }
  .hero-art{
    object-fit:cover;
    object-position:64% bottom;
    height:100%;
    opacity:.95
  }
  .hero-shade{
    background:linear-gradient(180deg,#0c173f20 0%,#08152e80 16%,#07182c05 56%,#0d172c10 75%,#10172845),linear-gradient(90deg,#07112135,transparent 60%)
  }
  .hero-copy{
    top:145px;
    left:50%;
    transform:translateX(-50%);
    width:300px;
    max-width:80%
  }
  .hero-tagline{
    font-size:23px;
    letter-spacing:.08em;
    margin-top:7px
  }
  h1{
    height:93px
  }
  h1 img{
    top:-10px
  }
  .hero-actions{
    width:252px;
    max-width:100%;
    gap:13px;
    margin-top:30px
  }
  .button-start{
    font-size:23px;
    min-height:57px
  }
  .button-start svg{
    right:15%
  }
  .button-community{
    font-size:17px;
    min-height:46px
  }
  .button-community svg{
    right:25%
  }
  .hero-poem{
    left:22px;
    bottom:88px;
    font-size:12px;
    line-height:1.8;
    letter-spacing:.03em
  }
  .hero-poem span{
    width:23px;
    margin-top:12px
  }
  .hero-signature{
    right:22px;
    bottom:65px;
    font-size:10px;
    line-height:1.65
  }
  .hero-signature svg{
    right:0;
    top:-16px;
    width:13px;
    height:13px
  }
  .scroll-cue{
    bottom:37px
  }
  .scroll-cue span{
    width:18px;
    height:29px
  }
  .scroll-cue span:after{
    left:7.5px
  }
  .scroll-cue i{
    height:8px
  }
  .surface-edge{
    top:-28px;
    height:49px
  }
  .edge-leaf{
    top:-3px
  }
  .edge-leaf svg{
    height:15px;
    width:13px
  }
  .updates-grid{
    display:block;
    padding:30px 20px 40px
  }
  .updates-grid:after{
    display:none
  }
  .section-heading{
    margin-bottom:19px
  }
  .section-heading h2{
    font-size:23px;
    gap:10px
  }
  .section-heading h2 svg{
    width:24px;
    height:25px
  }
  .more-link{
    font-size:11px
  }
  .news-collage{
    height:205px;
    grid-template-columns:1.55fr 1fr;
    gap:8px
  }
  .news-tile{
    border-radius:13px
  }
  .tile-caption{
    font-size:10px;
    transform:none;
    padding:20px 8px 6px;
    line-height:1.6
  }
  .news-featured .tile-caption{
    font-size:11px;
    padding:25px 10px 9px
  }
  .stories-panel{
    margin-top:38px;
    padding-top:28px;
    border-top:1px solid #51455e55
  }
  .community-cards{
    height:auto;
    gap:10px
  }
  .community-card{
    min-height:165px;
    padding-top:17px;
    border-radius:31px 31px 16px 16px
  }
  .community-card h3{
    flex-direction:column;
    font-size:12px;
    gap:7px;
    letter-spacing:-.03em
  }
  .community-card h3 svg{
    width:23px;
    height:23px
  }
  .about-section{
    padding:49px 25px 55px;
    margin-inline:20px
  }
  .eyebrow{
    font-size:11px;
    letter-spacing:.06em
  }
  .about-section h2{
    font-size:24px;
    line-height:1.5
  }
  .about-intro{
    font-size:14px;
    line-height:1.9
  }
  .desktop-break{
    display:none
  }
  .about-details{
    grid-template-columns:1fr;
    gap:27px;
    margin-top:35px
  }
  .about-details article{
    padding-left:16px
  }
  .about-details h3{
    font-size:16px;
    margin:9px 0
  }
  .about-details p{
    font-size:13px
  }
  .about-community{
    font-size:13px;
    margin-top:32px
  }
  .site-footer{
    margin-inline:20px;
    padding:29px 4px 35px;
    gap:23px
  }
  .site-footer>div{
    gap:12px 19px;
    font-size:11px
  }
  .site-footer>div span{
    width:100%;
    font-size:11px
  }
  .site-footer p{
    font-size:11px
  }
}
@media(max-width:370px){
  .main-nav{
    gap:10px
  }
  .main-nav a{
    font-size:11px
  }
  .hero-copy{
    width:270px;
    max-width:84%
  }
  .hero-tagline{
    font-size:20px
  }
  .hero{
    height:850px
  }
  .community-cards{
    gap:7px
  }
  .community-card h3{
    font-size:11px
  }
  .community-card{
    min-height:152px
  }
  .section-heading h2{
    font-size:21px
  }
}
/* 움직임을 줄이는 환경 설정 반영 */
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    transition:none!important;
    animation:none!important
  }
  .button:hover,.community-card:hover{
    transform:none
  }
  .news-tile:hover .atlas-art{
    filter:none
  }
}