/* ==========================================================
   와우오더 — 사장님 고민 → 해결 → 기능 → 도입 효과 (도입 혜택 섹션 아래)
   #worry   흐린 저녁 매장 사진(어둡게) 위 채팅 말풍선 4개 + 표정 배지 2개
   #solve   파란 답 띠 — 한 줄 답 + 정면 기기 + 양옆 흰 알약 4개(말풍선에 대한 답)
   #feature 작은 라벨 + 큰 제목 → 탭 5개 → 큰 패널 한 장(5초마다 넘어감, 막대로 시간 표시)
   #effect  작은 라벨 + 큰 제목 → 숫자 카드 3장(리뷰 수만 파랑)
   main.css 의 .page-table section(여백)·.page-table h2(글꼴)보다 이기도록 section.xx / .xx .xx__title 로 쓴다
   ========================================================== */

/* ---------- 01-2. 사장님 고민 ---------- */
section.wr { position: relative; overflow: hidden; padding: 128px 0 96px; background: #111113; color: #fff; isolation: isolate; }
section.wr::before {                                  /* 흐린 저녁 매장 사진을 어둡게 눌러 깐다 — 맨 아래는 완전히 #111113 */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(17, 17, 19, .82) 0%, rgba(17, 17, 19, .66) 50%, #111113 100%),
    url("../img/story/worry-bg.webp") center / cover no-repeat;
}
.wr__inner { max-width: 1280px; margin: 0 auto; padding: 0 80px; text-align: center; }
.wr .wr__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #fff;
}
.wr__pre { color: rgba(255, 255, 255, .42); }       /* 윗줄은 회색으로 눌러 질문 줄이 먼저 읽히게 */

/* 말풍선 — 크게, 좌우로 조금씩만 엇갈린다. 꼬리는 아이메시지처럼 바깥 아래로 휘어져 나온다 */
.wr__chat { display: flex; flex-direction: column; gap: 22px; width: 720px; max-width: 100%; margin: 76px auto 0; text-align: left; }
.wr-bub {
  position: relative; align-self: flex-start; margin: 0; padding: 28px 48px; border-radius: 36px; background: #fff;
  font-size: 27px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #171717; white-space: nowrap;
}
.wr-bub--r { align-self: flex-end; }
.wr-bub::after {
  content: ""; position: absolute; left: -13px; bottom: 0; width: 36px; height: 30px; background: #fff;
  clip-path: path("M36 0 C36 17 24 27 0 30 C16 23 19 11 19 0 Z");
}
.wr-bub--r::after { left: auto; right: -13px; transform: scaleX(-1); }

/* 표정 배지 — 첫 말풍선 오른쪽 위, 마지막 말풍선 왼쪽 아래에 반쯤 걸친다 */
.wr-bub__face { position: absolute; width: 80px; height: 80px; pointer-events: none; }
.wr-bub:not(.wr-bub--r) .wr-bub__face { right: -38px; top: -40px; }
.wr-bub--r .wr-bub__face { left: -40px; bottom: -34px; }

/* 아래로 이어지는 점 세 개 → 해결 섹션 */
.wr__more { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 64px; }
.wr__more i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .42); }
.wr__more i:nth-child(2) { opacity: .66; }
.wr__more i:nth-child(3) { opacity: .36; }

/* ---------- 01-3. 해결 — 파란 답 띠 ---------- */
section.sv { position: relative; overflow: hidden; padding: 112px 0 0; color: #fff; background: linear-gradient(180deg, #2f6df6 0%, #2157e3 100%); }
section.sv::before {                                  /* 기기 뒤로 흰 빛이 아주 옅게 */
  content: ""; position: absolute; left: 50%; bottom: -20%; width: 1100px; height: 760px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
section.sv::after {                                   /* 위 고민 섹션에서 내려오는 삼각 꼬리 */
  content: ""; position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%);
  border-left: 42px solid transparent; border-right: 42px solid transparent; border-top: 34px solid #111113;
}
.sv__inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 80px; text-align: center; }
.sv .sv__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 54px; font-weight: 800; line-height: 1.28; letter-spacing: -0.025em; color: #fff;
}
.sv__thin { font-weight: 500; color: rgba(255, 255, 255, .78); }   /* 굵기 대비 — 윗줄 얇게, 답 줄 굵게 */

.sv__stage { position: relative; margin-top: 52px; }
.sv__device { width: 560px; margin: 0 auto -45px; }      /* 기둥은 섹션 아래로 박는다(높이 조절) */
.sv__device img { display: block; width: 100%; height: auto; max-width: none; filter: drop-shadow(0 30px 50px rgba(8, 24, 80, .35)); }

/* 답 알약 — 태블릿 양옆, 위 말풍선과 같은 순서(왼1 · 오1 · 왼2 · 오2) */
.sv-chips { list-style: none; }
.sv-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 22px 14px 14px;
  border-radius: 100px; background: #fff; box-shadow: 0 14px 30px rgba(8, 24, 80, .22);
  font-size: 17px; font-weight: 700; line-height: 1.2; color: #171717; white-space: nowrap;
}
.sv-chip svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #1d63e6; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sv-chip--l1 { right: calc(50% + 244px); top: 40px; }
.sv-chip--l2 { right: calc(50% + 262px); top: 172px; }
.sv-chip--r1 { left: calc(50% + 244px);  top: 86px; }
.sv-chip--r2 { left: calc(50% + 256px);  top: 218px; }

/* ---------- 01-4. 기능 — 탭 + 패널 ---------- */
section.ft { padding: 136px 0 0; background: #f3f5f8; }
.ft__inner { max-width: 1280px; margin: 0 auto; padding: 0 80px; }
.ft__head { text-align: center; }
.ft__label, .fx__label { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #6b7280; }
.ft .ft__title, .fx .fx__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717;
}

/* 탭 — 하나로 이어진 흰 알약 안에 5칸, 지금 칸만 먹색 */
.ft-tabs {
  position: relative; display: flex; width: fit-content; max-width: 100%; margin: 44px auto 28px; padding: 6px; gap: 2px;
  border: 1px solid #e3e7ec; border-radius: 100px; background: #fff; overflow-x: auto; scrollbar-width: none;
}
.ft-tabs::-webkit-scrollbar { display: none; }
/* 먹색 알약 하나가 지금 탭 뒤로 미끄러져 간다 — 두 칸이 따로 흐려지고 진해지면 강조가 튀어 보여서 */
.ft-tabs__ind {
  position: absolute; left: 0; top: 6px; bottom: 6px; z-index: 0; width: 0; border-radius: 100px; background: #171717;
  pointer-events: none; will-change: transform;
}
.ft-tabs.is-ready .ft-tabs__ind { transition: transform .5s cubic-bezier(.16, 1, .3, 1), width .5s cubic-bezier(.16, 1, .3, 1); }
.ft-tab {
  position: relative; z-index: 1; flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 100px; background: none;
  font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; color: #6b7280; cursor: pointer; white-space: nowrap;
  transition: color .15s;                 /* 알약이 떠나면 글자는 바로 회색으로 */
}
.ft-tab:hover { color: #171717; }
.ft-tab.is-on { color: #fff; transition: color .25s .12s; }   /* 알약이 거의 도착했을 때 흰 글자로 */
.ft-tab__naver { flex: none; width: 14px; height: 14px; margin-left: -2px; }   /* 리뷰 안내 앞 네이버 N(로고만, 네이버 초록) */

/* 패널 — 흰 카드는 가만히 두고, 안의 내용 다섯 장을 한 칸에 겹쳐 지금 것만 보인다.
   바뀔 때 두 장이 반투명으로 겹치면 글자가 두 겹·검은 기기가 비쳐 깜빡여 보이므로,
   나가는 내용이 0.2초 만에 다 사라진 뒤 들어오는 내용이 나타나게 한다 */
.ft-panels { display: grid; overflow: hidden; border: 1px solid #e6e9ee; border-radius: 28px; background: #fff; }
.ft-panel {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 600px; gap: 40px; padding: 36px 36px 36px 64px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.ft-panel.is-on {
  opacity: 1; visibility: visible;
  transition: opacity .35s ease .2s, visibility 0s linear .2s;
}
.ft-panel__txt { display: flex; flex-direction: column; justify-content: center; padding: 20px 0; }
.ft-panel__label { margin-bottom: 14px; font-size: 18px; font-weight: 700; line-height: 1.4; color: #6b7280; }
.ft .ft-panel__tit { font-size: 40px; font-weight: 800; line-height: 1.32; letter-spacing: -0.02em; color: #171717; }
.ft-panel__tit em { font-style: normal; color: #1d63e6; }
.ft-panel__bar { position: relative; display: block; width: 100%; max-width: 360px; height: 3px; margin-top: 56px; overflow: hidden; border-radius: 3px; background: #e9ecf1; }
.ft-panel__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: #1d63e6; }
/* 리뷰 안내 패널 — 라벨 앞 네이버 N, 강조 구절·시간 막대는 네이버 초록 */
.ft-panel__naver { display: inline-block; width: 15px; height: 15px; margin: 0 8px 0 0; vertical-align: -1px; }
.ft-panel--naver .ft-panel__tit em { color: #03C75A; }
.ft-panel--naver .ft-panel__bar i { background: #03C75A; }
.ft-panel.is-on .ft-panel__bar i { animation: ft-bar 5s linear forwards; }
.ft.is-paused .ft-panel__bar i { animation-play-state: paused; }
@keyframes ft-bar { to { width: 100%; } }

.ft-panel__vis { position: relative; height: 440px; overflow: hidden; border-radius: 22px; isolation: isolate; }
.ft-vis--warm   { background: linear-gradient(180deg, #faf8f4 0%, #ebe5da 100%); }
.ft-vis--blue   { background: linear-gradient(180deg, #f3f7fe 0%, #d9e6f8 100%); }
.ft-vis--sky    { background: linear-gradient(180deg, #f2f9fc 0%, #d6ebf4 100%); }
.ft-vis--violet { background: linear-gradient(180deg, #f6f4fd 0%, #e2ddf6 100%); }
.ft-vis--green  { background: linear-gradient(180deg, #f1f9f4 0%, #d6ecdf 100%); }

/* 01 — 주방 프린터 + 막 뽑혀 올라온 주방 주문서(생성 이미지, 글자 포함) */
.ft-shot.ft-shot--ticket { left: 50%; bottom: 8px; width: auto; height: 380px; transform: translateX(-50%); }
/* 포스·주방 연동 장면 — 그림(3:2)과 같은 비율의 상자에 라벨을 % 좌표로 얹는다. 그림 전체가 보이게(contain) 가운데, 판 바탕은 그림 가장자리와 같은 흰색 */
.ft-vis--sync { container-type: size; background: #fdfdfd; }
.ft-sync { position: absolute; left: 50%; top: 50%; width: min(100cqw, 150cqh); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); }
.ft-sync__img { display: block; width: 100%; height: 100%; }
.ft-sync__tag {
  position: absolute; padding: 7px 12px; border-radius: 100px; background: #fff; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; line-height: 1; color: #171717; white-space: nowrap; box-shadow: 0 4px 12px rgba(23, 23, 23, .14);
}
.ft-sync__tag--order { left: 13%; top: 30%; }   /* 왼쪽 테이블 기기 위 */
.ft-sync__tag--pos   { left: 64%; top: 19%; }   /* 카운터 포스 위 */
.ft-sync__tag--print { left: 88%; top: 27%; }   /* 주방 프린터 바로 아래 */
.ft-lang { list-style: none; }

/* 02~05 — 기기 누끼(화면 합성) */
.ft-shot { position: absolute; z-index: 1; height: auto; max-width: none; }
/* 사장님 앱 — 뒤 휴대폰(순서 변경) · 앞 휴대폰(메뉴 수정)을 겹쳐 세운다 */
.ft-vis--cream { background: linear-gradient(180deg, #fdfaf2 0%, #f4ead2 100%); }
.ft-app { position: absolute; z-index: 1; width: auto; max-width: none; filter: drop-shadow(0 22px 30px rgba(90, 70, 20, .18)); }
.ft-app--back  { left: 18%; top: 31%; height: 86%; opacity: .96; }   /* 휴대폰 두 대는 아래가 판 밖으로 잘리게 */
.ft-app--front { left: 47%; top: 17%; height: 100%; z-index: 2; }
/* 왼쪽 위 "실시간 반영"(AI 손글씨 누끼, 바탕과 같은 계열 옅은 모래색 + 별) · 오른쪽 아래 스토어 배지(세로로 두 개) */
.ft-live { position: absolute; left: 6.25%; top: 7.75%; z-index: 3; width: 32%; height: auto; max-width: none; pointer-events: none; }
.ft-stores { position: absolute; right: 2.5%; bottom: 5%; z-index: 3; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.ft-stores img { display: block; width: auto; height: 37px; filter: drop-shadow(0 6px 12px rgba(23, 23, 23, .16)); }
.ft-shot--call   { left: 2%;  bottom: -32%; width: 100%; }
.ft-shot--lang   { right: -14%; bottom: -26%; width: 98%; }
.ft-shot--review { left: 8%;  bottom: -30%; width: 88%; }
.ft-lang {
  position: absolute; left: 28px; top: 28px; z-index: 2; display: flex; flex-direction: column; gap: 4px;
  padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(40, 30, 90, .12);
}
.ft-lang li { width: 132px; padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #4b5260; }
.ft-lang li.is-on { background: #171717; color: #fff; }

/* ---------- 01-5. 도입 효과 ---------- */
section.fx { padding: 0 0 140px; background: #f3f5f8; }        /* 기능 섹션과 같은 연회색 — 사이는 아래 구분선으로 */
/* 같은 바탕의 두 섹션 사이 — 위 기능 패널 아래에서 파란 빛줄기가 내려와 "도입 효과" 알약에 닿는다(기능 → 효과로 이어지는 흐름) */
.fx__beam {
  display: block; width: 2px; height: 120px; margin: 0 auto; border-radius: 2px;
  background: linear-gradient(180deg, rgba(29, 99, 230, 0) 0%, rgba(29, 99, 230, .22) 45%, rgba(29, 99, 230, .75) 100%);
}
.fx .fx__label {                                      /* 빛줄기 끝 — 흰 알약 라벨 */
  display: inline-flex; align-items: center; margin-bottom: 22px; padding: 11px 24px;
  border: 1px solid #cddbf7; border-radius: 100px; background: #fff;
  font-size: 18px; font-weight: 700; line-height: 1.3; color: #1d63e6;
  box-shadow: 0 0 0 7px rgba(29, 99, 230, .06), 0 8px 20px rgba(29, 99, 230, .10);
}
.fx__inner { max-width: 1280px; margin: 0 auto; padding: 0 80px; }
.fx__head { margin-bottom: 52px; text-align: center; }
.fx__beam + .fx__head { margin-top: 0; }
.fx-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; }
.fx-card { position: relative; display: flex; flex-direction: column; height: 400px; padding: 34px 34px 28px; border-radius: 24px; background: #fff; }
.fx-card__top { display: flex; align-items: center; min-height: 26px; }
.fx-card__label { font-size: 18px; font-weight: 700; color: #4b5260; }
.fx-card__badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; padding: 6px 12px; border-radius: 100px; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: 0; vertical-align: 14px; }
.fx-card__badge::before { content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; }
.fx-card__badge.is-up   { background: #e6efff; color: #1d63e6; }
.fx-card__badge.is-up::before { border-bottom: 7px solid currentColor; }
.fx-card__badge.is-down { background: #e6efff; color: #1d63e6; }
.fx-card__badge.is-down::before { border-top: 7px solid currentColor; }
.fx-card__num { margin-top: 30px; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #171717; }
.fx-card__num small { margin-left: 2px; font-size: 34px; font-weight: 800; letter-spacing: 0; }


/* 막대 — 도입 전(연회색) · 도입 후(파랑), 높이는 수치 비례 */
.fx-chart { flex: 1; display: flex; align-items: flex-end; gap: 14px; margin-top: 28px; padding-bottom: 0; border-bottom: 1px solid #d7dce3; }
.fx-bar { position: relative; flex: 1; height: var(--h); border-radius: 12px 12px 0 0; background: #dde2e9; }
.fx-bar__val {                                        /* 막대 위 금액(인건비) — 짧은 막대는 위에, 꽉 찬 막대는 안쪽 위에 */
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); font-style: normal; text-align: center;
  font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: #1d63e6; white-space: nowrap;
}
.fx-bar:not(.is-after) .fx-bar__val { top: 18px; bottom: auto; color: #4b5260; }
.fx-bar__val small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: #8a919c; }
.fx-bar.is-after { background: linear-gradient(180deg, #4b88ff 0%, #1d63e6 100%); }
.fx-card__axis { display: flex; gap: 14px; margin-top: 10px; font-size: 14px; }
.fx-card__axis span, .fx-card__axis b { flex: 1; text-align: center; }
.fx-card__axis span { font-weight: 600; color: #9aa0a8; }
.fx-card__axis b { font-weight: 800; color: #1d63e6; }

/* 주인공 카드 — 리뷰 수만 파랑으로 뒤집는다 */
.fx-card--main { background: linear-gradient(180deg, #2f6df6 0%, #1f55dd 100%); }
.fx-card--main .fx-card__label { color: rgba(255, 255, 255, .8); }
.fx-card--main .fx-card__badge { background: rgba(255, 255, 255, .18); color: #fff; }
.fx-card--main .fx-card__num { color: #fff; }
.fx-card--main .fx-chart { border-bottom-color: rgba(255, 255, 255, .3); }
.fx-card--main .fx-bar { background: rgba(255, 255, 255, .26); }
.fx-card--main .fx-bar.is-after { background: #fff; }
.fx-card--main .fx-card__axis span { color: rgba(255, 255, 255, .6); }
.fx-card--main .fx-card__axis b { color: #fff; }

/* ---------- 01-6. 차이 — "다 거기서 거기 아닌가요?" ---------- */
section.df { position: relative; overflow: hidden; padding: 136px 0 140px; background: #fff; }
.df-rain {                                            /* 배경 — 테이블오더 일러스트가 비처럼 쏟아지고(어디나 비슷한 업체들) 아래로 갈수록 사라진다 */
  position: absolute; left: 50%; top: 24px; z-index: 0; width: 1600px; max-width: none; height: auto; transform: translateX(-50%); opacity: .38; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 0%, #000 38%, transparent 82%);
}
.df__inner { position: relative; z-index: 1; }
.df__inner { max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* 머리 — 가운데 말풍선 하나(질문 세 개가 번갈아 롤링) → 아래 답 제목·설명, 모두 가운데 정렬 */
.df__head { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-bottom: 64px; text-align: center; }
.df-ask1 { position: relative; width: 500px; max-width: 100%; }
.df-ask1__bg { display: block; width: 100%; height: auto; }   /* AI 말풍선 — 먹색, 크레용처럼 거친 가장자리 하나, 꼬리는 아래 가운데 */
.df-roll { position: absolute; left: 0; right: 0; top: 0; height: 79.7%; display: grid; place-items: center; margin: 0; }   /* 꼬리 뺀 몸통 가운데 */
.df-roll__win {                                       /* 줄 칸 2em + 위아래 흐린 가면 — 바뀔 때 잘리는 선 없이 스르륵 */
  display: block; height: 2em; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 76%, transparent 100%); font-size: 28px; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: #fff; }
.df-roll__track { display: block; animation: df-roll 9s cubic-bezier(.65, 0, .35, 1) infinite; }
.df-roll__track > span { display: grid; place-items: center; height: 2em; white-space: nowrap; }
@keyframes df-roll {                                  /* 3초씩 머물렀다가 위에서 아래로 — 맨 위 줄(첫 질문 복제)에 닿으면 처음으로 이어진다 */
  0%, 27%        { transform: translateY(-6em); }
  33.33%, 60.33% { transform: translateY(-4em); }
  66.66%, 93.66% { transform: translateY(-2em); }
  100%           { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .df-roll__track { animation: none; transform: translateY(-6em); } }
.df .df__title {
  font-family: "Pretendard Variable", Pretendard, sans-serif;
  font-size: 44px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #171717;
}
.df__title em { font-style: normal; color: #1d63e6; }
.df__desc { margin-top: 20px; font-size: 19px; line-height: 1.6; color: #555; }

/* 질문 카드 — 사장님 질문(제목) → 와우오더 답(본문) → 작은 그림. 바탕은 같은 색의 옅은 그라데이션 + 오른쪽 위 빛 */
.df-qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.df-q {
  position: relative; display: flex; flex-direction: column; height: 540px; padding: 40px 36px 0; overflow: hidden; border-radius: 28px; isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.df-q--mint  { background: radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f0f8f3 0%, #dcefe4 100%); }
.df-q--slate { background: radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #f2f6fb 0%, #dde6f2 100%); }
.df-q--cream { background: radial-gradient(90% 60% at 100% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #fbf7f0 0%, #f0e5d3 100%); }
.df .df-q__ask { font-size: 26px; font-weight: 800; line-height: 1.36; letter-spacing: -0.02em; color: #171717; }
.df-q__ans { margin-top: 16px; font-size: 16px; line-height: 1.65; color: #4b5260; word-break: keep-all; }
.df-q__img { display: block; height: auto; max-width: none; }

/* AI 스튜디오 — 찍어 둔 사진은 작게·칙칙하게 뒤로, AI 스튜디오 사진은 크게 앞으로 + 빛 */
.df-ba { position: relative; height: 250px; margin: auto -6px 34px; }
.df-ba::before {                                      /* 결과 사진 뒤 따뜻한 빛 */
  content: ""; position: absolute; right: -10px; top: -20px; width: 280px; height: 280px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 196, .7), rgba(255, 236, 196, 0));
}
.df-ba__before, .df-ba__after { position: absolute; margin: 0; }
.df-ba__before { left: 6px; bottom: 6px; z-index: 1; width: 118px; transform: rotate(-7deg); }
.df-ba__before img { display: block; width: 118px; height: 118px; object-fit: cover; border-radius: 14px; filter: saturate(.5) brightness(.82) contrast(.9) sepia(.18) blur(.4px); }
.df-ba__before figcaption { position: absolute; left: 8px; top: 8px; padding: 4px 8px; border-radius: 100px; background: rgba(23, 23, 23, .6); font-size: 11px; font-weight: 700; color: #fff; }
.df-ba__after { right: 14px; top: 8px; z-index: 2; width: 200px; }
.df-ba__after img { display: block; width: 200px; height: 200px; object-fit: cover; border-radius: 22px; box-shadow: 0 0 0 5px #fff, 0 22px 40px rgba(120, 80, 20, .22); }
.df-ba__after figcaption {
  position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border-radius: 100px;
  background: #1d63e6; font-size: 12.5px; font-weight: 800; color: #fff; box-shadow: 0 6px 14px rgba(29, 99, 230, .35);
}
.df-ba__after figcaption svg { width: 12px; height: 12px; fill: #fff; }

/* 거치대 — 뒷모습(작게) + 보조배터리 이름표 */
.df-q__stand { position: relative; flex: 1; margin: 18px -36px 0; transform: translateY(-26px); }   /* 기기·이름표 함께 살짝 위로 */
.df-q__img--back { position: absolute; left: 50%; bottom: 0; width: auto; height: 250px; transform: translateX(-50%); }
.df-pin {
  position: absolute; left: var(--x); top: var(--y); z-index: 2; padding: 7px 12px; border-radius: 100px; background: #fff;
  font-size: 13px; font-weight: 700; line-height: 1; color: #171717; white-space: nowrap; box-shadow: 0 4px 12px rgba(23, 23, 23, .16);
}

/* 추가 비용 — 영수증(가운데, 살짝 기울임) 뒤에 계산기, 앞 왼쪽에 동전. 영수증 아래는 카드 밖으로 잘린다 */
.df-cost { position: relative; flex: 1; min-height: 250px; margin: 22px -36px 0; }
.df-cost__calc  { position: absolute; right: 18px; top: 44px; z-index: 0; width: 132px; height: auto; transform: rotate(14deg); filter: drop-shadow(0 12px 14px rgba(120, 90, 40, .18)); }
.df-cost__coins { position: absolute; left: 30px; bottom: 22px; z-index: 2; width: 104px; height: auto; filter: drop-shadow(0 8px 10px rgba(120, 90, 40, .22)); }
.df-cost__rcpt {
  position: absolute; left: 50%; top: 10px; z-index: 1; width: 216px; transform: translateX(-56%) rotate(-4deg);
  filter: drop-shadow(0 14px 18px rgba(120, 90, 40, .16));
}
.df-cost__rcpt img { display: block; width: 100%; height: auto; }
.df-cost__list { position: absolute; left: 22px; right: 22px; top: 34px; margin: 0; font-size: 13px; line-height: 1.3; color: #3b3f46; }
.df-cost__list div { display: flex; align-items: baseline; gap: 6px; padding: 6px 0; }
.df-cost__list div::before { content: ""; order: 1; flex: 1; border-bottom: 1.5px dotted #c9ccd2; transform: translateY(-3px); }   /* 항목과 금액 사이 점선 */
.df-cost__list dt { order: 0; font-weight: 600; }
.df-cost__list dd { order: 2; margin: 0; font-weight: 800; color: #171717; }
.df-cost__list .is-sum { margin-top: 8px; padding-top: 12px; border-top: 1.5px dashed #c9ccd2; }
.df-cost__list .is-sum::before { display: none; }
.df-cost__list .is-sum dt { flex: 1; font-size: 14px; font-weight: 800; color: #171717; }
.df-cost__list .is-sum dd { font-size: 22px; letter-spacing: -0.02em; color: #1d63e6; }

/* 여기에 역대급 혜택까지 — 어두운 남색 판(가는 그라데이션 테두리 + 안쪽 푸른빛·보랏빛) 위에 흰 쿠폰 티켓 3장.
   강조 구절과 빛은 히어로와 같은 블루→라벤더 계열 */
.df-bonus {
  position: relative; display: grid; grid-template-columns: 1fr 540px; align-items: center; gap: 48px; margin-top: 0; padding: 56px 56px 56px 60px; overflow: hidden;   /* 롱섀도가 판 밖으로 나가지 않게 */
  border: 1px solid transparent; border-radius: 28px;
  background:
    radial-gradient(55% 80% at 0% 0%, rgba(72, 98, 255, .30), rgba(72, 98, 255, 0) 70%) padding-box,
    radial-gradient(45% 75% at 100% 100%, rgba(146, 108, 255, .24), rgba(146, 108, 255, 0) 70%) padding-box,
    linear-gradient(160deg, #121a30 0%, #0b0e17 100%) padding-box,
    linear-gradient(135deg, rgba(169, 198, 255, .6), rgba(169, 198, 255, .06) 38%, rgba(226, 198, 255, .08) 62%, rgba(226, 198, 255, .5)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 60px -30px rgba(11, 14, 23, .6);
}
.df .df-bonus__tit { font-size: 36px; font-weight: 800; line-height: 1.32; letter-spacing: -0.02em; color: #fff; }
.df-bonus__tit em {
  font-style: normal; background: linear-gradient(100deg, #a9c6ff 0%, #c4b5ff 55%, #e2c6ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.df-bonus__txt { position: relative; z-index: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }      /* 제목은 위로, 아래 빈자리에 거대한 3D "10월" */
.df-bonus__oct {                                      /* 글자 폭 380 + 왼쪽 아래 롱섀도 + 그 사이 컨페티(왼쪽 아래 → 오른쪽 위로 터짐)를 한 장으로.
                                                         그림 위쪽 76px은 컨페티 자리라 위로 끌어올려(translate) 글자 자리는 그대로 */
  display: block; width: 701px; max-width: none; height: auto; margin: auto 0 -320px -252px; transform: translateY(-76px); pointer-events: none;
}
/* 질문 카드 ↔ 혜택 판 사이 — 거리를 두고 가운데 "+" 원(판과 같은 남색 + 흰 링)으로 "여기에 더" */
.df-plus { position: relative; display: block; height: 80px; }
.df-plus::before {
  box-sizing: border-box; content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%);
  border: 4px solid #fff; border-radius: 50%; background: linear-gradient(160deg, #26314f 0%, #121a30 100%);
  box-shadow: 0 8px 20px rgba(18, 26, 48, .22);
}
.df-plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%);
  background: linear-gradient(#fff, #fff) center / 20px 3.2px no-repeat, linear-gradient(#fff, #fff) center / 3.2px 20px no-repeat;
}
.df-tickets { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; list-style: none; }
.df-ticket { filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .32)); }
.df-ticket__in {
  display: grid; grid-template-columns: 128px 1fr; height: 104px; border-radius: 18px; background: #fff;
  -webkit-mask: radial-gradient(circle at 128px 0, #0000 10px, #000 10.5px) top / 100% 51% no-repeat, radial-gradient(circle at 128px 100%, #0000 10px, #000 10.5px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at 128px 0, #0000 10px, #000 10.5px) top / 100% 51% no-repeat, radial-gradient(circle at 128px 100%, #0000 10px, #000 10.5px) bottom / 100% 51% no-repeat;
}
.df-ticket__stub { display: grid; place-items: center; overflow: hidden; border-radius: 18px 0 0 18px; }
.df-ticket__stub img { width: 96px; height: auto; }
.df-ticket__stub.is-yellow { background: linear-gradient(180deg, #ffe17a 0%, #fdcd27 100%); }
.df-ticket__stub.is-blue   { background: linear-gradient(180deg, #f1f6fd 0%, #d7e4f7 100%); }
.df-ticket__stub.is-gray   { background: linear-gradient(180deg, #f6f4f0 0%, #e6e0d6 100%); }
.df-ticket__body { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 28px; border-left: 2px dashed #e1e5ec; }
.df-ticket__body small { font-size: 13px; font-weight: 600; color: #8a8f98; }
.df-ticket__body b { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #171717; }
/* 자세히 보기 — 충전 스테이션 티켓만 → /fire_protection_multistation. 이벤트 카드와 같은 모양(투명 + 먹색 테두리 + 긴 화살표, 그림자 없음).
   데스크톱은 티켓 오른쪽 가운데(티켓 li 의 filter 가 기준 상자), 좁은 화면은 제목 아래 */
.df-ticket__more {
  position: absolute; right: 24px; top: 50%; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px 8px 16px; border: 1.5px solid #171717; border-radius: 100px;
  font-size: 13px; font-weight: 700; line-height: 1; color: #171717; transform: translateY(-50%); transition: background-color .2s, color .2s;
}
.df-ticket__arr { display: block; width: 15px; height: 15px; transition: transform .2s; }
.df-ticket__arr svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.df-ticket__more:hover { background: #171717; color: #fff; }
.df-ticket__more:hover .df-ticket__arr { transform: translateX(3px); }
.df-ticket__more:focus-visible { outline: 2px solid #1d63e6; outline-offset: 3px; }

/* 움직임 줄이기 — 패널을 자동으로 넘기지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .ft-panel.is-on .ft-panel__bar i { animation: none; width: 100%; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
  .df__inner { padding: 0 40px; }
  .df-q { height: 520px; padding: 34px 28px 0; }
  .df .df-q__ask { font-size: 22px; }
  .df-ba__after, .df-ba__after img { width: 170px; height: auto; }
  .df-ba__after img { height: 170px; }
  .df-bonus { grid-template-columns: 1fr; }
  .df-bonus__oct { margin-top: 22px; margin-bottom: -278px; }
  .wr__inner, .sv__inner, .ft__inner, .fx__inner { padding: 0 40px; }
  .sv .sv__title { font-size: 46px; }
  .sv__device { width: 480px; margin-bottom: -40px; }
  .sv-chip { font-size: 15px; padding: 12px 18px 12px 12px; }
  .sv-chip--l1 { right: calc(50% + 206px); top: 28px; }
  .sv-chip--l2 { right: calc(50% + 220px); top: 142px; }
  .sv-chip--r1 { left: calc(50% + 206px);  top: 68px; }
  .sv-chip--r2 { left: calc(50% + 216px);  top: 182px; }
  .ft-panel { grid-template-columns: 1fr 480px; padding: 32px 32px 32px 48px; }
  .ft .ft-panel__tit { font-size: 34px; }
  .ft-panel__vis { height: 400px; }
}
@media (max-width: 1023px) {
  .sv-chips { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px; margin-bottom: 36px; }
  .sv-chip { position: static; }
}
@media (max-width: 899px) {
  .df-qa { grid-template-columns: 1fr; }
  .df-q { height: auto; min-height: 480px; }
  .df-q__stand { min-height: 270px; }
  .ft-panel { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .ft-panel__txt { order: 2; padding: 32px 32px 36px; }
  .ft-panel__vis { height: 380px; border-radius: 0; }
  .ft-panel__bar { margin-top: 28px; }
  .fx-list { grid-template-columns: 1fr; }
  .fx-card { height: 340px; }
}
@media (max-width: 599px) {
  section.wr { padding: 84px 0 64px; }
  .wr__inner, .sv__inner, .ft__inner, .fx__inner { padding: 0 20px; }
  .wr .wr__title { font-size: 26px; }
  .wr__chat { gap: 16px; margin-top: 44px; }
  .wr-bub { padding: 15px 20px; border-radius: 22px; font-size: 15px; white-space: normal; }
  .wr-bub:not(.wr-bub--r) { margin-right: 28px; }
  .wr-bub--r { margin-left: 28px; }
  .wr-bub::after { left: -9px; width: 26px; height: 22px; clip-path: path("M26 0 C26 12 17 19 0 22 C11 17 14 8 14 0 Z"); }
  .wr-bub--r::after { left: auto; right: -9px; }
  .wr-bub__face { width: 54px; height: 54px; }
  .wr-bub:not(.wr-bub--r) .wr-bub__face { right: -24px; top: -28px; }
  .wr-bub--r .wr-bub__face { left: -26px; bottom: -24px; }
  .wr__more { margin-top: 40px; }
  section.sv { padding-top: 84px; }
  .sv .sv__title { font-size: 30px; }
  .sv__stage { margin-top: 30px; }
  .sv-chips { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
  .sv-chip { gap: 6px; padding: 9px 12px 9px 8px; font-size: 12.5px; white-space: normal; }
  .sv-chip svg { width: 20px; height: 20px; padding: 3px; }
  .sv__device { width: min(100%, 360px); margin-bottom: -10%; }
  section.ft { padding: 88px 0 0; }
  section.fx { padding: 0 0 96px; }
  .fx__beam { height: 72px; }
  .fx .fx__label { margin-bottom: 16px; font-size: 15px; padding: 9px 18px; }
  .ft__label, .fx__label { margin-bottom: 10px; font-size: 15px; }
  .ft .ft__title, .fx .fx__title { font-size: 28px; }
  .ft-tabs { width: auto; margin: 30px -20px 20px; padding: 0 20px; border: 0; border-radius: 0; background: none; gap: 6px; }
  .ft-tab { padding: 10px 16px; font-size: 15px; border: 1px solid #e3e7ec; }
  .ft-tab.is-on { border-color: transparent; }
  .ft-tab__naver { width: 13px; height: 13px; margin-left: 0; }
  .ft-tabs__ind { top: 0; bottom: 0; }
  .ft-panels { border-radius: 22px; }
  .ft-panel__vis { height: 300px; }
  .ft-panel__txt { padding: 24px 24px 28px; }
  .ft-panel__label { margin-bottom: 8px; font-size: 14px; }
  .ft .ft-panel__tit { font-size: 25px; }
  .ft-shot.ft-shot--ticket { height: 270px; }
  .ft-stores { right: 2.5%; bottom: 4%; gap: 5px; }
  .ft-stores img { height: 25px; }
  .ft-vis--sync { height: auto; aspect-ratio: 3 / 2; container-type: normal; }   /* 좁은 화면 — 그림 전체가 보이게 */
  .ft-sync { position: relative; left: auto; top: auto; width: 100%; transform: none; }
  .ft-sync__tag { padding: 5px 8px; font-size: 10.5px; }
  .ft-lang { left: 16px; top: 16px; }
  .ft-lang li { width: 96px; padding: 7px 10px; font-size: 12.5px; }
  .fx__head { margin-bottom: 32px; }
  .fx-list { gap: 12px; }
  .fx-card { height: 300px; padding: 26px 24px 22px; border-radius: 20px; }
  .fx-bar__val { font-size: 15px; }
  .fx-bar:not(.is-after) .fx-bar__val { top: 14px; }
  .fx-card__label { font-size: 16px; }
  .fx-card__num { margin-top: 20px; font-size: 48px; }
  .fx-card__badge { vertical-align: 10px; }
  .fx-card__num small { font-size: 26px; }
  .fx-chart { margin-top: 20px; }
  section.df { padding: 88px 0 96px; }
  .df-rain { top: 6px; width: 640px; opacity: .34; }
  .df__inner { padding: 0 20px; }
  .df__head { gap: 22px; margin-bottom: 36px; }
  .df-ask1 { width: 340px; }
  .df-roll__win { font-size: 18.5px; }
  .df .df__title { font-size: 28px; }
  .df__desc { margin-top: 14px; font-size: 16px; }
  .df-qa { gap: 12px; }
  .df-plus { height: 60px; }
  .df-plus::before { width: 46px; height: 46px; }
  .df-plus::after { width: 16px; height: 16px; background-size: 16px 3px, 3px 16px; }
  .df-q { min-height: 0; padding: 30px 24px 0; border-radius: 22px; }
  .df .df-q__ask { font-size: 22px; }
  .df-q__ans { font-size: 15px; }
  .df-ba { height: 230px; margin: 24px 0 28px; }
  .df-ba__after, .df-ba__after img { width: 168px; height: auto; }
  .df-ba__after img { height: 168px; }
  .df-q__stand { min-height: 250px; margin: 14px -24px 0; transform: translateY(-18px); }
  .df-q__img--back { height: 230px; }
  .df-cost { min-height: 270px; margin: 18px -24px 0; }
  .df-cost__coins { left: 8px; bottom: -4px; width: 84px; }
  .df-bonus { gap: 28px; padding: 30px 20px; border-radius: 22px; }
  .df .df-bonus__tit { font-size: 26px; }
  .df-bonus__oct { width: 498px; margin: 22px 0 -192px -178px; transform: translateY(-54px); }
  .df-ticket__in { grid-template-columns: 92px 1fr; height: 88px;
    -webkit-mask: radial-gradient(circle at 92px 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 92px 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat;
            mask: radial-gradient(circle at 92px 0, #0000 8px, #000 8.5px) top / 100% 51% no-repeat, radial-gradient(circle at 92px 100%, #0000 8px, #000 8.5px) bottom / 100% 51% no-repeat; }
  .df-ticket__stub img { width: 70px; }
  .df-ticket__body { padding: 0 16px; }
  .df-ticket__body small { font-size: 11.5px; }
  .df-ticket__body b { font-size: 15px; }
  .df-ticket__more { position: static; align-self: flex-start; margin-top: 4px; padding: 5px 9px 5px 11px; gap: 5px; font-size: 11.5px; transform: none; }
  .df-ticket__arr { width: 12px; height: 12px; }
}