/* TCL 포트폴리오 (테스트) - 클래스는 tc_ 접두어로 기존 사이트 CSS와 충돌 방지
 * 시안(PC 1920x12,483 / 모바일 375x5,272)을 섹션별 이미지(PC 2x / 모바일 4x)로 내보낸 것을 시안 위치/간격 그대로 쌓음
 * 위치·여백은 시안 px × --u(화면폭/1920, 모바일은 /375) 로 화면 크기에 비례 */
.tc_wrap { --hd: 80px; padding-top: var(--hd); overflow: hidden; background: #fff; container-type: inline-size; }
.tc_wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.tc_wrap picture, .tc_wrap img { display: block; width: 100%; height: auto; }
.tc_wrap section { position: relative; --u: calc(100cqw / 1920); }
.tc_wrap .mo_only { display: none; }

/* 01 히어로: 소닉슬립과 같은 규칙 - 헤더 아래 한 화면(PC 100vh-헤더, 모바일 600px), 원 버튼은 아래 중앙(링 160px·원 62% / 모바일 링 100px, 아래 80px / 50px)
 * 시안 이미지(1920x1080 / 375x600)를 --s 배율로 아래 기준 가운데 정렬(cover). 이미지의 원 버튼 자리에 실제 원 버튼+회전 링을 정확히 겹침 */
.tc_wrap .tc_hero { --H: max(calc(100vh - var(--hd)), 600px); height: var(--H); overflow: hidden; background: #020409; --s: max(calc(100cqw / 1920), calc(var(--H) / 1080)); }
@supports (height: 100svh) { .tc_wrap .tc_hero { --H: max(calc(100svh - var(--hd)), 600px); } }
.tc_hero_bg { position: absolute; inset: 0; }
.tc_wrap .tc_hero_bg img { position: absolute; bottom: 0; left: calc(50% - 960 * var(--s)); width: calc(1920 * var(--s)); max-width: none; height: auto; }
.tc_scroll_btn { position: absolute; left: 50%; bottom: calc(80 * var(--s)); z-index: 2; width: calc(160 * var(--s)); transform: translateX(-50%); }
.tc_ring { animation: tc_rotate 8s linear infinite; }
.tc_round { position: absolute; top: 50%; left: 50%; width: 62%; height: 62%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #204bf9; }
.tc_wrap .tc_round img { width: calc(25 * var(--s)); height: auto; }
@keyframes tc_rotate { to { transform: rotate(360deg); } }
.tc_info { background: #0f0f0f; }

/* 02 폰 피드(소닉슬립과 같은 슬라이더): 폰 위/아래 조각 + 본체 사이로 카드가 한 장씩 넘어가고 가운데 카드가 폰 화면에 멈춤 (위치는 시안 px × --u) */
.tc_wrap .tc_feed { margin-top: calc(198 * var(--u)); height: calc(854 * var(--u)); z-index: 2; }
.tc_wrap .tc_phone_top, .tc_wrap .tc_phone_bottom { position: absolute; left: calc(748 * var(--u)); width: calc(422 * var(--u)); z-index: 1; }
.tc_wrap .tc_phone_top { top: 0; }
.tc_wrap .tc_phone_bottom { top: calc(658.5 * var(--u)); }
.tc_phone_body { position: absolute; left: calc(752.5 * var(--u)); top: calc(201 * var(--u)); width: calc(413 * var(--u)); height: calc(457.5 * var(--u)); background: #0d1015; }
.tc_slider { position: absolute; left: 0; right: 0; top: calc(201 * var(--u)); z-index: 2; }
.tc_track { display: flex; gap: calc(20 * var(--u)); width: max-content; list-style: none; will-change: transform; }
.tc_track li { flex: 0 0 calc(456 * var(--u)); }
.tc_track.is_moving { transition: transform 1.2s cubic-bezier(.4, 0, .2, 1); }

/* 03 컨셉: PC 제목 158 + 칩 4칸 585 (모바일 제목 184 + 칩 2x2 340) */
.tc_wrap .tc_concept { margin-top: calc(225 * var(--u)); z-index: 3; }   /* 모바일에서 폰 아래쪽이 제목 영역과 14px 겹치는데, 시안처럼 제목이 위에 오도록 */
.tc_chips { display: flex; }
.tc_chips picture { flex: 0 0 25%; }
/* 칸마다 따로 잘린 이미지라, 화면 배율 때문에 경계가 소수점 픽셀이면 흰 배경이 가는 선으로 비침 → 이웃 칸을 1px 겹침 */
.tc_chips picture + picture { flex-basis: calc(25% + 1px); margin-left: -1px; }
.tc_wrap .tc_chips picture { height: calc(585 * var(--u)); }
.tc_wrap .tc_chips img { height: 100%; object-fit: cover; }

/* 04 / 05 / 06 */
.tc_goal { background: #080b1a; }
.tc_promo { background: #f4f4f4; }
.tc_more { background: #000; }
/* 섹션 경계의 가는 선 방지: 이미지 높이가 소수점이면 화면 배율에 따라 흰 배경이 1px 선으로 비침 → 다음 섹션을 1px 위로 올려 덮고(margin -1px),
 * 이미지는 원래 위치에 오도록 같은 만큼 위쪽 여백(padding 1px, 섹션 첫 줄 색)을 줌. 아래 섹션 위치는 그대로 */
.tc_wrap .tc_goal, .tc_wrap .tc_more { margin-top: -1px; padding-top: 1px; }
/* PROMOTION 은 이미지 맨 위에 카드가 붙어 있어서(시안에서 위쪽이 잘림) 위쪽 여백(회색 줄)을 주면 카드 위에 선이 생김 → 여백 없이 1px 겹치고, 아래 섹션 위치는 그대로 */
.tc_wrap .tc_promo { margin-top: -1px; margin-bottom: 1px; }
/* 06 맨 위 띠 롤링(왼쪽): 한 바퀴 타일을 7장 이어 붙이고 1/7(타일 1장)만 이동 → 처음과 똑같아 끊김 없음 */
.tc_band { overflow: hidden; background: #000; }
.tc_band_track { display: flex; width: max-content; animation: tc_band 28s linear infinite; will-change: transform; }
.tc_wrap .tc_band_tile { flex: none; width: calc(908 * var(--u)); }   /* PC 한 타일 = 한 바퀴 2개분 1816px / 2x */
@keyframes tc_band { to { transform: translateX(-14.2857%); } }
.tc_wrap .tc_more picture img[src*="pc_06_rest"] { width: calc(1919 * var(--u)); margin-left: calc(1 * var(--u)); }   /* 시안에서 가로 1px 오른쪽에서 시작 */

/* 스크롤 모션: JS 가 .tc_motion 을 붙였을 때만 숨김 상태로 시작 (JS 가 꺼져 있어도 내용은 보임) */
.tc_motion [data-tc] { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.tc_motion [data-tc="up"] { opacity: 0; transform: translateY(40px); }
.tc_motion [data-tc="zoom"] { opacity: 0; transform: scale(1.08); transition-duration: 1.4s; }
.tc_motion [data-tc].is_in { opacity: 1; transform: none; }
/* 컬러칩: 왼쪽부터 차례로 */
.tc_motion .tc_chips[data-tc] { opacity: 1; transform: none; }
.tc_motion .tc_chips picture { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.tc_motion .tc_chips picture:nth-child(2) { transition-delay: .15s; }
.tc_motion .tc_chips picture:nth-child(3) { transition-delay: .3s; }
.tc_motion .tc_chips picture:nth-child(4) { transition-delay: .45s; }
.tc_motion .tc_chips.is_in picture { clip-path: inset(0 0 0 0); }
/* 히어로: 배경이 천천히 줄어들며 밝아지고, 링/글자는 뒤따라 나타남 (소닉슬립과 같은 켄번스) */
/* PC 는 이미지에 원 버튼이 박혀 있어 확대하면 실제 버튼과 어긋나므로 밝아지기만 함. 모바일(깨끗한 배경)은 켄번스 */
.tc_motion .tc_hero_bg img { animation: tc_fadein 2.4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes tc_fadein { from { filter: brightness(.6); } to { filter: none; } }
@keyframes tc_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.tc_motion .tc_scroll_btn { opacity: 0; transition: opacity 1s ease .9s; }
.tc_motion .tc_hero.is_in .tc_scroll_btn { opacity: 1; }
.tc_motion .tc_hero_txt[data-tc] { transition-delay: .5s; }

@media (max-width: 767px) {
  .tc_wrap section { --u: calc(100cqw / 375); }
  .tc_wrap .mo_only { display: block; }
  /* 모바일 히어로: 소닉슬립과 같이 높이 600px (시안 375x600). 링 지름 100px, 원 버튼 아래 50px, 화살표 20px */
  .tc_wrap .tc_hero { --H: 600px; height: 600px; --s: max(calc(100cqw / 375), 1px); }
  .tc_wrap .tc_hero_bg img { left: calc(50% - 187.5 * var(--s)); width: calc(375 * var(--s)); }
  .tc_scroll_btn { width: calc(100 * var(--s)); bottom: calc(50 * var(--s)); }   /* 메디힐·블랙에이디와 같이 화면 폭에 비례 (배경 이미지와 같은 배율) */
  .tc_wrap .tc_round img { width: calc(20 * var(--s)); }
  /* 모바일 히어로 글자: 메디힐 모바일과 같은 위치 (윗줄 글자 상단 242px, 24px 200 / 35px 700). 배경 이미지와 같이 아래 기준 --s 배율 */
  .tc_wrap .tc_hero_txt { position: absolute; left: 0; right: 0; top: calc(600px - 363 * var(--s)); z-index: 1; padding: 0 20px; text-align: center; color: #fff; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; }
  .tc_hero_txt p { font-size: calc(24 * var(--s)); font-weight: 200; line-height: 1.25; }
  .tc_motion .tc_hero_bg img { animation-name: tc_kenburns; }
  .tc_hero_txt h2 { font-size: calc(35 * var(--s)); font-weight: 700; line-height: 1.25; }
  /* 피드: 시안 1155~1501 (폰 아래쪽 14px 은 다음 섹션 위로 겹침) */
  .tc_wrap .tc_feed { margin-top: calc(70 * var(--u)); height: calc(360 * var(--u)); }   /* 시안: 폰 위 1056 ~ 아래 1416 (정보 영역 끝 986, DESIGN CONCEPT 시작 1501) */
  .tc_wrap .tc_phone_top, .tc_wrap .tc_phone_bottom { left: calc(93 * var(--u)); width: calc(183 * var(--u)); }
  .tc_wrap .tc_phone_bottom { top: calc(277 * var(--u)); }
  .tc_phone_body { left: calc(97.75 * var(--u)); top: calc(84.75 * var(--u)); width: calc(174 * var(--u)); height: calc(192.25 * var(--u)); }
  .tc_slider { top: calc(84.75 * var(--u)); }
  .tc_track { gap: calc(8 * var(--u)); }
  .tc_track li { flex-basis: calc(192 * var(--u)); }
  .tc_wrap .tc_concept { margin-top: calc(85 * var(--u)); }
  .tc_goal { background: #030512; }
  .tc_chips { flex-wrap: wrap; }
  .tc_chips picture { flex: 0 0 50%; }
  .tc_chips picture + picture { flex-basis: 50%; margin-left: 0; }
  .tc_chips picture:nth-child(2), .tc_chips picture:nth-child(4) { flex-basis: calc(50% + 1px); margin-left: -1px; }
  .tc_chips picture:nth-child(3), .tc_chips picture:nth-child(4) { margin-top: -1px; }
  .tc_chips picture:nth-child(3) { flex-basis: 50%; }
  .tc_wrap .tc_chips picture { height: calc(170.5 * var(--u)); }
  .tc_motion .tc_chips picture:nth-child(3) { transition-delay: .45s; }
  .tc_motion .tc_chips picture:nth-child(4) { transition-delay: .6s; }
  /* 04 / 05 / 06 위에 올리는 조각들(시안 위치 - 해당 섹션 위쪽 기준) */
  .tc_wrap .tc_goal_collage { position: absolute; left: 20px; top: calc(316 * var(--u)); width: calc(335 * var(--u)); }
  .tc_wrap .tc_promo_collage { position: absolute; left: 0; top: calc(-10 * var(--u) + 1px); width: 100%; z-index: 1; }
  .tc_wrap .tc_band_tile { width: calc(179 * var(--u)); }                 /* 모바일 한 바퀴 716px / 4x */
  .tc_band_track { animation-duration: 16s; }
  .tc_wrap .tc_more_collage { position: absolute; left: calc(151 * var(--u)); top: calc(60 * var(--u)); width: calc(224 * var(--u)); }
  .tc_wrap .tc_more_phone { position: absolute; left: calc(30 * var(--u)); top: calc(222.12 * var(--u)); width: calc(345 * var(--u)); }
  .tc_wrap .tc_more_banner { position: absolute; left: calc(34 * var(--u)); top: calc(248 * var(--u)); width: calc(104 * var(--u)); }
  .tc_wrap .tc_more picture img[src*="pc_06_rest"] { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tc_motion .tc_hero_bg img, .tc_ring, .tc_band_track { animation: none; }
  .tc_motion [data-tc], .tc_motion .tc_chips picture, .tc_motion .tc_scroll_btn { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}

/* ---------- PC 히어로 (소닉슬립과 같은 방식) ----------
 * 글자·원이 없는 깨끗한 배경(1920x1080)을 화면 가득(cover), 글자는 42% 위치, 원 버튼은 아래 80px·지름 160px 고정.
 * 모바일은 위쪽 규칙(시안 배율) 그대로 */
@keyframes tc_kenburns { from { transform: scale(1.12); filter: brightness(.6); } to { transform: scale(1); filter: none; } }
.tc_wrap .mo_br { display: none; }
@media (min-width: 768px) {
  .tc_wrap .tc_hero_bg img { left: 0; bottom: auto; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .tc_motion .tc_hero_bg img { animation-name: tc_kenburns; }
  .tc_wrap .tc_hero_txt { position: absolute; left: 0; right: 0; top: 42%; z-index: 1; transform: translateY(-50%); padding: 0 20px; text-align: center; color: #fff; font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0; }
  .tc_hero_txt p { font-size: 44px; font-weight: 200; line-height: 1.25; }
  .tc_hero_txt h2 { font-size: 64px; font-weight: 700; line-height: 1.25; }
  .tc_motion .tc_hero_txt p[data-tc] { transition-delay: .5s; }
  .tc_motion .tc_hero_txt h2[data-tc] { transition-delay: .65s; }
  .tc_wrap .tc_scroll_btn { bottom: 80px; width: 160px; }
  .tc_wrap .tc_round img { width: 25px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .tc_hero_txt p { font-size: 34px; }
  .tc_hero_txt h2 { font-size: 49px; }
  .tc_wrap .tc_scroll_btn { width: 130px; bottom: 65px; }
}
@media (max-width: 767px) {
  .tc_wrap .mo_br { display: inline; }
}


/* ---------- 실제 글자 (소닉슬립과 같은 크기/여백) ---------- */
.tc_wrap { font-family: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; letter-spacing: 0; word-break: keep-all; color: #111; }
.tc_wrap .tc_sec_tit { font-weight: 700; font-size: 54px; line-height: 1.2; text-transform: uppercase; }
.tc_wrap .tc_sec_desc { font-size: 20px; line-height: 1.5; letter-spacing: -0.02em; color: #565656; }
.tc_info { color: #fff; }
.tc_info_inner { padding: calc(120 * var(--u)) calc(250 * var(--u)); }
.tc_info_tit { font-size: 54px; font-weight: 700; line-height: 1.2; margin-bottom: 44px; }
.tc_info_meta { display: flex; gap: 30px; font-size: 20px; line-height: 1.2; margin-bottom: 38px; }
.tc_info_meta div { display: flex; gap: 14px; }
.tc_info_meta dt { font-weight: 700; }
.tc_info_lead { font-size: 18px; font-weight: 700; line-height: 1.5; color: #f3f3f3; margin-bottom: 16px; }
.tc_info_desc { font-size: 18px; line-height: 1.5; color: #f3f3f3; }
.tc_concept_head { display: flex; align-items: flex-start; height: calc(158 * var(--u)); padding: 0 calc(80 * var(--u)) 0 calc(270 * var(--u)); background: #fff; }
.tc_concept_head .tc_sec_tit { flex: 0 0 calc(575 * var(--u)); white-space: nowrap; }
.tc_concept_head .tc_sec_desc { margin-top: calc(4 * var(--u)); letter-spacing: 0; }
/* 컬러 칩: 칸 안에 글자(오른쪽 아래) */
.tc_chips_txt .tc_chip { position: relative; flex: 0 0 25%; height: calc(585 * var(--u)); overflow: hidden; }
.tc_chips_txt .tc_chip + .tc_chip { flex-basis: calc(25% + 1px); margin-left: -1px; }
.tc_wrap .tc_chips_txt picture { height: 100%; }
.tc_chip p { position: absolute; right: 40px; bottom: 45px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; font-size: 20px; line-height: 1.2; color: #fff; text-align: right; }
.tc_chip p strong { font-weight: 700; }
.tc_chip p span { font-weight: 400; }
.tc_chip.c3 p { color: #fff; }
.tc_motion .tc_chips_txt picture { clip-path: none; transition: none; }
.tc_motion .tc_chips_txt .tc_chip { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); }
.tc_motion .tc_chips_txt .tc_chip:nth-child(2) { transition-delay: .15s; }
.tc_motion .tc_chips_txt .tc_chip:nth-child(3) { transition-delay: .3s; }
.tc_motion .tc_chips_txt .tc_chip:nth-child(4) { transition-delay: .45s; }
.tc_motion .tc_chips_txt.is_in .tc_chip { clip-path: inset(0 0 0 0); }
.tc_wrap .tc_goal, .tc_wrap .tc_promo { position: relative; }
.tc_goal_head { position: absolute; z-index: 2; left: calc(280 * var(--u)); right: calc(270 * var(--u)); top: calc(280 * var(--u)); display: flex; justify-content: space-between; align-items: flex-end; color: #fff; }
.tc_goal_head .tc_sec_desc { color: #fff; width: calc(720 * var(--u)); letter-spacing: -0.02em; }
.tc_label { display: block; font-weight: 500; font-size: 20px; line-height: 1.2; color: #6db9fe; margin-bottom: 6px; }
.tc_goal_head .tc_sec_tit { color: #fff; }
.tc_promo_head { position: absolute; z-index: 2; left: calc(280 * var(--u)); top: calc(259 * var(--u)); }
.tc_promo_head .tc_sec_tit { color: #0c0c0c; }
.tc_promo_head .tc_sec_desc { margin-top: 38px; color: #333; }
.tc_motion [data-tc="up"].tc_goal_head { opacity: 1; }

@media (max-width: 767px) {
  .tc_wrap .tc_sec_tit { font-size: 24px; line-height: 1.3; }
  .tc_wrap .tc_sec_desc { font-size: 14px; }
  .tc_info_inner { padding: 60px 20px; }
  .tc_info_tit { font-size: 24px; margin-bottom: 20px; }
  .tc_info_meta { flex-direction: column; gap: 10px; font-size: 16px; margin-bottom: 20px; }
  .tc_info_meta div { gap: 7px; }
  .tc_info_lead, .tc_info_desc { font-size: 14px; margin-bottom: 15px; }
  .tc_info_desc { margin-bottom: 0; }
  .tc_info br, .tc_concept br, .tc_goal br, .tc_promo br { display: none; }
  .tc_concept_head { flex-direction: column; height: calc(184 * var(--u)); padding: 0 20px; }
  .tc_concept_head .tc_sec_tit { flex: none; }
  .tc_concept_head .tc_sec_desc { margin: 18px 0 0; }
  .tc_chips_txt { flex-wrap: wrap; }
  .tc_chips_txt .tc_chip { flex: 0 0 50%; height: calc(170.5 * var(--u)); }
  .tc_chips_txt .tc_chip + .tc_chip { flex-basis: 50%; margin-left: 0; }
  .tc_chips_txt .tc_chip:nth-child(2), .tc_chips_txt .tc_chip:nth-child(4) { flex-basis: calc(50% + 1px); margin-left: -1px; }
  .tc_chips_txt .tc_chip:nth-child(3), .tc_chips_txt .tc_chip:nth-child(4) { margin-top: -1px; }
  .tc_chip p { right: 20px; bottom: 25px; font-size: 14px; gap: 5px; }
  .tc_goal_head { left: 20px; right: 20px; top: calc(80 * var(--u)); flex-direction: column; align-items: flex-start; }
  .tc_goal_head .tc_sec_desc { width: auto; margin-top: 20px; }
  .tc_label { font-size: 12px; margin-bottom: 8px; }
  .tc_promo_head { left: 20px; top: calc(83 * var(--u)); width: calc(335 * var(--u)); }
  .tc_promo_head .tc_sec_desc { margin-top: 20px; }
  /* 모바일 좌우 여백 20px 로 통일 */
}
.tc_wrap .tc_concept_head .tc_sec_tit { min-width: max-content; margin-right: 20px; flex: 0 0 auto; }
.tc_concept_head .tc_sec_desc { flex: 1; }

/* ---------- 태블릿 (768~1199px): PC 배치를 그대로 쓰되 글자는 화면 폭에 맞춰 줄이고, 이미지 위 제목 블록은 폭을 제한해 이미지와 겹치지 않게 ---------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .tc_wrap .tc_sec_tit { font-size: clamp(26px, calc(54 * var(--u) * 1.5), 54px); }
  .tc_wrap .tc_sec_desc { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .tc_info_inner { padding: calc(100 * var(--u)) 48px; }
  .tc_info_tit { font-size: clamp(28px, calc(54 * var(--u) * 1.5), 54px); margin-bottom: 28px; }
  .tc_info_meta { font-size: clamp(14px, calc(20 * var(--u) * 1.5), 20px); gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
  .tc_info_lead, .tc_info_desc { font-size: clamp(14px, calc(18 * var(--u) * 1.5), 18px); }
  .tc_concept_head { flex-direction: column; height: auto; padding: 0 48px calc(24 * var(--u)); }
  .tc_wrap .tc_concept_head .tc_sec_tit { flex: none; margin-right: 0; min-width: 0; }
  .tc_concept_head .tc_sec_desc { margin: 12px 0 0; flex: none; }
  .tc_concept br, .tc_goal br, .tc_promo br { display: none; }
  .tc_goal_head { left: 48px; right: auto; width: calc(100% - 96px); top: calc(150 * var(--u)); flex-direction: column; align-items: flex-start; }
  .tc_goal_head .tc_sec_desc { width: auto; margin-top: 12px; }
  .tc_label { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
  .tc_promo_head { left: 48px; top: calc(110 * var(--u)); width: 44%; }
  .tc_promo_head .tc_sec_desc { margin-top: 12px; }
  .tc_colors li, .tc_chip p { font-size: clamp(13px, calc(20 * var(--u) * 1.5), 20px); }
}

/* PC: 컨셉 제목과 설명 사이 간격을 넓힘 (모바일·태블릿은 그대로) */
@media (min-width: 1200px) {
  .tc_wrap .tc_concept_head .tc_sec_tit { margin-right: 60px; }
}
/* 모바일: 검은 배경(DESIGN GOAL) 아래 여백을 피그마 값(72)에 맞춤. 단색으로 채우면 이음매가 보여서 배경 이미지(mo_04t)를 60 만큼 아래로 이어 늘림 */
@media (max-width: 767px) {
  .tc_goal { padding-bottom: 0; }
}