@charset "UTF-8";
/* ============================================================
   DoctorPencil 메인 랜딩 (카이랩 디자인 시스템)
   대상 : /WEB-INF/jsp/main/MainDoctorpencil.jsp 의 #main 내부
   전제 : kailab_ds.css(토큰) 가 먼저 로드되어 있어야 함
   주의 : 헤더(.header_area) / 푸터(#footer) 는 건드리지 않는다.
          원본 디자인의 style-hover 커스텀 속성은 전부 :hover 로 옮겼다.
   ============================================================ */

.dpl {
	font-family: var(--font-body);
	color: var(--fg-primary);
	line-height: var(--leading-normal);
	background: var(--bg-base);
	text-align: left;
	letter-spacing: normal;
}
.dpl *, .dpl *:before, .dpl *:after { box-sizing: border-box; }

/* ---------- 줄바꿈 정책 ----------
   keep-all  : 한글이 단어 중간에서 끊기지 않게 한다.
   overflow-wrap : keep-all 만 쓰면 공백 없는 긴 문자열(URL·긴 영단어)이
                   화면을 밀어내므로, 넘칠 때만 강제로 끊도록 함께 건다.
                   break-word 는 구형 브라우저용, anywhere 는 최신 브라우저용
                   (anywhere 는 min-content 폭까지 줄여줘서 레이아웃이 안 터진다). */
.dpl, .dpl *:not(svg):not(svg *) {
	word-break: keep-all;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

/* flex·grid 자식은 기본 min-width 가 auto 라 내용이 길면 칸을 밀어낸다.
   0 으로 낮춰야 위 줄바꿈 규칙이 실제로 동작한다. */
.dpl-hero__grid > *,
.dpl-features__head > *,
.dpl-cards > *,
.dpl-steps > *,
.dpl-cta__inner > *,
.dpl-demo__head > *,
.dpl-demo__flow > *,
.dpl-step__num > * { min-width: 0; }

/* 이미지·표 등이 칸을 넘지 않도록 */
.dpl img, .dpl table, .dpl pre { max-width: 100%; }
.dpl h1, .dpl h2, .dpl h3, .dpl h4, .dpl p, .dpl ul, .dpl li { margin: 0; padding: 0; }
.dpl ul { list-style: none; }
.dpl a { text-decoration: none; transition: color .15s cubic-bezier(0.4,0,0.2,1); }

.dpl__container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---------- 공통 : 섹션 라벨(eyebrow) ---------- */
.dpl .dpl-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-body); font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide);
	color: var(--cyan-800); margin-bottom: 28px;
}
.dpl .dpl-eyebrow--mono {
	font-family: var(--font-mono); font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-widest); margin-bottom: 22px;
}
.dpl-eyebrow__rule { width: 20px; height: 1px; background: var(--cyan-600); flex: none; }
.dpl-eyebrow__text { white-space: nowrap; }

/* ---------- 공통 : 버튼 ----------
   주의 : 기존 style.css 의 `button.btn_join` / `button.btn_filedown`
   (배경 #0046d3, height 70px, font-size 22px, Fontawesome ::before 아이콘)
   보다 우선순위가 높아야 하므로 전부 `.dpl` 스코프를 붙인다.        */
.dpl .dpl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px 30px; margin: 0; border: 0; border-radius: var(--radius-full);
	height: auto; line-height: var(--leading-normal);
	font-family: var(--font-body); font-size: var(--text-sm);
	font-weight: var(--font-weight-bold); white-space: nowrap; cursor: pointer;
	letter-spacing: normal;
	transition: all .15s cubic-bezier(0.4,0,0.2,1);
}
/* 기존 Fontawesome 아이콘 제거 */
.dpl .dpl-btn:before, .dpl .dpl-btn:after { content: none; display: none; padding: 0; }

.dpl .dpl-btn--primary {
	background: var(--btn-primary-bg); color: var(--btn-primary-fg);
	box-shadow: var(--shadow-md);
}
.dpl .dpl-btn--primary:hover, .dpl .dpl-btn--primary:focus {
	background: var(--navy-900); color: #fff;
	box-shadow: var(--shadow-lg); transform: translateY(-2px);
}
.dpl .dpl-btn--ghost {
	background: transparent; color: var(--fg-brand);
	font-weight: var(--font-weight-semibold); border: 1px solid var(--navy-200);
}
.dpl .dpl-btn--ghost:hover, .dpl .dpl-btn--ghost:focus {
	border-color: var(--navy-800); color: var(--navy-800);
	background: rgba(255,255,255,0.7);
}

/* ============================================================
   1. HERO
   ============================================================ */
.dpl-hero {
	padding: 104px 0 96px;
	background: linear-gradient(168deg, #FFFFFF 0%, #F4F8FE 46%, #EAF4FE 100%);
}
.dpl-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: 72px; align-items: center;
}
.dpl-hero__copy {
	min-width: 0;
	animation: dplRevealUp .5s cubic-bezier(0.4,0,0.2,1) both;
}
.dpl .dpl-hero__title {
	font-family: var(--font-brand); font-weight: var(--font-weight-extrabold);
	font-size: clamp(38px, 4.6vw, 60px); line-height: 1.14;
	letter-spacing: -0.035em; color: var(--navy-950); margin: 0 0 26px;
}
.dpl .dpl-hero__title em { font-style: normal; color: var(--cyan-600); }
.dpl .dpl-hero__lead {
	font-size: var(--text-lg); font-weight: var(--font-weight-regular);
	line-height: var(--leading-relaxed); color: var(--fg-secondary);
	max-width: 520px; margin: 0 0 40px;
}
.dpl-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
/* 부가 문구 3개는 좌측 칸에 갇히면 문구가 길 때 줄바꿈이 생긴다.
   그래서 .dpl-hero__copy 밖으로 빼내 그리드 2행 전체 폭을 쓰게 한다.
   (JSP 에서 이 <ul> 은 .dpl-hero__grid 의 직계 자식이다 — 국문·영문 공통)
   윗줄 구분선은 전체 폭이 아니라 좌측 칸 폭만큼만 필요하므로
   border-top 대신 ::before 로 그린다. */
.dpl .dpl-hero__facts {
	grid-column: 1 / -1;
	position: relative;
	display: flex; flex-wrap: nowrap;
	padding-top: 22px;
	/* 폭을 li 3개 실제 합계(콘텐츠 폭)에 맞춘다.
	   하한 : 좌측 칸 폭 = (전체 폭 - 열간격 72px) x 1 / 1.86
	          (.dpl-hero__grid 가 minmax(0,1fr) + minmax(0,0.86fr) 이므로 합이 1.86fr)
	   상한 : 그리드 전체 폭 (넘치면 줄바꿈) */
	width: fit-content;
	min-width: calc((100% - 72px) / 1.86);
	max-width: 100%;
}
/* 구분선은 위에서 정해진 ul 폭을 그대로 따라간다. */
.dpl .dpl-hero__facts::before {
	content: ""; position: absolute; top: 0; left: 0; height: 1px;
	width: 100%;
	background: var(--navy-100);
}
/* 행 간격은 .dpl-hero__actions 의 margin-bottom(48px) 으로만 준다. */
.dpl-hero__grid { row-gap: 0; }
.dpl .dpl-hero__facts li {
	display: flex; align-items: center; padding: 0 22px;
	border-left: 1px solid var(--navy-100);
	font-size: var(--text-xs); font-weight: var(--font-weight-medium);
	color: var(--navy-700); white-space: nowrap;
}
.dpl .dpl-hero__facts li:first-child { padding-left: 0; border-left: 0; }

/* ---------- 히어로 우측 : 녹음 데모 카드 ---------- */
.dpl-demo {
	background: var(--bg-base); border: 1px solid rgba(0,47,163,0.06);
	border-radius: var(--radius-2xl); padding: 20px; min-width: 0;
	box-shadow: var(--shadow-xl);
	animation: dplRevealUp .6s cubic-bezier(0.4,0,0.2,1) .08s both;
}
.dpl-demo__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 16px; padding: 0 4px;
}
.dpl-demo__label {
	font-family: var(--font-mono); font-size: var(--text-xs);
	color: var(--fg-secondary); letter-spacing: var(--tracking-wider); white-space: nowrap;
}
.dpl-demo__rec {
	display: flex; align-items: center; gap: 6px;
	font-family: var(--font-mono); font-size: var(--text-xs);
	letter-spacing: var(--tracking-wider); color: var(--color-error); white-space: nowrap;
}
.dpl-demo__rec:before {
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--color-error); animation: dplBlink 1.6s ease-in-out infinite;
}
.dpl-demo__stage {
	background: var(--navy-950); border-radius: var(--radius-xl);
	padding: 18px 0; margin-bottom: 20px;
}
.dpl-demo__waveclip { overflow: hidden; width: 100%; min-width: 0; height: 52px; line-height: 0; }
.dpl-demo__wave { display: block; height: 52px; animation: dplPulseScroll 11s linear infinite; }
.dpl-demo__flow {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	flex-wrap: wrap; margin-bottom: 20px;
	font-family: var(--font-body); font-size: var(--text-xs);
	font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-wide);
	color: var(--fg-secondary);
}
.dpl-demo__flow span { white-space: nowrap; }
.dpl-demo__flow i { font-style: normal; color: var(--cyan-600); }
.dpl-demo__out { border-radius: var(--radius-xl); padding: 20px; background: var(--bg-brand-accent); }
.dpl-demo__out-title {
	font-family: var(--font-body); font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold); color: var(--cyan-800);
	letter-spacing: var(--tracking-wide); margin-bottom: 14px; white-space: nowrap;
}
/* 기록 영역 : 임상 내용을 노출하지 않기 위해 추상 막대로만 표현한다.
   이 자리에 실제 증상·진단·처방 예시 문구를 넣지 말 것. */
.dpl .dpl-demo__line {
	height: 8px; border-radius: var(--radius-full); background: var(--cyan-200);
	margin-bottom: 10px; opacity: 0;
	animation: dplLineIn .5s cubic-bezier(0.4,0,0.2,1) forwards;
}
.dpl .dpl-demo__line--w100 { width: 100%; animation-delay: 0s; }
.dpl .dpl-demo__line--w92  { width: 92%;  animation-delay: .15s; }
.dpl .dpl-demo__line--w78  { width: 78%;  animation-delay: .35s; }
.dpl .dpl-demo__line--w86  { width: 86%;  animation-delay: .55s; }
.dpl .dpl-demo__line--w52  { width: 52%;  animation-delay: .75s; margin-bottom: 0; }

/* ============================================================
   2. FEATURES
   ============================================================ */
.dpl-features { padding: 112px 0; background: var(--bg-base); }
.dpl-features__head {
	display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 64px; align-items: end; margin-bottom: 64px;
}
.dpl .dpl-section__title {
	font-family: var(--font-brand); font-size: clamp(28px, 3.2vw, 44px);
	font-weight: var(--font-weight-bold); line-height: 1.22;
	letter-spacing: -0.03em; color: var(--navy-950); margin: 0;
}
.dpl .dpl-features__desc {
	font-size: var(--text-base); line-height: var(--leading-relaxed);
	color: var(--fg-secondary); margin: 0; max-width: 420px; justify-self: end;
}
.dpl .dpl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.dpl .dpl-card {
	background: var(--bg-base); border: 1px solid var(--border-subtle);
	border-radius: var(--radius-xl); padding: 32px 30px 34px;
	transition: all .25s cubic-bezier(0.4,0,0.2,1);
}
.dpl .dpl-card:hover {
	box-shadow: var(--shadow-md); border-color: var(--navy-100);
	transform: translateY(-2px);
}
.dpl-card__icon {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: var(--radius-lg);
	background: var(--bg-brand-subtle); margin-bottom: 28px;
}
.dpl-card__icon--accent { background: var(--bg-brand-accent); }
.dpl-card__icon svg { width: 26px; height: 26px; display: block; }
.dpl-card__tag {
	font-family: var(--font-body); font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide);
	color: var(--navy-700); margin-bottom: 10px;
}
.dpl .dpl-card__title {
	font-family: var(--font-brand); font-size: var(--text-md);
	font-weight: var(--font-weight-bold); color: var(--navy-950);
	margin: 0 0 12px; letter-spacing: var(--tracking-snug);
}
.dpl .dpl-card__desc {
	font-size: var(--text-sm); line-height: var(--leading-relaxed);
	color: var(--fg-secondary); margin: 0;
}

/* ============================================================
   3. PROCESS
   ============================================================ */
.dpl-process {
	padding: 104px 0; background: var(--bg-subtle);
	border-top: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-subtle);
}
.dpl-process__head { max-width: 620px; margin: 0 0 72px; }
.dpl-process__head .dpl-section__title { margin-bottom: 16px; }
.dpl .dpl-process__desc {
	font-size: var(--text-base); line-height: var(--leading-relaxed);
	color: var(--fg-secondary); margin: 0;
}
.dpl .dpl-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 40px; }
.dpl-step { display: flex; flex-direction: column; gap: 16px; }
.dpl-step__num { display: flex; align-items: center; gap: 14px; }
.dpl-step__num b {
	font-family: var(--font-mono); font-size: 13px;
	font-weight: var(--font-weight-bold); color: var(--cyan-600);
	letter-spacing: var(--tracking-wider);
}
.dpl-step__num i { flex: 1; height: 1px; background: var(--navy-100); font-style: normal; }
.dpl .dpl-step__title {
	font-family: var(--font-brand); font-size: var(--text-md);
	font-weight: var(--font-weight-bold); color: var(--navy-950);
	margin: 0; letter-spacing: var(--tracking-snug);
}
.dpl .dpl-step__desc {
	font-size: var(--text-sm); line-height: var(--leading-relaxed);
	color: var(--fg-secondary); margin: 0; max-width: 320px;
}

/* ============================================================
   ANIMATION
   ============================================================ */
@keyframes dplPulseScroll { from { transform: translateX(0); } to { transform: translateX(-800px); } }
@keyframes dplBlink       { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes dplLineIn      { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dplRevealUp    { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
	.dpl *, .dpl *:before, .dpl *:after {
		animation-duration: .01ms !important; animation-iteration-count: 1 !important;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* 1열로 접히는 구간 : 부가 문구는 줄바꿈 허용 + 구분선은 전체 폭.
   순서는 본문 -> 부가문구 -> 데모카드 로 유지한다. */
@media (max-width: 960px) {
	.dpl-hero__grid, .dpl-features__head { grid-template-columns: 1fr !important; gap: 44px !important; }
	.dpl-features__desc { justify-self: start; }
	.dpl-features__head { align-items: start; }
	/* 1열 구간에서는 좌측 칸 = 전체 폭이므로 하한/콘텐츠 맞춤을 풀고 전체 폭을 쓴다. */
	.dpl .dpl-hero__facts { flex-wrap: wrap; width: auto; min-width: 0; }
	.dpl .dpl-hero__copy  { order: 1; }
	.dpl .dpl-hero__facts { order: 2; }
	.dpl .dpl-demo        { order: 3; }
}
/* ============================================================
   4. CTA 배너 (트라이얼 마감 안내)
   ============================================================ */
.dpl-cta { padding: 96px 0; background: var(--bg-base); }
.dpl-cta__box {
	position: relative; overflow: hidden;
	border-radius: var(--radius-2xl); background: var(--navy-800);
	box-shadow: var(--shadow-lg);
}
.dpl-cta__wavewrap {
	position: absolute; inset: 0; overflow: hidden; opacity: .14;
	pointer-events: none; display: flex; align-items: center;
}
.dpl-cta__wave {
	display: block; width: 1600px; height: 120px;
	animation: dplPulseScroll 14s linear infinite;
}
.dpl-cta__inner {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	gap: 48px; flex-wrap: wrap; padding: 56px;
}
.dpl-cta__copy { min-width: 0; }
.dpl .dpl-cta__title {
	font-family: var(--font-brand); font-size: clamp(24px, 2.6vw, 32px);
	font-weight: var(--font-weight-bold); line-height: 1.25;
	letter-spacing: -0.025em; color: #FFFFFF; margin: 0 0 12px;
}
.dpl .dpl-cta__desc { font-size: var(--text-sm); color: var(--navy-100); margin: 0; }
.dpl-cta__contact {
	font-family: var(--font-body); font-size: var(--text-xs);
	font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-wide);
	color: var(--navy-100); margin-top: 20px;
}
.dpl .dpl-btn--onnavy {
	background: #FFFFFF; color: var(--navy-800); padding: 16px 32px;
}
.dpl .dpl-btn--onnavy:hover, .dpl .dpl-btn--onnavy:focus {
	background: var(--cyan-600); color: #fff; transform: translateY(-2px);
}

/* ============================================================
   5. 언어별 개별 조정 구역
   래퍼에 .dpl--ko / .dpl--en 이 붙는다.
     한글판 : <div class="dpl dpl--ko">  (MainDoctorpencil.jsp)
     영문판 : <div class="dpl dpl--en">  (MainDoctorpencil_en.jsp)
   공통 규칙은 위쪽 .dpl 영역에 두고, 한쪽만 다르게 갈 때 여기에 쓴다.
   예) .dpl--en .dpl-hero__title { font-size: clamp(34px, 4vw, 52px); }
   ============================================================ */

/* ---------- 영문 전용 ---------- */
/* 영문은 한글보다 문장이 길어 같은 칸에서 줄 수가 늘어난다.
   keep-all 은 한글용 규칙이라 영문에서는 일반 줄바꿈이 자연스럽다. */
.dpl--en, .dpl--en *:not(svg):not(svg *) { word-break: normal; }

/* 여기에 영문 전용 조정을 추가하세요. */


/* ---------- 국문 전용 ---------- */
/* 여기에 한글 전용 조정을 추가하세요. */


/* nowrap 을 건 짧은 라벨들은 좁은 화면에서 화면을 밀어낼 수 있으므로 풀어준다. */
@media (max-width: 1040px) {
	.dpl .dpl-hero__lead, .dpl .dpl-features__desc {line-height:1.4;}
}

@media (max-width: 960px) {
	.dpl .dpl-features__desc {justify-self:auto;}
}

@media (max-width: 560px) {
	.dpl .dpl-eyebrow__text,
	.dpl .dpl-hero__facts li,
	.dpl .dpl-demo__label,
	.dpl .dpl-demo__rec,
	.dpl .dpl-demo__out-title,
	.dpl .dpl-demo__flow span,
	.dpl .dpl-cta__contact { white-space: normal; }
	.dpl .dpl-btn { white-space: normal; }
}

@media (max-width: 768px) {
	.dpl__container { padding: 0 20px; }
	.dpl-hero { padding: 64px 0 72px; }
	.dpl-features { padding: 72px 0; }
	.dpl-process { padding: 72px 0; }
	.dpl-cta { padding: 64px 0; }
	.dpl-cta__inner { padding: 36px 28px; gap: 28px; }
	.dpl-hero__actions .dpl-btn { flex: 1 1 100%; }
	.dpl-hero__facts li { padding: 6px 14px; }
	.dpl-hero__facts li:first-child { padding-left: 0; }
	.dpl .dpl-btn--onnavy { width: 100%; }
}

@media (max-width: 720px) {
	.lang_en .dpl .dpl-hero__facts li {padding:0 8px;}
}

@media (max-width: 650px) {
	.dpl .dpl-hero__lead {font-size:var(--text-md);}
	.lang_en .dpl .dpl-hero__facts {flex-direction:column; gap:5px; padding:20px 20px 0;}
	.lang_en .dpl .dpl-hero__facts li:first-child {padding-left:8px;}
	.lang_en .dpl .dpl-hero__facts li {padding:0; border-left:0; position:relative; padding-left:8px; font-size:13px;}
	.lang_en .dpl .dpl-hero__facts li:before {content:""; display:block; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--navy-700); left:0; top:9px;}
	
	
}

@media (max-width: 480px) {
	.dpl .dpl-hero__facts li {padding:0 10px;}
}

@media (max-width: 420px) {
	.dpl .dpl-hero__facts {flex-direction:column; gap:5px; padding:20px 20px 0;}
	.dpl .dpl-hero__facts li:first-child {padding-left:8px;}
	.dpl .dpl-hero__facts li {padding:0; border-left:0; position:relative; padding-left:8px; font-size:14px;}
	.dpl .dpl-hero__facts li:before {content:""; display:block; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--navy-700); left:0; top:50%; transform:translateY(-50%);}
}