@charset "utf-8";
/* main.css — 이벤트 진행 화면(01 단계·02 채팅·센스왕 보드)·참여 팝업 */

/* ==========================================================
 * css/flow.css — 하이GT 이벤트 01·02 단계 진행(PC)
 * 피그마 Group 59·60(이벤트01 STEP), Frame 299:3926(이벤트02 답변), Group 70(센스왕 보드)
 * 기획서 19~29p 흐름: 단계 표시 → 카드 첨부·공유 → 개인정보 입력 → 참여 완료
 * ========================================================== */
/* 이벤트01 기존 정적 단계·채팅 화면은 단계형 컴포넌트로 교체 */
[data-node-id="193:3831"], [data-node-id="211:3863"], [data-node-id="194:5009"], [data-node-id="194:5019"], [data-node-id="194:5020"], [data-node-id="194:5022"] { display: none !important; }
.flow { position: absolute; z-index: 15; font-family: "YClover", "Pretendard", sans-serif; color: #383b3f; }
.flow * { box-sizing: border-box; }
.flow button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
.flow button:focus-visible, .flow-modal button:focus-visible, .flow-modal input:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }
/* ---------- 이벤트01 ---------- */
#e1-flow { left: 360px; top: 2843px; width: 1200px; height: 911px; }
.e1-steps { position: absolute; left: 0; top: 0; width: 470px; height: 911px; display: flex; flex-direction: column; justify-content: space-between; }
#e1-flow .e1-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  padding: 40px;
  border-radius: 8px;
  background: #e3e9f2;
  text-align: center;
  transition: background-color .3s ease, transform .2s ease;
}
#e1-flow .e1-step:hover { transform: translateY(-2px); }
.e1-step .pill {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 100px;
  background: #fff;
  color: #8ca9d5;
  font-weight: 700;
  font-size: 18px;
  line-height: 38px;
  letter-spacing: -0.18px;
  transition: color .3s;
}
.e1-step .txt { font-weight: 400; font-size: 28px; line-height: 42px; letter-spacing: -0.28px; white-space: nowrap; color: #383b3f; transition: color .3s; }
.e1-step .txt b { font-weight: 700; }
#e1-flow .e1-step.is-on { background: #ff7300; }
.e1-step.is-on .pill { color: #ff7300; }
.e1-step.is-on .txt { color: #fff; }
/* 브라우저 창: 7px 바깥 테두리(피그마 바깥선) — 안쪽 원점이 프레임 원점 */
.flow-window {
  position: absolute;
  width: 701.23px;
  height: 911px;
  border: 7px solid #00c9e2;
  box-sizing: content-box;
  margin: -7px 0 0 -7px;
  border-radius: 15px;
  overflow: hidden;
  background: #edf5f6;
  box-shadow: 0 24px 24px rgba(0,0,0,.15);
}
#e1-flow .flow-window { left: 498.77px; top: 0; }
.flow-window .scr { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; }
.flow-window .scr.is-on { opacity: 1; visibility: visible; transition: opacity .45s ease; }
.flow-window .scr > img.bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.scr-hit { position: absolute; inset: 42px 0 0 0; cursor: pointer; }
.flow-window .hgt-live { position: absolute; left: 0; top: 42px; width: 100%; height: calc(100% - 42px); border: 0; display: block; background: #fff; } /* 이벤트 01 STEP 01·02: 실제 하이GT 화면 */
#e1-flow .flow-window .hgt-hand { left: 300px; top: auto; bottom: 16px; width: 70px; height: 86px; z-index: 2; } /* "여기에서 물어보세요!" 입력창 옆 손 */
.flow-window .scr.is-touched .hgt-hand { display: none; }
/* STEP03 카드 만들기·공유 (피그마 299:3857 좌표) */
.card-sheet { position: absolute; left: 41.23px; top: 107px; width: 620px; height: 409px; background: #fff; }
#e1-flow .card-drop { position: absolute; left: 61.23px; top: 127px; width: 580px; height: 277px; background: #fff8e8; border: 1px dashed #000; overflow: hidden; display: block; padding: 0; }
.card-drop .folder { position: absolute; left: 240px; top: 93px; width: 100.45px; height: 92px; }
.card-drop .preview { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; background: #fff8e8; }
.card-drop .fname { position: absolute; left: 0; right: 0; bottom: 8px; font: 500 15px/1.3 "Pretendard", sans-serif; color: #6b5a36; text-align: center; }
.card-tape { position: absolute; left: 224.23px; top: 37px; width: 255px; height: 156px; pointer-events: none; }
.card-attach {
  position: absolute;
  left: 60.23px;
  top: 423px;
  width: 582px;
  height: 66px;
  border-radius: 100px;
  text-align: center;
  font-family: "YClover","Pretendard",sans-serif;
  background: #ffe16a !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  letter-spacing: 0.56px;
  line-height: 66px;
  transition: filter .2s;
}
.sns-row { position: absolute; left: 60.86px; top: 586px; width: 578.74px; height: 105px; }
.sns-row .circle { position: absolute; top: 11.57px; width: 71.93px; height: 71.93px; }
.sns-row img.strip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#e1-flow .sns-row button { position: absolute; top: 18px; width: 68px; height: 68px; border-radius: 50%; transition: transform .2s; }
.sns-row button:hover { transform: translateY(-3px); }
.join-btn { position: absolute; border-radius: 100px; background: #000 !important; color: #fff !important; font-weight: 700 !important; text-align: center; transition: transform .2s, opacity .3s; }
.join-btn:hover { transform: translateY(-2px); }
#e1-flow .join-btn { left: 72.23px; top: 744px; width: 558px; height: 100px; font-size: 42px !important; line-height: 100px; letter-spacing: 0.84px; }
.btn-hand { position: absolute; width: 85px; height: 105px; transform: rotate(-22.54deg); pointer-events: none; }
#e1-flow .btn-hand { left: 472px; top: 764px; }
/* 단계를 가리키는 손 (피그마 Group 45, -22.54°) */
.step-hand { position: absolute; left: 375px; width: 114.36px; height: 141.13px; transform: rotate(-22.54deg); pointer-events: none; transition: top .45s cubic-bezier(.3,.7,.2,1); z-index: 2; }
.step-hand img, .btn-hand img { width: 100%; height: 100%; display: block; animation: hand-tap 1.1s ease-in-out infinite; }
@keyframes hand-tap { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-6px,-8px); } }
/* ---------- 이벤트02 ---------- */
#e2-chat { left: 358.77px; top: 5491px; width: 701.23px; height: 911px; }
#e2-chat .flow-window { left: 0; top: 0; background: transparent; box-shadow: none; border-color: transparent; }
#e2-chat .scr.greet { background: transparent; }
.typing {
  position: absolute;
  left: 34px;
  top: 140px;
  display: flex;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  opacity: 0;
  transition: opacity .3s;
}
.typing.on { opacity: 1; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: #5fb4c2; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.e2-replay {
  position: absolute;
  right: 18px;
  bottom: 18px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font: 600 15px/1 "Pretendard", sans-serif;
  opacity: 0;
  transition: opacity .3s;
}
#e2-chat:hover .e2-replay.on { opacity: 1; }
/* 답변이 보이기 전 참여하기는 흐리게(기획 25p) */
[data-node-id="194:4057"], [data-node-id="194:4055"], [data-node-id="194:4949"] { transition: opacity .4s; }
/* 참여하기 첫 클릭 → 채팅이 답변 화면으로 바뀐 뒤 버튼이 주황으로 강조(기획 26p) */
html.e2-ready .hit-join { animation: join-pulse 1.6s ease-in-out infinite; }
@keyframes join-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,115,0,.55); } 50% { box-shadow: 0 0 0 14px rgba(255,115,0,0); } }
/* 피그마 Group 70: 패널 1400×1028, 흰 영역 1360×858(헤더 150 아래) */
#e2-board { left: 279px; top: 5400px; width: 1360px; height: 858px; background: #fff; display: none; z-index: 22; }
#e2-board.on { display: block; animation: fade-in .5s ease; }
html.e2-board-on [data-node-id="194:4057"], html.e2-board-on [data-node-id="194:4055"], html.e2-board-on [data-node-id="194:4949"], html.e2-board-on .hit-join, html.e2-board-on #e2-chat, html.e2-board-on [data-node-id="211:3864"], html.e2-board-on [data-node-id="194:4003"] {
  display: none !important;
}
#e2-board img { width: 1360px; height: auto; display: block; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ---------- 참여 팝업 (기획 22·27p) ---------- */
.flow-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); font-family: "Pretendard", sans-serif; color: #222; }
.flow-modal.on { display: flex; animation: fade-in .25s ease; }
.flow-modal .box {
  width: 560px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
.flow-modal .hd { text-align: center; font-family: "YClover", "Pretendard", sans-serif; font-weight: 700; color: #111; flex: none; padding: 22px 30px 6px; font-size: 28px; }
.flow-modal form { padding: 6px 30px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.flow-modal .err { min-height: 20px; margin: 10px 0 0; color: #e0352b; font-size: 14px; font-weight: 600; text-align: center; }
.flow-modal.done .box {
  width: 680px;
  max-width: calc(100vw - 40px);
  padding: 0;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(180deg, #e7f6fb 0%, #f4fbfd 55%, #fff 100%);
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  overflow: hidden;
}
.flow-modal.done .msg {
  font-family: "YClover", "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 28px;
  margin: 0;
  padding: 44px 20px 28px;
  color: #10203a;
  font: 700 40px/1.25 "YClover", "Pretendard", sans-serif;
  letter-spacing: -1px;
  white-space: nowrap;
  word-break: keep-all;
}
.flow-modal.done img { width: 220px; height: auto; margin: 22px auto; display: block; }
.flow-modal.done .confirm {
  display: block;
  width: 100%;
  height: 96px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #337f00;
  color: #fff;
  font: 700 32px/96px "Pretendard", sans-serif;
  letter-spacing: -0.8px;
  cursor: pointer;
}
.flow-modal.done[data-ev="02"] .confirm { background: #0041f5; }
@media (prefers-reduced-motion: reduce) {
  .step-hand img, .btn-hand img, .btn-hand, .typing i { animation: none !important; }
  .flow-window .scr { transition: none; }
}
.flow-modal.done .thanks-card {
  margin: 0 40px 36px;
  padding: 14px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 60, 110, .14);
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
}
.flow-modal.done .thanks-visual { width: 100%; aspect-ratio: 556 / 403; border-radius: 12px; overflow: hidden; height: auto; max-height: 100%; min-height: 0; }
.flow-modal.done .thanks-visual img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.flow-modal.done .confirm:hover, .flow-modal.done .confirm:focus-visible { background: #286400; outline: none; }
.flow-modal.done[data-ev="02"] .confirm:hover, .flow-modal.done[data-ev="02"] .confirm:focus-visible { background: #0033c4; }
/* ===== 참여 폼 — 으뜸촌 '이벤트 참여자 정보' 팝업과 같은 구성 ===== */
.flow-modal.entry .box {
  width: 630px;
  max-width: calc(100vw - 40px);
  padding: 0;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  color: #222;
  letter-spacing: -0.4px;
  max-height: calc(100dvh - 16px);
  height: min(960px, calc(100dvh - 40px));
}
.flow-modal.entry .hd {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 12px 70px;
  border-bottom: 1px solid #222;
  background: #fff;
  font: inherit;
}
.flow-modal.entry .hd h2 { margin: 0; font: 700 28px/1.4 "Pretendard", sans-serif; color: #111; letter-spacing: -0.7px; }
.flow-modal.entry .hd .x {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font: 300 32px/1 "Pretendard", sans-serif;
  color: #555;
  cursor: pointer;
}
.flow-modal.entry form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 20px; align-content: start; padding: 20px 20px 24px; }
.flow-modal.entry .entry-fields { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #222; }
.flow-modal.entry .entry-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 18px; line-height: 1.4; }
.flow-modal.entry .entry-row > label { font-weight: 500; }
.flow-modal.entry .entry-row > div { min-width: 0; }
.flow-modal.entry .entry-row input:not([type=file]) {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #333;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font: 400 16px "Pretendard", sans-serif;
}
.flow-modal.entry input::placeholder { color: #888; }
.flow-modal.entry .proof-field { align-items: start; }
.flow-modal.entry .proof-field > label { padding-top: 10px; }
.flow-modal.entry .file-attach { display: flex; gap: 8px; }
.flow-modal.entry .file-attach .file-name { flex: 1 1 auto; }
.flow-modal.entry .file-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 48px;
  margin-top: -4px;
  border: 1px solid #222;
  border-radius: 4px;
  background: #fff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.flow-modal.entry .file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.flow-modal.entry .proof-field small { display: block; margin-top: 10px; color: #666; font-size: 13px; }
.flow-modal.entry .consent-all { display: flex; align-items: center; gap: 8px; font-size: 18px; cursor: pointer; }
.flow-modal.entry .consent-label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; font-weight: 600; cursor: pointer; }
.flow-modal.entry .consent-label span { flex: 1; }
.flow-modal.entry .consent-label strong { color: #e0001b; font-weight: 700; }
.flow-modal.entry .consent-label em { font-style: normal; font-weight: 400; }
.flow-modal.entry input[type=checkbox] { flex: none; width: 22px; height: 22px; margin: 0; accent-color: #222; cursor: pointer; }
.flow-modal.entry .policy { margin: 0; border-top: 2px solid #222; font-size: 14px; line-height: 1.6; }
.flow-modal.entry .policy > div { display: grid; grid-template-columns: 34% minmax(0, 1fr); border-bottom: 1px solid #ddd; }
.flow-modal.entry .policy dt, .flow-modal.entry .policy dd { margin: 0; padding: 12px 10px; }
.flow-modal.entry .policy dt { border-right: 1px solid #ddd; color: #333; }
.flow-modal.entry .policy dd p { margin: 0; }
.flow-modal.entry .deleg { width: 100%; border-collapse: collapse; border-top: 2px solid #222; font-size: 14px; text-align: center; }
.flow-modal.entry .deleg th, .flow-modal.entry .deleg td { padding: 12px 10px; border-bottom: 1px solid #ddd; font-weight: 400; }
.flow-modal.entry .deleg th + th, .flow-modal.entry .deleg td + td { border-left: 1px solid #ddd; }
.flow-modal.entry .err { min-height: 0; margin: 0; color: #e0001b; font-size: 15px; font-weight: 600; text-align: center; }
.flow-modal.entry .err:empty { display: none; }
.flow-modal.entry .ok {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #337f00;
  color: #fff;
  font: 700 32px/1 "YClover", "Pretendard", sans-serif;
  cursor: pointer;
  overflow: visible;
  height: 88px;
}
.flow-modal.entry .ok img { position: absolute; height: auto; transform: rotate(-22.54deg); pointer-events: none; left: calc(50% + 80px); top: 18px; width: 54px; }
.flow-modal.entry .ok:hover { filter: brightness(.94); }
.flow-modal.entry[data-ev="02"] .ok { background: #0041f5; }
.flow-modal.entry input:focus-visible, .flow-modal.entry button:focus-visible, .flow-modal.entry .file-button:focus-within { outline: 3px solid #1a73e8; outline-offset: 2px; }
.flow-modal.done .msg, .flow-modal.done .confirm { flex: none; }
/* 센스왕 보드 탭 — 패널을 피그마 높이(1028)로 줄이고, 아래 영역을 같은 만큼(435px) 끌어올려 여백을 피그마와 동일하게 */
html.e2-board-on [data-node-id="194:4000"] { height: 1028px !important; }
html.e2-board-on [data-node-id="13:39102"] { height: 2418px !important; }
html.e2-board-on :is([data-node-id="197:5147"], [data-node-id="197:5144"], [data-node-id="8:17327"], [data-node-id="199:5191"], [data-node-id="13:39699"], [data-node-id="13:39706"], [data-node-id="199:5197"], [data-node-id="199:5195"], [data-node-id="198:5178"], [data-node-id="211:3855"], [data-node-id="13:39710"], [data-node-id="13:39711"], [data-node-id="14:39813"], [data-node-id="13:39712"], [data-node-id="203:3776"], [data-node-id="203:3777"], [data-node-id="203:3772"], .hit-share) {
  margin-top: -435px;
}
html.e2-board-on #campaign, html.e2-board-on .hgt-stage, html.e2-board-on [data-node-id="1:19"] { height: 8230px !important; }
/* 2026-10-12 이벤트 01 STEP 04 문구 3줄 — 카드 세로 여백 줄여 4장이 911px 안에 들어가게 */
#e1-flow .e1-step[data-step="4"] { padding-top: 24px; padding-bottom: 24px; }
/* 2026-10-12 이벤트 02 도전 방법 손가락 (단계 묶음 194:4003 안) */
[data-node-id="194:4003"] .e2-step-hand { left: 375px; }

/* 2026-10-12 카드뉴스 영역: 콘텐츠 카드 4종 (2025ggtour2 카드 스타일 — 사진 + 아래 둥근 마감 + 소제목/제목) */
#cardnews { height: 669px; display: flex; gap: 32px; align-items: flex-start; }
#cardnews .cn-card { display: block; width: 326px; background: #fff; border-radius: 24px; overflow: hidden; text-decoration: none; color: #333; box-shadow: 0 10px 24px rgba(0,0,0,.08); transition: transform .25s ease, box-shadow .25s ease; }
#cardnews .cn-card:nth-child(even) { margin-top: 90px; }
#cardnews .cn-card:hover { transform: translateY(-6px); box-shadow: 0 18px 32px rgba(0,0,0,.14); }
#cardnews .pic { display: block; width: 326px; height: 290px; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 24% 24%; }
#cardnews .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
#cardnews .cap { display: block; padding: 40px 20px 46px; text-align: center; }
#cardnews .sub { display: block; min-height: 60px; font: 400 20px/30px "Pretendard", sans-serif; letter-spacing: -.4px; color: #333; word-break: keep-all; }
#cardnews .ttl { display: block; margin-top: 8px; font: 700 32px/40px "YClover", "Pretendard", sans-serif; color: #ff7300; }

/* 2026-10-12 참여 팝업 닫기: 글자 × 대신 선 두 개로 그린 일반 닫기 아이콘 */
.flow-modal.entry .hd .x { font-size: 0; color: transparent; }
.flow-modal.entry .hd .x::before, .flow-modal.entry .hd .x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: #333; border-radius: 1px; transform: translate(-50%, -50%) rotate(45deg); }
.flow-modal.entry .hd .x::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* 2026-10-12 이벤트 02 채팅창(iframe) 입력창 옆 손 — 이벤트 01과 동일 */
#e2-chat .flow-window .hgt-hand { left: 300px; top: auto; bottom: 16px; width: 70px; height: 86px; z-index: 2; }
#e2-chat .flow-window .hgt-live { background: transparent; }
/* 2026-10-13 이벤트 02 도전 방법 단계: 이벤트 01과 같은 모양(회색 카드, 선택 시 주황) + 눌러서 선택 */
[data-node-id="194:4003"] .e2-step { background: #e3e9f2 !important; cursor: pointer; transition: background-color .3s ease, transform .2s ease; }
[data-node-id="194:4003"] .e2-step:hover { transform: translateY(-2px); }
[data-node-id="194:4003"] .e2-step p, [data-node-id="194:4003"] .e2-step span, [data-node-id="194:4003"] .e2-step div { color: #383b3f !important; transition: color .3s; }
[data-node-id="194:4003"] .e2-step > div:first-child p { color: #8ca9d5 !important; }
[data-node-id="194:4003"] .e2-step.is-on { background: #ff7300 !important; }
[data-node-id="194:4003"] .e2-step.is-on p, [data-node-id="194:4003"] .e2-step.is-on span, [data-node-id="194:4003"] .e2-step.is-on div { color: #fff !important; }
[data-node-id="194:4003"] .e2-step.is-on > div:first-child p { color: #ff7300 !important; }

/* 2026-10-13 STEP 카드 사이 화살표 (피그마 arrow2-gray 56×65, 카드 경계에 걸침) — 이벤트 01·02 공통 */
#e1-flow .e1-step, [data-node-id="194:4003"] .e2-step { position: relative; }
#e1-flow .e1-step:not(:last-child)::after, [data-node-id="194:4003"] .e2-step:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: -37px; width: 56px; height: 65px; margin-left: -28px; z-index: 2; pointer-events: none;
  background: url("../img/flow/step-arrow.webp") 0 0 / 100% 100% no-repeat;
}
[data-node-id="194:4003"] .e2-step:nth-child(4)::after { display: none; }   /* 손 요소가 마지막 자식이라 4번 카드도 제외 */

/* 2026-10-13 이벤트 02 STEP 03·04 답변 캡쳐 첨부 화면 — 이벤트 01 STEP 03 과 같은 구성, SNS 공유 없이 세로 가운데 정렬 */
#e2-chat .e2-s3 { background: #eaf6f6; }
#e2-chat .e2-s3 > img.bg { height: 42px; object-fit: cover; object-position: top; }   /* 인사 화면 그림에서 브라우저 막대만 */
#e2-chat .e2-s3 .card-sheet { top: 156px; }
#e2-chat .e2-s3 .card-drop { position: absolute; left: 61.23px; top: 176px; width: 580px; height: 277px; background: #fff8e8; border: 1px dashed #000; overflow: hidden; display: block; padding: 0; }
#e2-chat .e2-s3 .card-tape { top: 86px; }
#e2-chat .e2-s3 .card-attach { top: 472px; }
#e2-chat .e2-s3 .e2-s3-msg { position: absolute; left: 0; right: 0; top: 605px; margin: 0; text-align: center; font: 700 32px/42px "YClover", "Pretendard", sans-serif; color: #33261a; letter-spacing: -.5px; }
#e2-chat .e2-s3 .join-btn { left: 72.23px; top: 697px; width: 558px; height: 100px; font-size: 42px !important; line-height: 100px; letter-spacing: 0.84px; }
#e2-chat .e2-s3 .btn-hand { left: 472px; top: 717px; }
#e1-flow .e1-step[data-step="4"]::after { display: none; }   /* 마지막 단계 아래 화살표 없음 */

/* 2026-10-14 경품 이미지 (이벤트1·2 상품 카드) */
.prize-pic { position: absolute; width: 200px; height: 200px; object-fit: contain; pointer-events: none; }
.prize-lbl3 { font-size: 24px !important; letter-spacing: -0.72px !important; top: 5004px !important; }
.prize-lbl3 p { line-height: 32px; }

/* 2026-10-15 이벤트별 참여자 수 (으뜸촌과 같은 구성: data-event-count="01/02" 에 숫자 바인딩) — 패널 아래 여백(121px)에 맞춘 72px 바 */
.event-count { position: absolute; left: 0; width: 1920px; z-index: 6; display: flex; justify-content: center; margin: 0; padding: 0; pointer-events: none; }
.event-count p { margin: 0; padding: 0 60px; height: 82px; line-height: 82px; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.10); color: #666; font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 24px; letter-spacing: -.6px; white-space: nowrap; }
.event-count em { margin-right: 4px; font-style: normal; font-weight: 800; font-size: 38px; letter-spacing: -1px; color: #df3000; vertical-align: -3px; }
.event-count b { color: #222; font-weight: 800; }
.event-count[data-event="01"] em { color: #337f00; }
.event-count[data-event="02"] em { color: #0041f5; }

/* =====================================================================
 * 2026-10-15 하단 고정 띠 (으뜸촌 2026no1welchon2 하단 띠와 같은 구성: 전체 메뉴 · 섹션 바로가기 알약 · TOP)
 * ===================================================================== */
body { padding-bottom: var(--floating-h, 102px); }
.floating-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 210; display: flex; justify-content: center; align-items: center; gap: 18px; height: var(--floating-h, 102px); border-top: 2px solid rgba(51, 127, 0, .35); background: #f3fbe9; font-family: "Pretendard", sans-serif; transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .28s, opacity .28s; }
.floating-bar.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.floating-bar button, .floating-bar a { cursor: pointer; font: inherit; }
.floating-menu { display: flex; align-items: center; gap: 10px; margin-right: 14px; padding: 0; border: 0; background: none; color: #2f5d16; }
.floating-menu-icon { display: grid; gap: 7px; width: 40px; }
.floating-menu-icon i { display: block; height: 4px; border-radius: 4px; background: #2f5d16; }
.floating-menu-text { font: 700 21px/1.2 "Pretendard", sans-serif; letter-spacing: -.5px; text-align: left; }
.floating-winner { display: flex; align-items: center; gap: 10px; width: 300px; height: 80px; padding: 0 18px 0 8px; border: 0; border-radius: 40px; background: var(--ev, #337f00); color: #fff; text-align: left; text-decoration: none; transition: transform .2s, filter .2s; }
.floating-winner:hover, .floating-winner:focus-visible { filter: brightness(.92); transform: translateY(-3px); }
.winner-badge { display: flex; flex: 0 0 64px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ev-badge, #5ea33a); color: #fff; font: 400 23px/1 "YClover", "Pretendard", sans-serif; text-align: center; }
.winner-badge small { font: 700 13px/1 "Pretendard", sans-serif; letter-spacing: -.3px; }
.winner-title { font: 400 21px/1.15 "YClover", "Pretendard", sans-serif; letter-spacing: -.5px; word-break: keep-all; }
.floating-event.e01 { --ev: #337f00; --ev-badge: #5ea33a; }
.floating-event.e02 { --ev: #0041f5; --ev-badge: #4c7bff; }
.floating-event.e03 { --ev: #f08a00; --ev-badge: #ffb340; }
.floating-event.e04 { --ev: #df3000; --ev-badge: #ff6a4d; }
.floating-top { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; margin-left: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(51, 127, 0, .22); color: #2f5d16; font: 400 22px/1 "YClover", "Pretendard", sans-serif; text-decoration: none; }
.floating-top span { font-size: 16px; margin-bottom: 2px; }
.floating-menu-panel { position: fixed; left: 50%; bottom: 0; z-index: 220; width: 520px; max-width: 100%; padding: 0 34px 26px; box-sizing: border-box; background: #2f5d16; color: #fff; font-family: "Pretendard", sans-serif; transform: translate(-50%, 105%); transition: transform .32s ease; box-shadow: 0 -8px 30px rgba(0, 40, 0, .25); }
.floating-menu-panel.is-open { transform: translate(-50%, 0); }
.menu-panel-head { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 2px solid rgba(255, 255, 255, .4); }
.menu-panel-head strong { font: 400 26px/1 "YClover", "Pretendard", sans-serif; }
.menu-close { width: 46px; height: 46px; border: 0; background: none; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.floating-menu-panel a { display: block; padding: 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 21px; font-weight: 600; letter-spacing: -.5px; text-decoration: none; }
.floating-menu-panel a:last-child { border-bottom: 0; }
.floating-menu-panel a:hover, .floating-menu-panel a:focus-visible { background: rgba(255, 255, 255, .12); }
.floating-menu-panel a b { display: inline-block; margin-right: 8px; color: #ffd66b; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .floating-bar, .floating-menu-panel { transition: none; } }

/* 2026-10-15 참여자 수 바 아래 여백 확보(농어촌처럼): 이벤트 1·2 패널 안쪽 아래 여백을 50px 줄여(105→55, 120→70) 바 아래 여백 ~58px */
[data-node-id="12:37530"] { height: 1215px !important; }
[data-node-id="194:4000"] { height: 1413px !important; }
html.e2-board-on [data-node-id="194:4000"] { height: 1028px !important; }
html.e2-board-on .event-count[data-event="02"] { top: 6297px !important; }