/* 천만수리 — 반응형 셸
 * 모든 표면이 이 파일을 먼저 읽는다. 화면마다 다시 만들지 않는다.
 *
 * 설계 기준폭 390. 아래 규칙으로 320~430을 무너지지 않게 흡수한다.
 *   · 폭      : min(100vw, 430px) — 그 이상은 넓히지 않고 가운데 정렬
 *   · 높이    : 100dvh (주소창 접힘 대응. 100vh는 iOS에서 깨진다)
 *   · 안전영역: env(safe-area-inset-*) — 노치·홈인디케이터
 *   · 가변    : 여백·대제목·radius만 clamp. 본문 글자는 줄이지 않는다(가독 하한 15px)
 *   · 데스크톱: 기기 프레임으로 감싸 검수 가능하게 (≥900px)
 */

:root{
  /* 가변 축 — 320 ~ 430 구간에서만 움직인다 */
  --pad-x:   clamp(16px, 5.65vw, 24px);   /* 390에서 22px */
  --pad-card:clamp(17px, 6.15vw, 26px);   /* 390에서 24px */
  --gap-s:   clamp(8px,  2.6vw, 12px);
  --gap-m:   clamp(12px, 4.1vw, 18px);

  --fs-hero: clamp(26px, 8.46vw, 34px);   /* 390에서 33px */
  --fs-h1:   clamp(18px, 5.13vw, 21px);
  --fs-h2:   clamp(17px, 4.87vw, 20px);
  --fs-input:clamp(17px, 4.87vw, 20px);

  /* 본문 이하 — 고정. 작은 기기에서도 줄이지 않는다 */
  --fs-body:15.5px; --fs-body-2:15px; --fs-body-3:14.5px;
  --fs-sm:13.5px; --fs-sm-2:13px; --fs-xs:11.5px; --fs-label:10.5px;

  --r-card:  clamp(22px, 7.7vw, 30px);    /* 비서 카드 */
  --r:       clamp(13px, 4.1vw, 16px);
  --r-sheet: clamp(22px, 7.2vw, 28px);
  --r-device:clamp(34px, 11.8vw, 46px);

  --cta-h:   clamp(52px, 14.4vw, 58px);
  --tab-h:   calc(58px + env(safe-area-inset-bottom, 0px));

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg,#F7F7F5);color:var(--ink,#161614);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.2px;
  overscroll-behavior:none;
}

/* ── 기기 표면 ────────────────────────────────────────
   모바일: 뷰포트를 꽉 채운다. 프레임 없음.
   데스크톱(≥900px): 기기 프레임으로 감싸 검수용으로 보여준다. */
.device{
  width:min(100vw, 430px);
  height:100dvh;            /* 바운드 높이. min-height면 tall 컨텐츠에서 컨테이너가 늘어나 .body 스크롤이 안 되고 하단 CTA가 잘린다 */
  margin:0 auto;
  background:var(--bg,#F7F7F5);
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  padding-top:var(--sat);
}
/* 100dvh 미지원 브라우저 폴백 */
@supports not (height:100dvh){ .device{height:100vh} }

@media (min-width:900px){
  body{background:var(--board-bg,#E8E8E4);display:flex;justify-content:center;
    align-items:center;min-height:100vh;padding:28px 0}
  .device{
    width:390px;height:844px;min-height:0;flex:none;
    border-radius:46px;padding-top:0;
    box-shadow:0 24px 80px rgba(22,22,20,.16);
  }
}

/* 가로 여백은 한 곳에서만 관리 */
.pad{padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* 하단 고정 요소는 홈 인디케이터를 피한다 */
.tabbar{
  flex:none;height:var(--tab-h);
  padding:10px var(--gap-s) calc(10px + var(--sab));
  border-top:1px solid var(--line,#E9E9E4);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;
}
.cta-fixed{
  position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--cta-h) + var(--sab));
  padding-bottom:var(--sab);
}

/* 터치 타깃 하한 — 작은 기기에서도 44px 유지 */
button,[role=button],.tap{min-height:44px}
.tap-sm{min-height:36px} /* 텍스트 링크류 예외 */

/* 아주 낮은 화면(SE 568px 등)에서 세로 압축 */
@media (max-height:700px) and (max-width:899px){
  :root{--fs-hero:clamp(24px,7.4vw,29px);--pad-card:clamp(15px,5.2vw,20px)}
  .compress-y{gap:8px}
}

/* 접근성: 모션 최소화 설정 존중 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}