/* 17단계: 모바일에서 모든 서브페이지 상단 브랜드를 메인과 동일하게 고정 */
.mobile-brand-mark{display:none}
/* 착한컴퓨터 14단계: 모바일 최종 최적화
   - PC 레이아웃/데이터 로직은 건드리지 않고 760px 이하 UI만 보완합니다. */
@media (max-width:760px){
  /* 페이지를 이동해도 상단 로고/상호 모양은 메인과 동일하게 유지 */
  .head .logo{display:flex!important;align-items:center!important;max-width:calc(100vw - 76px)!important;overflow:visible!important;white-space:normal!important;text-overflow:clip!important}
  .head .logo .desktop-brand-text{display:none!important}
  .head .logo .mobile-brand-mark{display:flex!important;align-items:center;gap:8px;color:#0878ef;min-width:0}
  .head .logo .mobile-brand-mark>svg{width:36px;height:36px;min-width:36px;color:#123f62}
  .head .logo .mobile-brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1}
  .head .logo .mobile-brand-copy small{display:block;font-size:9px;line-height:1.05;font-weight:850;color:#102f48;letter-spacing:-.3px;white-space:nowrap}
  .head .logo .mobile-brand-copy strong{display:block;margin-top:2px;font-size:20px;line-height:1;font-weight:950;color:#0878ef;letter-spacing:-1px;white-space:nowrap}
  html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{overflow-x:hidden!important;padding-bottom:calc(70px + env(safe-area-inset-bottom))!important}
  header,.head{position:sticky!important;top:0;z-index:60;background:#fff}
  .header,.head{min-width:0}
  .brand,.logo{min-width:0;max-width:calc(100vw - 76px)}
  .brand span,.logo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hamb{display:flex!important;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;margin-left:auto!important;padding:0;border:0;border-radius:12px;background:#eef6ff!important;color:#0878ef!important;font-size:25px!important;line-height:1;cursor:pointer}
  .menu-open{overflow:hidden!important}
  .mobile-menu.open{display:block!important;position:fixed;inset:0;z-index:999;background:#071b34d9;padding:0!important}
  .mobile-panel{margin-left:auto!important;width:min(340px,88vw)!important;height:100%!important;max-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))!important;border-radius:20px 0 0 20px!important;overflow-y:auto;box-shadow:-12px 0 32px #071b3440}
  .mobile-menu-close{display:flex;align-items:center;justify-content:center;width:44px!important;height:44px!important;min-height:44px;border-radius:12px!important;cursor:pointer}
  .mobile-panel a{display:flex!important;align-items:center;min-height:52px;padding:12px 10px!important;font-size:16px;font-weight:800;border-bottom:1px solid #edf2f7}

  .mobilebar{display:grid!important;position:fixed;z-index:90;left:0;right:0;bottom:0;height:calc(64px + env(safe-area-inset-bottom));padding:7px 9px calc(7px + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:8px;background:#fff;box-shadow:0 -5px 22px #0d294028}
  .mobilebar a{display:flex!important;align-items:center;justify-content:center;min-height:50px;border-radius:12px;color:#fff!important;font-size:16px;font-weight:900;letter-spacing:-.3px}
  .mobilebar .mcall{background:#0878ef}.mobilebar .mloc{background:#08a66c}
  footer{display:none!important}

  /* 메인 첫 화면 */
  .shell .hero-grid{display:block!important}
  .shell .copy{padding:19px 18px 13px!important}
  .shell .eyebrow{font-size:13px!important;margin-bottom:5px!important}
  .shell h1{font-size:clamp(32px,9.4vw,38px)!important;line-height:1.06!important;letter-spacing:-2.2px!important;margin:0 0 10px!important}
  .shell .lead{font-size:15.5px!important;line-height:1.48!important;margin:0 0 12px!important;letter-spacing:-.45px!important}
  .shell .trust{display:flex!important;flex-wrap:wrap;gap:7px 12px!important;font-size:11px!important;line-height:1.3;white-space:normal!important}
  .shell .trust span{gap:4px!important}.shell .trust svg{width:17px!important;height:17px!important}
  .shell .hero-img{height:164px!important;background-position:center 45%!important}
  .shell .service-area{height:auto!important;min-height:82px;padding:8px 10px!important}
  .shell .services{min-height:66px;border-radius:14px!important}
  .shell .service{gap:4px!important;padding:7px 3px!important;flex-direction:column!important;text-align:center}
  .shell .round{width:28px!important;height:28px!important}.shell .round svg{width:18px!important;height:18px!important}
  .shell .service b{font-size:12px!important;line-height:1.2}.shell .service small{display:none!important}
  .shell .card-area{height:auto!important;min-height:246px;padding:0 10px 10px!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  .shell .card{min-height:116px;padding:9px 5px!important;border-radius:14px!important}
  .shell .card svg{width:25px!important;height:25px!important;margin-bottom:3px!important}
  .shell .card b{font-size:16px!important;line-height:1.2;letter-spacing:-.5px}
  .shell .card small{font-size:10px!important;line-height:1.28!important;margin-top:4px!important}
  .shell .card .latest{display:-webkit-box!important;max-width:94%!important;min-height:2.55em!important;-webkit-line-clamp:2!important;overflow:hidden!important}
  .shell .arrow{width:26px!important;height:26px!important;font-size:15px!important;margin-top:5px!important}

  /* 서브페이지 공통 */
  main{width:100%;max-width:100%;padding:27px 15px 38px!important}
  .box,.principle,.service,.service-links,.contact,.post,.fact,.faq article,.cta{border-radius:14px!important}
  .box,.service-links{padding:20px!important}
  .principle,.service{padding:18px!important}
  .keyword-item{padding:14px!important}
  .contact{padding:20px!important}
  .buttons a,.internal-links a{min-height:44px;display:flex;align-items:center;justify-content:center}
  input,button,select,textarea{font-size:16px}


  /* 16단계: 모바일 서브페이지 공통 뒤로가기 */
  .mobile-page-back{display:inline-flex!important;align-items:center;gap:7px;min-height:42px;margin:0 0 16px;padding:9px 13px;border:1px solid #d7e6f4;border-radius:12px;background:#fff;color:#0878ef!important;font-size:14px;font-weight:900;box-shadow:0 3px 10px #0d29400d}
  .mobile-page-back:active{transform:translateY(1px)}
  .article>a.back{display:none!important}

  /* 목록/검색 페이지 */
  .search{min-height:50px;padding:6px!important}
  .search input{min-width:0;font-size:16px!important;padding:8px 10px!important}
  .search button{min-width:66px;min-height:42px;padding:0 14px!important}
  .filters,.cats{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:4px;margin-right:-15px;padding-right:15px;scrollbar-width:none}
  .filters::-webkit-scrollbar,.cats::-webkit-scrollbar{display:none}
  .filters button,.cats button{flex:0 0 auto;min-height:42px;padding:8px 14px!important}
  .grid{grid-template-columns:1fr!important;gap:12px!important}
  .post{min-height:0!important}
  .content{padding:17px!important}
  .post h2{font-size:19px!important;line-height:1.42!important}
  .thumb{height:160px!important}

  /* 상세 글 */
  .article{max-width:100%!important}
  .article h1,.title{font-size:29px!important;line-height:1.35!important;letter-spacing:-1.2px!important}
  .summary,.answer{font-size:16px!important;line-height:1.72!important;padding:17px!important;margin:20px 0!important}
  .facts{grid-template-columns:1fr!important;gap:9px!important}
  .fact{padding:15px!important}
  .body{font-size:16px!important;line-height:1.88!important;word-break:keep-all;overflow-wrap:anywhere}
  .body p{margin-bottom:18px!important}
  .photos{grid-template-columns:1fr!important;gap:10px!important;margin:22px 0!important}
  .photos img{border-radius:12px!important;height:auto}
  .faq{margin-top:27px!important}.faq h2{font-size:22px!important}
  .cta{margin-top:28px!important}.cta h2{font-size:21px}

  /* 아주 좁은 기기 */
}
@media (max-width:360px){
  .brand strong{font-size:18px!important}.brand small{font-size:8.5px!important}.logo{font-size:16px!important}
  .shell h1{font-size:31px!important}.shell .lead{font-size:14.5px!important}.shell .hero-img{height:150px!important}
  .shell .card b{font-size:15px!important}.mobilebar a{font-size:15px!important}
}

/* 19단계: 실제 휴대폰 화면 확인 후 모바일 홈만 미세조정
   - 상단 브랜드/햄버거 구조 유지
   - 한 화면 강제 축소는 하지 않음
   - 첫 화면의 세로 낭비만 줄이고 하단 고정바 여유를 확보 */
@media (max-width:760px){
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom))!important}
  .shell .copy{padding:16px 18px 10px!important}
  .shell .eyebrow{margin-bottom:3px!important}
  .shell h1{margin-bottom:7px!important}
  .shell .lead{margin-bottom:9px!important}
  .shell .hero-img{height:150px!important;background-position:center 45%!important}
  .shell .service-area{padding-top:7px!important;padding-bottom:7px!important}
  .shell .card-area{padding-bottom:18px!important}
}
@media (max-width:360px){
  .shell .hero-img{height:142px!important}
}