/* 디자인 토큰 — DESIGN.md v1 (종횡무진). 색·간격·서체는 이 변수만 쓴다. 하드코딩 금지. */
:root {
    /* 색 — 흑백 중심, 강조색 하나 */
    --color-bg:          #FAFAF7;
    --color-surface:     #FFFFFF;
    --color-text:        #1A1A1A;
    --color-text-sub:    #6B6B6B;
    --color-line:        #E5E3DE;
    --color-accent:      #B23A2E;
    --color-accent-soft: #F5E8E6;

    /* 서체 — 세리프는 글 본문(.entry-content)만, 나머지는 산세리프 */
    --font-body: 'Noto Serif KR', 'RIDIBatang', serif;
    --font-ui:   'Pretendard', -apple-system, BlinkMacSystemFont, 'Noto Sans KR', sans-serif;

    /* 글자 크기 — 모바일 기준 */
    --fs-xs: 13px;  --fs-sm: 15px;  --fs-base: 17px;
    --fs-lg: 20px;  --fs-xl: 26px;  --fs-2xl: 34px;

    --lh-body:  1.85;
    --lh-title: 1.35;

    /* 간격 — 8의 배수 */
    --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
    --sp-4: 32px; --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

    /* 폭 */
    --w-text:    680px;
    --w-content: 1120px;
    --gutter:    20px;

    --radius: 4px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #141414; --color-surface: #1C1C1C;
        --color-text: #EAEAEA; --color-text-sub: #9A9A9A;
        --color-line: #2E2E2E; --color-accent: #E06A5C; --color-accent-soft: #2A1C1A;
    }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    line-height: var(--lh-title);
}
a { color: inherit; }
a:hover { color: var(--color-accent); text-decoration: underline; }

.jm-hold { min-height: 100%; display: flex; align-items: center; justify-content: center; }
.jm-hold p { margin: 0; font-size: var(--fs-sm); letter-spacing: .02em; color: var(--color-text-sub); }

/* 로그인·가입 */
.jm-auth { max-width: 360px; margin: 0 auto; padding: var(--sp-8) var(--gutter); }
.jm-auth h1 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.jm-auth form { display: flex; flex-direction: column; gap: var(--sp-2); }
.jm-auth label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.jm-auth input[type=email], .jm-auth input[type=text], .jm-auth input[type=password] {
    min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.jm-auth input:focus { outline: 2px solid var(--color-text); outline-offset: -1px; }
.jm-auth small { color: var(--color-text-sub); font-size: var(--fs-xs); }
.jm-auth .jm-check { flex-direction: row; align-items: center; gap: var(--sp-1); min-height: 44px; }
.jm-auth .jm-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.jm-auth button {
    min-height: 44px; font: inherit; font-size: var(--fs-sm); color: var(--color-surface);
    background: var(--color-text); border: 0; border-radius: var(--radius); cursor: pointer;
}
.jm-auth button:hover:not(:disabled) { background: var(--color-accent); }
.jm-auth button:disabled { opacity: .5; cursor: default; }
.jm-error { margin: 0; font-size: var(--fs-xs); color: var(--color-accent); }
.jm-alt { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--color-text-sub); }
.jm-alt a { color: var(--color-text); }
.jm-alt a:hover { color: var(--color-accent); }
.jm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- 공통 레이아웃 (DESIGN.md 3·4장) ---------- */
.site-header {
    position: sticky; top: 0; z-index: 10;
    background: var(--color-bg); border-bottom: 1px solid var(--color-line);
    transition: transform .15s;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header__in {
    display: flex; align-items: center; gap: var(--sp-3);
    max-width: var(--w-content); min-height: 56px; margin: 0 auto; padding: 0 var(--gutter);
}
.site-logo { font-weight: 700; font-size: var(--fs-lg); text-decoration: none; letter-spacing: .02em; }
.site-logo:hover { text-decoration: none; }
.site-nav { display: flex; gap: var(--sp-1); flex: 1; }
.site-nav a, .site-account a, .link-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-1);
    text-decoration: none; font-size: var(--fs-sm);
}
.site-nav a[aria-current=page] { color: var(--color-accent); }
.site-nav a:hover, .site-account a:hover { text-decoration: underline; }
.site-account { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); color: var(--color-text-sub); }
.link-btn { background: none; border: 0; font: inherit; font-size: var(--fs-sm); color: inherit; cursor: pointer; }
.link-btn:hover { color: var(--color-accent); text-decoration: underline; }
.site-account__name { display: none; }

.page { max-width: var(--w-text); margin: 0 auto; padding: var(--sp-4) var(--gutter) var(--sp-8); min-height: 60vh; }
.page--wide { max-width: var(--w-content); }
.page__title { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); line-height: var(--lh-title); }
.page__more { max-width: var(--w-content); margin: var(--sp-8) auto 0; }
.site-footer { border-top: 1px solid var(--color-line); color: var(--color-text-sub); font-size: var(--fs-xs); }
.site-footer__in { display: flex; justify-content: space-between; max-width: var(--w-content); margin: 0 auto; padding: var(--sp-3) var(--gutter); }
.empty { padding: var(--sp-8) 0; text-align: center; color: var(--color-text-sub); }
.empty h1 { font-size: var(--fs-lg); color: var(--color-text); }
.notice { margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-2); background: var(--color-accent-soft); font-size: var(--fs-xs); border-radius: var(--radius); }
.meta { display: block; color: var(--color-text-sub); font-size: var(--fs-xs); margin: 0; }
p.meta, .article__by .meta { display: block; }
.meta a { text-decoration: none; }
.meta a:hover { text-decoration: underline; }
.img-empty { display: block; width: 100%; height: 100%; background: var(--color-line); }

/* 라벨·연재 표시·태그 */
.type-label { display: inline-block; font-size: var(--fs-xs); color: var(--color-text-sub); letter-spacing: .05em; }
.series-badge { display: inline-block; font-size: var(--fs-xs); color: var(--color-accent); margin-right: var(--sp-1); }
.series-link { text-decoration: none; }
.tag { font-size: var(--fs-sm); color: var(--color-text-sub); text-decoration: none; margin-right: var(--sp-1); }
.tag:hover { color: var(--color-accent); text-decoration: underline; }
.tags { margin: var(--sp-3) 0 0; }

/* 그리드: 모바일 1열 / 태블릿 2열 / 데스크톱 3열 */
.grid { display: grid; gap: var(--sp-4) var(--sp-3); grid-template-columns: 1fr; }
.grid--books { grid-template-columns: repeat(2, 1fr); }
.grid--authors { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .grid--books { grid-template-columns: repeat(3, 1fr); }
    .grid--authors { grid-template-columns: repeat(2, 1fr); }
    .site-account__name { display: inline; }
}
@media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(3, 1fr); }
    .grid--books { grid-template-columns: repeat(4, 1fr); }
    .grid--authors { grid-template-columns: repeat(3, 1fr); }
    .page__title { font-size: var(--fs-2xl); }
}

/* 카드: 그림자·그라데이션 없음, hover는 이미지만 살짝 확대 (책 표지의 약한 그림자만 예외 — DESIGN.md 3장) */
.card-article__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-line); border-radius: var(--radius); }
.card-article__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .15s; }
.card-article:hover .card-article__img img { transform: scale(1.02); }
.card-article__body { padding-top: var(--sp-1); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.card-article__title { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-title); }
.card-article__title a { text-decoration: none; }
.card-article__title a:hover { color: var(--color-accent); text-decoration: underline; }

.card-author { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; min-height: 64px; }
.card-author:hover strong { color: var(--color-accent); text-decoration: underline; }
.card-author:hover { text-decoration: none; }
.card-author__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--color-line); }
.card-author__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-author--full .card-author__photo { width: 80px; height: 80px; }

.card-book { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.card-book:hover { text-decoration: none; }
.card-book__cover { display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--color-line); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.card-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.card-book__title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-title); }
.card-book:hover .card-book__title { color: var(--color-accent); text-decoration: underline; }

/* 섹션 */
.block { margin-top: var(--sp-8); }
.block__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-3); }
.block__head h2 { margin: 0; font-size: var(--fs-lg); }

/* 글 페이지 */
.article__head { margin-bottom: var(--sp-3); }
.article__title { margin: var(--sp-1) 0; font-size: var(--fs-xl); line-height: var(--lh-title); }
@media (min-width: 768px) { .article__title { font-size: var(--fs-2xl); } }
.article__by { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
.article__by a { display: inline-flex; align-items: center; gap: var(--sp-1); text-decoration: none; min-height: 44px; }
.article__by a span { font-weight: 600; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--color-line); }
.article__cover { margin: var(--sp-3) calc(var(--gutter) * -1); }
.article__cover img { display: block; width: 100%; max-height: 540px; object-fit: cover; }
@media (min-width: 768px) { .article__cover { margin-left: -140px; margin-right: -140px; } .article__cover img { border-radius: var(--radius); } }

/* 본문만 세리프. 한 줄 35~40자(680px), 행간 1.85 */
.entry-content { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); word-break: keep-all; overflow-wrap: break-word; }
.entry-content p { margin: 0 0 1.4em; }

.share-bar { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-4) 0; padding: var(--sp-2) 0; border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.share-bar button, .share-bar a, .btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 var(--sp-2);
    font: inherit; font-size: var(--fs-sm); color: var(--color-text); text-decoration: none;
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); cursor: pointer;
}
.share-bar button:hover, .share-bar a:hover, .btn:hover { color: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }
.share-bar [hidden] { display: none; }

.series-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--sp-4) 0; }
.series-nav a { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-2); border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; line-height: var(--lh-title); }
.series-nav a:hover { border-color: var(--color-accent); }
.series-nav__next { text-align: right; }

.author-box { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); margin: 0 var(--gutter); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius); }
.author-box__all { font-size: var(--fs-sm); }
.page__more .block { padding: 0 var(--gutter); }

/* 작가 페이지 */
.author-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.author-head h1 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); }
.author-head__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--color-line); }
.author-head__intro p { margin: 0 0 var(--sp-1); line-height: 1.7; }
.author-head__sns a { margin-right: var(--sp-2); }
@media (min-width: 768px) { .author-head { flex-direction: row; align-items: center; } .author-head h1 { font-size: var(--fs-2xl); } }
.bio { margin-bottom: var(--sp-3); }
.bio summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.tabs { display: flex; gap: var(--sp-3); border-bottom: 1px solid var(--color-line); margin-bottom: var(--sp-3); overflow-x: auto; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a[aria-current=true] { border-bottom-color: var(--color-accent); color: var(--color-accent); }
.tabs__n { font-size: var(--fs-xs); color: var(--color-text-sub); }

/* 리스트형 (작가 글 목록·연재 회차) */
.list { list-style: none; margin: 0; padding: 0; }
.row-article a { display: grid; gap: 4px; padding: var(--sp-2) 0; border-bottom: 1px solid var(--color-line); text-decoration: none; }
.row-article__title { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-title); }
.row-article__desc { color: var(--color-text-sub); font-size: var(--fs-sm); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.row-article__no { font-size: var(--fs-xs); color: var(--color-accent); }
.row-article a:hover .row-article__title { color: var(--color-accent); text-decoration: underline; }

/* 연재 페이지 */
.series-head { margin-bottom: var(--sp-4); }
.series-head__intro { margin-top: var(--sp-2); line-height: 1.7; }
.series-book { max-width: 160px; margin-bottom: var(--sp-4); }

/* 책 페이지 */
.book__top { display: grid; gap: var(--sp-4); }
.book__cover { max-width: 240px; aspect-ratio: 2 / 3; overflow: hidden; border-radius: var(--radius); background: var(--color-line); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book__by { margin: 0 0 var(--sp-2); }
.book__meta { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.book__meta dt { color: var(--color-text-sub); }
.book__meta dd { margin: 0; }
.buy { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
@media (min-width: 768px) { .book__top { grid-template-columns: 240px 1fr; } }

/* 필터·페이지 이동 */
.filters { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.filters a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; }
.filters a[aria-current=true] { border-color: var(--color-accent); color: var(--color-accent); }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-4); }
.pager a { display: inline-flex; align-items: center; min-height: 44px; }
.pager__now { color: var(--color-text-sub); font-size: var(--fs-xs); }

/* 메인 (DESIGN.md 4.1) — 섹션 사이 간격은 --sp-12 */
.page--wide > .block { margin-top: var(--sp-12); }
.block__more { font-size: var(--fs-xs); color: var(--color-text-sub); text-decoration: none; }
.block__more:hover { color: var(--color-accent); text-decoration: underline; }
.hero { display: grid; gap: var(--sp-3); }
.hero__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-line); border-radius: var(--radius); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__body { display: flex; flex-direction: column; gap: var(--sp-1); align-items: flex-start; }
.hero__title { margin: 0; font-size: var(--fs-xl); line-height: var(--lh-title); }
.hero__title a { text-decoration: none; }
.hero__title a:hover { color: var(--color-accent); text-decoration: underline; }
.hero__desc { margin: 0; color: var(--color-text-sub); line-height: 1.7; }
@media (min-width: 768px) {
    .hero__title { font-size: var(--fs-2xl); }
}
@media (min-width: 1024px) {
    .hero { grid-template-columns: 3fr 2fr; align-items: center; gap: var(--sp-6); }
}
.scroll-x { display: flex; gap: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-1); scroll-snap-type: x proximity; }
.scroll-x > * { flex: 0 0 240px; scroll-snap-align: start; }

/* ---------- 작가 대시보드 (글 목록·편집기) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn--primary { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
.btn:disabled { opacity: .5; cursor: default; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.dash-head .page__title { margin-bottom: 4px; }
.dash-back { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); }
.dash-reason { color: var(--color-accent); -webkit-line-clamp: 2; }
.status { font-weight: 600; color: var(--color-text-sub); }
.status--review { color: var(--color-text); }
.status--rejected { color: var(--color-accent); }
.status--published { color: var(--color-text); }

.editor { display: flex; flex-direction: column; gap: var(--sp-3); }
.editor__bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.editor__title input {
    width: 100%; padding: var(--sp-1) 0; font: inherit; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-title);
    color: var(--color-text); background: transparent; border: 0; border-bottom: 1px solid var(--color-line); border-radius: 0;
}
.editor__title input:focus, .editor input:focus, .editor select:focus, .editor textarea:focus { outline: 2px solid var(--color-text); outline-offset: 2px; }
.editor__row { display: grid; gap: var(--sp-2); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 768px) { .editor__row { grid-template-columns: 1fr 2fr 120px; } .editor__more .editor__row { grid-template-columns: 1fr auto; } }
.editor label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); }
.editor input[type=text], .editor input[type=number], .editor input[type=datetime-local], .editor select {
    min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--color-text);
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.editor__body textarea {
    width: 100%; min-height: 55vh; padding: var(--sp-2); resize: vertical;
    font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body);
    color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius);
}
.editor fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.editor legend { padding: 0; margin-bottom: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; }
.editor__cover-box { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.editor__cover-box img { max-width: 240px; max-height: 135px; width: auto; height: auto; border-radius: var(--radius); object-fit: cover; }
.editor__cover-box img[hidden] { display: none; }
.checks { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); }
.checks--books { flex-direction: column; max-height: 240px; overflow-y: auto; padding: var(--sp-1) 0; }
.editor label.check { flex-direction: row; align-items: center; gap: var(--sp-1); min-height: 44px; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-accent); }
.editor__more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--sp-1); font-weight: 600; }
.editor__more[open] summary { margin-bottom: var(--sp-1); }
.editor__more > label { margin-bottom: var(--sp-2); }
.editor__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px solid var(--color-line); }
.editor__schedule { flex-direction: row !important; align-items: center; gap: var(--sp-1) !important; }