/* ============================================================
   layout.css · 레이아웃 파운데이션 (ADR-0016 · Stage 1 재진입 산출물)
   브레이크포인트 4티어 · 컨테이너 · 12컬럼 유틸 · 정렬 규칙 · 세로 리듬
   규칙: 페이지에서 임의 @media 작성 금지. 이 파일의 티어·유틸만 사용한다.
   ------------------------------------------------------------
   티어(문서화 고정값):
     S  : ~599px        모바일 · 전 컬럼 12(스택) · 거터 12 · 컨테이너 패딩 16
     M  : 600~1023px    태블릿 · .m-sp-* 적용    · 거터 16 · 패딩 24
     L  : 1024~1279px   데스크톱 · .sp-* 적용    · 거터 20 · 패딩 32
     XL : 1280px~       와이드  · 컨테이너 1200 고정 · 거터 24
   ============================================================ */

/* ---------- 컨테이너 ---------- */
.container{max-width:1200px;margin-inline:auto;padding-inline:16px}
@media (min-width:600px){ .container{padding-inline:24px} }
@media (min-width:1024px){ .container{padding-inline:32px} }
@media (min-width:1280px){ .container{padding-inline:0} }

/* B안 영상형 메인 전용 확장 셸 · ADR-0064
   1440 기준에서 48px 안전 여백, 1920에서는 최대 1560px로 정지한다. */
.b-shell{width:100%;max-width:1560px;margin-inline:auto;padding-inline:16px}
@media (min-width:600px){ .b-shell{padding-inline:24px} }
@media (min-width:1024px){ .b-shell{padding-inline:40px} }
@media (min-width:1280px){ .b-shell{padding-inline:48px} }

/* ---------- 12컬럼 그리드 ---------- */
.g12{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
@media (min-width:600px){ .g12{gap:16px} }
@media (min-width:1024px){ .g12{gap:20px} }
@media (min-width:1280px){ .g12{gap:24px} }
.g12 > *{grid-column:span 12;min-width:0}
/* M 티어(600~) 스팬 */
@media (min-width:600px){
  .m-sp-3{grid-column:span 3}.m-sp-4{grid-column:span 4}.m-sp-5{grid-column:span 5}
  .m-sp-6{grid-column:span 6}.m-sp-7{grid-column:span 7}.m-sp-8{grid-column:span 8}
  .m-sp-9{grid-column:span 9}.m-sp-12{grid-column:span 12}
}
/* L 티어(1024~) 스팬 */
@media (min-width:1024px){
  .sp-2{grid-column:span 2}.sp-3{grid-column:span 3}.sp-4{grid-column:span 4}
  .sp-5{grid-column:span 5}.sp-6{grid-column:span 6}.sp-7{grid-column:span 7}
  .sp-8{grid-column:span 8}.sp-9{grid-column:span 9}.sp-10{grid-column:span 10}.sp-12{grid-column:span 12}
}
/* 행 높이 균일(카드 정렬) · 스택되는 S/M에서는 미적용(짧은 카드가 늘어나는 문제 방지) */
@media (min-width:1024px){ .g12.eq{grid-auto-rows:1fr} }

/* ---------- 세로 리듬 (섹션 간격 스케일) ---------- */
.sec-gap{margin-top:32px}
.sec-gap-lg{margin-top:44px}
@media (min-width:1024px){ .sec-gap{margin-top:44px} .sec-gap-lg{margin-top:64px} }
.sec-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:0 0 14px}
@media (min-width:1024px){ .sec-title{font-size:21px;margin:0 0 16px} }

/* ---------- 정렬 규칙 ---------- */
/* 0) 그리드 아이템 min-width:auto 함정 — 모든 그리드 컨테이너의 자식은 min-width:0 가드 필수.
      (.g12는 기본 제공, 페이지 로컬 그리드를 만들면 반드시 `>*{min-width:0}`를 함께 선언.
       위반 시 내부의 min-width 있는 테이블 등이 S 티어에서 페이지를 밀어냄 · 2026-07-13 375px 검수에서 실증) */
/* 1) 카드류는 세로 플렉스: 액션(.act)은 항상 하단 라인에 정렬 */
.card, .stat-card, .login-card{display:flex;flex-direction:column}
.card .act, .stat-card .act, .card .act-row{margin-top:auto;padding-top:12px}
/* 2) 테이블 숫자·상태 열: 내용 폭 고정(.fit) + 우측 정렬은 .num */
table.data th.fit, table.data td.fit{width:1%;white-space:nowrap}
/* 3) 미디어(이미지·차트) 컬럼은 min-width:0으로 오버플로 방지 (g12 자식 공통 적용됨) */
/* 4) 버튼 행: 동일 높이 정렬 */
.act-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 반응형 표시·밀도 유틸 ---------- */
.mobile-only{display:none!important}
@media (max-width:1023px){
  .mobile-only{display:flex!important}
}
@media (max-width:599px){
  .login-character{margin-left:auto!important;margin-right:0!important}
  .page .hero{padding-top:36px}
  .service-route-list>.service-stop .service-scene{transform:scale(1.24);transform-origin:center}
  .service-route-list>.service-stop:first-child .service-scene{transform:scale(1.16)}
  .guide-visual>.customer-character{right:58px}
  .mob-one-column{grid-template-columns:minmax(0,1fr)!important}
  .mob-next-line{flex-basis:100%!important;margin-left:66px!important}
  .foot-links{border-left:0!important;border-top:1px solid color-mix(in srgb,var(--surface) 18%,transparent)!important;padding:18px 0 0!important}
  .foot-bottom-inner{align-items:flex-start!important}
}
@media (max-width:1279px){
  .floating-tools{right:12px!important;top:auto!important;bottom:12px!important;transform:none!important}
  .floating-chat{width:60px!important;min-height:60px!important;height:60px!important;border-radius:50%!important;padding:0!important}
  .floating-chat strong,.floating-chat span{display:none!important}
  .floating-chat img{right:1px!important;bottom:-5px!important;width:58px!important}
  .floating-tools .footer-top{width:42px!important;height:42px!important;font-size:17px!important}
}

/* ---------- 반응형 헤더 규칙 ---------- */
/* M 이하: GNB 메뉴 숨김 + 햄버거 노출(피그마 모바일 와이어와 동일: 메뉴 삭제) */
.nav-toggle{display:none!important}
@media (max-width:1023px){
  .nav-desktop{display:none!important}
  .nav-toggle{display:inline-flex!important}
  .masthead .container>.nav-toggle{margin-left:auto}
}
@media (max-width:1023px){ .route-master{display:none} }
@media (min-width:600px) and (max-width:1023px){
  .page .hero{padding-top:52px}
}
@media (min-width:600px){
  .hero-grid>.login-board{padding-top:86px}
  .hero-grid>.login-board>.login-character{margin-left:auto;margin-right:2px}
}
@media (min-width:1024px){
  .nav-toggle{display:none!important}
  .hero-grid>.login-board h2{font-size:15px}
  .hero-grid>.login-board>p{font-size:25px;line-height:1.3;margin-bottom:14px}
  .hero-grid>.login-board>.login-character{margin-left:auto;margin-right:2px;width:clamp(118px,10vw,156px)}
  .service-route-list{grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));min-height:280px}
  .service-route-list::before{display:none}
  .service-route-list>.service-stop{display:block;min-height:280px;padding:24px 18px 18px;border-bottom:0}
  .service-route-list>.service-stop:first-child{min-height:280px;padding-left:24px}
  .service-route-list>.service-stop+.service-stop{border-left:1px solid var(--line)}
  .service-route-list>.service-stop h3{font-size:18px;line-height:1.35}
  .service-route-list>.service-stop:first-child h3{font-size:23px}
  .service-route-list .service-copy .need-login{display:block;margin-top:8px}
  .service-route-list>.service-stop .service-scene{position:absolute;left:50%;right:auto;bottom:30px;width:min(92%,178px);height:148px;max-height:148px;transform:translateX(-50%)}
  .service-route-list>.service-stop:first-child .service-scene{bottom:10px;width:min(94%,250px);height:205px;max-height:205px}
  .service-route-list>.service-stop .route-node{display:none}
  .footer-info-grid{grid-template-columns:minmax(0,2fr) minmax(240px,1fr)!important}
}

/* ---------- 뷰포트 티어 인디케이터 (검수용 · 시연 빌드에서 제거) ---------- */
.bp-indicator{position:fixed;left:10px;bottom:10px;z-index:99;font-size:11px;font-weight:800;
  background:var(--text);color:var(--bg);border-radius:6px;padding:4px 10px;opacity:.75;pointer-events:none}
.bp-indicator::after{content:"S · ~599"}
@media (min-width:600px){ .bp-indicator::after{content:"M · 600~1023"} }
@media (min-width:1024px){ .bp-indicator::after{content:"L · 1024~1279"} }
@media (min-width:1280px){ .bp-indicator::after{content:"XL · 1280~"} }

/* ---------- B안 비회원 메인 반응형 규칙 · ADR-0064 ---------- */
@media (max-width:599px){
  .b-masthead-inner{min-height:72px!important}
  .b-brand img{width:58px!important}
  .b-brand{gap:8px!important}
  .b-brand-text{font-size:14px!important}
  .b-hero{min-height:calc(100dvh - 72px)!important}
  .b-hero-main{min-height:520px!important;padding-block:50px 42px!important;align-items:flex-start!important}
  .b-hero-kicker{font-size:15px!important}
  .b-hero-title{font-size:clamp(36px,10.5vw,46px)!important;max-width:10ch!important}
  .b-vehicle-form{grid-template-columns:minmax(0,1fr)!important;max-width:none!important}
  .b-vehicle-form button{min-height:54px!important}
  .b-hero-dock{padding-block:18px 20px!important}
  .b-dock-row,.b-search-row{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  .b-dock-label{min-width:0!important}
  .b-search-form{grid-template-columns:minmax(0,1fr) auto!important}
  .b-service-nav{margin-inline:-2px!important;padding-bottom:4px!important}
  .b-info-section{padding-block:64px 70px!important}
  .b-info-grid{gap:58px!important}
  .b-info-head h2{font-size:30px!important}
  .b-notice-row{padding-block:17px!important}
  .b-callbar{margin-top:46px!important;padding:24px!important;justify-items:start!important}
  .b-call-divider{display:none!important}
  .b-call-phone{font-size:42px!important}
  .b-call-action{width:100%!important;text-align:center!important}
  .b-footer-main{padding-block:64px 42px!important}
  .b-footer-grid{gap:44px!important}
  .b-footer-brand img{width:78px!important}
  .b-footer-brand span{font-size:20px!important}
  .b-footer-company-line{display:block!important}
  .b-footer-customer{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .b-footer-customer-divider{display:none!important}
  .b-footer-bottom{align-items:flex-start!important;gap:18px!important}
  .b-footer-legal{gap:12px 18px!important}
}

@media (min-width:600px) and (max-width:1023px){
  .b-masthead-inner{min-height:80px!important}
  .b-brand img{width:68px!important}
  .b-brand-text{font-size:16px!important}
  .b-hero{min-height:calc(100dvh - 80px)!important}
  .b-hero-main{min-height:570px!important;padding-block:64px 52px!important}
  .b-hero-title{font-size:clamp(48px,7vw,58px)!important}
  .b-vehicle-form{max-width:680px!important}
  .b-hero-dock{padding-block:20px 22px!important}
  .b-dock-row,.b-search-row{grid-template-columns:150px minmax(0,1fr)!important}
  .b-info-section{padding-block:82px!important}
  .b-info-grid{gap:64px!important}
  .b-callbar{grid-template-columns:auto 1px minmax(0,1fr) auto!important;padding:28px 30px!important}
  .b-footer-main{padding-block:76px 46px!important}
  .b-footer-customer{grid-template-columns:auto 1px minmax(0,1fr)!important}
}

@media (min-width:1024px){
  .b-utility{display:block!important}
  .b-nav-actions{display:flex!important}
  .b-menu-button{display:none!important}
  .b-gnb{display:block!important}
  .b-masthead-inner{min-height:96px!important}
  .b-brand img{width:72px!important}
  .b-brand-text{font-size:20px!important}
  .b-nav-actions{gap:18px!important}
  .b-gnb-inner{gap:54px!important}
  .b-hero{min-height:calc(100dvh - 202px)!important}
  .b-hero-main{min-height:460px!important;padding-block:50px 44px!important}
  .b-hero-title{font-size:clamp(58px,5vw,68px)!important}
  .b-vehicle-form{max-width:664px!important}
  .b-hero-dock{padding-block:22px 24px!important}
  .b-dock-row{grid-template-columns:150px minmax(0,1fr)!important}
  .b-search-row{grid-template-columns:150px minmax(0,1fr)!important}
  .b-info-section{padding-block:96px 104px!important}
  .b-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:72px!important}
  .b-notice-row{grid-template-columns:170px minmax(0,1fr) auto!important;gap:20px!important}
  .b-notice-row .b-row-cat,.b-notice-row a,.b-notice-row .b-row-arrow{grid-column:auto!important;grid-row:auto!important}
  .b-callbar{grid-template-columns:auto 1px minmax(0,1fr) auto!important;padding:30px 36px!important}
  .b-footer-main{padding-block:86px 52px!important}
  .b-footer-grid{grid-template-columns:minmax(0,1.65fr) minmax(320px,.9fr)!important;gap:84px!important}
  .b-footer-customer{grid-template-columns:auto 1px minmax(0,1fr)!important}
  .b-footer-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important}
}

@media (min-width:1280px){
  .b-nav-actions{gap:26px!important}
  .b-gnb-inner{gap:68px!important}
  .b-hero-main{min-height:520px!important;padding-block:60px 54px!important}
  .b-hero-title{font-size:68px!important}
  .b-dock-row,.b-search-row{grid-template-columns:154px minmax(0,1fr)!important}
  .b-info-grid{gap:88px!important}
  .b-info-head h2{font-size:38px!important}
  .b-callbar{padding:32px 46px!important}
  .b-footer-grid{gap:112px!important}
  .b-floating-tools{right:18px!important;top:50%!important;bottom:auto!important;width:auto!important;padding:0!important;transform:translateY(-42%)!important;background:transparent!important;gap:8px!important}
  .b-chat-card{width:78px!important;min-height:96px!important;border:0!important;background:transparent!important;padding:0!important}
  .b-chat-card strong{display:block!important;font-size:13px!important}
  .b-chat-card img{position:static!important;width:68px!important}
  .b-to-top{width:48px!important;height:48px!important;font-size:23px!important}
}