/* ══════════════════════════════════════
   responsive.css — 기기별 자동 UI 최적화
   대상: iPhone SE ~ Pro Max, Galaxy A ~ Ultra,
         Galaxy Fold(접힘/펼침), iPad, 가로모드
   ══════════════════════════════════════ */

/* ══ 공통 기기 토큰 (기본값: 375–429px 일반 폰) ══ */
:root {
  --fs-base: 14px;
  --fs-sm:   12px;
  --fs-xs:   10px;
  --fs-lg:   16px;
  --pad-h:   20px;
  --pad-v:   16px;
  --tab-h:   62px;   /* 탭바 높이 */
  --hdr-h:   56px;   /* 헤더 높이 */
  --th:      62px;   /* 탭바 높이 (기존 변수 유지) */

  /* Safe Area (노치/Dynamic Island/홈 바) */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

/* ══════════════════════════════════════
   1. 초소형 폰 — Galaxy Fold 접힘, 구형 소형폰
      max-width: 359px (≈ 280–359px)
   ══════════════════════════════════════ */
@media (max-width: 359px) {
  :root {
    --fs-base: 12px;
    --fs-sm:   10px;
    --fs-xs:    9px;
    --pad-h:   12px;
    --pad-v:   12px;
    --tab-h:   54px;
    --hdr-h:   48px;
    --th:      54px;
  }

  /* 탭바 */
  .tab-two { height: 54px; padding: 5px 6px; gap: 5px; }
  .t2-item { height: 40px; border-radius: 10px; padding: 0 6px; }
  .t2-ico  { font-size: 16px; }
  .t2-lbl  { font-size: 10px; }

  /* 헤더 */
  .ph   { height: 48px; padding: 0 12px; }
  .wnav { height: 48px; padding: 0 12px; }
  .app-header { padding: 7px 12px 6px; }
  .pht, .wt   { font-size: 15px; }

  /* 홈 */
  .hsc         { padding: 6px 8px; gap: 5px; }
  .hhd         { padding: 10px 12px 8px; }
  .hcard-inner { padding: 9px 10px; gap: 9px; }
  .hcard-ico   { width: 34px; height: 34px; font-size: 17px; }
  .hcard-t     { font-size: 12px; }
  .hcard-s     { font-size: 10px; }

  /* 폼 */
  .wb  { padding: 12px; }
  .fi  { padding: 10px 10px; font-size: 13px; }
  .fg  { margin-bottom: 12px; }
  .pta { padding: 12px 12px 12px 50px; font-size: 13px; }

  /* 버튼 */
  .btnfull { padding: 13px; font-size: 13px; }
  .nnx     { padding: 13px; font-size: 13px; }
  .bsm     { padding: 6px 8px; font-size: 10px; }

  /* 온보딩 */
  .ob-title    { font-size: 20px !important; line-height: 1.3 !important; }
  .ob-body     { font-size: 11px !important; }
  .ob-next     { padding: 12px 28px; font-size: 14px; }
  .ob-pr-num, .ob-pnum { font-size: 34px !important; }

  /* 모달 */
  .mbd, .modal-bd { padding: 12px; }
  .mhd, .modal-hd { padding: 12px; }

  /* 버튼바 */
  .nbtns { padding: 8px 12px; gap: 6px; }
  .nbk   { padding: 12px 12px; font-size: 14px; }
}

/* ══════════════════════════════════════
   2. 소형 폰 — iPhone SE 2/3, Galaxy A 시리즈 소형
      360–374px
   ══════════════════════════════════════ */
@media (min-width: 360px) and (max-width: 374px) {
  :root {
    --fs-base: 13.5px;
    --fs-sm:   11.5px;
    --pad-h:   16px;
    --tab-h:   58px;
    --th:      58px;
  }

  .tab-two     { height: 58px; padding: 6px 9px; gap: 6px; }
  .t2-item     { height: 44px; border-radius: 12px; padding: 0 9px; }
  .t2-ico      { font-size: 17px; }
  .t2-lbl      { font-size: 11px; }

  .hcard-inner { padding: 10px 11px; gap: 10px; }
  .hcard-ico   { width: 38px; height: 38px; font-size: 18px; }
  .hsc         { padding: 6px 10px; gap: 6px; }
  .wb          { padding: 16px 14px; }
  .fi          { font-size: 13.5px; }

  .ob-title    { font-size: 22px !important; }
  .ob-pr-num, .ob-pnum { font-size: 40px !important; }
}

/* ══════════════════════════════════════
   3. 대형 폰 — iPhone 14 Pro Max, Galaxy S Ultra
      430–479px
   ══════════════════════════════════════ */
@media (min-width: 430px) and (max-width: 479px) {
  :root {
    --fs-base: 15px;
    --fs-sm:   13px;
    --pad-h:   22px;
    --tab-h:   66px;
    --th:      66px;
  }

  .tab-two  { height: 66px; padding: 9px 14px; gap: 8px; }
  .t2-item  { height: 48px; border-radius: 14px; }
  .t2-ico   { font-size: 21px; }
  .t2-lbl   { font-size: 13px; }

  .hcard-inner { padding: 13px 15px; gap: 13px; }
  .hcard-ico   { width: 46px; height: 46px; font-size: 23px; }
  .hcard-t     { font-size: 14px; }
  .hsc         { padding: 10px 14px; gap: 8px; }
  .hhd         { padding: 18px 22px 14px; }

  .ph   { height: 60px; padding: 0 22px; }
  .wnav { height: 60px; padding: 0 22px; }

  .fi   { padding: 14px 16px; font-size: 15px; }
  .wb   { padding: 22px; }

  .ob-title    { font-size: 28px !important; }
  .ob-body     { font-size: 14px !important; }
  .ob-pr-num, .ob-pnum { font-size: 50px !important; }
}

/* ══════════════════════════════════════
   4. 폴더블 펼침 / 소형 태블릿
      480–767px
   ══════════════════════════════════════ */
@media (min-width: 480px) and (max-width: 767px) {
  body { background: var(--paper3); }

  /* 앱 껍데기: 최대 480px 중앙정렬 */
  .sw    { max-width: 480px; left: 50%; transform: translateX(-50%); right: auto; }
  .shell { max-width: 480px; margin: 0 auto;
           border-left: .5px solid var(--bd); border-right: .5px solid var(--bd);
           box-shadow: 0 0 40px rgba(0,0,0,.1); }
}

/* ══════════════════════════════════════
   5. 태블릿 — iPad mini, iPad, iPad Pro
      768px+
   ══════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --tab-h: 68px;
    --th:    68px;
    --hdr-h: 62px;
  }

  body {
    background: var(--paper3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
  }

  /* 폰 UI를 태블릿 화면 중앙에 띄움 */
  .sw {
    position: fixed;
    width: 400px;
    max-width: 400px;
    height: min(90dvh, 860px);
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    border-radius: 44px;
    overflow: hidden;
    box-shadow:
      0 40px 100px rgba(0,0,0,.28),
      0 0 0 1px rgba(0,0,0,.08),
      inset 0 0 0 1px rgba(255,255,255,.05);
  }

  .shell {
    border-radius: 44px;
    border: none;
    overflow: hidden;
  }

  /* 탭바 확대 */
  .tab-two { height: 68px; padding: 8px 14px; }
  .t2-item { height: 50px; border-radius: 15px; }
  .t2-ico  { font-size: 22px; }
  .t2-lbl  { font-size: 13px; }

  /* 헤더 확대 */
  .ph   { height: 62px; }
  .wnav { height: 62px; }

  /* 모달: 바텀시트 → 중앙 팝업 */
  .mbg, .modal-bg {
    align-items: center;
    justify-content: center;
    padding: 24px;
    border-radius: 44px;
    overflow: hidden;
  }
  .mbox, .modal-box {
    border-radius: 20px !important;
    max-width: 380px;
    max-height: 78dvh;
    animation: tabletPop .22s cubic-bezier(.34,1.3,.64,1) !important;
  }
  @keyframes tabletPop {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* 태블릿 다크모드 배경 */
@media (min-width: 768px) {
  [data-theme="dark"] body { background: #0d0d0d; }
  [data-theme="dark"] .sw  {
    box-shadow:
      0 40px 100px rgba(0,0,0,.6),
      0 0 0 1px rgba(255,255,255,.07);
  }
}

/* ══════════════════════════════════════
   6. 가로 모드 — 폰 (landscape, 높이 500px 이하)
   ══════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  :root {
    --tab-h: 50px;
    --hdr-h: 44px;
    --th:    50px;
  }

  /* 탭바 슬림 */
  .tab-two { height: 50px; padding: 4px 10px; gap: 8px; }
  .t2-item { height: 38px; border-radius: 10px; }
  .t2-ico  { font-size: 15px; }
  .t2-lbl  { font-size: 10px; }

  /* 헤더 슬림 */
  .ph, .wnav    { height: 44px; }
  .app-header   { padding: 5px 16px 4px; }
  .pht, .wt     { font-size: 15px; }

  /* 가로 safe area 여백 */
  .ph, .wnav, .app-header {
    padding-left:  max(env(safe-area-inset-left, 0px), 16px);
    padding-right: max(env(safe-area-inset-right, 0px), 16px);
  }
  .hsc {
    padding-left:  max(env(safe-area-inset-left, 0px), 16px);
    padding-right: max(env(safe-area-inset-right, 0px), 16px);
  }
  .wsc {
    padding-left:  max(env(safe-area-inset-left, 0px), 20px);
    padding-right: max(env(safe-area-inset-right, 0px), 20px);
  }

  /* 버튼바 위치 조정 */
  .nbtns {
    bottom: calc(50px + env(safe-area-inset-bottom, 0px));
    padding: 7px max(env(safe-area-inset-right, 0px), 16px)
                  7px max(env(safe-area-inset-left, 0px), 16px);
  }

  /* 토스트 위치 조정 */
  #toast {
    bottom: calc(50px + env(safe-area-inset-bottom, 0px) + 12px);
  }

  /* 온보딩 가로 모드 */
  .ob-art   { padding: 6px 20px 2px; }
  .ob-text  { padding: 0 20px 8px !important; }
  .ob-title { font-size: 18px !important; line-height: 1.25 !important; }
  .ob-body  { font-size: 11px !important; line-height: 1.55 !important; }
  .ob-ctrl  {
    padding: 6px max(env(safe-area-inset-right, 0px), 20px)
                  calc(6px + env(safe-area-inset-bottom, 0px))
                  max(env(safe-area-inset-left, 0px), 20px);
  }
  .ob-next  { padding: 10px 28px; font-size: 14px; }
  .ob-dots  { margin-bottom: 4px; }
}

/* ══════════════════════════════════════
   7. 노치 / Dynamic Island / 홈 바 Safe Area
      iPhone X, 11, 12, 13, 14, 15 시리즈
   ══════════════════════════════════════ */

/* 앱 상단 safe area */
.si {
  padding-top: env(safe-area-inset-top, 0px);
}

/* 탭바 하단 safe area (홈 바 위에 올림) */
.tabbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tab-two {
  /* 탭바 자체 높이는 --tab-h, 패딩 추가 */
}

/* 홈 스크롤 영역 — 탭바 + safe area 만큼 하단 여백 */
.hsc {
  padding-bottom: calc(var(--th, 62px) + env(safe-area-inset-bottom, 0px) + 8px);
}
.wsc {
  padding-bottom: calc(var(--th, 62px) + env(safe-area-inset-bottom, 0px) + 80px);
}

/* 버튼바 (다음/이전) */
.nbtns {
  bottom: calc(var(--th, 62px) + env(safe-area-inset-bottom, 0px));
}

/* 토스트 알림 */
#toast {
  bottom: calc(var(--th, 62px) + env(safe-area-inset-bottom, 0px) + 14px);
}

/* 모달 하단 버튼 */
.mft {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

/* 로그인 화면 하단 여백 */
.lgbd {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

/* 온보딩 컨트롤 하단 */
.ob-ctrl {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════
   8. 유동 폰트 — clamp() 적용
      화면 너비에 따라 자동으로 크기 조절
   ══════════════════════════════════════ */

/* 온보딩 */
.ob-title    { font-size: clamp(20px, 6.5vw, 28px) !important; }
.ob-body     { font-size: clamp(11px, 3.2vw, 14px) !important; }
.ob-pr-num,
.ob-pnum     { font-size: clamp(34px, 11vw, 50px) !important; }

/* 로그인 */
.lgbrand { font-size: clamp(24px, 7.5vw, 32px); }
.lgsub   { font-size: clamp(12px, 3.5vw, 14px); }

/* 홈 */
.hh      { font-size: clamp(17px, 5.2vw, 22px); }
.hcard-t { font-size: clamp(12px, 3.4vw, 14px); }
.hcard-s { font-size: clamp(10px, 2.8vw, 12px); }

/* 헤더 */
.pht, .wt   { font-size: clamp(15px, 4.5vw, 18px); }

/* 편지쓰기 */
.sttl { font-size: clamp(17px, 5.2vw, 22px); }
.ssub { font-size: clamp(11px, 3vw, 13px); }

/* ══════════════════════════════════════
   9. 터치 최소 영역 44×44px
      (Apple HIG, Material Design 기준)
   ══════════════════════════════════════ */
.bsm     { min-height: 36px; }
.t2-item { min-height: 44px; }
.mmi     { min-height: 50px; }
.soc     { min-height: 50px; }
.fit     { min-height: 44px; }
.dlo     { min-height: 50px; }
.abtn    { min-height: 44px; }
.phbk, .wbk { min-width: 36px; min-height: 36px; }
.btnfull { min-height: 48px; }
.nnx     { min-height: 48px; }

/* ══════════════════════════════════════
   10. 마우스/트랙패드 hover (태블릿·PC에서만)
   ══════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  .hcard:hover     { background: var(--paper2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
  .t2-item:hover   { background: var(--paper3); }
  .bsm:hover       { opacity: .82; }
  .btnfull:hover   { opacity: .88; }
  .soc:hover       { opacity: .88; transform: translateY(-1px); }
  .mmi:hover       { background: var(--paper2); }
  .fit:hover       { background: var(--paper2); }
  .dlo:hover       { border-color: var(--stamp); }
  .tch:hover       { border-color: var(--stamp); color: var(--stamp); }
  .ob-next:hover   { opacity: .88; }
  .cncbtn:hover    { background: var(--stamp); color: #fff; }
}

/* ══════════════════════════════════════
   11. 동작 줄이기 (저전력 모드 / 접근성)
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
  .ob-env-svg { animation: none !important; }
  .ob-slide.ob-active { animation: none !important; }
  .lgseal { animation: none !important; }
  .sucseal { animation: none !important; }
}

/* ══════════════════════════════════════
   12. 고해상도 디스플레이 Retina / AMOLED
       선을 더 얇게 (0.5px)
   ══════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .tabbar   { border-top-width: 0.5px; }
  .ph, .wnav, .app-header { border-bottom-width: 0.5px; }
  .hcard, .ri-card, .abli, .dlo { border-width: 0.5px; }
  .mhd, .modal-hd { border-bottom-width: 0.5px; }
}