/* =====================================================================
   responsive.css — 반응형(@media) · 접근성(동작 줄이기) · 포커스 표시 — 항상 마지막에 로드
   ---------------------------------------------------------------------
   ● base.css의 전역 변수(:root)에 의존합니다. base.css를 먼저 불러온 뒤 이 파일을 불러오세요.
   ● 로드 순서: base → layout → home → company → products → modal → login → responsive
   ===================================================================== */

/* 반응형: 태블릿·모바일 (≤860px) */
@media(max-width:860px){
  .hamb{display:flex}
  .menu{position:absolute;top:68px;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:8px 28px 20px;border-bottom:1px solid var(--line);display:none}
  .menu.open{display:flex}
  .menu > li{width:100%}
  .menu > li > a{padding:14px 0;border-bottom:1px solid var(--line)}
  .submenu{position:static;display:block;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;border-radius:0;padding:4px 0 10px 14px;min-width:0}
  .submenu a{padding:9px 0}
  .feature-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .news-row{grid-template-columns:1fr;gap:8px}
  .news-row .date{order:-1}
  .dl-row{grid-template-columns:1fr auto;gap:10px}
  .dl-row .meta{display:none}
  .dl-row.head{display:none}
  section{padding:64px 0}
  .hero{min-height:calc(100vh - 69px)}
  .hero-slide{background-position:center center}
  .hero-overlay{background:linear-gradient(180deg,rgba(8,15,23,.72) 0%,rgba(8,15,23,.5) 45%,rgba(8,15,23,.82) 100%)}
  .hero-controls{max-width:none}
  .vision-cards{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr;gap:0}
  .info-grid dt{padding-bottom:2px;border-bottom:0}
  .info-grid dd{padding-top:4px}
}
/* 접근성: 동작 줄이기 설정 시 애니메이션 최소화 */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto;animation:none!important}}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
@media(max-width:480px){.auth-card{padding:34px 24px 28px}}
/* 반응형: 태블릿·모바일 (≤860px) */
@media(max-width:860px){
  .product-layout{grid-template-columns:1fr;gap:24px}
  .cat-list{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}
  .cat-list .cat-eyebrow{display:none}
  .cat-btn{flex:none;white-space:nowrap}
  .grid-2x2{grid-template-columns:1fr}
}
@media(max-width:720px){
  .modal{padding:0}
  .modal-box{max-height:100vh;border-radius:0;width:100%}
  .modal-head{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .feat-grid{grid-template-columns:1fr}
  .modal-section{padding:24px 20px}
  .modal-tabs a{font-size:13px;padding:14px 4px}
  .mspec .row{grid-template-columns:120px 1fr}
}
/* 접근성: 동작 줄이기 설정 시 애니메이션 최소화 */
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* 모바일: 제품 모달이 전체화면이라 X를 콘텐츠 위에 보이게 */
@media(max-width:720px){
  .modal-x{top:12px;left:12px;background:rgba(11,22,32,.6)}
  .modal-x:hover{background:rgba(11,22,32,.82)}
}