*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-y:scroll}
body{
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto;
  color:#f5dfb2;
  font-family:"Malgun Gothic","Apple SD Gothic Neo","맑은 고딕",sans-serif;
  background:
    linear-gradient(rgba(9,5,2,.90), rgba(9,5,2,.94)),
    url("images/body_texture.png") center top / 256px auto repeat;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.page-shell{
  width:min(2048px, calc(100vw - 18px));
  margin:0 auto;
  padding:0 0 42px;
}
.header-wrap,.hero-wrap,.notice-wrap,.event-wrap,.card-wrap{position:relative}
.slice-img{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.header-overlay,.notice-overlay,.event-overlay{position:absolute;inset:0}

/* 상단 메뉴: 지운 원본 좌표 기준 재배치 */
.menu-link,
.auth-btn{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f1d38a;
  font-weight:900;
  white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.98);
  letter-spacing:-0.02em;
  line-height:1;
}
.menu-link{top:67.3%; font-size:clamp(13px,1.02vw,25px)}
.menu-home{left:18.29%}
.menu-community{left:23.66%}
.menu-clan{left:29.35%}
.menu-download{left:35.21%}

.auth-btn{top:67.3%; font-size:clamp(13px,.98vw,24px)}
.auth-login{left:77.64%}
.auth-signup{left:84.23%}

.hero-subtitle{
  position:absolute;
  left:46.70%;
  top:70.20%;
  width:23.85%;
  transform:translate(-50%,-50%);
  margin:0;
  text-align:center;
  font-size:clamp(15px,1.30vw,30px);
  line-height:1.18;
  font-weight:900;
  color:#f7efe1;
  text-shadow:0 2px 3px rgba(0,0,0,.95);
  letter-spacing:-0.03em;
}

.content-frame{
  width:81.05%;
  margin:0 auto;
}
.content-grid{
  display:grid;
  grid-template-columns:minmax(0,1249fr) minmax(0,407fr);
  grid-template-rows:auto auto;
  column-gap:4px;
  row-gap:4px;
  align-items:start;
}
.notice-wrap{grid-column:1;grid-row:1}
.event-wrap{grid-column:2;grid-row:1 / span 2}
.cards-row{
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

/* 공지 좌표: 원본 지운 자리 기준 */
.notice-title{
  position:absolute;
  left:51.12%;
  top:16.60%;
  transform:translate(-50%,-50%);
  margin:0;
  color:#553113;
  font-size:clamp(18px,1.36vw,32px);
  font-weight:900;
  text-shadow:0 1px 0 rgba(255,243,214,.65);
  letter-spacing:-0.03em;
}
.notice-list{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
}
.notice-line{
  position:absolute;
  left:16.00%;
  margin:0;
}
.notice-line-1{top:40.82%}
.notice-line-2{top:56.84%}
.notice-line-3{top:72.66%}
.notice-line a{
  display:block;
  color:#312114;
  font-size:clamp(15px,1.14vw,27px);
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,247,231,.15);
  white-space:nowrap;
  letter-spacing:-0.03em;
}
.notice-more{
  position:absolute;
  left:87.47%;
  top:78.91%;
  width:15.13%;
  height:20.31%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f0d59b;
  font-size:clamp(12px,.88vw,18px);
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  letter-spacing:-0.03em;
}

/* 이벤트 영역 좌표 보정 */
.event-title{
  position:absolute;
  left:53.81%;
  top:6.35%;
  width:58%;
  transform:translate(-50%,-50%);
  margin:0;
  text-align:center;
  color:#f4ddb1;
  font-size:clamp(15px,1.00vw,24px);
  font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,.92);
  letter-spacing:-0.03em;
}
.event-hit{
  position:absolute;
  display:block;
}
.event-hit-top{
  left:13.0%;
  top:14.2%;
  width:78.5%;
  height:29.8%;
}
.event-hit-bottom{
  left:11.6%;
  top:71.9%;
  width:79.8%;
  height:22.8%;
}
.event-card-title{
  position:absolute;
  left:55.65%;
  transform:translateX(-50%);
  width:76%;
  text-align:center;
  color:#f6ddb0;
  font-size:clamp(14px,.98vw,22px);
  line-height:1.14;
  font-weight:900;
  text-shadow:0 2px 3px rgba(0,0,0,.92);
  letter-spacing:-0.03em;
}
.event-card-title-top{top:20.5%}
.event-card-title-bottom{top:8.5%}
.event-card-button{
  position:absolute;
  left:51.35%;
  top:63.8%;
  transform:translateX(-50%);
  color:#f0d59b;
  font-size:clamp(11px,.84vw,16px);
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  letter-spacing:-0.03em;
}

/* 카드 버튼은 기존 이미지와 겹치지 않게 하단에 고정 */
.card-wrap{
  position:relative;
  display:block;
}
.card-button{
  position:absolute;
  left:50%;
  bottom:4.1%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f0d59b;
  font-size:clamp(11px,.84vw,18px);
  font-weight:900;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
  letter-spacing:-0.03em;
  white-space:nowrap;
  padding:.12em .35em;
}

.footer{
  margin-top:18px;
  text-align:center;
  color:#ebd2a3;
  font-size:14px;
  font-weight:700;
  padding:18px 0 24px;
  text-shadow:0 1px 2px rgba(0,0,0,.65);
  background:linear-gradient(180deg, rgba(20,9,3,.94), rgba(12,5,2,.96));
  border-top:1px solid rgba(168,114,47,.22);
  border-bottom:1px solid rgba(168,114,47,.14);
}

.menu-link:hover,.auth-btn:hover,.notice-more:hover,.event-hit:hover,.card-wrap:hover{
  outline:2px solid rgba(255,214,133,.42);
  outline-offset:-2px;
}

@media (max-width:1200px){
  .page-shell{width:min(100%, calc(100vw - 10px))}
}
@media (max-width:860px){
  .page-shell{width:min(100%, calc(100vw - 8px))}
  .content-frame{width:100%}
  .content-grid{
    grid-template-columns:1fr;
    row-gap:8px;
    column-gap:0;
  }
  .event-wrap{grid-column:1;grid-row:3}
  .cards-row{
    grid-template-columns:1fr;
    gap:8px;
  }
}