/* 터치 기기·좁은 화면 대응. style.css·admin.css 뒤에 불러 덮어쓴다. */

/* 공통: 탭 반응, 노치(safe area) 여백, 설치 안내 */
button, a, input, .dropzone { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
main {
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
  padding-bottom: max(4rem, calc(env(safe-area-inset-bottom) + 5rem));
}
.install-box { margin-top: 1rem; display: grid; gap: .6rem; text-align: center; }
.install-box .muted { line-height: 1.5; }

/* 마우스·터치별 안내 문구 */
.on-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .on-pointer { display: none; }
  .on-touch { display: inline; }
  .btn:hover { border-color: var(--line); }
  .btn.danger:hover { color: var(--ink); }
  .btn:active, .menu button:active { background: #2c3246; }
  .dropzone:active { border-color: var(--accent); background: rgba(109,140,255,.08); }
}

@media (max-width: 560px) {
  main { padding-top: max(1.2rem, calc(env(safe-area-inset-top) + .8rem)); }
  main.narrow { padding-top: max(2.5rem, calc(env(safe-area-inset-top) + 1.5rem)); }
  header h1 { font-size: 1.5rem; }
  header p { font-size: .9rem; margin-bottom: 1.1rem; }

  /* 상단: 제목과 계정 정보를 한 줄에, 설명은 그 아래 전체 폭 */
  .topbar { display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: .6rem; }
  .topbar > div:first-child { display: contents; }
  .topbar h1 { grid-column: 1; grid-row: 1; margin: 0; }
  .topbar p { grid-column: 1 / -1; grid-row: 2; margin-top: .6rem; }
  .who { grid-column: 2; grid-row: 1; align-self: center; gap: .5rem; }
  .who-name { font-size: .92rem; }
  .who .muted { font-size: .78rem; }
  .who-name::before { content: ""; }

  /* 파일 추가: 가로로 납작한 버튼 모양 */
  .dropzone { padding: 1rem; border-radius: 14px; }
  .dz-inner { display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: .9rem; text-align: left; }
  .dz-icon { grid-row: span 2; font-size: 1.8rem; }
  .dz-title { font-size: 1rem; margin: 0 0 .15rem; }
  .dz-sub { font-size: .82rem; }

  /* 버튼·입력은 손가락 크기(44px) 이상 */
  .btn { min-height: 44px; font-size: .9rem; display: inline-flex; align-items: center;
    justify-content: center; }
  .panel input { min-height: 48px; font-size: 16px; }
  .panel .btn { min-height: 48px; }
  .check { min-height: 44px; }
  .check input, .row .pick { width: 20px; height: 20px; }

  /* 선택한 QR ZIP: 화면 아래 고정 막대 */
  .toolbar { margin: 1.1rem 0 .6rem; gap: .6rem; }
  #bulk { position: fixed; z-index: 20; left: max(1rem, env(safe-area-inset-left));
    right: max(1rem, env(safe-area-inset-right));
    bottom: calc(env(safe-area-inset-bottom) + 1rem); min-height: 52px;
    font-size: 1rem; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }

  /* 파일 행: 위(선택·QR·이름) / 아래(버튼 세 개 같은 폭) */
  .row { display: grid; grid-template-columns: auto 64px 1fr;
    grid-template-areas: "pick qr name" "pick qr size" "act act act";
    column-gap: .75rem; row-gap: .25rem; align-items: start; padding: .8rem; }
  .row .meta { display: contents; }
  .row .pick { grid-area: pick; margin: .25rem 0 0; }
  .row .qr { grid-area: qr; width: 64px; height: 64px; }
  .row .fname { grid-area: name; padding-right: 2.8rem; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .row .fsize { grid-area: size; padding-right: .2rem; }
  .row .actions { grid-area: act; display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .45rem; margin-top: .55rem; padding-top: 0; }
  .more-wrap { top: .45rem; right: .45rem; }
  .btn.more { min-width: 44px; }
  .menu { min-width: 180px; }
  .menu button { min-height: 44px; font-size: .95rem; }

  /* 변경 기록: 아래에서 올라오는 시트 */
  .dlg { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 18px 18px 0 0;
    border-bottom: 0; max-height: 80vh; overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom) + 1.2rem); }
}