/* 휴대폰 폭 덧댐 — 결정요청서 E-04 ⓐ · 원본변경 C-61.
   원본 style.css 는 한 글자도 고치지 않는다. 규칙은 전부 폭 480px 이하에서만 — PC · 태블릿 화면은 그대로다.
   재는 도구: node tools/qa/shot-all.mjs --width 375 (게이트 「모바일 넘침」) */
@media (max-width:480px){
  /* ① 머리글 — 로고 · 「아이디어 제안하기」 · 메뉴 버튼이 한 줄에 들어가게 */
  .header .wrap{gap:8px;}
  .logo{min-width:0;flex:0 1 auto;}
  .logo img{height:30px;max-width:100%;}
  .hd-util{gap:6px;flex:0 0 auto;margin-left:auto;}
  .hd-util .btn{height:34px;padding:0 10px;font-size:12px;}
  .burger{width:38px;height:38px;}
  /* 머리줄 — 원본의 「.tb-stage 숨김」(1180px)은 뒤의 .topbar .tb-stage 에 밀려 듣지 않는다 → 여기서 숨기고 글자는 한 줄로 */
  .topbar .tb-stage{display:none;}
  .topbar .tb-right{gap:12px;margin-left:auto;}
  .topbar .tb-right a{white-space:nowrap;}

  /* ② 그리드 칸 — 한 줄로 접힌 칸이 안쪽 내용(표 최소폭 등)을 따라 늘어나지 않게 */
  .grid > *, .flex > *{min-width:0;}

  /* ③ 표 — 카드 폭을 밀어내지 않고 표 안에서 가로로 민다 */
  .tbl{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* ④ 카드 머리 · 목록 값 — 긴 글자와 버튼 묶음은 줄을 바꾼다 */
  .card-tit{flex-wrap:wrap;gap:8px;}
  .dl-list li span{flex:0 1 auto;min-width:0;}
  .dl-list li b{min-width:0;overflow-wrap:anywhere;}

  /* ⑤ 인라인 그리드(원본 plan-builder 「300px 1fr」 등) — 좁은 폭에서는 한 칸으로 쌓는다(인라인 스타일이라 !important) */
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;}
}