/* 휴대폰 다듬기(마스터 2026-10-16 「모바일에 최적화 되어야 한다」) — 메인(home-main.html) 맨 마지막에 읽는다. 700px 이하만.
   390 화면 27장을 보고 고른 것: 첫 연출이 세 화면 · 위 메뉴줄이 내용과 겹침 · 비용 3칸이 좁음 · 카드가 세로로 길게 쌓임 · 누르는 글자가 작음 · 가견적 단추가 내용을 가림. */
@media (max-width:760px){
  html #opener{height:200vh}  /* 메인 머리의 265vh → 첫 연출 세 장면을 한 화면 쓸어내리면 끝 */
}
@media (max-width:700px){
  /* 위 메뉴줄: 늘 어두운 바탕(연출 위에서 글자가 겹쳐 보이던 것) · 조금 낮게 */
  .top{background:rgba(5,6,8,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.07);padding-block:12px}
  .top .contact-link{padding:12px 6px;margin:-12px 0}

  /* 예시 카드 줄(예약·견적 · 상세페이지 견본): 세로로 셋 쌓던 것을 옆으로 넘기기 — 한 화면에 다음 카드가 살짝 보이게 */
  .book-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-20px;padding:2px 20px 10px;scrollbar-width:none}
  .book-grid::-webkit-scrollbar{display:none}
  .book-grid>.book-card{flex:0 0 80%;scroll-snap-align:center}
  .book-grid>.book-card:hover{transform:none}

  /* 상품 이미지·광고 영상 줄: 한 장이 한 화면을 넘던 것 → 두 장 가까이 보이게(세로 9:16 그대로) */
  .pair-row,.ad-grid{grid-auto-columns:54%;gap:10px;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .pair-row figcaption,.ad-card figcaption{padding:10px 12px 12px;font-size:13.5px}

  /* 비용: 좁은 3칸 → 한 줄에 하나(이름·금액 한 줄, 포함 내용, 문의 단추) */
  .dark .price-ledger{grid-template-columns:1fr;gap:10px;border:0}
  .dark .price-ledger .price-card,.dark .price-ledger .price-card:first-child,.dark .price-ledger .price-card:last-child{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;padding:18px 18px 16px;border:1px solid var(--hair);border-radius:14px}
  .dark .price-ledger .price-card>*{grid-column:1/-1}
  .dark .price-ledger .price-card::before{grid-column:1;min-height:0;font-size:17px}
  .dark .price-ledger .price-card strong{grid-column:2;grid-row:1;margin-top:0;font-size:20px;white-space:nowrap}
  .dark .price-ledger .price-card ul{font-size:13.5px;gap:5px}
  .dark .price-ledger .price-card :is(img,picture,figure){max-height:150px;width:100%;object-fit:cover;object-position:top;overflow:hidden}
  .dark .price-ledger .price-link{display:block;margin-top:12px;padding:12px 0 2px;font-size:14.5px;border-top:1px solid var(--hair)}

  /* 누르는 곳은 손가락 크기로(44px 안팎) */
  .pick{display:inline-block;padding:13px 0}
  .line-btn{display:inline-block;padding-block:11px}
  footer nav a{display:inline-block;padding:10px 6px}

  /* 04층 연출·3D: 예시 네 개를 단추로 하나씩(마스터 2026-10-16 「좋다. 진행」 — 화면 약 5장 → 한 화면). 고르는 건 js/l4-tabs.js */
  .l4-tabs{display:flex;gap:8px;padding:4px 20px 2px}
  .l4-tabs button{flex:1;min-height:44px;border-radius:999px;border:1.5px solid rgba(255,255,255,.18);background:transparent;color:#c9ccd3;font-family:inherit;font-weight:700;font-size:15px;line-height:1;cursor:pointer}
  .l4-tabs button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1300}
  .l4-sec:not(.l4-cur){display:none}

  /* 30초 가견적 단추: 작게 — 카드 글자를 덜 가리게 */
  html .qtk-btn{padding:10px 14px;font-size:14px;gap:7px}
}
/* PC: 단추 없음, 네 칸 그대로 */
@media (min-width:701px){.l4-tabs{display:none}}