/* ============================================================
   DEVFOIL — Design Polish Layer  v2  (2026-08-29)
   devfoil-main.css 위에 얹는 마감 레이어. 마크업 변경 없음.
   1) 헤더 위 떠다니던 검은 원(당겨서 새로고침 인디케이터) 제거
   2) 모바일 히어로 순서 교정 — 사진보다 카피/CTA가 먼저
   3) 공개 랜딩(라이트)과 앱 셸(다크)의 탭바 톤 분리
   4) 한글 타이포(프리텐다드) · 간격 · 상태 마감
   ============================================================ */

/* ---------- 0. 타이포그래피 ---------- */
html,body{
  font-family:'Pretendard Variable','Pretendard',Inter,-apple-system,BlinkMacSystemFont,
              'Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.012em;
}
body,button,input,select,textarea,a{font-family:inherit}
.df-public h1,.df-public h2,.df-public h3,.df-public p,.df-hero-copy p{word-break:keep-all}

/* ---------- 1. 당겨서 새로고침 인디케이터 격리 ---------- */
/* .ptr-indicator{top:-50px}가 위치 기준 조상이 없어 헤더 위로 떠올라
   라이트 페이지에 검은 원으로 보이던 문제. 스크롤 뷰 안으로 가둔다. */
.scroll.view{position:relative}
.ptr-indicator{opacity:0;transition:opacity .18s ease,top .2s ease;pointer-events:none;z-index:5}
.ptr-indicator.pulling,.ptr-indicator.refreshing,.ptr-indicator.done{opacity:1}

/* ---------- 2. 공개 랜딩 : 히어로 ---------- */
.df-public{--df-ink:#0f2038;--df-ink-sub:#54637a;--df-line:#e4eaf2;--df-accent:#0d5bd8}

@media (max-width:900px){
  /* 사진이 첫 화면을 통째로 먹던 문제 — 카피/CTA 먼저 */
  .df-hero-media{order:2 !important;margin-top:6px}
  .df-hero-copy{order:1 !important}
  .df-hero{padding:26px 18px 40px !important;gap:22px !important}
  .df-hero-copy h1{font-size:clamp(26px,7.4vw,34px) !important;line-height:1.22 !important;letter-spacing:-.035em !important;margin-bottom:12px}
  .df-hero-copy p{font-size:14.5px !important;line-height:1.68 !important}
  .df-hero-media img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}
  .df-hero-media{transform:none !important;box-shadow:0 18px 40px -22px rgba(0,0,0,.55) !important}
}

.df-kicker{letter-spacing:.16em;font-size:10.5px;font-weight:800}
.df-hero-copy h1 strong{font-weight:900}
.df-hero-actions{gap:10px}
.df-btn{
  min-height:48px;border-radius:12px;font-weight:800;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.df-btn:active{transform:translateY(1px)}
.df-btn-primary:hover{box-shadow:0 16px 34px rgba(0,0,0,.28)}
.df-btn-ghost:hover{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.6)!important}
.df-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.55)}

/* ---------- 3. 공개 랜딩 : 섹션 리듬 ---------- */
.df-public section{scroll-margin-top:76px}
.df-public h2{letter-spacing:-.03em;line-height:1.25}
.df-public a:focus-visible,.df-public button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(13,91,216,.35);border-radius:10px}

/* ---------- 4. 헤더 ---------- */
.header{border-bottom:1px solid rgba(15,32,56,.08)}
body:has(main.df-public) .header{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid #e8edf4;
}
body:has(main.df-public) .logo img{height:30px}
.threads-login-btn{min-height:42px;border-radius:999px;font-weight:800;letter-spacing:-.01em;transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease}
.threads-login-btn:active{transform:translateY(1px)}

/* ---------- 5. 탭바 : 공개 랜딩에서는 라이트 톤 ---------- */
body:has(main.df-public) .tab-bar{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid #e8edf4;
  box-shadow:0 -6px 24px -18px rgba(15,32,56,.5);
}
body:has(main.df-public) .tab .tab-icon,
body:has(main.df-public) .tab .tab-label{color:#7d8a9c}
body:has(main.df-public) .tab.active .tab-icon,
body:has(main.df-public) .tab.active .tab-label{color:#0d5bd8}
body:has(main.df-public) .tab-label{letter-spacing:.02em;font-weight:700}
body:has(main.df-public) .tab-icon{font-size:17px;line-height:1}

/* ---------- 6. 앱 셸(다크) 마감 ---------- */
:root{--hairline:rgba(255,255,255,.07);--gold-glow:rgba(212,175,55,.28)}
.section{padding:0 16px;margin-bottom:26px}
.section-head{margin-bottom:14px;gap:12px}
.section-title{font-size:15px;font-weight:800;letter-spacing:-.015em;padding-bottom:7px}
.section-title-animated::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(212,175,55,.05) 100%);
  border-radius:2px;animation:none;
}
.hero-step{transition:border-color .18s ease,transform .12s ease}
.hero-step:hover{border-color:rgba(212,175,55,.28);transform:translateX(2px)}
.start-btn{box-shadow:0 8px 24px -12px var(--gold-glow)}
.start-btn:active,.login-btn-small:active{transform:translateY(1px)}
button:focus-visible,a:focus-visible,[role="button"]:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(212,175,55,.5);border-radius:10px}

/* ---------- 7. 접근성 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ---------- 8. 탭 아이콘(SVG) 정렬 ---------- */
.tab-icon{display:flex;align-items:center;justify-content:center;height:22px}
.tab-icon svg{width:20px;height:20px;display:block}
body:has(main.df-public) .tab-icon svg{stroke-width:1.8}
.tab{gap:3px}