색은 기능이 있는 곳에만

<main class="dsx dsx--one"><p class="dsx-label"><b>실제 렌더</b>Carbon CareGuide stack — 점선과 이름표는 아틀라스가 얹은 설명이에요</p><div class="container"><div class="prose cp cp--boxed" data-care="stack" data-astro-cid-rlw5ahkd> <h2>이럴 땐 병원에 가요</h2><div class="care"><section class="care-card care-card--urgent" aria-labelledby="care-1"><p class="care-card__title" id="care-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M16,23a1.5,1.5,0,1,0,1.5,1.5A1.5,1.5,0,0,0,16,23Z"></path><path d="M15 12H17V21H15z"></path><path d="M29,30H3a1,1,0,0,1-.8872-1.4614l13-25a1,1,0,0,1,1.7744,0l13,25A1,1,0,0,1,29,30ZM4.6507,28H27.3493l.002-.0033L16.002,6.1714h-.004L4.6487,27.9967Z"></path></g></svg>바로 119 · 응급실</p><ul><li><strong>바로 119</strong>: 숨쉬기 힘들어함, 목이나 혀의 부기, 축 처짐, 의식이 흐려짐</li></ul></section><section class="care-card" aria-labelledby="care-2"><p class="care-card__title" id="care-2">진료를 받아 보세요</p><ul><li><strong>빨리 진료</strong>: 두드러기가 넓게 퍼지거나 구토가 계속돼요</li><li><strong>상담 예약</strong>: 같은 음식을 먹은 뒤 증상이 반복되거나, 피부가 계속 나빠져요</li></ul></section></div> </div> </div></main>

.dsx--one,.dsx{padding-top:34px}.care-card--urgent{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.care-card--urgent::before{content:'위급 색은 여기에만 (바로 119)';position:absolute;bottom:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.care-card:not(.care-card--urgent){outline:2px dashed #c2410c;outline-offset:3px;position:relative}.care-card:not(.care-card--urgent)::before{content:'그 밖의 안내는 회색 계열';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.care-card:not(.care-card--urgent){margin-top:34px}.prose>h2{margin-bottom:34px}