/************* Custom CSS for all.and.archive ************************
    이 파일은 원본 style.css 를 건드리지 않고
    신규 컨텐츠 영역(작가 소개 / 판매처 / 키워드 등)에 필요한
    스타일만 덧붙이기 위한 파일입니다.
****************************************/


/*============ Base brand color tweaks ============*/
:root {
    --brand-red: #c8102e;       /* 책 표지 적박 컬러에서 추출한 레드 */
    --brand-red-dark: #8e0a20;
    --text-soft: #748182;
    --text-strong: #1a1a1a;
    --bg-cream: #fdfaf0;        /* 페이지 미색 배경 */
}

/*============ 배경 미색 적용 ============*/
body,
.wave-primary,
.wave-secondary,
#portfolio,
#contact {
    background-color: var(--bg-cream);
}

.wave-primary .wave,
.wave-secondary .wave {
    fill: var(--bg-cream);
}

/*============ 오프라인 판매처 제목 좌측 정렬 ============*/
#contact .message-box h2 {
    text-align: left !important;
}

/*============ Main button - 책 주문하기 버튼을 브랜드 레드로 ============*/
.main-button {
    transition: all 0.25s ease;
}


/*============ About 섹션: 키워드 태그 + 책 주문 버튼 영역 ============*/
.keyword-tags {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
}

/*============ About 좌측 영역: 책 표지 + 발행정보 ============*/
#about .about-info-container .about-info {
    text-align: left;
    padding-left: 100px;
    padding-right: 30px;
}

#about .about-info-container .about-info .info-item img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 0;
    border: none;
    margin-bottom: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.keyword-tags p {
    color: var(--brand-red);
    font-weight: 500;
    font-size: 13px;
    line-height: 26px;
    margin-bottom: 0;
    word-break: keep-all;
}

.buy-button-wrap {
    margin-top: 75px;
    text-align: left;
}

.buy-button-wrap .main-button {
    background: var(--brand-red);
    border: 1px solid var(--brand-red);
    color: #fff;
    padding: 12px 36px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.buy-button-wrap .main-button:hover {
    background: transparent;
    border-color: var(--brand-red);
    color: var(--brand-red);
}

/* About intro - 인용구 느낌 살리기 */
#about .about-intro p em {
    font-style: italic;
    font-size: 17px;
    color: var(--text-strong);
    font-weight: 500;
    line-height: 32px;
}

#about .about-intro p {
    word-break: keep-all;
}

/* About skills(=디자인 컨셉) 영역 - 텍스트가 길어서 진행바 자리에 본문이 들어감 */
#about .about-info-container .about-skills {
    padding-left: 30px;
}

#about .about-info-container .about-skills h3 {
    margin-bottom: 18px;
    font-size: 22px;
}

#about .about-info-container .about-skills p {
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 16px;
    word-break: keep-all;
}

#about .about-info-container .about-skills p em {
    color: var(--brand-red);
    font-style: italic;
    font-weight: 600;
    font-size: 15px;
}


/*============ 작가 소개 섹션 (원본 #services 자리) ============*/
#services .author-section {
    margin-top: 20px;
    align-items: center;
}

#services .author-photo {
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

#services .author-photo img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

#services .author-photo:hover img {
    transform: scale(1.03);
}

#services .author-bio {
    padding-left: 20px;
}

#services .author-bio h3 {
    font-size: 28px;
    margin-bottom: 24px;
    color: var(--text-strong);
    border-bottom: 2px solid var(--brand-red);
    padding-bottom: 14px;
    display: inline-block;
}

#services .author-bio h3 small {
    font-size: 14px;
    color: var(--text-soft);
    font-weight: 400;
    margin-left: 10px;
    letter-spacing: 1px;
}

#services .author-bio p {
    font-size: 14px;
    line-height: 28px;
    margin-bottom: 16px;
    word-break: keep-all;
}


/*============ Contact 섹션: 판매처 리스트 ============*/
#contact .store-list {
    margin-top: 30px;
}

#contact .store-item {
    padding: 18px 0;
    border-bottom: 1px solid #e5e5e5;
}

#contact .store-item:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

#contact .store-item h4 {
    font-size: 18px;
    margin-bottom: 6px;
    font-weight: 600;
}

#contact .store-item h4 a {
    color: var(--text-strong);
    transition: color 0.2s;
}

#contact .store-item h4 a:hover {
    color: var(--brand-red);
}

#contact .store-item p {
    font-size: 14px;
    color: var(--text-soft);
    margin-bottom: 0;
}

#contact .store-cta {
    margin-top: 30px;
    text-align: right;
}

#contact .store-cta .main-button {
    border: 1px solid var(--brand-red);
    color: var(--brand-red);
    padding: 12px 36px;
    font-weight: 600;
}

#contact .store-cta .main-button:hover {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* Contact info 링크 색상 */
#contact .contact-info a {
    color: var(--text-soft);
    transition: color 0.2s;
    border-bottom: 1px dotted transparent;
}

#contact .contact-info a:hover {
    color: var(--brand-red);
    border-bottom-color: var(--brand-red);
}


/*============ Hero 배너: 작가 이미지 어둡기 보정 ============*/
#banner:before {
    background-color: rgba(0, 0, 0, 0.55);
}

/*============ Hero 배너: 텍스트 위치 + 투명도 ============*/
#banner .banner-text {
    transform: translateY(50px);
}

#banner .banner-text h1 {
    opacity: 0.3;
    font-family: "Libre Baskerville", "Baskerville", "Baskerville Old Face", "Hoefler Text", "Garamond", "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 1px;
}

#banner .banner-text #typed {
    opacity: 0.8;
}


/*============ Footer SNS 아이콘 정렬 ============*/
.wave-footer .social-icons li a {
    transition: color 0.25s;
}

.wave-footer .social-icons li a:hover {
    color: var(--brand-red);
}


/*============ 한글 가독성 개선: Noto Serif KR 적용 ============*/
body,
p {
    font-family: "Poppins", "Noto Serif KR", "Apple SD Gothic Neo", sans-serif;
}

h2.text-uppercase {
    letter-spacing: 2px;
}

/* 한글에서는 text-uppercase 효과가 없으므로 spacing 만 적용 */


/*============ 모바일 대응 ============*/
@media (max-width: 991px) {
    #about .about-info-container .about-info {
        padding-left: 30px;
    }

    #about .about-info-container .about-skills {
        padding-left: 15px;
        padding-top: 30px;
    }

    #services .author-bio {
        padding-left: 0;
        padding-top: 30px;
    }

    #contact .store-cta {
        text-align: center;
    }
}

@media (max-width: 575px) {
    #about .about-intro p em {
        font-size: 15px;
        line-height: 28px;
    }

    .keyword-tags p {
        font-size: 12px;
    }

    #services .author-bio h3 {
        font-size: 22px;
    }
}