:root {
    --paper:#faf8f4;
    --ink:#242424;
    --accent:#a58b70;
    --line:#ded9d1;
    --muted:#706c66
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
    line-height:1.75
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit
}

.wrap {
    max-width:1180px;
    margin:auto;
    padding:0 30px
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(250,248,244,.97);
    border-bottom:1px solid var(--line)
}

.nav {
    min-height:84px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}

.brand {
    font-family:Georgia,serif;
    font-size:25px;
    letter-spacing:.16em;
    font-weight:bold;
    line-height:1.15
}

.brand small {
    display:block;
    font:10px Arial,sans-serif;
    letter-spacing:.3em;
    margin-top:7px
}

.nav-links {
    display:flex;
    gap:26px;
    font-size:13px
}

.nav-links a:hover,.footer-links a:hover {
    color:var(--accent)
}

.menu-toggle {
    display:none;
    background:none;
    border:1px solid var(--line);
    padding:8px 13px;
    cursor:pointer
}

.hero {
    padding:125px 0 145px;
    border-bottom:1px solid var(--line)
}

.eyebrow {
    font-size:12px;
    letter-spacing:.25em;
    color:var(--accent);
    font-weight:bold
}

.hero h1 {
    font-family:Georgia,'Noto Serif KR',serif;
    font-size:clamp(42px,7vw,86px);
    font-weight:normal;
    letter-spacing:-.055em;
    line-height:1.22;
    margin:25px 0 35px
}

.hero p {
    font-size:17px;
    max-width:540px;
    color:var(--muted);
    word-break:keep-all
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:38px
}

.btn {
    display:inline-block;
    border:1px solid var(--ink);
    padding:12px 24px;
    font-size:13px;
    transition:.2s
}

.btn.dark {
    background:var(--ink);
    color:white
}

.btn:hover {
    background:var(--accent);
    border-color:var(--accent);
    color:white
}

section.content {
    padding:100px 0;
    border-bottom:1px solid var(--line)
}

.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    margin-bottom:42px
}

.section-heading h2 {
    font:normal clamp(30px,4vw,48px) Georgia,'Malgun Gothic',serif;
    margin:12px 0 0;
    letter-spacing:-.04em
}

.section-heading p {
    max-width:480px;
    color:var(--muted);
    font-size:14px;
    margin:0
}

.about-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px
}

.about-grid p {
    font-size:17px;
    word-break:keep-all
}

.about-grid .muted {
    color:var(--muted);
    font-size:15px
}

.books {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.book-placeholder {
    aspect-ratio:3/4;
    background:#e9e3da;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    border:1px solid #d8d0c4;
    text-align:center;
    padding:20px
}

.book-placeholder:nth-child(2) {
    background:#dedbd4
}

.book-placeholder:nth-child(3) {
    background:#e8e5df
}

.book-placeholder span {
    font:20px Georgia,serif;
    letter-spacing:.15em
}

.book-placeholder small {
    margin-top:15px;
    font-size:11px;
    letter-spacing:.2em;
    color:#746c63
}

.book-label {
    font-size:13px;
    margin-top:15px
}

.service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}

.service {
    border:1px solid var(--line);
    padding:30px;
    min-height:210px
}

.service .number {
    font:13px Georgia,serif;
    color:var(--accent)
}

.service h3 {
    font-size:19px;
    margin:25px 0 10px
}

.service p {
    color:var(--muted);
    font-size:13px;
    margin:0
}

.process {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px
}

.step {
    border-top:1px solid var(--ink);
    padding-top:15px
}

.step b {
    font:23px Georgia,serif;
    color:var(--accent)
}

.step h3 {
    font-size:15px
}

.step p {
    font-size:12px;
    color:var(--muted)
}

.cta {
    background:#eae4dc;
    padding:65px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px
}

.cta h2 {
    font:normal 37px Georgia,'Malgun Gothic',serif;
    margin:12px 0
}

.cta p {
    color:var(--muted);
    font-size:14px
}

.site-footer {
    padding:45px 0 65px
}

.footer-inner {
    display:flex;
    justify-content:space-between;
    gap:30px
}

.footer-inner p {
    font-size:12px;
    color:var(--muted)
}

.footer-links {
    display:flex;
    gap:20px;
    font-size:12px;
    flex-wrap:wrap
}

@media(max-width:850px) {
    .nav-links {
        gap:12px;
        font-size:12px
    }
    .about-grid {
        gap:25px
    }
    .service-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .process {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width:640px) {
    .wrap {
        padding:0 20px
    }
    .nav {
        min-height:70px
    }
    .brand {
        font-size:20px
    }
    .menu-toggle {
        display:block
    }
    .nav-links {
        display:none;
        position:absolute;
        top:70px;
        left:0;
        right:0;
        background:var(--paper);
        padding:20px;
        flex-direction:column;
        border-bottom:1px solid var(--line)
    }
    .nav-links.open {
        display:flex
    }
    .hero {
        padding:85px 0 100px
    }
    .hero p {
        font-size:15px
    }
    section.content {
        padding:70px 0
    }
    .section-heading {
        display:block
    }
    .section-heading p {
        margin-top:20px
    }
    .about-grid {
        grid-template-columns:1fr;
        gap:10px
    }
    .books {
        grid-template-columns:repeat(2,1fr)
    }
    .books article:last-child {
        display:none
    }
    .service-grid {
        grid-template-columns:1fr
    }
    .service {
        min-height:0
    }
    .process {
        grid-template-columns:repeat(2,1fr)
    }
    .cta {
        padding:35px 25px;
        display:block
    }
    .cta h2 {
        font-size:29px
    }
    .cta .btn {
        margin-top:15px
    }
    .footer-inner {
        display:block
    }
    .footer-links {
        margin-top:25px
    }
}


/* WHISTLE PUBLISHING - Typography */

/* 본문, 메뉴, 버튼 */
body,
button {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* 한글 섹션 제목 */
.section-heading h2,
.cta h2 {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

/* 영문 메인 제목 */
.hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
}

/* 영문 로고 */
.brand,
.brand small {
    font-family: Georgia, serif;
}

/* 메뉴와 버튼 */
.nav-links,
.btn,
.footer-links {
    font-family: 'Pretendard', sans-serif;
}

/* 본문 가독성 */
.hero p,
.about-grid p,
.service p,
.step p,
.section-heading p {
    word-break: keep-all;
}


/* WHISTLE PUBLISHING - Typography */

/* 본문, 메뉴, 버튼 */
body,
button {
    font-family: 'Pretendard', 'Malgun Gothic', sans-serif;
}

/* 한글 섹션 제목 */
.section-heading h2,
.cta h2 {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    letter-spacing: -0.045em;
    word-break: keep-all;
}

/* 영문 메인 제목 */
.hero h1 {
    font-family: Georgia, 'Times New Roman', serif;
}

/* 영문 로고 */
.brand,
.brand small {
    font-family: Georgia, serif;
}

/* 메뉴와 버튼 */
.nav-links,
.btn,
.footer-links {
    font-family: 'Pretendard', sans-serif;
}

/* 본문 가독성 */
.hero p,
.about-grid p,
.service p,
.step p,
.section-heading p {
    word-break: keep-all;
}






/* 출판 예정작 표지 크기 및 정렬 */

#books .books {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

#books .books article {
    width: 100%;
    min-width: 0;
    margin: 0;
}

#books .books article img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 148 / 210;
    object-fit: contain;
    box-sizing: border-box;
}

#books .book-label {
    margin-top: 12px;
}

@media (max-width: 768px) {
    #books .books {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    #books .books {
        grid-template-columns: 1fr;
    }
}


/* 모바일 출판 예정작 배치 수정 */
@media screen and (max-width: 767px) {

    #books .books {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
    }

    #books .books article {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    #books .books article img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

}