@charset "UTF-8";

/* ==========================================
   003 / electronic-album.css
   전자앨범 페이지
   ========================================== */

.ea-container {
	margin: 0 auto;
	box-sizing: border-box;
}

/* ============================
   Section 1 — Hero
   canvas: 45~340, height 295px
   ============================ */
.ea-section1 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.ea-hero-row {
	display: flex;
	align-items: center;
	padding: 46px 30px 40px;
	gap: 30px;
	background-image: url('../../images/features/electronic-album/boxBG_24710.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
}

.ea-hero-img-group {
	position: relative;
	width: 300px;
	height: 200px;
	flex-shrink: 0;
}

/* Hero album image: inside img-group */
.ea-hero-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 279px;
	display: block;
}

/* CCS brand text: inside img-group */
.ea-ccs-label {
	position: absolute;
	top: 108px;
	left: 1px;
	font-size: 40px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

/* Hero text group: flex layout */
.ea-hero-text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
}

/* Hero title "전자앨범": flexible width */
.ea-hero-title {
	font-size: clamp(32px, 5vw, 50px);
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.2;
	color: #005728;
	margin: 0;
}

/* Hero desc1: flexible width */
.ea-hero-desc1 {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.4;
	color: #333333;
	margin: 19px 0 0 0;
}

/* Hero desc2: flexible width */
.ea-hero-desc2 {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -0.5px;
	line-height: 1.4;
	color: #333333;
	margin: 4px 0 0 0;
}

/* ============================
   Section 2 — Features + CTA
   canvas: 340~1900, height 1560px
   ============================ */
.ea-section2 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 50px 0 auto;
	padding: 0 0 40px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Dot + heading wrapper */
.ea-feat-title {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

/* Dot icon */
.ea-feat-dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #555662;
	flex-shrink: 0;
	margin-right: 7px;
}

/* Section heading "전자앨범시스템 주요기능!" */
.ea-feat-heading {
	position: relative;
	max-width: 100%;
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 500;
	letter-spacing: -0.5px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
}

/* Gray feature box: ct=385→top:45, cl=327→left:0, 1039×1413, bg:#F6F6F6 */
.ea-feat-box {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: 1413px;
	background-color: #F6F6F6;
	overflow: hidden;
}

/* Screenshots 605×368 */
.ea-ss {
	position: absolute;
	width: 605px;
	height: 368px;
}

/* ct=416→top:76, cl=361→left:31 */
.ea-ss1 {
	top: 76px;
	left: 31px;
}

/* ct=694→top:354, cl=717→left:387 */
.ea-ss2 {
	top: 354px;
	left: 387px;
}

/* ct=1047→top:707, cl=359→left:29 */
.ea-ss3 {
	top: 707px;
	left: 29px;
}

/* ct=1383→top:1043, cl=723→left:393 */
.ea-ss4 {
	top: 1043px;
	left: 393px;
}

/* Circle overlays 188×155 — Grid stack for natural centering */
.ea-bubble-group {
	position: absolute;
	width: 188px;
	height: 155px;
	display: grid;
	place-items: center;
	/* Natural centering for all children */
}

.ea-bubble-group>* {
	grid-area: 1 / 1;
	/* Stack children in the same grid cell */
}

.ea-circle {
	display: block;
	width: 100%;
	height: 100%;
}

/* ct=478→top:138, cl=939→left:609 */
.ea-bubble1 {
	top: 138px;
	left: 609px;
}

/* ct=820→top:480, cl=561→left:231 */
.ea-bubble2 {
	top: 480px;
	left: 231px;
}

/* ct=1159→top:819, cl=943→left:613 */
.ea-bubble3 {
	top: 819px;
	left: 613px;
}

/* ct=1540→top:1200, cl=569→left:239 */
.ea-bubble4 {
	top: 1200px;
	left: 239px;
}

/* Circle labels: naturally centered via parent grid */
.ea-label {
	position: relative;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.3;
	color: #ffffff;
	text-align: center;
	margin: 0;
	box-sizing: border-box;
}

/* (Individual paddings removed as per request) */

/* (Section 2 absolute children preserved for Desktop) */

/* CTA button: relative, margin auto */
.ea-cta-btn {
	position: relative;
	top: auto;
	left: auto;
	width: 353px;
	height: 60px;
	background-color: #2E90A8;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	margin: 20px auto;
}

/* CTA button text "전자앨범 샘플화면 보기": ct=1849→top:1509→inner, 20px/600/white */
.ea-cta-btn span {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.5px;
	color: #ffffff;
}

/* ==========================================
   Responsive — 800px
   ========================================== */
/* ==========================================
   Responsive — 1100px (Hide deco, keep captures)
   ========================================== */
@media (max-width: 1100px) {
	.ea-hero-row {
		padding: 30px 20px;
	}

	.ea-hero-img-group {
		width: 200px;
		height: 186px;
	}

	.ea-hero-img {
		width: 200px;
		height: 186px;
	}

	.ea-ccs-label,
	.ea-bubble-group {
		display: none;
	}

	.ea-ss {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		max-width: 605px;
		height: auto;
		display: block;
		margin: 20px auto;
	}

	.ea-feat-box {
		display: none;
	}
}

/* ==========================================
   Responsive — 800px (Scaling)
   ========================================== */
@media (max-width: 800px) {
	.ea-hero-row {
		display: block;
		background-image: none;
		padding: 20px 20px 30px;
	}

	.ea-hero-img-group {
		display: none;
	}

	.ea-hero-text-group {
		width: 100%;
	}

	.ea-hero-title {
		font-size: 32px;
		word-break: keep-all;
		line-height: 1.3;
	}

	.ea-hero-desc1,
	.ea-hero-desc2 {
		font-size: 16px;
		word-break: keep-all;
		margin-top: 10px;
	}

	.ea-feat-heading {
		font-size: 20px;
		height: auto;
		word-break: keep-all;
	}

	.ea-section2 {
		padding: 30px 0;
		margin-top: 0;
	}

	.ea-feat-title {
		margin-bottom: 10px;
	}

	.ea-ss {
		max-width: 100%;
	}

	.ea-cta-btn {
		width: 100%;
		margin-top: 20px;
	}

	.ea-cta-btn span {
		font-size: 18px;
	}
}