/* ============================================================
   ADD-ON 27   (sub42 : 수술 후 주의사항 + 긴급상황 안내바)
   ------------------------------------------------------------
   HTML 구조 예 :
   <div class="caution">
     <div class="inner">
       <div class="caution_cont">
         <h3 class="caution_tit">눈성형 수술 후 주의사항</h3>
         <div class="caution_grp">
           <strong class="caution_gtit">증상</strong>
           <ul class="caution_list"><li>…</li> …</ul>
         </div>
         … (약 / 금기 / 관리 / 안내) …
         <div class="caution_notice">
           <span class="caution_notice_ic"><svg>…</svg></span>
           <strong>긴급상황</strong><i class="bar"></i>
           <p>수술 후 24시간 내에 …</p>
         </div>
       </div>
     </div>
   </div>
   ============================================================ */

.caution{padding:calc(90 * var(--u)) 0 calc(100 * var(--u));}
.caution_cont{max-width:calc(1343 * var(--u));margin:0 auto;}

.caution_tit{font-size:max(22px, calc(38 * var(--u)));font-weight:700;letter-spacing:-0.03em;color:#1f1f1f;}

.caution_grp{margin-top:max(30px, calc(50 * var(--u)));}
.caution_gtit{display:block;margin-bottom:max(10px, calc(14 * var(--u)));font-size:max(17px, calc(27 * var(--u)));font-weight:700;letter-spacing:-0.03em;color:#222;}
.caution_list li{position:relative;padding-left:calc(20 * var(--u));font-size:max(14px, calc(18 * var(--u)));line-height:1.75;letter-spacing:-0.03em;color:#555;}
.caution_list li:before{content:"·";position:absolute;left:calc(4 * var(--u));top:0;color:#555;}
.caution_list li br + *,.caution_list li{white-space:normal;}

/* 긴급상황 안내바 */
.caution_notice{display:flex;align-items:center;gap:calc(26 * var(--u));margin-top:max(36px, calc(60 * var(--u)));padding:calc(38 * var(--u)) calc(56 * var(--u));background:#f4f4f4;}
.caution_notice_ic{flex:0 0 auto;display:inline-flex;width:calc(44 * var(--u));min-width:26px;color:#b9b9b9;}
.caution_notice_ic svg{width:100%;height:auto;display:block;}
.caution_notice strong{flex:0 0 auto;font-size:max(15px, calc(21 * var(--u)));font-weight:700;letter-spacing:-0.02em;color:#ce5d5f;}
.caution_notice .bar{flex:0 0 auto;width:1px;height:calc(20 * var(--u));min-height:14px;margin:0 calc(6 * var(--u));background:#c9c9c9;}
.caution_notice p{font-size:max(13px, calc(18 * var(--u)));line-height:1.55;letter-spacing:-0.03em;color:#444;}

/* ---------- responsive ---------- */
@media (max-width:1280px){
.caution{padding:80px 0 90px;}
.caution_cont{max-width:100%;}
.caution_notice{padding:26px 30px;gap:16px;}
}
@media (max-width:768px){
.caution{padding:56px 0 64px;}
.caution_grp{margin-top:34px;}
.caution_notice{align-items:flex-start;gap:12px;padding:22px 20px;margin-top:44px;}
.caution_notice .bar{display:none;}
.caution_notice strong{margin-right:6px;}
.caution_notice p{font-size:14px;}
}