/* =========================================================
   ChatGPT 시작하기 (hon) — v1.0
   컨셉: 대화형 채팅 인터페이스 (말풍선 + 타이핑 인디케이터)
   - 히어로 = 채팅 윈도우 (말풍선 대화 / online 상태 / 타이핑 점)
   - 본문·카드·스텝·FAQ 는 부드러운 라이트 톤
   - OpenAI 민트 그린(#10A37F) 액센트 + 라운드한 말풍선 미학
   ========================================================= */
.pts-preset.chatgpt-hon-landing{
	--pts-bg:        #FFFFFF;
	--pts-bg-soft:   #F4F7F6;
	--pts-line:      #E6ECEA;
	--pts-card:      #FFFFFF;
	--pts-primary:   #10A37F;   /* OpenAI 민트 그린 */
	--pts-primary-d: #0C8466;
	--pts-primary-l: #1FC79B;
	--pts-accent:    #10A37F;
	--pts-accent-d:  #0C8466;
	--pts-ink:       #11221C;
	--pts-ink-soft:  #4E635B;
	--pts-user:      #ECEFFE;   /* 사용자 말풍선 (연보라) */
	--pts-user-ink:  #2E3A8C;
	--pts-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
		"Pretendard", "Noto Sans KR", "맑은 고딕", sans-serif;
}

/* 본문 베이스 */
.pts-preset.chatgpt-hon-landing{ color: var(--pts-ink); }
.pts-preset.chatgpt-hon-landing h2{
	color: var(--pts-ink);
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.pts-preset.chatgpt-hon-landing .cg-h2-ico{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	background: #E7F6F1;
	border: 1px solid #C9EBE0;
	border-radius: 10px;
	font-size: 17px;
	flex: 0 0 auto;
}
.pts-preset.chatgpt-hon-landing .cg-lead-p{
	font-size: 16px;
	color: var(--pts-ink-soft);
	margin-bottom: 18px;
	line-height: 1.85;
}
.pts-preset.chatgpt-hon-landing .entry-content a{ color: var(--pts-primary-d); }
.pts-preset.chatgpt-hon-landing code{
	background: #E7F6F1;
	color: var(--pts-primary-d);
	padding: 1px 6px;
	border-radius: 5px;
	font-size: 0.92em;
}

/* ============ HERO — 채팅 윈도우 ============ */
.pts-preset.chatgpt-hon-landing .pts-hero{
	background: linear-gradient(165deg, #F4F7F6 0%, #E9F4F0 100%);
	border: 1px solid var(--pts-line);
	border-radius: 22px;
	padding: 26px;
	overflow: hidden;
}
.pts-preset.chatgpt-hon-landing .pts-hero::before,
.pts-preset.chatgpt-hon-landing .pts-hero::after{ content: none; }

.pts-preset.chatgpt-hon-landing .cg-chat{
	background: #FFFFFF;
	border: 1px solid var(--pts-line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(16,163,127,0.10);
}

/* 채팅 상단 바 */
.pts-preset.chatgpt-hon-landing .cg-chat__bar{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: #FBFDFC;
	border-bottom: 1px solid var(--pts-line);
}
.pts-preset.chatgpt-hon-landing .cg-chat__logo{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	background: var(--pts-primary);
	color: #fff;
	border-radius: 50%;
}
.pts-preset.chatgpt-hon-landing .cg-chat__title{
	font-weight: 800;
	font-size: 15px;
	color: var(--pts-ink);
}
.pts-preset.chatgpt-hon-landing .cg-chat__status{
	margin-left: auto;
	font-size: 12px;
	color: var(--pts-primary-d);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pts-preset.chatgpt-hon-landing .cg-chat__status i{
	width: 8px; height: 8px;
	background: var(--pts-primary-l);
	border-radius: 50%;
	box-shadow: 0 0 0 3px rgba(31,199,155,0.2);
	animation: cg-pulse 1.6s ease-in-out infinite;
}
@keyframes cg-pulse{ 50%{ box-shadow: 0 0 0 6px rgba(31,199,155,0); } }

/* 채팅 본문 */
.pts-preset.chatgpt-hon-landing .cg-chat__body{
	padding: 24px 24px 18px;
	background:
		radial-gradient(circle at 18px 18px, rgba(16,163,127,0.04) 1.5px, transparent 1.6px);
	background-size: 22px 22px;
}

/* eyebrow */
.pts-preset.chatgpt-hon-landing .pts-hero__eyebrow{
	display: inline-block;
	background: #E7F6F1;
	color: var(--pts-primary-d);
	border: 1px solid #C9EBE0;
	border-radius: 999px;
	padding: 5px 13px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 18px;
}

/* 말풍선 공통 */
.pts-preset.chatgpt-hon-landing .cg-bubble{
	max-width: 88%;
	padding: 16px 20px;
	margin-bottom: 14px;
	border-radius: 20px;
	position: relative;
	line-height: 1.7;
}
.pts-preset.chatgpt-hon-landing .cg-bubble p{ margin: 0; }

/* 사용자 말풍선 (우측, 연보라) */
.pts-preset.chatgpt-hon-landing .cg-bubble--user{
	margin-left: auto;
	background: var(--pts-user);
	color: var(--pts-user-ink);
	border-bottom-right-radius: 6px;
	font-weight: 600;
}

/* AI 말풍선 (좌측, 민트 라인) */
.pts-preset.chatgpt-hon-landing .cg-bubble--ai{
	margin-right: auto;
	background: #FFFFFF;
	border: 1px solid var(--pts-line);
	border-left: 3px solid var(--pts-primary);
	border-bottom-left-radius: 6px;
	box-shadow: 0 4px 16px rgba(16,163,127,0.06);
	max-width: 100%;
}
.pts-preset.chatgpt-hon-landing .pts-hero__title{
	color: var(--pts-ink);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.28;
	letter-spacing: -0.025em;
	margin: 0 0 12px;
}
.pts-preset.chatgpt-hon-landing .pts-hero__lead{
	color: var(--pts-ink-soft);
	font-size: 16px;
	line-height: 1.85;
	margin: 0 0 18px;
	max-width: 620px;
	opacity: 1;
}

/* CTA */
.pts-preset.chatgpt-hon-landing .cg-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.pts-preset.chatgpt-hon-landing .cg-actions .pts-btn--primary{
	background: var(--pts-primary);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(16,163,127,0.30);
}
.pts-preset.chatgpt-hon-landing .cg-actions .pts-btn--primary:hover{
	background: var(--pts-primary-d);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(16,163,127,0.40);
}
.pts-preset.chatgpt-hon-landing .cg-actions .pts-btn--ghost{
	background: #fff;
	color: var(--pts-ink);
	border: 1px solid var(--pts-line);
}
.pts-preset.chatgpt-hon-landing .cg-actions .pts-btn--ghost:hover{
	border-color: var(--pts-primary);
	color: var(--pts-primary-d);
}

/* 타이핑 인디케이터 */
.pts-preset.chatgpt-hon-landing .cg-typing{
	display: inline-flex;
	gap: 5px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pts-line);
	border-radius: 20px;
	border-bottom-left-radius: 6px;
	padding: 14px 18px;
	margin-top: 2px;
}
.pts-preset.chatgpt-hon-landing .cg-typing span{
	width: 8px; height: 8px;
	background: var(--pts-primary-l);
	border-radius: 50%;
	display: inline-block;
	animation: cg-bounce 1.3s ease-in-out infinite;
}
.pts-preset.chatgpt-hon-landing .cg-typing span:nth-child(2){ animation-delay: 0.18s; }
.pts-preset.chatgpt-hon-landing .cg-typing span:nth-child(3){ animation-delay: 0.36s; }
@keyframes cg-bounce{
	0%, 60%, 100%{ transform: translateY(0); opacity: 0.45; }
	30%{ transform: translateY(-5px); opacity: 1; }
}

/* ============ 소개 카드 ============ */
.pts-preset.chatgpt-hon-landing .cg-intro{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin: 24px 0 8px;
}
.pts-preset.chatgpt-hon-landing .cg-intro-item{
	background: var(--pts-card);
	border: 1px solid var(--pts-line);
	border-radius: 16px;
	padding: 24px 22px;
	box-shadow: 0 1px 3px rgba(16,163,127,0.04);
	transition: transform .18s ease, box-shadow .18s ease;
}
.pts-preset.chatgpt-hon-landing .cg-intro-item:hover{
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(16,163,127,0.10);
}
.pts-preset.chatgpt-hon-landing .cg-intro-ico{
	width: 46px; height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #E7F6F1;
	border-radius: 14px;
	font-size: 22px;
	margin-bottom: 14px;
}
.pts-preset.chatgpt-hon-landing .cg-intro-item h4{
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--pts-ink);
}
.pts-preset.chatgpt-hon-landing .cg-intro-item p{
	margin: 0;
	font-size: 14px;
	color: var(--pts-ink-soft);
	line-height: 1.7;
}

/* ============ 접속 카드 ============ */
.pts-preset.chatgpt-hon-landing .pts-card{
	background: var(--pts-card);
	border: 1px solid var(--pts-line);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(16,163,127,0.04);
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pts-preset.chatgpt-hon-landing .pts-card:hover{
	border-color: var(--pts-primary);
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(16,163,127,0.12);
}
.pts-preset.chatgpt-hon-landing .pts-card__os{
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.10em;
	color: var(--pts-primary-d);
	background: #E7F6F1;
	border: 1px solid #C9EBE0;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.pts-preset.chatgpt-hon-landing .pts-card__name{
	font-size: 17px;
	font-weight: 800;
	color: var(--pts-ink);
	margin: 0 0 6px;
}
.pts-preset.chatgpt-hon-landing .pts-card__meta{
	font-size: 13px;
	color: var(--pts-ink-soft);
	margin-bottom: 18px;
}
.pts-preset.chatgpt-hon-landing .pts-card .pts-btn--primary{
	background: var(--pts-primary);
	color: #fff;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(16,163,127,0.28);
}
.pts-preset.chatgpt-hon-landing .pts-card .pts-btn--primary:hover{
	background: var(--pts-primary-d);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(16,163,127,0.40);
}

/* ============ 알림 박스 ============ */
.pts-preset.chatgpt-hon-landing .pts-notice{
	background: #E7F6F1;
	border: 1px solid #C9EBE0;
	border-left: 4px solid var(--pts-primary);
	color: #0B5443;
	border-radius: 12px;
	font-size: 14px;
}
.pts-preset.chatgpt-hon-landing .pts-notice strong{ color: var(--pts-primary-d); }

/* ============ STEPS ============ */
.pts-preset.chatgpt-hon-landing .pts-step{
	background: var(--pts-card);
	border: 1px solid var(--pts-line);
	border-radius: 16px;
	padding: 22px 22px 22px 64px;
	box-shadow: 0 1px 3px rgba(16,163,127,0.04);
}
.pts-preset.chatgpt-hon-landing .pts-step::before{
	background: var(--pts-primary);
	color: #fff;
	box-shadow: 0 4px 12px rgba(16,163,127,0.30);
	font-weight: 800;
}
.pts-preset.chatgpt-hon-landing .cg-step-tag{
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.10em;
	color: var(--pts-primary-d);
	margin-bottom: 6px;
}
.pts-preset.chatgpt-hon-landing .pts-step h4{ color: var(--pts-ink); margin: 0 0 8px; }
.pts-preset.chatgpt-hon-landing .pts-step p{ color: var(--pts-ink-soft); }

/* ============ FAQ ============ */
.pts-preset.chatgpt-hon-landing .pts-faq{
	background: transparent;
	border: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.pts-preset.chatgpt-hon-landing .pts-faq details{
	background: var(--pts-card);
	border: 1px solid var(--pts-line);
	border-radius: 14px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16,163,127,0.04);
}
.pts-preset.chatgpt-hon-landing .pts-faq summary{
	color: var(--pts-ink);
	font-weight: 700;
	padding: 16px 20px;
}
.pts-preset.chatgpt-hon-landing .pts-faq summary::after{
	content: "+";
	color: var(--pts-primary);
	font-size: 22px;
	transition: transform .15s ease;
}
.pts-preset.chatgpt-hon-landing .pts-faq details[open] summary::after{ transform: rotate(45deg); }
.pts-preset.chatgpt-hon-landing .pts-faq .faq-body{
	color: var(--pts-ink-soft);
	padding: 0 20px 18px;
	line-height: 1.85;
	border-top: 1px solid var(--pts-line);
	padding-top: 16px;
}

/* ============ 반응형 ============ */
@media (max-width: 768px){
	.pts-preset.chatgpt-hon-landing .pts-hero{ padding: 16px; border-radius: 18px; }
	.pts-preset.chatgpt-hon-landing .cg-chat__body{ padding: 20px 18px 16px; }
	.pts-preset.chatgpt-hon-landing .pts-hero__title{ font-size: 26px; }
	.pts-preset.chatgpt-hon-landing .cg-bubble{ max-width: 95%; }
}
@media (max-width: 480px){
	.pts-preset.chatgpt-hon-landing .pts-hero__title{ font-size: 22px; }
	.pts-preset.chatgpt-hon-landing .cg-chat__body{ padding: 16px 14px 14px; }
	.pts-preset.chatgpt-hon-landing .cg-bubble{ padding: 14px 16px; max-width: 100%; }
	.pts-preset.chatgpt-hon-landing .cg-intro{ grid-template-columns: 1fr; gap: 12px; }
	.pts-preset.chatgpt-hon-landing h2{ font-size: 20px; }
}