/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 10 2026 | 00:55:50 */
/* ============================
   tmj.css
   턱관절 클리닉 스타일
   접두사: tmj-
   의존: common-style.css / common-components.css (device-*)
         implant.css (treatment-target-*)
============================ */


/* ======================================================
   주요 원인 — Apple/Toss 스타일 (tmj-cause)
   보더 없음 / 배경색 블록 / 숫자 데코 / 큰 라운딩
   그리드: [와이드] [절반] [절반] [절반] [절반] [와이드]
   ====================================================== */
.tmj-cause-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    gap: var(--one-gap-r);
    list-style: none;
    padding: 0; margin: 0;
    margin-top: var(--one-space-s);
}

/* 카드 기본 */
.tmj-cause-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--one-gap-lg);
    padding: var(--one-space-s);
    border-radius: 28px;
    background: #f5f5f7; /* Apple 시그니처 배경 */
    min-height: 220px;
    overflow: hidden;
}

/* 와이드 카드: 2열 전체 */
.tmj-cause-card--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 180px;
}

/* 다크 카드 */
.tmj-cause-card--dark {
    background: var(--main-color);
}

.tmj-cause-card--dark .tmj-cause-title,
.tmj-cause-card--dark .ft-body,
.tmj-cause-card--dark .tmj-cause-num {
    color: #fff;
}

.tmj-cause-card--dark .ft-body { opacity: 0.8; }
.tmj-cause-card--dark .tmj-cause-num { opacity: 0.15; }

/* 데코 숫자 — 우상단 크게 */
.tmj-cause-num {
    position: absolute;
    top: var(--one-gap-xl);
    right: var(--one-gap-xl);
    font-size: clamp(56px, 6vw, 80px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(0, 60, 114, 0.08);
    pointer-events: none;
    user-select: none;
}

/* 제목 */
.tmj-cause-title {
    display: block;
    font-size: var(--one-hd3);
    font-weight: 700;
    color: var(--one-txt-color);
    line-height: 1.2;
    margin-bottom: var(--one-gap-sm);
}

.tmj-cause-card .ft-body {
    color: var(--gray-color01);
    line-height: var(--one-lh-lg);
    font-size: var(--one-body);
}

/* "가장 흔한 원인" 태그 (와이드 카드 우측) */
.tmj-cause-tag {
    flex-shrink: 0;
    padding: 8px 20px;
    border-radius: 20px;
    background: var(--main-color);
    color: #fff;
    font-size: var(--one-caption);
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    align-self: flex-end;
}


/* ======================================================
   증상 카드 그리드 (tmj-symptom)
   PC 4열 / TAB 2열 / MO 1열
   아이콘 + 제목 + 설명
   ====================================================== */
.tmj-symptom-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--one-space-s) var(--one-gap-lg);
    list-style: none;
    padding: 0;
    max-width: 1000px;
    margin: var(--one-space-s) auto 0;
}

.tmj-symptom-card {
    display: flex;
    flex-direction: column;
    gap: var(--one-gap-lg);
    align-items: center;
    justify-content: center;
}
.tmj-symptom-icon {
	    width: 7em;
    height: 7em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sub-color02);
    border-radius: 50%;
}

.tmj-symptom-card .ft-body { color: var(--gray-color02); line-height: var(--one-lh-lg); }


/* ======================================================
   치료 방법 섹션 — device-* 재사용
   overflow-x: hidden → device-sep 워터마크 애니메이션
   ====================================================== */
.sec-tmj-treat { overflow-x: hidden; }


/* ======================================================
   반응형 — 태블릿 (max-width: 1024px)
   ====================================================== */
@media all and (max-width: 1024px) {
    .tmj-symptom-list { grid-template-columns: repeat(2, 1fr); }
    .tmj-cause-card--wide { flex-direction: column; align-items: flex-start; }
    .tmj-cause-tag { align-self: flex-start; }
}


/* ======================================================
   반응형 — 모바일 (max-width: 639px)
   ====================================================== */
@media all and (max-width: 639px) {
  .tmj-symptom-list {
		gap: var(--one-gap-xs);
	}
    .tmj-cause-list { grid-template-columns: 1fr; }
    .tmj-cause-card--wide { grid-column: auto; }
  .tmj-cause-card {
    min-height: 160px;
    padding: var(--one-gap-lg);
    border-radius: 20px;
	  justify-content: flex-end;
}
    .tmj-symptom-card { padding: var(--one-gap-lg);align-items: center; }
    .tmj-symptom-icon { flex-shrink: 0; }
}