/* =========================================
   Ondam Successcase - Lawyer Hero (Scoped)
   File: {{$template}}/inc/css_backup/successcase_doctor.css
   Scope: #od-lawyerHero only
   ¸ñÇ¥:
   - PC: 2Ä÷³(À̹ÌÁö ¿ÞÂÊ »ó´Ü / ÅؽºÆ® ¼¼·Î °¡¿îµ¥)
   - ÅÂºí¸´(ÁÙÀÌ´Â °úÁ¤): 1Ä÷³ÀÌ´õ¶óµµ À̹ÌÁö/ÅؽºÆ® ¸ðµÎ 'ÁÂÃø' ±âÁØÀ¸·Î ÀÚ¿¬½º·´°Ô Ãà¼Ò
   - ¸ð¹ÙÀÏ: À̹ÌÁö Áß¾Ó + Å©±â Á¦ÇÑ
========================================= */


/* ==============================
   Base (PC)
================================= */
#od-lawyerHero{
  position: relative;
  isolation: isolate;
  background: #fff;
  height: 500px;
  padding: 0;
}


#od-lawyerHero .od-lawyerHero__container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}


#od-lawyerHero .od-lawyerHero__grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 100px;
}


#od-lawyerHero .od-lawyerHero__media{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 360px;
}


#od-lawyerHero .od-lawyerHero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
}


#od-lawyerHero .od-lawyerHero__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}


#od-lawyerHero h3,
#od-lawyerHero .od-lawyerHero__title{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}


#od-lawyerHero .od-lawyerHero__title{
  margin: 0 0 20px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
  font-size: 50px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #000;
  text-align: left;
}


#od-lawyerHero .od-lawyerHero__accent{
  color: #354C95;
  font: inherit;
  letter-spacing: inherit;
}


#od-lawyerHero .od-lawyerHero__desc{
  margin: 0 0 50px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: #000;
  text-align: left;
}


#od-lawyerHero .od-lawyerHero__btn{
  width: 215px;
  height: 42px;
  border-radius: 0;
  background: #354C95;


  display: inline-flex;
  align-items: center;
  justify-content: center;


  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: #fff;


  text-decoration: none;
  transition: opacity .2s ease;
}
#od-lawyerHero .od-lawyerHero__btn:hover{ opacity: .85; }


.od-successFullbar{
  height: 50px;
  background: #333;


  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


/* ==============================
   Tablet (ÀÚ¿¬½º·´°Ô ÁÙÀÌ´Â ±¸°£)
   - 1Ä÷³ ÀüȯÇصµ "À̹ÌÁö/ÅؽºÆ® ¸ðµÎ ÁÂÃø Á¤·Ä"
   - À̹ÌÁö Å©±â´Â ÄÁÅ×ÀÌ³Ê Æø¿¡ ¸Â°Ô ÀÚ¿¬½º·´°Ô Ãà¼Ò(°íÁ¤ px ±ÝÁö)
================================= */
@media screen and (max-width: 1100px){
  #od-lawyerHero{
    height: auto;
    padding: 50px 0;
  }


  #od-lawyerHero .od-lawyerHero__grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }


  /* ✅ ÇÙ½É: ÁÙÀÌ´Â °úÁ¤¿¡¼­ À̹ÌÁö°¡ °¡¿îµ¥·Î Æ¢Áö ¾Ê°Ô 'ÁÂÃø À¯Áö' */
  #od-lawyerHero .od-lawyerHero__media{
    width: 100%;
    max-width: 360px;              /* ³Ê¹« Ä¿ÁöÁö ¾Ê°Ô »óÇÑ */
    justify-content: flex-start;   /* ÁÂÃø À¯Áö */
    margin: 0;                     /* °¡¿îµ¥ Á¤·Ä ¹æÁö */
  }


  /* ✅ À̹ÌÁö: ÀÚ¿¬½º·´°Ô(ÃÖ´ë 360) */
  html body #od-lawyerHero .od-lawyerHero__media img{
    width: 100% !important;
    max-width: 360px !important;
    height: auto !important;
    display: block !important;
  }


  #od-lawyerHero .od-lawyerHero__title{ font-size: 40px; }
  #od-lawyerHero .od-lawyerHero__desc{ font-size: 18px; }
}


/* ==============================
   Mobile (ÁøÂ¥ ¸ð¹ÙÀÏ¿¡¼­¸¸ ¼¾ÅÍ + Å©±â Á¦ÇÑ)
================================= */
@media screen and (max-width: 768px){


  /* ✅ ¸ð¹ÙÀÏ¿¡¼­¸¸ À̹ÌÁö Áß¾Ó Á¤·Ä */
  #od-lawyerHero .od-lawyerHero__media{
    max-width: none;
    display: flex;
    justify-content: center;
  }


  /* ✅ ¸ð¹ÙÀÏ¿¡¼­¸¸ À̹ÌÁö °íÁ¤ Å©±â(¿øÇÏ´Â °ª) */
  html body #od-lawyerHero .od-lawyerHero__media img{
    width: 200px !important;     /* ÇÊ¿äÇϸé 180~220 */
    max-width: 200px !important;
    height: auto !important;
  }


  #od-lawyerHero .od-lawyerHero__title{ font-size: 34px; }
  #od-lawyerHero .od-lawyerHero__desc{ font-size: 18px; }


  .od-successFullbar{ margin-top: 60px; }
}


/* Small mobile */
@media screen and (max-width: 480px){
  html body #od-lawyerHero .od-lawyerHero__media img{
    width: 160px !important;
    max-width: 160px !important;
  }
}