/* ==========================================
   ONEDAY FREE — 24시간 무료체험 화면 (auction1 리뉴얼)
   root.css 의 디자인 토큰(CSS 변수)만 재사용한다. 이 페이지는 기존
   common/header.php · footer.php (레거시 공용 CSS) 와 함께 렌더링되므로
   app/common/Asset/css/common.css 의 전역 리셋(*, body, a, button, ul 등)은
   로드하지 않는다 — 대신 필요한 컴포넌트(.odf-btn 등)를 이 파일 안에서
   .odf-wrap 스코프로 자체 정의해 페이지의 다른 영역에 영향을 주지 않는다.
   Figma: [Handoff] auction1 UIUX 리뉴얼 / oneday_free (node 341:1787)
   ========================================== */

.odf-wrap {
  width: 790px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.odf-wrap *,
.odf-wrap *::before,
.odf-wrap *::after {
  box-sizing: border-box;
}

.odf-wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* BUTTON — common.css .btn 을 로드하지 않으므로 자체 스코프 컴포넌트로 정의 */
.odf-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--font-family-base) !important;
  padding: 16px 32px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 24px;
  border-radius: var(--radius-l);
  transition: background-color var(--duration-base) ease-in-out;
}
.odf-btn--blue,
.odf-btn--blue:visited {
  background-color: var(--brand-blue);
  color: #ffffff;
}
.odf-btn--blue:hover {
  background-color: #004ab8;
  color: #ffffff;
}
.odf-btn--navy,
.odf-btn--navy:visited {
  background-color: #003177;
  color: #ffffff;
}
.odf-btn--navy:hover {
  background-color: #001f4d;
  color: #ffffff;
}
.odf-btn--orange,
.odf-btn--orange:visited {
  background-color: #ff4200;
  color: #ffffff;
}
.odf-btn--orange:hover {
  background-color: #cc3500;
  color: #ffffff;
}
.odf-btn--outline-blue,
.odf-btn--outline-blue:visited {
  background-color: #ffffff;
  outline: 1px solid var(--brand-blue);
  outline-offset: -1px;
  color: var(--brand-blue);
}
.odf-btn--outline-blue:hover {
  background-color: var(--brand-light-blue);
}

/* ==========================================
   BANNER — 상단 체험 안내 배너
   ========================================== */

.odf-banner {
  box-sizing: border-box;
  width: 100%;
  padding: 50px 40px;
  border-radius: var(--radius-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("/img/help/onedayfree/renew/banner-bg-61e2f7.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.odf-banner__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.odf-banner__h1 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 44px;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  color: #0a2d53;
}

.odf-banner__desc {
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  letter-spacing: -0.015em;
  color: var(--neutral-600);
}

/* CTA — 로그인 안내 / 신청 불가 안내 / 신청 버튼 (상태별, cta.php) */

.odf-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
  padding: 25px 0;
  text-align: center;
}

.odf-cta__msg {
  font-family: var(--font-family-base);
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  color: #0a2d53 !important;
}

.odf-cta__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 40px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.3);
}

.odf-cta__badge--info {
  flex-direction: column;
  padding: 10px 20px;
  border-radius: var(--radius-xl);
}

.odf-cta__badge-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.odf-cta__badge-text {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  letter-spacing: -0.015em;
  color: #3085ff;
}

.odf-cta__badge-line {
  display: flex;
  align-items: center;
  gap: 4px;
}
.odf-cta__badge--info,
.odf-cta__badge--info .odf-cta__badge-line,
.odf-cta__badge--info p {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1.4em;
  letter-spacing: -0.01em;
  color: var(--neutral-600);
}
.odf-cta__badge--info p {
  margin: 0;
}

.odf-cta__btns {
  display: flex;
  gap: 12px;
}

.odf-cta__btn {
  width: 280px;
}

.odf-cta__caption {
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  color: var(--neutral-600);
}

.odf-cta__enddate {
  color: var(--neutral-500);
  font-size: var(--fs-sm);
}

.odf-cta__used-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.odf-cta__used-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.odf-cta__used-label {
  flex-shrink: 0;
  background: var(--brand-blue);
  color: #ffffff;
  padding: 2px 10px;
  border-radius: var(--radius-m);
}
.odf-cta__used-label,
.odf-cta__used-value {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1.4em;
  letter-spacing: -0.01em;
  text-align: center;
}
.odf-cta__used-value {
  color: var(--neutral-600);
}

.odf-cta__cs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-family-base);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  line-height: 1.5em;
  letter-spacing: -0.015em;
  color: var(--neutral-600);
}

.odf-testmode {
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: var(--neutral-500);
  text-align: center;
}
.odf-testmode a {
  color: var(--brand-blue);
}
.odf-testmode a:not(:last-child)::after {
  content: " | ";
  color: var(--neutral-500);
}
.odf-testmode a.active {
  color: #ff4200;
  font-weight: var(--fw-bold);
}

/* 안내 문구 공용 클래스 (.odf-wrap 스코프로 한정 - 범용적인 이름이라 다른 영역과 겹치지 않도록).
   cta.php 의 "그 외 예기치 못한 에러 코드" 안전망에서 사용. */
.odf-wrap .onedaymsg {
  font-family: var(--font-family-base);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  color: #0a2d53;
}

/* ==========================================
   SERVICE — 옥션원 서비스 카드
   ========================================== */

.odf-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 60px 0;
}

.odf-service__title {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-normal);
  color: var(--neutral-900);
}

.odf-service__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.odf-service__card {
  box-sizing: border-box;
  width: 250px;
  height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border-radius: var(--radius-3xl);
  background: linear-gradient(151deg, rgba(246, 250, 255, 1) 54%, rgba(219, 236, 255, 1) 93%);
}

.odf-service__icon {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0px 8px 10px rgba(0, 0, 0, 0.2));
}

.odf-service__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.odf-service__card-title {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--neutral-800);
}

.odf-service__card-desc {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: 1.6em;
  letter-spacing: -0.02em;
  color: var(--neutral-800);
}

/* ==========================================
   NOTICE — 이용안내
   ========================================== */

.odf-notice {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 50px 40px;
  border-radius: var(--radius-3xl);
  background-color: var(--neutral-50);
}

.odf-notice__title {
  padding-bottom: 22px;
}

.odf-notice__h3 {
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--neutral-800);
}

.odf-notice__desc {
  margin-top: 4px;
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--neutral-600);
}

.odf-notice__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 20px;
}

.odf-notice__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.odf-notice__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.odf-notice__item span {
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--neutral-700);
}

.f24.bold_900{
  display: none;
}

/* ==========================================
   RESPONSIVE — 모바일 폭 대응 (최소한의 줄바꿈 보정)
   ========================================== */

@media (max-width: 860px) {
  .odf-wrap {
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .odf-banner__h1 {
    font-size: 28px;
  }
  .odf-cta__badge {
    padding: 6px 20px;
    text-align: left;
  }
  .odf-cta__btns {
    flex-direction: column;
    width: 100%;
  }
  .odf-cta__btn {
    width: 100%;
  }
  .odf-notice {
    padding: 24px 20px 30px;
  }
}