/* 서산할매 랜딩 — 레퍼: seogam.com (석암생소금구이)
   비례 축소 규칙도 레퍼 그대로: 1600 이상 px 고정 → 1600/1400/1080 구간마다 100vw/기준폭 으로 함께 줄고,
   768 이하는 768 기준 vw. 모든 치수는 calc(N * var(--u)) — N은 레퍼 1600 디자인의 px 값 */
@font-face { font-family: 'Doldam'; src: url(../fonts/jejudoldam-sub.woff2) format('woff2'); font-display: swap; }
:root {
  --u: 1px;
  --red: #C1000F;               /* 포인트(면): 처음 빨강 = 레퍼 원색 (10-14 D안 확정) */
  --red-txt: #C1000F;           /* 포인트(글씨): 어두운 바탕 위 강조 */
  --red-hero: #F2333B;          /* 히어로 슬로건 둘째 줄: 어두운 사진 위라 한 단계 밝게 (10-14) */
  --red-m: #B91F1F;             /* 모바일 상담 탭 (레퍼 #B91F1F 자리) */
  --white: #fff;
  --line: rgba(255, 255, 255, .4);
  --font: 'Pretendard Variable', Pretendard, system-ui, sans-serif;
  --brush: 'Doldam', var(--font);
  --serif: 'Gowun Batang', 'Noto Serif KR', serif;   /* 히어로 슬로건: 할매 손글씨 같은 따뜻한 명조 */
  --ls: -.05em;
  --max: 1920px;                /* 레퍼 max-width */
  --gutter: #140A0A;            /* 축소 시 좌우 여백: 붉은 기운 짙은 먹색 */
  --glass: rgba(20, 10, 10, .55);
}
@media (max-width: 1600px) { :root { --u: calc(100vw / 1600); } }
@media (max-width: 1400px) { :root { --u: calc(100vw / 1400); } }
@media (max-width: 1080px) { :root { --u: calc(100vw / 1080); } }
@media (max-width: 768px)  { :root { --u: calc(100vw / 768); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--gutter); color: var(--white); font-family: var(--font); letter-spacing: var(--ls); word-break: keep-all; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; letter-spacing: inherit; }
.mobile_only { display: none !important; }

/* ---------- 헤더 (레퍼: 90 높이, 좌우 100, 로고 251, 메뉴 20px·간격 96) ---------- */
#header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: calc(90 * var(--u));
  display: flex; align-items: center; padding: 0 max(calc(100 * var(--u)), calc((100vw - var(--max)) / 2 + 100px)); /* 레퍼: 안쪽 1920 가운데 */
  border-bottom: calc(1 * var(--u)) solid var(--line);
  background: linear-gradient(180deg, #00000094, transparent);
  transition: background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}
/* 레퍼와 다르게: 스크롤하면 어두운 유리 */
#header.scrolled { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%); border-bottom-color: rgba(255, 255, 255, .14); }
.dust { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
#header .logo img { width: calc(251 * var(--u)); max-width: none; height: auto; }
.gnb { display: flex; gap: calc(96 * var(--u)); margin: 0 auto; }
.gnb a { font-size: calc(20 * var(--u)); font-weight: 400; letter-spacing: -.025em; transition: color .5s; }
.gnb a.on { color: var(--red-txt); font-weight: 700; }
.call {
  background: var(--red); border-radius: calc(50 * var(--u)); padding: calc(10 * var(--u)) calc(24 * var(--u));
  display: grid; grid-template-columns: auto auto; align-items: baseline; justify-content: center; column-gap: calc(8 * var(--u)); line-height: 1.15;
}
.call b { font-size: calc(18 * var(--u)); font-weight: 800; }
.call strong { font-size: calc(23 * var(--u)); font-weight: 700; letter-spacing: -.03em; }
.call small { grid-column: 1 / -1; font-size: calc(12 * var(--u)); font-weight: 500; text-align: center; letter-spacing: -.04em; }
.call:active { transform: scale(.97); }

/* ---------- 마퀴 띠 (레퍼: 슬라이드 1816 폭을 20초에 흘림) ---------- */
.marquee { position: relative; z-index: 3; max-width: var(--max); margin: 0 auto; background: var(--red); overflow: hidden; height: calc(88 * var(--u)); display: flex; align-items: center; }
.marquee_track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.marquee_item { display: flex; align-items: center; gap: calc(26 * var(--u)); padding-right: calc(52 * var(--u)); }
.marquee_item img { flex: none; max-width: none; width: auto; }
.marquee_item .em { height: calc(62 * var(--u)); }
.marquee_item .ty { height: calc(38 * var(--u)); }
@keyframes marquee { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- 하단 고정 상담바 (레퍼: px 고정 80, 1400 이하 숨김) ---------- */
.inquiry { position: fixed; inset: auto 0 0; z-index: 80; max-width: var(--max); margin: 0 auto; background: var(--red); }
.inq_form { height: 80px; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 18px; }
.inq_tit { display: flex; align-items: center; gap: 14px; font-size: 30px; font-weight: 700; margin-right: auto; white-space: nowrap; }
.inq_tit { position: relative; padding-left: 152px; }
/* 레퍼(코코스키) 하단 폼처럼 캐릭터가 바 위로 튀어나옴 — 서산할매 로고 캐릭터, 4초마다 한 번 들썩 */
.inq_char { position: absolute; left: 0; bottom: -18px; height: 150px; width: auto; max-width: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); transform-origin: 50% 100%; animation: inqHop 4s cubic-bezier(.23, 1, .32, 1) infinite; }
.inq_char_m { display: none; }
@keyframes inqHop { 0%, 72%, 100% { transform: translateY(0) rotate(0); } 80% { transform: translateY(-10px) rotate(-3deg); } 88% { transform: translateY(0) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { .inq_char, .inq_char_m { animation: none; } }
.inq_form input:not([type=checkbox]), .inq_form select {
  width: 160px; height: 48px; border: 1px solid var(--white); border-radius: 0; background: var(--white); color: #222;
  font-size: 16px; padding: 0 20px; appearance: none;
}
.inq_form input::placeholder { color: #222; }
.inq_form select { color: #222; }
.agree { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 300; line-height: 1.25; margin-right: 17px; cursor: pointer; color: #fcf6ef; }
.agree input { width: 28px; height: 28px; accent-color: #000; }
.inq_form button[type=submit] { width: 170px; height: 50px; background: #000; color: var(--white); border: 0; font-size: 18px; font-weight: 700; cursor: pointer; transition: transform 160ms ease-out; }
.inq_form button[type=submit]:active { transform: scale(.97); }

.todo { max-width: var(--max); margin: 0 auto; height: calc(600 * var(--u)); display: grid; place-items: center; background: #1a1a1a; color: #777; font-weight: 600; font-size: calc(20 * var(--u)); }

/* ---------- 1400 이하: 메뉴·하단바 숨김 (레퍼 그대로) ---------- */
@media (max-width: 1400px) {
  .gnb { visibility: hidden; }
  .inquiry { display: none; }
}

/* ---------- 모바일 768 이하 (레퍼 768 기준 vw) ---------- */
@media (max-width: 768px) {
  .pc_only { display: none !important; }
  .mobile_only { display: revert !important; }
  #header { height: calc(130 * var(--u)); padding: 0 calc(25 * var(--u)); justify-content: space-between; border-bottom-width: calc(1 * var(--u)); }
  #header .logo img { width: calc(375 * var(--u)); }
  .menu-trigger { display: block !important; position: relative; width: calc(64 * var(--u)); height: calc(40 * var(--u)); background: none; border: 0; }
  .menu-trigger span { position: absolute; left: 0; width: 100%; height: calc(4 * var(--u)); background: #ccc; }
  .menu-trigger span:nth-child(1) { top: 0; }
  .menu-trigger span:nth-child(2) { top: calc(18 * var(--u)); }
  .menu-trigger span:nth-child(3) { bottom: 0; }
  .marquee { height: calc(92 * var(--u)); }
  .marquee_item .em { height: calc(66 * var(--u)); }
  .marquee_item .ty { height: calc(40 * var(--u)); }
  .inquiry { display: block; background: #000; }
  .inq_m { position: relative; }
  .inq_char_m { display: block; position: absolute; right: calc(20 * var(--u)); bottom: calc(56 * var(--u)); z-index: 2; height: calc(150 * var(--u)); width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, .35)); transform-origin: 50% 100%; animation: inqHop 4s cubic-bezier(.23, 1, .32, 1) infinite; }
  .inq_m { display: grid !important; grid-template-columns: 1fr 1fr; height: calc(80 * var(--u)); }
  .inq_call { display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 700; letter-spacing: -.02em; }
  .inq_call i { font-size: calc(40 * var(--u)); }
  .inq_toggle { display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); background: var(--red-m); border: 0; color: var(--white); }
  .inq_toggle img { height: calc(30 * var(--u)); width: auto; max-width: none; }
  .inq_toggle i { font-style: normal; font-size: calc(48 * var(--u)); line-height: 1; transition: transform .3s; }
  .inq_toggle[aria-expanded=true] i { transform: rotate(45deg); }
  .inq_form { display: none; height: auto; flex-wrap: wrap; gap: calc(20 * var(--u)); padding: calc(60 * var(--u)); background: var(--red-m); }
  .inq_form.open { display: flex; }
  .inq_form input:not([type=checkbox]), .inq_form select { width: 100%; height: calc(96 * var(--u)); font-size: calc(30 * var(--u)); }
  .agree { font-size: calc(26 * var(--u)); }
  .agree input { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .inq_form button[type=submit] { width: 100%; height: calc(96 * var(--u)); font-size: calc(32 * var(--u)); }
}