/* =============================================================
 *  핸드폰 판매 랜딩페이지 - style.css
 * ============================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --accent:  #ff5b1e;   /* 메인 포인트 컬러 */
  --accent2: #ff3d3d;
  --dark:    #1a1a1a;
  --line:    #e3e3e3;
}

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: #ececec;
  color: #222;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

/* 모바일 기준 컨테이너 (가운데 정렬) */
.wrap {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
  box-shadow: 0 0 24px rgba(0,0,0,.08);
}

/* ===== 0. 상단 선착순 카운트다운 ===== */
.countdown-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 11px 12px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--accent);
}
.countdown-bar .cd-label { color: #ffce54; }
.countdown-bar .cd-timer { color: #fff; }
.countdown-bar .cd-timer b {
  color: #fff;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 5px;
  margin: 0 1px;
  font-variant-numeric: tabular-nums;
}
.countdown-bar.ended { background: #555; border-bottom-color: #555; }
.countdown-bar.ended .cd-label { color: #ddd; }

/* ===== 잔여수량 띠 ===== */
.stock-bar {
  background: #fff3cd;
  color: #8a6d1a;
  text-align: center;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}
.stock-bar b { color: #ff5b1e; font-size: 15px; }
.stock-bar b.rem { color: #e23b3b; }
.stock-bar b.soldout { color: #888; }

/* ===== 카톡·전화 상담 플로팅 버튼 ===== */
.float-btns {
  position: fixed;
  right: 14px;
  bottom: 74px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 11px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
}
.fbtn:active { filter: brightness(.93); }
.fbtn-kakao { background: #fae100; color: #3c1e1e; }
.fbtn-tel   { background: #2f9e44; }
.fbtn .ic   { font-size: 15px; }

/* ===== 방금신청 토스트 ===== */
.live-toast {
  position: fixed;
  left: 14px;
  bottom: 78px;
  z-index: 54;
  background: rgba(20,20,20,.94);
  color: #fff;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 260px;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s, transform .4s;
  pointer-events: none;
}
.live-toast.on { opacity: 1; transform: translateY(0); }
.live-toast b { color: #ff8a5b; }
.lt-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: #4ade80;
  border-radius: 50%;
  margin-right: 5px;
}

/* ===== 1. 섹션 이미지 ===== */
.sections { width: 100%; }
.section-img { display: block; }
.section-img img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: top;
}
.empty-notice {
  padding: 70px 20px;
  text-align: center;
  color: #999;
  background: #fafafa;
  font-size: 15px;
}
.empty-notice small { color: #bbb; font-size: 13px; }

/* ===== 2. 접수폼 ===== */
.apply { background: var(--dark); padding: 0 0 28px; }
.apply-head {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  text-align: center;
  padding: 22px 16px 18px;
}
.apply-head .fire { font-size: 20px; }
.apply-head b { font-size: 22px; font-weight: 800; }
.apply-head p { font-size: 13px; opacity: .92; margin-top: 6px; }

.apply-body { padding: 22px 18px 0; }

.field { margin-bottom: 15px; }
.field label {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.field label em { color: var(--accent); font-style: normal; }
.field label small { color: #888; font-weight: 400; }

.field input[type=text],
.field input[type=tel],
.field select {
  width: 100%;
  height: 48px;
  border: 1px solid #444;
  border-radius: 8px;
  background: #fff;
  font-size: 15px;
  padding: 0 13px;
  color: #222;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,91,30,.18);
}

/* 연락처 3칸 */
.phone-row { display: flex; align-items: center; gap: 6px; }
.phone-row .ph-p { width: 92px; flex: none; }
.phone-row .ph-n { flex: 1; text-align: center; }
.phone-row .dash { color: #888; font-weight: 700; }

/* 개인정보 동의 */
.agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #ccc;
  font-size: 13px;
  margin: 4px 0 16px;
  cursor: pointer;
}
.agree input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.agree small { color: #888; }

/* 허니팟 숨김 */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.submit-btn {
  width: 100%;
  height: 56px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255,91,30,.4);
  transition: transform .1s;
}
.submit-btn:active { transform: scale(.98); }
.submit-btn:disabled { opacity: .6; cursor: default; }

.form-msg {
  text-align: center;
  font-size: 14px;
  margin-top: 12px;
  min-height: 20px;
}
.form-msg.ok  { color: #4ade80; font-weight: 700; }
.form-msg.err { color: #ff7a7a; font-weight: 700; }

/* ===== 3. 실시간 접수 리스트 ===== */
.live { background: #111; padding: 18px 14px 24px; }
.live-head {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
.live-head .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff3d3d;
  border-radius: 50%;
  margin-right: 6px;
  animation: blink 1s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.ticker {
  height: 290px;
  overflow: hidden;
  background: #1d1d1d;
  border: 1px solid #333;
  border-radius: 10px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.ticker-list {
  list-style: none;
  animation: scroll-up 28s linear infinite;
}
.ticker:hover .ticker-list { animation-play-state: paused; }
@keyframes scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
.ticker-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 12px;
  border-bottom: 1px solid #2c2c2c;
  font-size: 12.5px;
  color: #ddd;
  white-space: nowrap;
}
.ticker-list li.empty {
  justify-content: center;
  color: #888;
  padding: 40px 12px;
}
.badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  flex: none;
}
.t-status { color: #5cc8ff; flex: none; }
.t-name   { color: #fff; font-weight: 700; flex: none; }
.t-phone  { color: #aaa; flex: none; }
.t-info   { color: #ffb37a; overflow: hidden; text-overflow: ellipsis; }
.t-time   { color: #777; margin-left: auto; flex: none; font-size: 11px; }

/* 새로 추가된 항목 강조 */
.ticker-list li.fresh { background: #2a1d12; }

/* ===== 4. 푸터 ===== */
.footer {
  background: #0d0d0d;
  color: #888;
  text-align: center;
  padding: 26px 16px 30px;
  font-size: 12px;
}
.footer .biz { line-height: 1.8; }
.footer .cert {
  margin-top: 16px;
  display: inline-block;
  line-height: 0;
}
.footer .cert img {
  width: 80px;
  height: auto;
  vertical-align: middle;
}
.footer .cert a { display: inline-block; line-height: 0; }
.footer .foot-links { margin-top: 12px; }
.footer .foot-links a { color: #aaa; font-size: 12px; text-decoration: underline; }
.footer .copy { margin-top: 12px; color: #555; font-size: 11px; }

/* ===== 하단 신청 버튼 (sticky) ===== */
/* 스크롤 중엔 화면 하단에 고정, 페이지 끝에선 푸터 바로 아래에 안착 */
.sticky-cta {
  position: sticky;
  bottom: 0;
  display: block;
  width: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 800;
  padding: 17px 0;
  box-shadow: 0 -4px 14px rgba(0,0,0,.25);
  z-index: 50;
}
.sticky-cta:active { filter: brightness(.92); }