/* ============================================================
   AMI 연맹 - 화이트아웃 서바이벌 분위기 스타일
   ============================================================ */

:root{
  --ink:        #05080e;
  --ink-2:      #0a1018;
  --ink-3:      #101a26;
  --frost:      #e6f1fa;
  --frost-dim:  #a8bccd;
  --steel:      #7b8ea3;
  --ice:        #7fb3d9;
  --ice-bright: #b9e0ff;
  --ember:      #e8b45c;
  --ember-hot:  #ff9d3c;
  --line:       rgba(150,196,232,.14);
  --line-strong:rgba(150,196,232,.30);

  --col: 6;              /* 모자이크 가로 칸 수 */
  --row: 88px;           /* 모자이크 한 줄 높이 */
  --gap: 14px;

  --serif: "Cinzel", "Times New Roman", "Nanum Myeongjo", serif;
  --sans: "Pretendard", "Pretendard Variable", -apple-system, "Malgun Gothic",
          "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 50% -10%, #16283a 0%, rgba(10,16,24,0) 60%),
    radial-gradient(900px 600px at 90% 20%, rgba(232,180,92,.07) 0%, rgba(10,16,24,0) 55%),
    linear-gradient(180deg, #060a11 0%, #070c14 40%, #05080e 100%);
  background-attachment: fixed;
  color: var(--frost);
  font-family: var(--sans);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}

/* 얼음 결정 질감 */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  opacity:.55;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

#snow{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}

/* ===================== TOP BAR ===================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px clamp(16px,4vw,48px);
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(5,8,14,.82) 0%, rgba(5,8,14,0) 100%);
  transition: background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background: rgba(6,10,17,.88);
  border-bottom-color: var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width:22px; height:22px; flex:none;
  background: linear-gradient(160deg, var(--ice-bright), var(--steel) 60%, #3d5062);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  box-shadow: 0 0 14px rgba(160,215,255,.35);
}
.brand-text{
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.22em;
  color:var(--frost);
}
.brand-text em{ font-style:normal; color:var(--ice-bright); }
.nav{ display:flex; gap:clamp(14px,2.6vw,32px); }
.nav a{
  font-size:.9rem; letter-spacing:.1em; color:var(--frost-dim);
  position:relative; padding:4px 0; transition:color .25s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--ice-bright), var(--ember));
  transition:right .3s ease;
}
.nav a:hover{ color:var(--frost); }
.nav a:hover::after{ right:0; }

/* ===================== HERO : 연맹원 조각 벽 ===================== */
.wall-section{
  position:relative; z-index:3;
  height:100svh; min-height:520px;
  overflow:hidden;
}
.wall-viewport{
  position:absolute; inset:0;
  overflow:hidden;
}
.wall-stage{
  position:relative; height:100%; width:100%;
  display:flex; flex-direction:column; gap:3px;
  /* 조각 사이 틈으로 비치는 얼음빛 - 스케치의 '선'이 됩니다 */
  background:
    linear-gradient(100deg, #9fd3ff 0%, #5f86a8 40%, #d8b06a 70%, #8fc0e6 100%);
}
.wall-row{
  position:relative; flex:1 1 0; min-height:0; overflow:hidden;
}

.shard{
  position:absolute; top:0; bottom:0;
  overflow:hidden; cursor:pointer;
  padding:0; border:0; background:#070c13;
  transition:left .55s cubic-bezier(.3,.8,.3,1),
             width .55s cubic-bezier(.3,.8,.3,1),
             clip-path .55s cubic-bezier(.3,.8,.3,1);
}
/* 이미지는 JS가 계산한 transform 으로 배치합니다 (얼굴이 조각 가운데 오도록) */
.shard img{
  position:absolute; left:0; top:0;
  height:100%; width:auto; max-width:none;
  transform-origin:0 0;
  filter:saturate(.55) brightness(.52) contrast(1.08);
  transition:filter .5s ease, transform .55s cubic-bezier(.3,.8,.3,1);
}
.shard::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,11,18,.55) 0%, rgba(6,11,18,.05) 26%,
    rgba(5,9,15,.35) 62%, rgba(4,8,13,.95) 100%);
  transition:opacity .5s;
}
.shard.hot img{ filter:saturate(1.02) brightness(1.02) contrast(1); transform:scale(1); }
.shard.hot::after{ opacity:.72; }

/* 닉네임 - 가로로, 크게 */
.shard-label{
  position:absolute; bottom:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 2px 16px;
  pointer-events:none;
  transition:left .55s cubic-bezier(.3,.8,.3,1), width .55s cubic-bezier(.3,.8,.3,1);
}
.shard-name{
  font-size:var(--name-size,14px);
  font-weight:900; letter-spacing:-.02em; line-height:1.04;
  white-space:nowrap; text-align:center;
  color:#fff;
  text-shadow:
    0 2px 3px rgba(0,0,0,1),
    0 4px 22px rgba(0,0,0,.95),
    0 0 40px rgba(0,0,0,.8);
  transition:color .35s, font-size .5s cubic-bezier(.3,.8,.3,1);
}
.shard.hot .shard-name{ color:var(--accent,var(--ice-bright)); }
.shard-title{
  font-size:.7rem; letter-spacing:.02em; color:var(--frost-dim); text-align:center;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-height:0; opacity:0;
  transition:max-height .4s ease, opacity .3s ease;
  text-shadow:0 2px 10px rgba(0,0,0,.95);
}
.shard.hot .shard-title{ max-height:2.2em; opacity:1; }
.shard-rank{
  font-size:.56rem; font-weight:800; letter-spacing:.14em;
  color:#0a0f16; background:var(--accent,var(--ice-bright));
  padding:1px 7px;
}
.shard-tick{
  width:16px; height:2px; background:var(--accent,var(--ice-bright));
  opacity:.4; transition:opacity .35s, width .35s;
}
.shard.hot .shard-tick{ opacity:1; width:48px; }

/* 화면 아래쪽 어둡게 - 글씨가 읽히도록 */
.wall-fade{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, rgba(5,8,14,0) 0%, rgba(5,8,14,.55) 48%, rgba(5,8,14,.94) 100%);
  pointer-events:none; z-index:4;
}

/* 아래쪽 가로 바 - 조각 벽을 최대한 가리지 않도록 납작하게 */
.wall-overlay{
  position:absolute; z-index:5;
  left:0; right:0; bottom:0;
  padding:0 clamp(16px,4vw,48px) clamp(18px,3vh,32px);
  display:flex; align-items:flex-end; gap:clamp(14px,3vw,38px);
  flex-wrap:wrap;
  pointer-events:none;
}
.wall-overlay > *{ pointer-events:auto; }
.wall-overlay .eyebrow{ display:none; }
.wall-emblem{
  width:min(260px,38vw);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.85));
}
.wall-overlay .hero-cta{ justify-content:flex-start; margin:0 0 6px; }
.wall-overlay .hero-stats{ justify-content:flex-start; margin:0 0 6px auto; }
.intro-text{ white-space:pre-line; max-width:620px; margin-inline:auto; }

.wall-hint{
  position:absolute; z-index:5; right:clamp(16px,4vw,48px); top:84px;
  margin:0; font-size:.72rem; letter-spacing:.18em; color:var(--frost-dim);
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  pointer-events:none;
}

/* ===================== (구) HERO ===================== */
.hero{
  position:relative; z-index:3;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:110px clamp(16px,4vw,48px) 90px;
  text-align:center;
  overflow:hidden;
}
.hero-glow{
  position:absolute; z-index:-1;
  width:min(1100px,120vw); aspect-ratio:1/1; top:-30%;
  background: radial-gradient(circle, rgba(120,180,230,.16) 0%, rgba(120,180,230,0) 62%);
  filter: blur(6px);
}
.hero-inner{ width:min(1100px,100%); }

.eyebrow{
  margin:0 0 14px;
  font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--steel);
}

.emblem-wrap{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:4px;
  padding:clamp(6px,1.2vw,14px);
  background: linear-gradient(180deg, rgba(180,220,255,.05), rgba(10,16,24,.2));
  box-shadow: 0 30px 90px -30px rgba(0,0,0,.9), inset 0 0 60px rgba(120,180,230,.05);
}
.emblem-wrap::before,
.emblem-wrap::after{
  content:""; position:absolute; width:26px; height:26px;
  border:1px solid var(--ice); opacity:.55;
}
.emblem-wrap::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.emblem-wrap::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.emblem{ width:100%; border-radius:2px; }

.hero-intro{
  margin:30px auto 0; max-width:640px;
  color:var(--frost-dim); font-size:clamp(.94rem,1.6vw,1.06rem);
  white-space:pre-line;
}

.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 30px; font-size:.92rem; letter-spacing:.14em;
  border:1px solid var(--line-strong);
  position:relative; overflow:hidden;
  transition: color .25s, border-color .25s, transform .2s, box-shadow .3s;
}
.btn::before{
  content:""; position:absolute; inset:0; transform:translateY(101%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.btn span, .btn{ position:relative; }
.btn-primary{ color:#0a0f16; border-color:transparent; background:linear-gradient(120deg,var(--ember),#f5d089); font-weight:700; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(232,180,92,.6); }
.btn-ghost{ color:var(--frost); }
.btn-ghost::before{ background:linear-gradient(120deg, rgba(160,215,255,.16), rgba(160,215,255,.04)); }
.btn-ghost:hover{ border-color:var(--ice); transform:translateY(-2px); }
.btn-ghost:hover::before{ transform:translateY(0); }

.hero-stats{
  display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,44px);
  margin-top:46px; color:var(--frost-dim);
}
.hero-stats div{ display:flex; flex-direction:column; gap:2px; }
.hero-stats strong{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.08em; color:var(--ice-bright);
}
.hero-stats span{ font-size:.72rem; letter-spacing:.24em; color:var(--steel); }
.hero-stats .sep{ width:1px; height:34px; background:var(--line-strong); }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:1px; height:52px; background:linear-gradient(180deg, transparent, var(--line-strong));
  overflow:hidden;
}
.scroll-hint span{
  position:absolute; top:0; left:0; width:1px; height:16px;
  background:var(--ice-bright); animation:drop 2.4s ease-in-out infinite;
}
@keyframes drop{ 0%{ top:-18px; } 60%,100%{ top:56px; } }

/* ===================== SECTION ===================== */
.section{
  position:relative; z-index:3;
  padding:clamp(70px,9vw,120px) clamp(16px,4vw,48px);
  max-width:1480px; margin:0 auto;
}
.band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(120,170,220,.035), rgba(0,0,0,0));
  max-width:none;
}
.section-head{ text-align:center; margin-bottom:clamp(34px,5vw,58px); }
.section-title{
  margin:0; font-family:var(--serif);
  font-size:clamp(1.9rem,4.4vw,3rem); letter-spacing:.18em; font-weight:600;
  background:linear-gradient(180deg, #ffffff 0%, #c3daed 55%, #6f8ba2 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 42px rgba(150,200,240,.16);
}
.section-sub{ margin:12px 0 0; color:var(--steel); font-size:.92rem; }

/* ===================== MOSAIC ===================== */
.mosaic{
  display:grid;
  grid-template-columns:repeat(var(--col),1fr);
  grid-auto-rows:var(--row);
  grid-auto-flow:row dense;
  gap:var(--gap);
}

.tile{
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid var(--line);
  background:#0a1017;
  opacity:0; transform:translateY(26px) scale(.985);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.tile.in{ opacity:1; transform:none; }
.tile.w3{ grid-column:span 3; grid-row:span 8; }
.tile.w2{ grid-column:span 2; grid-row:span 6; }
.tile.wide{ grid-column:span 3; grid-row:span 5; }

.tile img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) brightness(.82) contrast(1.05);
  transform:scale(1.02);
  transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
.tile::after{ /* 서리 낀 아래쪽 그라데이션 */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,10,16,.15) 0%, rgba(5,10,16,0) 35%, rgba(4,8,13,.86) 100%);
  transition:opacity .4s;
}
.tile:hover img{ transform:scale(1.07); filter:saturate(1.05) brightness(1) contrast(1.02); }
.tile:hover{ border-color:var(--accent,var(--ice)); z-index:4; }
.tile::before{ /* 빛나는 테두리 */
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0), 0 0 0 0 rgba(0,0,0,0);
  transition:box-shadow .45s ease;
}
.tile:hover::before{
  box-shadow: inset 0 0 34px -8px var(--accent,var(--ice)),
              0 22px 50px -22px rgba(0,0,0,.95);
}

.tile-info{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:clamp(12px,1.4vw,20px);
  transform:translateY(10px); opacity:.92;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .35s;
}
.tile:hover .tile-info{ transform:none; opacity:1; }
.tile-rank{
  display:inline-block; margin-bottom:6px; padding:1px 8px;
  font-size:.64rem; letter-spacing:.18em; font-weight:700;
  color:#0a0f16; background:var(--accent,var(--ice-bright));
}
.tile-name{
  margin:0; font-size:clamp(1rem,1.5vw,1.35rem); font-weight:800; letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.7);
}
.tile-title{
  margin:3px 0 0; font-size:clamp(.7rem,.9vw,.8rem); color:var(--frost-dim);
  letter-spacing:.02em;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .35s ease;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.tile:hover .tile-title{ max-height:3.4em; opacity:1; }
.tile-line{
  position:absolute; left:clamp(12px,1.4vw,20px); bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--accent,var(--ice)),transparent);
  transition:width .5s ease;
}
.tile:hover .tile-line{ width:52%; }

/* 슬로건 패널 조각 */
.panel{
  grid-column:span 3; grid-row:span 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; padding:20px;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(140,195,240,.10), rgba(6,10,17,.6) 70%);
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.panel.in{ opacity:1; transform:none; }
.panel-slogan{
  font-family:var(--serif); margin:0;
  font-size:clamp(1.15rem,2.1vw,1.8rem); letter-spacing:.24em;
  color:var(--frost);
}
.panel-sub{ margin:0; font-size:.74rem; letter-spacing:.34em; color:var(--steel); text-transform:uppercase; }
.panel-rule{
  width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--ember),transparent);
}

/* ===================== CARDS ===================== */
.cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:1280px; margin:0 auto;
}
.card{
  padding:30px 26px; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(150,200,240,.05), rgba(6,10,17,.35));
  transition:border-color .35s, transform .35s, background .35s;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.card-ico{ width:34px; height:34px; margin-bottom:16px; color:var(--ice-bright); }
.card-ico svg{ width:100%; height:100%; }
.card h3{ margin:0 0 8px; font-size:1.06rem; letter-spacing:.02em; }
.card p{ margin:0; color:var(--frost-dim); font-size:.9rem; }

/* ===================== JOIN ===================== */
.join-box{
  display:grid; gap:clamp(28px,5vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:center;
  max-width:1180px; margin:0 auto;
  padding:clamp(30px,5vw,56px);
  border:1px solid var(--line-strong);
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(232,180,92,.10), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(140,195,240,.05), rgba(6,10,17,.5));
}
.join-left .section-title{ text-align:left; }
.join-left .eyebrow{ text-align:left; }
.join-lead{ margin:18px 0 22px; font-size:1.06rem; color:var(--frost); }
.join-notes{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.join-notes li{
  font-size:.78rem; letter-spacing:.06em; color:var(--frost-dim);
  border:1px solid var(--line); padding:6px 12px;
}
.join-steps{ list-style:none; counter-reset:s; margin:0; padding:0; }
.join-steps li{
  counter-increment:s; position:relative;
  padding:16px 0 16px 58px;
  border-bottom:1px solid var(--line);
  color:var(--frost-dim); font-size:.95rem;
}
.join-steps li:last-child{ border-bottom:0; }
.join-steps li::before{
  content:"0" counter(s);
  position:absolute; left:0; top:14px;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.1em;
  color:var(--ember);
}
.join-steps b{ color:var(--ice-bright); font-weight:700; letter-spacing:.06em; }

/* ===================== FOOTER ===================== */
.footer{
  position:relative; z-index:3; text-align:center;
  padding:70px 20px 60px; border-top:1px solid var(--line);
}
.footer-slogan{
  margin:0 0 14px; font-family:var(--serif);
  font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:.3em; color:var(--frost);
}
.footer-sub{ margin:0; font-size:.76rem; letter-spacing:.1em; color:var(--steel); }

/* ===================== LIGHTBOX ===================== */
.lightbox{
  position:fixed; inset:0; z-index:60;
  display:none; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px);
  background:rgba(3,6,11,.93);
  backdrop-filter:blur(14px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox.open{ display:flex; }
.lightbox.show{ opacity:1; }
.lb-figure{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:16px;
  max-height:100%;
  transform:scale(.97); transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.lightbox.show .lb-figure{ transform:none; }
.lb-figure img{
  max-height:74vh; max-width:min(94vw,860px); object-fit:contain;
  border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.95);
}
.lb-caption{ text-align:center; max-width:640px; }
.lb-caption h3{
  margin:0; font-size:clamp(1.2rem,2.6vw,1.7rem); letter-spacing:.06em;
}
.lb-title{ margin:4px 0 0; color:var(--ice-bright); font-size:.86rem; letter-spacing:.1em; }
.lb-quote{ margin:10px 0 0; color:var(--frost-dim); font-size:.92rem; font-style:italic; }
.lb-close,.lb-nav{
  position:absolute; z-index:2;
  background:rgba(10,16,24,.6); color:var(--frost);
  border:1px solid var(--line-strong);
  width:46px; height:46px; font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, border-color .25s, transform .2s;
}
.lb-close:hover,.lb-nav:hover{ background:rgba(30,50,70,.9); border-color:var(--ice); }
.lb-close{ top:clamp(12px,2vw,26px); right:clamp(12px,2vw,26px); font-size:1.6rem; }
.lb-nav{ top:50%; transform:translateY(-50%); }
.lb-prev{ left:clamp(8px,2vw,26px); }
.lb-next{ right:clamp(8px,2vw,26px); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }

/* ===================== 반응형 ===================== */

/* 화면이 좁으면 조각 벽을 옆으로 밀어서 봅니다 */
@media (max-width:1023px){
  .wall-viewport{
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .wall-viewport::-webkit-scrollbar{ display:none; }
  .shard{ scroll-snap-align:center; }
  .shard img{ filter:saturate(.85) brightness(.72) contrast(1.04); }
  .wall-hint{
    top:74px; bottom:auto; right:auto; left:50%; transform:translateX(-50%);
    font-size:.68rem;
  }
  .wall-emblem{ width:min(230px,52vw); }
  .wall-overlay{ gap:12px; }
  .wall-overlay .hero-cta{ gap:10px; }
  .btn{ padding:11px 22px; font-size:.84rem; }
}

@media (max-width:1199px){
  :root{ --col:4; --row:78px; --gap:12px; }
  .tile.w3{ grid-column:span 2; grid-row:span 8; }
  .tile.w2{ grid-column:span 2; grid-row:span 7; }
  .tile.wide{ grid-column:span 2; grid-row:span 4; }
  .panel{ grid-column:span 2; grid-row:span 3; }
}
@media (max-width:767px){
  :root{ --col:2; --row:60px; --gap:9px; }
  .tile.w3{ grid-column:span 2; grid-row:span 7; }
  .tile.w2{ grid-column:span 1; grid-row:span 4; }
  .tile.wide{ grid-column:span 2; grid-row:span 4; }
  .panel{ grid-column:span 2; grid-row:span 3; }
  .tile-title{ display:none; }
  /* 폰에서는 아래 바가 두 번째 줄을 가리지 않도록 최소한만 남깁니다 */
  .wall-emblem{ width:min(190px,44vw); }
  .wall-overlay .hero-stats,
  .wall-overlay .btn-ghost{ display:none; }
  .wall-overlay .btn-primary{ padding:11px 18px; font-size:.8rem; }
  .nav{ gap:16px; }
  .nav a{ font-size:.8rem; }
  .brand-text{ font-size:.9rem; letter-spacing:.16em; }
  .hero{ min-height:auto; padding-top:96px; }
  .lb-figure img{ max-height:62vh; }
  .lb-nav{ width:40px; height:40px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  html{ scroll-behavior:auto; }
}