@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@400;500&display=swap');

/* =========================================================
   外傷センター 日本語(/jp/trauma/) — trauma.css / trauma_*.css 위에 덮어쓰는 일본어 전용 보정
   body.jp_trauma 범위로만 적용
   ========================================================= */
/* 일본어는 단어 사이 공백이 없어 keep-all 이면 줄바꿈이 안 됨 → normal + strict 금칙 */
.jp_trauma :is(section[class^="su_"], section[class^="sc_"], section[class^="la_"], section[class^="ea_"]) {font-family: 'Noto Sans JP', 'Pretendard', sans-serif; word-break: normal; line-break: strict; overflow-wrap: anywhere;}
.jp_trauma :where(section[class^="su_"], section[class^="sc_"], section[class^="la_"], section[class^="ea_"]) :where(*) {letter-spacing: -0.02em;}
/* 영문 소제목은 시안대로 영문 폰트 */
/* /jp/include/header.jsp 가 * {font-family: Noto Sans JP !important} 를 걸어서 !important 필요 */
.jp_trauma .su_sub {font-family: 'Outfit', 'Noto Sans JP', sans-serif !important;}
.jp_trauma .su_con02 .su_sub, .jp_trauma .la_con02 .su_sub {font-family: 'Noto Sans JP', sans-serif !important;}
.jp_trauma .su_hero_txt .tit span {position: relative; top: 0.05em;}

/* 국문 이미지 타이틀을 대체하는 세리프 타이틀 */
.jp_serif_tit {font-family: 'Noto Serif JP', serif !important; font-size: 44px; line-height: 54px; font-weight: 500; letter-spacing: -0.02em !important; color: #222;}
.jp_trauma .su_con07 .jp_serif_tit {color: #fff;}
.jp_trauma .su_con07 .alt {margin-top: 22px; font-size: 21px;}
.jp_trauma .su_con08 .jp_serif_tit {text-align: center;}

/* 제목/텍스트 크기 보정 (일본어는 글자폭이 넓어 시안 크기에 맞춤) */
.jp_trauma .su_tit {letter-spacing: -0.04em;}
.jp_trauma .su_wound_list .tit {letter-spacing: 0;}
.jp_trauma .su_step_list .label {font-size: 20px;}
.jp_trauma .su_aid_list li {display: flex; flex-direction: column; justify-content: center; padding: 0 16px;}
.jp_trauma .su_aid_list .tit {margin-top: 2px;}
.jp_trauma .ea_con04 .su_tit {margin-right: 0; white-space: normal;}
.jp_trauma .sc_choice_list .label {width: auto; padding: 0 14px;}
.jp_trauma .la_vs_list .label {width: fit-content; padding: 0 14px;}
/* 흉터축소 Shape Of Scar 알약 목록: 긴 문장이 두 줄이 되어도 알약 안에 들어가도록 높이 자동 */
.jp_trauma .sc_pill_list {max-width: 908px;}
.jp_trauma .sc_pill_list li {height: auto; min-height: 83px; padding: 10px 40px; box-sizing: border-box; text-align: center; text-wrap: balance;}
/* 수술 방법 카드: 설명이 길어져도 그림을 덮지 않도록 높이 자동 (그림 위치는 카드끼리 맞춤) */
.jp_trauma .sc_method_list li {display: flex; flex-direction: column; height: auto; min-height: 441px; padding-bottom: 30px;}
.jp_trauma .sc_method_list .head {flex: 1 0 auto; height: auto; min-height: 193px; padding-right: 24px; padding-bottom: 22px;}
.jp_trauma .sc_method_list dt {width: auto; margin-right: 12px; white-space: nowrap;}
/* 문구 사이(<wbr>)에서만 줄바꿈 — 단어 중간에서 끊기지 않게 */
.jp_trauma :is(.sc_pill_list p, .sc_method_list .alt, .sc_method_list dd) {word-break: keep-all; text-wrap: pretty;}
@media all and (min-width: 1025px) {
    .jp_trauma .sc_method_list .alt {font-size: 20px; line-height: 30px;}
}
.jp_trauma .ea_scar_list .btns a {width: auto; min-width: 150px; padding: 0 40px 0 16px;}

@media all and (min-width: 1025px) {
    .jp_trauma .su_check_list li {font-size: 24px;}
    .jp_trauma .su_reason_list .alt {font-size: 22px; line-height: 33px;}
    .jp_trauma .sc_icon_list {padding-left: 0;}
    .jp_trauma .sc_icon_list li {width: 320px;}
    .jp_trauma .sc_icon_list li:nth-child(2) {margin: 0 40px;}
    .jp_trauma .la_icon_list p {margin: 10px -30px 0;}
    .jp_trauma .ea_point_list {gap: 60px;}
    .jp_trauma .ea_point_list .alt {font-size: 20px;}
    .jp_trauma .ea_desc {font-size: 23px;}
    .jp_trauma .ea_step_list .tit {font-size: 23px; margin-left: -20px; margin-right: -20px;}
    .jp_trauma .ea_step_list .alt {font-size: 19px; line-height: 25px;}
    .jp_trauma .ea_care_list p {font-size: 21px; line-height: 26px;}
    .jp_trauma .ea_type_list .alt {font-size: 19px;}
    .jp_trauma .ea_type_list li:nth-child(1), .jp_trauma .ea_type_list li:nth-child(3) {padding-top: 30px;}
    .jp_trauma .la_type_list li:nth-child(2) .tag {font-size: 18px;}
    .jp_trauma .sc_step_list .alt {font-size: 20px;}
}
/* 縫合が必要となる場合 안내문: 사진 위로 넘어가지 않게 오른쪽 글 영역 안에서 두 줄 (사용자 요청 2026-10-02) */
@media all and (max-width: 700px) {
    .jp_trauma .su_con05 .su_note .br_pc {display: none;}
}

@media all and (min-width: 1441px) {
    .jp_trauma .su_icon_list p,
    .jp_trauma .la_icon_list p,
    .jp_trauma .sc_type_list :is(.tit, .sub, .alt),
    .jp_trauma .sc_step_list :is(.tit, .alt) {white-space: nowrap;}
    .jp_trauma .sc_type_list :is(.tit, .sub, .alt),
    .jp_trauma .sc_step_list :is(.tit, .alt) {margin-left: -40px; margin-right: -40px;}
}
@media all and (min-width: 1025px) and (max-width: 1440px) {
    .jp_trauma .la_step_list li {width: 230px; margin-left: -115px;}
    .jp_trauma .la_step_list li:nth-child(5) {left: 92.5%;}
    .jp_trauma .la_step_list p {font-size: 21px; line-height: 28px;}
}

@media all and (max-width: 1024px) {
    .jp_serif_tit {font-size: 32px; line-height: 42px;}
    .jp_trauma .su_con07 .alt {font-size: 18px;}
    .jp_trauma .su_aid_list li {padding: 36px 20px;}
    .jp_trauma .sc_pill_list li {min-height: 70px; padding: 8px 24px;}
    .jp_trauma .sc_method_list li {min-height: 0;}
    .jp_trauma .sc_method_list .head {min-height: 0;}
}

@media all and (max-width: 700px) {
    .jp_serif_tit {font-size: 21px; line-height: 30px;}
    .jp_serif_tit br {display: none;}
    .jp_trauma :is(.su_desc, .su_desc02, .su_desc03, .sc_desc, .ea_desc, .ea_desc02, .ea_desc03, .ea_desc04, .su_con07 .alt, .su_con06 p, .su_con13 .alt, .sc_con06 p, .sc_con11 p, .la_con04 p, .la_con05 p, .ea_con05 p, .su_reason_list .alt, .su_aid_list .alt, .sc_method_list .alt) br {display: none;}
    .jp_trauma .su_con04 .tit_row {flex-direction: column; gap: 4px;}
    .jp_trauma .su_con04 .tit_row img {width: 90px;}
    .jp_trauma .su_con04 .alt br {display: none;}
    .jp_trauma .su_con07 .alt {font-size: 14px;}
    .jp_trauma .su_circle_list p {font-size: 12px; line-height: 17px;}
    .jp_trauma .su_step_list .label {height: auto; min-height: 30px; padding: 4px 6px; font-size: 12px; line-height: 15px;}
    .jp_trauma .su_pill_list li {padding: 0 14px; font-size: 15px; text-align: center;}
    .jp_trauma .sc_pill_list li {min-height: 52px; padding: 8px 18px;}
    .jp_trauma .su_reason_list .txt {padding: 0 16px;}
    .jp_trauma .sc_icon_list {flex-direction: column; align-items: center; gap: 22px;}
    .jp_trauma .sc_icon_list li, .jp_trauma .sc_icon_list li:nth-child(2) {width: auto; margin: 0;}
}