/* [2026-05-19] dc_landing_public.css — 공개 랜딩 페이지 ({16}.cs24.kr) */

.lp-body{
  margin:0;
  font-family:'Pretendard',-apple-system,'Apple SD Gothic Neo','Segoe UI',sans-serif;
  color:#0F172A;background:#fff;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.lp-wrap{
  max-width:520px;margin:0 auto;
  min-height:100vh;display:flex;flex-direction:column;
}

/* Hero */
.lp-hero{
  padding:clamp(28px,7vw,56px) clamp(18px,5vw,32px) clamp(20px,5vw,40px);
  text-align:center;
}
.lp-hero__title{
  font-size:clamp(24px,6vw,36px);font-weight:800;letter-spacing:-.025em;
  line-height:1.25;margin:0 0 12px;color:#0F172A;word-break:keep-all;
}
.lp-hero__sub{
  font-size:clamp(14px,3.6vw,16px);color:#475569;line-height:1.65;
  margin:0;word-break:keep-all;
}

/* Form */
.lp-form{
  padding:8px clamp(18px,5vw,32px) clamp(24px,6vw,48px);
}
.lp-form__field{margin-bottom:12px}
.lp-form__label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#334155}
.lp-form__label .req{color:#DC2626;margin-left:2px}
.lp-form__input{
  width:100%;min-height:48px;
  padding:10px 14px;
  border:1px solid #CBD5E1;border-radius:10px;
  background:#fff;color:#0F172A;font-size:16px;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lp-form__input:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
textarea.lp-form__input{min-height:96px;resize:vertical}

/* honeypot */
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Policy */
.lp-policy{
  margin-top:8px;padding:14px 16px;
  background:#F8FAFC;border:1px solid #E2E8F0;border-radius:10px;
}
.lp-policy__title{font-size:13px;font-weight:700;margin:0 0 6px;color:#334155}
.lp-policy__body{
  font-size:12px;color:#64748B;line-height:1.6;
  max-height:120px;overflow:auto;white-space:pre-wrap;word-break:keep-all;
  padding-right:6px;
}
.lp-agree{
  display:flex;align-items:flex-start;gap:8px;
  margin-top:10px;font-size:14px;line-height:1.5;cursor:pointer;
}
.lp-agree input{margin-top:3px;min-width:18px;min-height:18px;accent-color:#2563EB}

/* CTA — [2026-05-21 15:00] gradient + 깊이감 강화 */
.lp-cta{
  position:relative;
  width:100%;min-height:56px;
  border:0;border-radius:14px;
  color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em;
  margin-top:14px;cursor:pointer;
  background-image:linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,.10) 100%);
  background-blend-mode:overlay;
  box-shadow:
    0 1px 2px rgba(15,23,42,.18),
    0 8px 20px rgba(15,23,42,.18),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.10);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.lp-cta:hover{
  filter:brightness(1.05) saturate(1.05);
  transform:translateY(-2px);
  box-shadow:
    0 2px 4px rgba(15,23,42,.18),
    0 14px 30px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.10);
}
.lp-cta:active{transform:translateY(0);box-shadow:0 1px 2px rgba(15,23,42,.18)}
.lp-cta:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:3px}

/* Alert */
.lp-alert{
  margin:8px 0 4px;padding:10px 14px;border-radius:8px;font-size:13px;line-height:1.5;
  white-space:pre-line;
}
.lp-alert--err{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}

/* Thanks */
.lp-thanks{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;gap:14px;
}
.lp-thanks__icon{font-size:64px}
.lp-thanks__title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0;color:#0F172A}
.lp-thanks__sub{font-size:15px;color:#475569;margin:0;line-height:1.65}

/* Footer */
.lp-foot{
  margin-top:auto;padding:24px 18px;text-align:center;
  color:#94A3B8;font-size:11px;border-top:1px solid #F1F5F9;
}

/* Inactive/404 */
.lp-status{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px;text-align:center;gap:12px;
  font-family:'Pretendard',-apple-system,sans-serif;
}
.lp-status__icon{font-size:56px}
.lp-status__title{font-size:22px;font-weight:800;margin:0;color:#0F172A;letter-spacing:-.02em}
.lp-status__sub{font-size:14px;color:#64748B;margin:0;max-width:360px;line-height:1.6}

/* [2026-05-20 25:00] 이미지 슬롯 3종 (top/middle/bottom) */
.lp-imgs{display:flex;flex-direction:column;gap:0;background:#fff;line-height:0}
/* [2026-06-02] 여백 제거 — height:auto 로 원본 height 속성 무력화(레터박스 방지) + 자연 비율 표시 */
.lp-img{width:100%;height:auto;display:block;vertical-align:top}
.lp-imgs--top{margin-bottom:0}
.lp-imgs--middle{margin:0}
.lp-imgs--bottom{margin-top:0;padding-bottom:0}

/* [2026-05-21 23:30] 폼 모양 — form.style JSON inline css var */
.lp-form{
  --lp-fs-border:#CBD5E1; --lp-fs-focus:#2563EB; --lp-fs-bg:#FFFFFF; --lp-fs-text:#0F172A; --lp-fs-radius:8px;
}
.lp-form .lp-form__input{
  border:1px solid var(--lp-fs-border);
  background:var(--lp-fs-bg);
  color:var(--lp-fs-text);
  border-radius:var(--lp-fs-radius);
  transition:border-color .15s, box-shadow .15s;
}
.lp-form .lp-form__input:focus{
  border-color:var(--lp-fs-focus);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lp-fs-focus) 18%, transparent);
  outline:none;
}
/* 라벨 위치 변형 */
.lp-form--label-left .lp-form__field{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:center}
.lp-form--label-left .lp-form__label{margin:0;text-align:right}
.lp-form--label-inside .lp-form__label{position:absolute;left:14px;top:14px;pointer-events:none;color:#94A3B8;transition:.15s;background:transparent}
.lp-form--label-inside .lp-form__field{position:relative}
.lp-form--label-inside .lp-form__input{padding-top:18px;padding-bottom:6px}
.lp-form--label-inside .lp-form__input:focus + .lp-form__label,
.lp-form--label-inside .lp-form__input:not(:placeholder-shown) + .lp-form__label{top:4px;font-size:11px;color:var(--lp-fs-focus)}
/* 크기 변형 */
.lp-form--size-sm .lp-form__input{min-height:36px;font-size:13px;padding:0 10px}
.lp-form--size-md .lp-form__input{min-height:44px;font-size:15px;padding:0 14px}
.lp-form--size-lg .lp-form__input{min-height:52px;font-size:16px;padding:0 16px}
@media (max-width:600px){
  .lp-form--label-left .lp-form__field{grid-template-columns:1fr;gap:6px}
  .lp-form--label-left .lp-form__label{text-align:left}
}

/* [2026-05-21 23:00] 이미지 모드 — slider / mosaic (top 만 적용) */
.lp-imgs--mode-slider{position:relative;overflow:hidden;aspect-ratio:16/9;background:#0F172A}
.lp-imgs--mode-slider .lp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--lp-slide-fit,cover);opacity:0;transition:opacity .6s ease}
.lp-imgs--mode-slider .lp-img.is-active{opacity:1}
.lp-imgs__dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:2}
.lp-imgs__dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5);transition:.2s}
.lp-imgs__dot.is-active{background:#fff;transform:scale(1.4)}

.lp-imgs--mode-mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;background:transparent}
.lp-imgs--mode-mosaic .lp-img{aspect-ratio:1/1;object-fit:cover;border-radius:6px}
.lp-imgs--mode-mosaic .lp-img:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media (min-width:600px){
  .lp-imgs--mode-mosaic{grid-template-columns:repeat(3,1fr)}
  .lp-imgs--mode-mosaic .lp-img:first-child{grid-column:1/-1}
}

/* [2026-06-04] 소유자 미리보기 안내 배너 (정지/준비중 새 탭 열람 시) */
.lp-owner-bar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:#1E293B; color:#E2E8F0; text-align:center;
  padding:8px 16px; font-size:13px; line-height:1.5;
  box-shadow:0 2px 8px rgba(15,23,42,.25);
}
.lp-owner-bar strong{color:#FBBF24; margin-right:4px}

/* [2026-06-04] 템플릿 레이아웃 — form_pos / full_width (.lp-wrap 은 이미 flex column) */
.lp-wrap--full{max-width:none;width:100%}
.lp-wrap--full .lp-hero,
.lp-wrap--full .lp-form{max-width:760px;margin-left:auto;margin-right:auto;width:100%;box-sizing:border-box}

/* pos 클래스 있을 때 직계 자식 기준 순서 (기본=현재 동작과 동일) */
.lp-wrap[class*="lp-wrap--pos-"] > .lp-imgs--top{order:1}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-quick-link{order:2}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-hero{order:3}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-imgs--middle{order:5}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-form{order:6}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-imgs--bottom{order:7}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-copyright{order:90}
.lp-wrap[class*="lp-wrap--pos-"] > .lp-foot{order:99}

/* top: 폼을 히어로 바로 아래 */
.lp-wrap--pos-top > .lp-form{order:4}

/* bottom: 폼을 모든 이미지 뒤 */
.lp-wrap--pos-bottom > .lp-form{order:8}

/* center: 폼을 중앙 카드 (히어로 아래) */
.lp-wrap--pos-center > .lp-form{
  order:4;max-width:460px;margin:8px auto 24px;
  background:#fff;border:1px solid #E2E8F0;border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.10);padding-top:20px;
}

/* bottom_sticky: 하단 sticky 폼 (모바일 최적) */
.lp-wrap--pos-bottom_sticky > .lp-form{order:8}
@media (max-width:600px){
  .lp-wrap--pos-bottom_sticky > .lp-form{
    position:sticky;bottom:0;z-index:20;background:#fff;
    box-shadow:0 -6px 20px rgba(15,23,42,.12);
    border-top:1px solid #E2E8F0;border-radius:16px 16px 0 0;
    padding-top:14px;
  }
}

/* right: 데스크톱에서 우측 sticky 폼 카드 */
.lp-wrap--pos-right > .lp-form{order:4}
@media (min-width:860px){
  .lp-wrap--pos-right{max-width:980px}
  .lp-wrap--pos-right > .lp-hero{text-align:left}
  .lp-wrap--pos-right > .lp-form{
    max-width:400px;margin-left:auto;align-self:flex-end;width:100%;box-sizing:border-box;
    position:sticky;top:20px;
    background:#fff;border:1px solid #E2E8F0;border-radius:16px;
    box-shadow:0 10px 30px rgba(15,23,42,.10);padding-top:20px;
  }
}