@import url('fonts.css');

html {
	font-family: 'BookkGothic';
	font-weight: 700;
	font-size: 16px;
	line-height: 1.5;
	word-break: keep-all;
}

body,h1,h2,h3,h4,p,ul {
	margin: 0px;
	padding: 0px;
}

section {
	background: #fff;
	padding: 150px 0px 100px;
	background-color: rgb(255, 92, 33);
}

h2 {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 2;
}

h3 {
	font-family: 'BookkMyungjo';
	font-size: 1.8rem;
	font-weight: 700;
}

h4 {
	font-family: 'BookkMyungjo';
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	margin: 30px 0px;
}

.wrap {
	width: 1100px;
	margin: auto;
	position: relative;
}

.bg-bottom {
	background-color: rgb(255, 92, 33);
	background-image: url(https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExaDBhN2VyOGFlYnh5bm9uN3AyN2FuZXExN2IyZm5handqYXdlNHdncCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3o6vXRxrhj7Ov94Gbu/giphy.gif);
	background-blend-mode: multiply;
	background-attachment: fixed;
	background-size: 388px auto;
	color: white;
}

.center-spacing {
	text-align: center;
}

.interactive-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 왼쪽 문장 목록 */
.sentence-list {
    list-style: none;
    padding: 0;
}

.sentence-item {
    font-size: 1.5rem;
    padding: 15px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
}

.sentence-item:hover {
    background: rgba(127, 255, 0, 0.2);
}

.sentence-item.active {
    color: rgb(127, 255, 0);
    font-weight: 700;
}

/* 오른쪽 영역 */
.person-area {
    position: relative;
    width: 400px;
    height: 400px;
}

/* SVG 이미지 */
.person-svg {
    position: absolute;
    top: 40%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: auto;
    z-index: 2;
}

/* 원형 텍스트 영역 */
.text-circle {
    position: absolute;
    top: 0%;
    left: 77%;
    transform: translate(-50%, -50%);
    
    width: 350px;
    height: 350px;
    border-radius: 50%;
    
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
    z-index: 1;
}

.display-text {
    font-size: 1.2rem;
    line-height: 1.6;
    color: blue;
}

.marquee-container-blue {
	width: 100%;
	overflow: hidden;
	background-color: rgb(255, 92, 33);
	color: chartreuse;
	padding: 30px 0;
	white-space: nowrap;
}

.marquee-content-blue {
	display: flex;
	gap: 100px;
	width: max-content;
	animation: flow-right 15s linear infinite; 
}

@keyframes flow-right {
	0% {transform: translateX(0%);}
	100% {transform: translateX(-50%);}
}

.bg-text h2 {
	padding: 0.2em 0.4em;
}

.bg-text h2:hover {
	background-color: rgba(255, 92, 33, 0.5);
	color: rgb(127, 255, 0);
}

.back-btn {
	position: fixed;
	right: 110px;
	bottom: 80px;
	font-size: 4rem;
	text-decoration: none;
	color: white;
	z-index: 9999;
	transition: transform 0.3s;
}

.back-btn:hover {
	transform: translateX(-8px);
}