/* 01 히어로 — 레퍼 intro 1600 디자인 px 값 (calc(N * var(--u))) */
#intro { position: relative; height: calc(1080 * var(--u)); max-width: var(--max); margin: 0 auto; overflow: hidden; }
.intro_bg { position: absolute; inset: 0; background: url(../img/main_bg.jpg) center 40% / cover no-repeat; filter: brightness(.52) contrast(1.05); }
.intro_bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 60% 45%, transparent 40%, rgba(0, 0, 0, .55)); }

/* 첫 화면 가운데: 할매 + 서산할매 묵은지김치찜 (레퍼 main_txt 자리) */
/* 옹기에 새긴 로고 (레퍼 main_txt: 결이 박힌 회색 글씨) — 글씨 면에 질감을 구워 넣고, 위에 파인 테두리 음영 */
.main_txt { position: absolute; left: 50%; top: 50%; translate: -50% -46%; z-index: 4; width: calc(336 * var(--u)); }
.main_txt img { width: 100%; height: auto; }
.main_txt .bevel { position: absolute; inset: 0; opacity: .8; }

/* 줄어든 뒤 왼쪽 글 묶음 (레퍼 left 150 · top 370 · 제목 mb 36 · 슬로건 mb 45 · 본문 22/36) */
.main_cont { position: absolute; z-index: 3; left: calc(150 * var(--u)); top: calc(370 * var(--u)); }
.main_title { margin-bottom: calc(36 * var(--u)); }
.main_title img { width: calc(718 * var(--u)); max-width: none; height: auto; filter: drop-shadow(calc(2 * var(--u)) calc(2 * var(--u)) 0 #000) drop-shadow(0 0 calc(22 * var(--u)) rgba(0, 0, 0, .55)); }
.main_slogan { margin-bottom: calc(45 * var(--u)); font-family: var(--serif); font-weight: 700; font-size: calc(44 * var(--u)); line-height: 1.38; letter-spacing: -.035em; text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #000, 0 0 calc(19 * var(--u)) rgba(0, 0, 0, .6); white-space: nowrap; }
/* 슬로건 글자 = 산돌 광야를 SVG 로 구운 것 (줄마다 한 장) — 그림자는 text-shadow 대신 drop-shadow */
.main_slogan .bk { display: block; height: 1.38em; width: auto; aspect-ratio: var(--ar); filter: drop-shadow(calc(2 * var(--u)) calc(2 * var(--u)) 0 #000) drop-shadow(0 0 calc(19 * var(--u)) rgba(0, 0, 0, .6)); }
.main_slogan .em { color: var(--red-hero); }
.main_desc { font-size: calc(22 * var(--u)); font-weight: 500; line-height: calc(36 * var(--u)); text-shadow: 0 0 calc(10 * var(--u)) rgba(0, 0, 0, .7); }

/* 항아리 (레퍼 돌 자리: 오른쪽, 아래로 걸침) */
.main_jar_wrap { position: absolute; z-index: 2; right: calc(30 * var(--u)); bottom: calc(-210 * var(--u)); width: calc(920 * var(--u)); /* 아래가 히어로 밑단에서 잘림 */ filter: drop-shadow(0 calc(38 * var(--u)) calc(38 * var(--u)) rgba(0, 0, 0, .55)); }
.main_jar { transform-origin: 60.5% 90%; /* 첫 화면(4.2배) 가운데에 김치 대신 옹기 몸통이 오게 */ will-change: transform, filter; }
.main_jar img { width: 100%; height: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; will-change: transform; }
.main_jar img:active { cursor: grabbing; }

.js .main_move_eff { opacity: 0; }

/* 모바일 (레퍼: 높이 207vw · 위 여백 29.95vw · 제목 89.97vw · 본문 4.56vw/6.51vw · 돌 85.94vw) */
@media (max-width: 768px) {
  #intro { height: auto; padding-top: calc(230 * var(--u)); text-align: center; }
  .main_cont { position: relative; left: auto; top: auto; padding: 0 calc(30 * var(--u)); }
  .main_title { margin-bottom: calc(50 * var(--u)); }
  .main_title img { width: calc(691 * var(--u)); margin: 0 auto; }
  .main_slogan { margin-bottom: calc(54 * var(--u)); font-size: calc(48 * var(--u)); white-space: normal; }
  .main_slogan .bk { margin: 0 auto; }
  .main_desc { font-size: calc(35 * var(--u)); line-height: calc(50 * var(--u)); }
  .main_jar_wrap { position: relative; right: auto; bottom: auto; width: calc(780 * var(--u)); margin: calc(60 * var(--u)) auto calc(-230 * var(--u)); }
}

/* 10-16 모바일: 스크립트가 숨기기 전 항아리·글이 한 번 보였다 사라지는 깜빡임 방지 — 처음부터 숨겨 두고 hero.js 가 띄움 */
@media (max-width: 768px) { .main_jar, .main_move_eff { opacity: 0; } }