/* ============================================================
   ADD-ON 18   (sub02 : 의료진 / Dr. Lee · Dr. Ryu Profile)
   ------------------------------------------------------------
   · .sub_head 는 기존(sub09) 구조/CSS 재사용 → 여기선 박스 높이만 축소
   · .doc         : 원장 사진(좌측 블리드) + 우측 정보 + 하단 약력 다크박스
   · .doc_profile : 두번째 원장(Dr. Ryu) 흰 배경 프로필 (헤드 박스 내부와 동일 레이아웃)
   ------------------------------------------------------------
   · 시안 기준 캔버스 1920 / inner 1500 → 기존 --u 단위 그대로 사용
   ============================================================ */

/* ---------- HEAD 박스 높이(이 페이지 전용) ---------- */
.sub02{--box-h:calc(456 * var(--u));}

/* ============================================================
   .doc : 원장 사진 + 정보 + 약력
   ============================================================ */
.doc{position:relative;background:#fff;}
.doc .inner{position:relative;display:flow-root;min-height:calc(1265 * var(--u));}
.doc_img{position:absolute;top:0;left:calc(50% - 50vw);width:calc(50vw + var(--inner) / 2);z-index:1;}
.doc_img img{width:100%;}

/* 우측 정보 (병원명 / 이름 / 전문분야) */
.doc_info{position:absolute;top:calc(341 * var(--u));left:var(--box-txt-left);width:calc(770 * var(--u));z-index:3;color:#fff;}
.doc_clinic{font-size:max(15px, calc(26 * var(--u)));font-weight:500;line-height:1.2;letter-spacing:-0.03em;}
.doc_namewrap{display:flex;align-items:flex-end;gap:calc(26 * var(--u));margin-top:calc(2 * var(--u));}
.doc_name{font-size:max(52px, calc(100 * var(--u)));font-weight:300;line-height:1;letter-spacing:-0.03em;}
.doc_role{padding-bottom:calc(10 * var(--u));font-size:max(15px, calc(28 * var(--u)));font-weight:500;line-height:1.32;letter-spacing:-0.03em;}
.doc_field{display:flex;align-items:center;gap:calc(18 * var(--u));margin-top:calc(40 * var(--u));}
.doc_field_tag{flex:0 0 auto;padding:calc(9 * var(--u)) calc(20 * var(--u));background:#fff;font-size:max(13px, calc(19 * var(--u)));font-weight:500;letter-spacing:-0.03em;color:#333;border-radius:30px;}
.doc_field_list{font-size:max(14px, calc(21 * var(--u)));letter-spacing:-0.03em;}

/* 배경 워터마크 (Dr. Lee / Dr. Ryu) */
.doc_watermark{position:absolute;top:calc(635 * var(--u));left:calc(950  * var(--u));z-index:5;font-family:'Times New Roman',serif;font-size:max(40px, calc(92 * var(--u)));font-weight:400;letter-spacing:0.03em;color:rgba(225,225,225,.45);white-space:nowrap;pointer-events:none;}

/* 약력 다크박스 (우측 블리드) */
.doc_career{position:relative;z-index:3;margin:calc(702 * var(--u)) calc(50% - 50vw) 0 calc(396 * var(--u));padding:calc(76 * var(--u)) calc(92 * var(--u)) calc(84 * var(--u));background:#191919;}
.doc_career_tit{font-size:max(19px, calc(34 * var(--u)));font-weight:600;letter-spacing:-0.03em;color:#fff;}
.doc_career_list{margin-top:calc(42 * var(--u));}
.doc_career_list li{position:relative;padding-left:calc(22 * var(--u));font-size:max(14px, calc(20 * var(--u)));line-height:1.95;letter-spacing:-0.03em;color:#d6d6d6;}
.doc_career_list li:before{content:"·";position:absolute;left:calc(4 * var(--u));top:0;color:#d6d6d6;}
.doc_career_list li.sp{margin-top:calc(30 * var(--u));}

/* ============================================================
   .doc_profile : 흰 배경 프로필 (Dr. Ryu)
   ============================================================ */
.doc_profile{background:#fff;}
.doc_profile .inner{position:relative;padding:calc(291 * var(--u)) 0 calc(120 * var(--u));}
.doc_profile_tit{position:absolute;top:calc(201 * var(--u));left:calc(53 * var(--u));z-index:2;}
.doc_profile_tit .sec_tit_en{display:inline-block;vertical-align:middle;}
.doc_profile_tit .label_en{display:inline-block;margin-left:calc(26 * var(--u));vertical-align:middle;}
.doc_profile_txt{margin-left:calc(757 * var(--u));width:calc(700 * var(--u));}
.doc_profile_txt .sec_stit{margin-bottom:max(24px, calc(40 * var(--u)));}

/* ============================================================
   ADD-ON 18 : responsive
   ============================================================ */

/* ---------- 1280 이하 ---------- */
@media (max-width:1280px){
.doc .inner{min-height:0;padding:0 0 60px;}
.doc_img{position:relative;top:0;left:0;width:calc(100% + 80px);margin-left:-40px;}
.doc_info{position:relative;top:0;left:0;width:calc(100% - 40px);margin:40px auto 0;color:#333;}
.doc_name{font-size:64px;}
.doc_watermark{display:none;}
.doc_career{margin:44px auto 0;padding:50px 40px 56px;width:calc(100% - 40px);}
.doc_profile .inner{padding:80px 0;width:calc(100% - 40px);margin:0 auto;}
.doc_profile_tit{position:static;}
.doc_profile_txt{margin-left:0;width:100%;margin-top:34px;}
}

/* ---------- 1024 이하 ---------- */
@media (max-width:1024px){
.doc_img{width:calc(100% + 60px);margin-left:-30px;}
.doc_name{font-size:56px;}
.doc_career{margin:40px 0px 0;padding:46px 30px 52px;}
}

/* ---------- 768 이하 ---------- */
@media (max-width:768px){
.doc_img{width:calc(100% + 40px);margin-left:-20px;}
.doc_info{margin-top:30px;}
.doc_name{font-size:46px;}
.doc_namewrap{flex-wrap:wrap;gap:10px;margin-top:20px;}
.doc_field{flex-wrap:wrap;gap:12px;margin-top:28px;}
.doc_career{margin:34px 0px 0;padding:40px 22px 46px;}
.doc_career_tit{font-size:19px;}
.doc_profile .inner{padding:60px 0;}
}

/* ---------- 480 이하 ---------- */
@media (max-width:480px){
.doc_name{font-size:40px;}
.doc_clinic{font-size:14px;}
.doc_role{font-size:15px;}
}




.doclink_doc_txt{/*position:absolute;right:150px;bottom:15px;*/z-index:1;display:flex;align-items:center;justify-content: flex-end;max-width:1000px;background:#000;padding:3px 5px;margin:80px 0 0 auto;}
.doclink_doc_txt .blog_tag{color:#fff;font-size:32px;font-weight:400;margin-right:15px;letter-spacing:-0.5px;text-align:right;}
.doclink_doc_txt .blog_tag strong{font-weight:900;font-size:37px;display:block;}
.doclink_doc_txt .blog_tag span{font-weight:300;display:block;padding-bottom: 4px;}
.doclink_doc_txt .title_tag{background:#fff;color:#000;font-size:46px;padding:10px 20px;border:3px solid #000;letter-spacing:-1px;}
.doclink_doc_txt .title_tag span{font-size:36px;vertical-align:bottom;}
.doclink_tit_wrap{margin:20px 0 35px;display:flex;align-items:center;}
.doclink_tit{}
.doclink_tit p{font-size:110px;color:#9A9899;font-weight:800;line-height:1.2;}
.doclink_stit{margin-left:40px;line-height:1;}
.doclink_stit p{font-size:32px;color:#9A9899;display:inline-block;position:relative;}
.doclink_tit img{}

.doclink_stit p[data-scroll] .char {display:inline-block;}
.doclink_stit p[data-scroll="in"] .char {/*화면에 보일때*/overflow: hidden;position: relative;}
.doclink_stit p[data-scroll="out"] .char {/*화면에 안보일때*/visibility: hidden;}
.doclink_stit p[data-scroll='in']:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #111;
  -webkit-animation: block 1.0s 0.25s both;
          animation: block 1.0s 0.25s both;
}

@media screen and (max-width:1880px){
.doclink_doc_txt{right:5%;}
.doclink_doc_txt .blog_tag{font-size:22px;}
.doclink_doc_txt .blog_tag strong{font-size:28px;}
.doclink_doc_txt .title_tag{font-size:30px;}
.doclink_doc_txt .title_tag span{font-size:26px;}
.doclink_doc_icon{width:6%;left:-2%;top:-9%;}
.doclink_tit p{font-size:70px;letter-spacing:-1px;}
.doclink_stit p{font-size:22px;}
}

@media screen and (max-width:1280px){
.doclink_doc_txt{right:2%;}
.doclink_doc_txt .blog_tag{font-size:20px;}
.doclink_doc_txt .blog_tag strong{font-size:25px;}
.doclink_doc_txt .title_tag{font-size:25px;padding:10px 15px;}
.doclink_doc_txt .title_tag span{font-size:22px;}

.doclink_tit p{font-size:55px;}
.doclink_stit{margin-left:30px;}
.doclink_stit p{font-size:18px;}
}
@media screen and (max-width:1000px){
.doclink_doc_txt{width:auto;right:5%;bottom:5%;padding:5px 5px;}
.doclink_doc_txt .blog_tag{font-size:15px;margin-right:8px;}
.doclink_doc_txt .blog_tag strong{font-size:17px;margin-left:4px;}
.doclink_doc_txt .title_tag{font-size:22px;padding:3px 10px;}
.doclink_doc_txt .title_tag span{font-size:19px;}
.doclink_tit_wrap{flex-direction:column;text-align:center;margin:5% 0 5%;}
.doclink_tit p{font-size:55px;}
.doclink_stit{margin-left:0px;}
.doclink_stit p{font-size:18px;}
}
@media screen and (max-width:480px){
.doclink_doc_txt{right:5%;bottom:4%;padding:6px 8px;}
.doclink_doc_txt .blog_tag{font-size:11px;margin-right:5px;}
.doclink_doc_txt .blog_tag strong{font-size:13px;margin-left:3px;}
.doclink_doc_txt .title_tag{font-size:14px;padding:3px 10px;border:1px solid #000;}
.doclink_doc_txt .title_tag span{font-size:13px;}
.doclink_tit p{font-size:40px;line-height:1;}
.doclink_stit{margin-top:5px;}
.doclink_stit p{font-size:16px;}
}