@charset "utf-8";

/* ==========================================================================
   청주연세재활의학과 - 지방유래 줄기세포 치료 상세페이지
   ========================================================================== */

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}

:root {
    --color-white: #ffffff;
    --color-black: #333333;
    --color-graylight: #f3f3f3;
    --color-brown: #493445;
    --color-brown-dark: #362634;
    --color-gray-text: #666666;
    --color-gray-border: #dddddd;
    --color-graylight2: #eeeeee;
}

/* ==========================================================================
   기본 세팅
   ========================================================================== */
html { overflow-y: scroll; }
body { font-family: 'Escoredream', 'Malgun Gothic', dotum, sans-serif; background: var(--color-white); color: var(--color-black); font-size: 20px; line-height: 1.7; }
h1, h2, h3, h4, h5, h6, button, input, textarea, select { font-family: 'Escoredream', 'Malgun Gothic', dotum, sans-serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-black); text-decoration: none; }
.prp-page { width: 100%; overflow-x: hidden; }

/* ==========================================================================
   인터렉션 공통 규칙 (Hover / Scroll Reveal)
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
html.js-reveal .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
/* 헤드 배너(Hero) 전용 순차 등장 애니메이션: 짧은 간격, 부드러운 easing으로 물 흐르듯 자연스럽게 아래에서 위로 등장 */
html.js-reveal .prp-hero-content .reveal { transform: translateY(30px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
html.js-reveal .prp-hero-content .reveal.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
    .prp-hero-gradient { animation: none; }
    .prp-hero-bg { transform: scale(1.1) !important; }
}

/* 공통 컨테이너 및 타이틀 클래스 (유지보수용 공통 클래스) */
.prp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.prp-section { padding: 200px 0; }
.prp-section-title { font-family: 'Escoredream', 'Malgun Gothic', dotum, sans-serif; font-size: 2.4em; font-weight: 600; color: var(--color-black); text-align: center; margin-bottom: 24px; }
.prp-section-desc { font-size: 1.15em; font-weight: 400; color: var(--color-gray-text); text-align: center; max-width: 820px; margin: 0 auto 60px; line-height: 1.8; }
.prp-section-desc.prp-oneline { max-width: none; white-space: nowrap; }
.prp-eyebrow { display: inline-block; font-size: 1em; font-weight: 700; color: var(--color-brown); background: rgba(73, 52, 69, 0.1); padding: 8px 20px; border-radius: 30px; margin-bottom: 20px; }
.prp-btn { display: inline-block; padding: 18px 48px; border-radius: 50px; font-size: 1.2em; font-weight: 700; text-align: center; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.prp-btn-primary { background: var(--color-brown); color: var(--color-white); }
.prp-btn-primary:hover { background: var(--color-white); color: var(--color-brown); transform: translateY(-3px); }

/* ==========================================================================
   1. 헤드 이미지 (Hero Banner)
   ========================================================================== */
.prp-hero { position: relative; width: 100%; height: 650px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--color-black); }
.prp-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1); }
.prp-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); }
.prp-hero-content { position: relative; z-index: 2; text-align: left; color: var(--color-white); max-width: 800px; padding: 0 20px; margin-right: 18%; }
.prp-hero-eyebrow { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 30px; }
.prp-hero-eyebrow.is-visible { display: inline-flex !important; }
.prp-hero-eyebrow-line { display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.6); }
.prp-hero-eyebrow-text { font-size: 0.9em; font-weight: 600; color: var(--color-white); font-family: 'Escoredream', sans-serif; white-space: nowrap; }
.prp-hero-title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
.prp-hero-title.is-visible { display: flex !important; }
.prp-hero-title-main { font-size: 3.4em; font-weight: 600; color: var(--color-white); line-height: 1.2; font-family: 'Escoredream', sans-serif; }
.prp-hero-title-sub { font-size: 1.5em; font-weight: 500; color: var(--color-white); line-height: 1.4; font-family: 'Escoredream', sans-serif; }
.prp-hero-desc { font-size: 1.2em; font-weight: 300; color: var(--color-white); line-height: 1.8; }

/* ==========================================================================
   2. 지방유래 줄기세포의 정의 (Introduction)
   ========================================================================== */
.prp-intro { background: var(--color-white); padding: 200px 0; }
.prp-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 60px; }
.prp-intro-desc { font-size: 1.2em; color: var(--color-black); line-height: 2; margin-bottom: 36px; }
.prp-intro-list { display: flex; flex-direction: column; gap: 24px; }
.prp-intro-list-item { display: flex; align-items: center; gap: 18px; }
.prp-intro-list-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--color-graylight); display: flex; align-items: center; justify-content: center; }
.prp-intro-list-icon i { font-size: 1.4em; color: var(--color-brown); }
.prp-intro-list-text { font-size: 1.1em; font-weight: 500; color: var(--color-brown); line-height: 1.6; }
.prp-intro-img { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.12); height: 480px; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-intro-img:hover { box-shadow: 0 28px 60px rgba(0,0,0,0.2); transform: translateY(-6px); }
.prp-intro-img img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   3. 치료 진행 과정 (Process)
   ========================================================================== */
.prp-process { background: var(--color-graylight); padding: 200px 0; }
.prp-process .prp-container { max-width: 1480px; }
.prp-process-grid { display: grid; grid-template-columns: 300px 44px 300px 44px 300px 44px 300px; justify-content: center; align-items: center; gap: 12px; margin-top: 60px; }
.prp-process-card { position: relative; width: 300px; background: var(--color-white); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.06); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-process-card:hover { box-shadow: 0 18px 40px rgba(0,0,0,0.12); transform: translateY(-6px); }
.prp-process-card-img { position: relative; width: 100%; height: 180px; overflow: hidden; }
.prp-process-card-img img { width: 100%; height: 100%; object-fit: cover; }
.prp-process-card-body { padding: 26px 22px 30px; text-align: center; }
.prp-process-card-body h3 { font-size: 1.25em; font-weight: 700; color: var(--color-black); margin-bottom: 10px; }
.prp-process-card-body p { font-size: 0.95em; color: var(--color-gray-text); }
.prp-process-arrow { display: flex; align-items: center; justify-content: center; color: var(--color-brown); font-size: 1.6em; }

/* ==========================================================================
   4. 지방유래 줄기세포의 5대 핵심 효과 (Core Benefits)
   ========================================================================== */
.prp-focus { background: var(--color-white); padding: 200px 0; }
.prp-focus-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* 카드 덩어리들을 가운데로 모아줌 */
    gap: 32px;
}
.prp-focus-card { flex: 0 0 calc((100% - 64px) / 3); background: var(--color-white); border: 1px solid var(--color-graylight2); border-radius: 16px; padding: 50px 34px; text-align: center; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-focus-card {
    width: calc(33.333% - 22px); /* 3열 배치 (gap 여백 계산) */
    /* 또는 max-width: 350px; 처럼 고정 너비를 줘도 됨 */
}
.prp-focus-card:hover { box-shadow: 0 15px 40px rgba(0,0,0,0.08); transform: translateY(-6px); }
.prp-focus-icon { width: 90px; height: 90px; margin: 0 auto 28px; border-radius: 50%; background: var(--color-graylight); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prp-focus-icon i { font-size: 2.2em; color: var(--color-brown); }
.prp-focus-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.prp-focus-card h3 { font-size: 1.35em; font-weight: 700; color: var(--color-black); margin-bottom: 18px; }
.prp-focus-card h3.prp-focus-title-nowrap { white-space: nowrap; font-size: 1.12em; }
.prp-focus-card p { font-size: 1em; color: var(--color-gray-text); line-height: 1.8; }

/* ==========================================================================
   5. 기존 치료와의 차별화된 특장점 (Comparative Advantages)
   ========================================================================== */
.prp-advantage { background: var(--color-graylight); padding: 200px 0; }
.prp-advantage-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.prp-advantage-img { border-radius: 16px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.12); height: 600px; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-advantage-img:hover { box-shadow: 0 28px 60px rgba(0,0,0,0.2); transform: translateY(-6px); }
.prp-advantage-img img { width: 100%; height: 100%; object-fit: cover; }
.prp-advantage-list { display: flex; flex-direction: column; gap: 40px; }
.prp-advantage-item { position: relative; }
.prp-advantage-item:not(:last-child)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 1px; background: var(--color-gray-border); }
.prp-advantage-item-title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.prp-advantage-check { flex-shrink: 0; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--color-brown); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 1.25em; }
.prp-advantage-check i { font-size: 0.55em; }
.prp-advantage-item h3 { font-size: 1.25em; font-weight: 700; color: var(--color-black); margin-bottom: 0; }
.prp-advantage-item p { font-size: 1.02em; color: var(--color-gray-text); line-height: 1.8; }

/* ==========================================================================
   6. 치료 및 적용 대상 (Target Patients)
   ========================================================================== */
.prp-target { background: var(--color-white); padding: 200px 0; }
.prp-target-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prp-target-item { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 16px; background: var(--color-graylight); border-radius: 12px; padding: 28px 30px; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-target-item.is-visible { display: flex !important; }
.prp-target-item:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.08); transform: translateY(-6px); }
.prp-target-check { flex-shrink: 0; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--color-brown); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 1.1em; }
.prp-target-check i { font-size: 0.55em; }
.prp-target-item span { font-size: 1.1em; font-weight: 400; color: var(--color-black); }

/* ==========================================================================
   7. 자주 묻는 질문 (FAQ)
   ========================================================================== */
.prp-faq { background: var(--color-graylight); padding: 200px 0; }
.prp-faq-list { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; }
.prp-faq-item { background: var(--color-white); border: 1px solid var(--color-graylight2); border-radius: 16px; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.prp-faq-item:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.08); transform: translateY(-6px); }
.prp-faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 32px; background: none; border: none; cursor: pointer; font-family: 'Escoredream', 'Malgun Gothic', dotum, sans-serif; font-size: 1.15em; font-weight: 600; color: var(--color-black); text-align: left; }
.prp-faq-icon { flex-shrink: 0; color: var(--color-brown); transition: transform 0.3s ease; }
.prp-faq-item.is-open .prp-faq-icon { transform: rotate(180deg); }
.prp-faq-answer { max-height: 0; overflow: hidden; padding: 0 32px; transition: max-height 0.4s ease, padding 0.4s ease; }
.prp-faq-item.is-open .prp-faq-answer { max-height: 320px; padding: 0 32px 28px; }
.prp-faq-answer p { font-size: 1em; color: var(--color-gray-text); line-height: 1.8; }

/* ==========================================================================
   8. 하단 CTA 배너
   ========================================================================== */
.prp-cta { position: relative; background: var(--color-black); min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.prp-cta-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.prp-cta-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); }
.prp-cta .prp-container { position: relative; z-index: 2; }
.prp-cta-eyebrow { font-size: 0.7em; font-weight: 500; color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; font-family: 'Escoredream', sans-serif; }
.prp-cta-title { font-family: 'Escoredream', 'Malgun Gothic', dotum, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; line-height: 1.4; max-width: 900px; margin-left: auto; margin-right: auto; }
.prp-cta-title.is-visible { display: flex !important; }
.prp-cta-title-thin { font-size: 1.9em; font-weight: 300; color: var(--color-white); }
.prp-cta-title-bold { font-size: 1.9em; font-weight: 700; color: var(--color-white); }
.prp-cta-desc { font-size: 1.05em; font-weight: 300; color: var(--color-white); line-height: 1.8; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1024px) {
    .prp-focus-grid { grid-template-columns: 1fr; }
	.prp-focus-card{width:100%;}
    .prp-advantage-inner { grid-template-columns: 1fr; }
    .prp-target-grid { grid-template-columns: 1fr; }
    .prp-process-grid { grid-template-columns: 1fr; }
    .prp-process-card { width: 100%; max-width: 300px; margin: 0 auto; }
    .prp-process-arrow { transform: rotate(90deg); }
    .prp-advantage-img { height: 400px; }
    .prp-intro-inner { grid-template-columns: 1fr; }
    .prp-intro-img { height: 360px; }
}

@media (max-width: 768px) {
    body { font-size: 17px; }
    .prp-section { padding: 70px 0; }
    .prp-hero { height: 500px; }
    .prp-hero-content { margin-right: 0; }
    .prp-hero-title-main { font-size: 2.4em; }
    .prp-hero-title-sub { font-size: 1.1em; }
    .prp-hero-desc { font-size: 1.05em; }
    .prp-section-title { font-size: 1.8em; }
    .prp-section-desc.prp-oneline { white-space: normal; }
    .prp-intro-icons { gap: 24px; }
    .prp-intro-icon-item { width: 100%; }
    .prp-process-grid { grid-template-columns: 1fr; }
    .prp-process-card { width: 100%; max-width: 300px; margin: 0 auto; }
    .prp-process-arrow { transform: rotate(90deg); }
    .prp-focus-card { flex: 0 0 100%; }
    .prp-cta-title { font-size: 1em; }
    .prp-cta-title-thin { font-size: 1.8em; }
    .prp-cta-title-bold { font-size: 1.8em; }
    .prp-cta-desc { font-size: 0.95em; }
    .prp-advantage-img { height: 320px; }
    .prp-faq { padding: 70px 0; }
    .prp-faq-question { padding: 22px 24px; font-size: 1.02em; }
    .prp-faq-item.is-open .prp-faq-answer { max-height: 480px; padding: 0 24px 24px; }
}