/* Responsive rules: load this file last */

  @media (max-width:760px){
    #topbar{gap:6px; padding:calc(12px + env(safe-area-inset-top)) 14px 12px;}
    #logo .mark{font-size:23px;}
    #topbar nav{gap:13px;}
    .navbtn{padding:7px 0; font-size:15px; letter-spacing:-.25px; white-space:nowrap;}
    #v-home, #v-casuals, #v-longform{padding:20px 18px 90px;}
    /* 레일은 화면 끝까지 흘러야 다음 카드가 잘려 보입니다. 좌우 여백과 같은 값. */
    #casual-rail, #v-casuals .casual-rail{padding:14px 18px 6px; margin-left:-18px; margin-right:-18px; scroll-padding-left:18px;}
    .casual{flex:0 0 136px;}
    #casual-rail > .casual{flex-basis:136px; width:136px; min-width:136px; max-width:136px;}
    #v-casuals .casual-rail > .casual{flex-basis:136px; width:136px; min-width:136px; max-width:136px;}
    #longform{margin-top:34px;}
    #shelf, #longform-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
    .bookcard{height:206px; padding:18px 18px 0; border-radius:20px;}
    .bookcard .bt{font-size:17px;}
    .bookcard .prog, .bookcard.classic .get{left:18px;}
    /* "파일 연결해서 14%부터 이어 읽기"는 작은 카드에서 한 줄로 고집하면
       카드 바깥까지 밀려납니다. 두 줄까지는 카드 안에서 읽는 편이 낫습니다. */
    .bookcard.cloud .getbtn{width:calc(100% - 20px); padding:8px 10px; font-size:12px;}
    #am-card{padding:24px 20px;}
    .am-big{padding:15px 16px; gap:13px;}
    /* 제목·개수·내보내기가 한 줄, 검색칸이 그 아래 한 줄입니다. 예전에는 셋이
       각각 한 줄씩 쌓여서 첫 단어가 나오기까지 296px 을 썼습니다. */
    #v-vocab{padding:22px 20px 90px;}
    #v-vocab .head{gap:10px 12px; margin-bottom:14px;}
    #vsearch{order:3; flex:1 0 100%; width:auto; margin-left:0;}
    .vrow{column-gap:11px; padding:9px 2px;}
  }

@media (max-width:760px){
  #v-home{padding-bottom:calc(90px + env(safe-area-inset-bottom));}
}