/* ============================================================ 책갈피 (chaekgalpi) — Visual Design System (스켈레톤 디자인 반영) PRD §6.1 팔레트 + Noto Serif/Sans KR + 따뜻한 종이 노트 톤 기존 SPA 의 모든 클래스명을 유지한 채 시각 표현만 재정렬. ============================================================ */ :root { /* ---- 컬러 (PRD §6.1) ---- */ --primary: #6B4F3B; /* 브라운 */ --primary-dark: #4F3A2A; --secondary: #C9A66B; /* 베이지 골드 */ --bg: #FAF6EF; /* 페이퍼 아이보리 */ --bg-elev: #FFFBF3; --card: #FFFBF3; /* 호환 별칭 */ --text: #2C2A26; /* 잉크 다크 브라운 */ --muted: #6B6052; /* 종이 위 보조 텍스트 — AA 대비 ≥4.5:1 (구 #7A6F60 은 ~4.0:1 경계 미달) */ --accent: #8E2B2B; /* 책갈피 레드 */ --border: #E6DDC9; --border-soft: #EFE7D4; --field-bg: #FFFFFF; /* 입력/읽기전용 필드 표면 — 다크모드에서 재바인딩 (흰 박스 튐 방지) */ /* ---- 타이포 ---- */ --font-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif; --font-sans: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; /* ---- 형상 ---- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 2px 8px rgba(44, 42, 38, 0.06); --shadow-hover: 0 6px 18px rgba(44, 42, 38, 0.10); --shadow-cover: 0 4px 12px rgba(44, 42, 38, 0.18); /* ---- 간격 ---- */ --gap-xs: 4px; --gap-sm: 8px; --gap-md: 16px; --gap-lg: 24px; --gap-xl: 40px; } /* 독서록 공유 바 — review-share 모듈 (P0 마케팅) */ .share-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.4rem; padding: .85rem 1.1rem; background: rgba(201, 166, 107, 0.08); border-left: 3px solid var(--secondary); border-radius: var(--radius-sm); } .share-bar-label { font-family: var(--font-serif); color: var(--muted); font-size: .92rem; margin-right: auto; } .share-btn { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); padding: .45rem .9rem; border-radius: 999px; font-size: .88rem; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; font-family: inherit; } .share-btn:hover { background: var(--secondary); color: #fff; border-color: var(--secondary); } .share-btn:active { transform: scale(0.97); } .share-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (max-width: 768px) { .share-bar { padding: .75rem .9rem; } .share-bar-label { flex-basis: 100%; margin-right: 0; margin-bottom: .35rem; } .share-btn { font-size: .82rem; padding: .4rem .75rem; } } /* 책 관련 명언 롤링 — 피드 hero 와 공개 독서록 사이의 1행 배너 */ .quote-roller { display: flex; align-items: flex-start; gap: .8rem; margin: 1.6rem auto 1.4rem; padding: 1rem 1.3rem; background: rgba(201, 166, 107, 0.08); border-left: 3px solid var(--secondary); border-radius: var(--radius-sm); font-family: var(--font-serif); } .quote-mark { font-size: 2rem; line-height: 1; color: var(--secondary); font-family: Georgia, serif; flex: 0 0 auto; margin-top: -.2rem; } .quote-track { flex: 1 1 auto; min-height: 1.6rem; position: relative; } .quote-line { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); opacity: 1; transition: opacity .5s ease; } .quote-line.fading { opacity: 0; } .quote-line .quote-author { display: inline; margin-left: .4rem; color: var(--muted); font-size: .9rem; font-style: italic; } @media (max-width: 768px) { .quote-roller { padding: .9rem 1rem; margin: 1.2rem auto 1rem; } .quote-line { font-size: .95rem; } } /* 다크 모드 — "촛불 켜진 도서관" 톤. 라이트 팔레트의 정서를 유지하되 명도만 반전. data-theme="dark" 가 에 있을 때만 적용. localStorage('rb.theme') 로 영속. */ html[data-theme="dark"] { --primary: #D4B895; /* 따뜻한 크림 (라이트의 브라운 반대편) */ --primary-dark: #BFA37D; --secondary: #C9A66B; /* 그대로 — 베이지 골드는 양 테마 공통 */ --bg: #1B1812; /* 짙은 원목/커피 */ --bg-elev: #25201A; --card: #25201A; --text: #ECE3D2; /* 따뜻한 오프화이트 */ --muted: #A89C88; --accent: #E48484; /* 어두운 배경에 부드러워진 책갈피 레드 */ --border: #3B342B; --border-soft: #2F2922; --field-bg: #2E2820; /* 카드(#25201A)보다 살짝 밝은 입력 표면 — --text(#ECE3D2) 와 충분한 대비 */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.45); --shadow-cover: 0 4px 12px rgba(0, 0, 0, 0.50); color-scheme: dark; } html[data-theme="dark"] body { background: var(--bg); color: var(--text); } html[data-theme="dark"] img { filter: brightness(0.92); } /* 토글 버튼 — 헤더 안에서 작은 원형 아이콘 버튼 */ .theme-toggle { background: none; border: 1px solid var(--border); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text); transition: background .15s ease, border-color .15s ease; } .theme-toggle:hover { background: rgba(0, 0, 0, .04); border-color: var(--primary); } html[data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, .06); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; } button { font-family: inherit; } a { color: var(--primary); text-decoration: none; transition: color .15s; } a:hover { color: var(--accent); text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 .6em; color: var(--text); } h2 { font-size: 1.7rem; margin-top: .4em; } h3 { font-size: 1.2rem; } h3.spacer { margin-top: 1.6em; } .muted { color: var(--muted); } .small { font-size: .85rem; } .hidden { display: none !important; } [hidden] { display: none !important; } /* 페이지 사용 안내 — h2 직후 배치되는 가벼운 도움말 박스 (조용한 도서관 톤) */ .page-guide { background: rgba(201, 166, 107, 0.10); border-left: 3px solid var(--secondary); border-radius: 6px; padding: 1rem 1.2rem; margin: 0 0 1.4rem; color: var(--text); } .page-guide-title { font-weight: 600; margin: 0 0 .55rem; font-size: .95rem; letter-spacing: -0.01em; color: var(--primary); } .page-guide-lead { margin: 0 0 .75rem; font-size: .92rem; line-height: 1.65; color: var(--text); } .page-guide-lead strong { color: var(--primary); font-weight: 600; } .page-guide-lead a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .page-guide-list { margin: 0; padding-left: 1.4rem; font-size: .92rem; line-height: 1.65; } .page-guide-list li + li { margin-top: .4rem; } .page-guide-list strong { color: var(--primary); font-weight: 600; } .page-guide-list em { font-style: normal; color: var(--accent); } .page-guide-list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ Top bar — 스켈레톤 헤더 (cream bg + 하단 라인 + sticky) ============================================================ */ .topbar { background: var(--bg); color: var(--text); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: saturate(180%) blur(6px); backdrop-filter: saturate(180%) blur(6px); } .topbar-inner { max-width: 1240px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; height: 72px; } .brand { font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; color: var(--primary); display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; } .brand:hover { text-decoration: none; color: var(--primary-dark); } /* 로고 — 인라인 SVG. stroke=currentColor 로 테마 자동 적응, 책갈피만 accent 색상. */ .logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; color: var(--primary); flex-shrink: 0; } .logo-mark svg { width: 100%; height: 100%; display: block; } .brand:hover .logo-mark, .admin-brand:hover .logo-mark { color: var(--accent); transition: color .2s ease; } /* Beta 배지 — 로고 텍스트 우측 하단에 작게. 출시 전(베타) 단계 표시. CSS 단독으로 모든 페이지에 적용(HTML 15개 불변). 절대배치라 헤더 정렬·아이콘 위치 불변. */ .logo-text { position: relative; } .logo-text::after { content: "Beta"; position: absolute; right: 0; bottom: -0.62em; font-family: var(--font-sans); font-size: 0.5rem; font-weight: 700; letter-spacing: .06em; line-height: 1; color: var(--accent); pointer-events: none; } /* 헤더 검색바 (스켈레톤 패턴) */ .search { display: flex; align-items: center; flex: 1; max-width: 480px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; padding: 0 1rem; transition: border-color 0.15s, box-shadow 0.15s; } .search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107, 79, 59, 0.10); } .search-input { flex: 1; border: none; background: transparent; padding: .65rem 0; font-family: inherit; font-size: .9rem; outline: none; color: var(--text); } .search-input::placeholder { color: var(--muted); } .search-btn { font-size: 1rem; padding: 4px; background: transparent; border: none; color: var(--muted); cursor: pointer; transition: color 0.15s; } .search-btn:hover { color: var(--primary); } /* 헤더 우측 액션 (+ 책 기록 버튼 + 아바타) */ .header-actions { display: flex; align-items: center; gap: .8rem; margin-left: auto; flex-shrink: 0; } .header-actions .btn.primary { padding: .55rem 1.1rem; font-size: .9rem; } /* header-actions 안의 "로그아웃" 텍스트 링크 — 다른 액션들과 시각적 균형 */ .header-actions .header-logout { color: var(--muted); font-size: .92rem; text-decoration: none; padding: .35rem .6rem; border-radius: 6px; } .header-actions .header-logout:hover { color: var(--accent); background: rgba(0,0,0,.04); } .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--secondary); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0; } .avatar:hover { transform: scale(1.05); box-shadow: var(--shadow-card); text-decoration: none; color: #fff; } .nav { display: flex; gap: .25rem; flex-wrap: nowrap; align-items: center; } .nav a { color: var(--muted); padding: .5rem .9rem; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 500; transition: color .15s, background .15s; } .nav a:hover { color: var(--text); background: rgba(107, 79, 59, 0.06); text-decoration: none; } .nav a.active { background: transparent; color: var(--primary); font-weight: 700; position: relative; } .nav a.active::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -2px; height: 2px; background: var(--primary); border-radius: 1px; } /* ============================================================ Layout / Cards ============================================================ */ .container { max-width: 1240px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-card); margin-bottom: 1.4rem; } .narrow { max-width: 460px; margin: 2.5rem auto; } /* ============================================================ Forms — 스켈레톤 폼 컨트롤 ============================================================ */ .form { display: flex; flex-direction: column; gap: 1rem; } .form.inline { flex-direction: row; flex-wrap: wrap; gap: 1rem; align-items: end; } .form.inline label { flex: 1; min-width: 12rem; } .form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 500; color: var(--text); font-size: .92rem; } .form input, .form select, .form textarea, .modal-body input[type=text], #form-write-review input[type=text], #form-write-review textarea { border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); padding: .65rem .8rem; font: inherit; color: var(--text); transition: border-color .15s, box-shadow .15s; } .form input:focus, .form select:focus, .form textarea:focus, .modal-body input[type=text]:focus, #form-write-review input[type=text]:focus, #form-write-review textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107, 79, 59, 0.12); } /* 책 기록 폼 — 한줄 평가 등 입력은 화면 폭에 맞춰 100% */ #form-user-book input[type=text], #form-user-book input[type=email], #form-user-book input[type=number] { width: 100%; border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); padding: .65rem .8rem; font: inherit; color: var(--text); } #form-user-book input[type=text]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107, 79, 59, 0.12); } .form textarea { resize: vertical; min-height: 8rem; line-height: 1.7; } /* v0.98 — password-reset. 폼 하단 보조 링크(비밀번호 분실 / 로그인 복귀). */ .form-aside { margin: -.25rem 0 0; text-align: center; } .link-muted { color: var(--muted); font-size: .9rem; text-decoration: none; border-bottom: 1px dotted var(--border); } .link-muted:hover { color: var(--accent); border-bottom-color: var(--accent); } .interests { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem 1.1rem; background: var(--bg-elev); display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; align-items: stretch; } /* 만 14세 이상 자기확인 체크박스 (v0.95) — 가입 폼 필수 동의. .form label { flex-direction: column } 보다 높은 특이도로 가로 한 줄 정렬. */ .form label.age-confirm { flex-direction: row; align-items: flex-start; gap: .5rem; font-weight: 400; font-size: .92rem; line-height: 1.4; cursor: pointer; } /* 공용 .form input(테두리·패딩·full-width) 가 체크박스에 적용되지 않도록 리셋 */ .form label.age-confirm input[type="checkbox"] { flex: 0 0 auto; width: auto; margin: .15rem 0 0; padding: 0; min-height: 0; border: none; accent-color: var(--primary); } .interests legend { grid-column: 1 / -1; color: var(--primary); font-family: var(--font-serif); font-weight: 700; padding: 0 .4rem; margin-bottom: .55rem; font-size: .95rem; } .interests legend small { color: var(--muted); font-weight: 400; margin-left: .25rem; } .interests label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 100%; padding: .7rem .5rem; margin: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--text); font-weight: 500; font-size: .9rem; text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease; -webkit-user-select: none; user-select: none; } .interests label:hover { border-color: var(--primary); } .interests label:has(input:checked) { border-color: var(--primary); background: rgba(107, 79, 59, 0.08); color: var(--primary); box-shadow: 0 0 0 2px rgba(107, 79, 59, 0.12); } .interests label input[type=checkbox] { accent-color: var(--primary); width: 1rem; height: 1rem; margin: 0; cursor: pointer; } /* ============================================================ Buttons — 스켈레톤 스타일 (사각 6px, hover lift) ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text); padding: .6rem 1.1rem; border-radius: var(--radius-sm); cursor: pointer; font-size: .92rem; font-weight: 500; transition: opacity .15s, transform .08s, background .15s, border-color .15s; white-space: nowrap; } .btn:hover { border-color: var(--primary); color: var(--primary); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); } .btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; opacity: 0.95; } .btn.danger { background: #fff; color: var(--accent); border-color: var(--accent); } .btn.danger:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); } .btn.ghost:hover { color: var(--text); border-color: var(--primary); background: transparent; } /* ============================================================ Danger Zone (회원 탈퇴 — PRD §FN-USER-08) 책갈피 레드(accent) 좌측 보더 + 차분한 카드 톤. 도서관 정서 유지. ============================================================ */ .danger-zone { margin-top: 2.2rem; padding: 1.2rem 1.4rem; background: #fffaf7; border: 1px solid #e8d6c9; border-left: 4px solid var(--accent); border-radius: 6px; } .danger-zone h3 { margin: 0 0 .8rem; color: var(--accent); font-family: var(--font-serif); font-size: 1.05rem; } .danger-zone-notes { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--muted); font-size: .92rem; line-height: 1.6; } .danger-zone-notes li + li { margin-top: .2rem; } .danger-zone-notes strong { color: var(--accent); } /* ============================================================ Tabs ============================================================ */ .tabs { display: flex; gap: 0; margin-bottom: 1.4rem; border-bottom: 1px solid var(--border); } .tab { background: transparent; border: none; padding: .8rem 1.4rem; cursor: pointer; font-family: var(--font-serif); font-size: 1rem; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 500; transition: color .15s, border-color .15s; margin-bottom: -1px; } .tab:hover { color: var(--text); } .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; } /* ============================================================ Card list (피드 카드) ============================================================ */ .card-list { display: flex; flex-direction: column; gap: 1rem; } .card-list .item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s; } .card-list .item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--secondary); } .card-list .item h4 { font-family: var(--font-serif); margin: 0 0 .3rem; font-size: 1.1rem; line-height: 1.4; color: var(--text); } .card-list .item .meta { color: var(--muted); font-size: .85rem; display: flex; gap: .8rem; flex-wrap: wrap; } .card-list .item .excerpt { color: var(--text); margin-top: .55rem; font-size: .92rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-list.dense .item { padding: .8rem 1rem; } .card-list.dense .item h4 { font-size: .98rem; } /* ============================================================ Feed grid ============================================================ */ .feed-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2rem; } .col-main > h2 { font-size: 1.5rem; } .col-side > h3 { padding-bottom: .5rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; } @media (max-width: 1100px) { .feed-grid { grid-template-columns: 1fr; } } .pager { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.5rem; } #feed-page-info { color: var(--muted); font-size: .9rem; } /* ============================================================ Detail prose — 독서록 본문 (Serif, 넉넉한 행간) ============================================================ */ .prose { font-family: var(--font-serif); white-space: pre-wrap; font-size: 1.08rem; line-height: 1.95; color: var(--text); } .prose p { margin: 0 0 1em; } .prose ul, .prose ol { padding-left: 1.6rem; margin: .5em 0; } .prose blockquote { border-left: 3px solid var(--secondary); margin: .8em 0; padding: .3em 1.2em; color: var(--muted); font-style: italic; } .prose h1, .prose h2, .prose h3 { margin: 1em 0 .5em; font-family: var(--font-serif); } .prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .prose a { color: var(--accent); } /* ============================================================ Toast ============================================================ */ .toast { position: fixed; right: 1.2rem; bottom: 1.8rem; background: var(--text); color: var(--bg); padding: .8rem 1.2rem; border-radius: var(--radius-sm); z-index: 200; box-shadow: var(--shadow-hover); max-width: 22rem; font-size: .92rem; } .toast.error { background: var(--accent); color: #fff; } /* ============================================================ Comments — 한줄 평 ============================================================ */ #comments-list .comment { border-bottom: 1px solid var(--border); padding: .8rem 0; } #comments-list .comment:last-child { border-bottom: none; } .rating { color: var(--accent); font-weight: 700; } /* ============================================================ ⭐ 별점 입력 ============================================================ */ .star-rating { display: inline-flex; align-items: center; gap: .1rem; -webkit-user-select: none; user-select: none; } .star-rating .star { font-size: 0; line-height: 1; color: #D8C8A6; background: transparent; border: none; padding: .15rem; cursor: pointer; transition: color .12s ease, transform .12s ease; } .star-rating .star::before { content: "\2606"; font-size: 1.9rem; display: inline-block; } .star-rating .star.on { color: var(--accent); } .star-rating .star.on::before { content: "\2605"; text-shadow: 0 1px 0 rgba(142, 43, 43, 0.15); } .star-rating .star:hover { transform: scale(1.15); } .star-rating .star:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; border-radius: 4px; } .star-rating .star-clear { margin-left: .6rem; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: .8rem; line-height: 1; padding: .25rem .5rem; border-radius: 999px; transition: color .15s, border-color .15s; } .star-rating .star-clear:hover { color: var(--accent); border-color: var(--accent); } .star-rating.small .star::before { font-size: 1.4rem; } .star-rating .star-point { color: var(--muted); margin-left: .5rem; font-size: .95rem; } .star-rating .star-point-num { color: var(--accent); font-weight: 700; } .star-rating .star-unrated { margin-left: .6rem; font-style: italic; letter-spacing: .02em; } /* ============================================================ Accordion (마이페이지 프로필/비번 수정) ============================================================ */ .accordion { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 1.2rem; box-shadow: var(--shadow-card); overflow: hidden; } .accordion > summary { list-style: none; cursor: pointer; padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.05rem; color: var(--primary); -webkit-user-select: none; user-select: none; transition: background .15s; } .accordion > summary::-webkit-details-marker { display: none; } .accordion > summary::after { content: "▾"; color: var(--muted); font-size: 1rem; transition: transform .25s ease; } .accordion[open] > summary { border-bottom: 1px solid var(--border); } .accordion[open] > summary::after { transform: rotate(180deg); } .accordion > summary:hover { background: rgba(107, 79, 59, 0.04); } .accordion > .acc-body { padding: 1.3rem 1.5rem 1.5rem; } /* ============================================================ 독서록 쓰기 (write 레이아웃) ============================================================ */ .write-top { display: grid; grid-template-columns: 220px 1fr; gap: 1.8rem; margin-bottom: 1.6rem; } .write-image .form-label { margin-bottom: .5rem; display: block; } .book-img-frame { width: 200px; height: 280px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(135deg, #F2EAD9 0%, #FFFBF3 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; margin: 0 auto; box-shadow: var(--shadow-cover); } .book-img-frame img { width: 100%; height: 100%; object-fit: contain; display: none; } .book-img-frame img[src]:not([src=""]) { display: block; } .book-img-frame img[src]:not([src=""]) ~ span { display: none; } .book-img-frame > span { color: var(--muted); font-family: var(--font-serif); font-size: .9rem; font-style: italic; } .write-fields { display: flex; flex-direction: column; gap: .9rem; } .fw-bold { font-weight: 700; } .req { color: var(--accent); margin-left: .15rem; } .input-with-btn { display: flex; gap: .4rem; } .input-with-btn input { flex: 1; } .input-with-btn input[readonly] { background: #F3EBDA; cursor: not-allowed; } .small-btn { align-self: flex-start; padding: .35rem .8rem; font-size: .82rem; } .form-row { margin-bottom: 1.4rem; } .form-field { display: flex; flex-direction: column; gap: .35rem; } /* 읽기 전용 디스플레이 */ .form-value { border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); padding: .65rem .8rem; color: var(--text); min-height: 2.6rem; line-height: 1.55; word-break: break-all; } .form-value:empty::before { content: "—"; color: var(--muted); } /* 독서록 상세 — 책 정보 블록은 입력창 모양이 아닌 평문으로 표시 */ .detail-book .form-field { gap: .15rem; } .detail-book .form-label { font-size: .78rem; color: var(--muted); font-weight: 500; margin-bottom: 0; } .detail-book .form-value { border: 0; background: transparent; padding: 0; min-height: 0; line-height: 1.5; word-break: break-word; } .detail-book .form-value:empty::before { content: ""; } .detail-book #detailBookTitle { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; } .detail-book #detailBookAuthor { font-size: .95rem; } .detail-book #detailBookPublisher { font-size: .9rem; color: var(--muted); } /* 독서록 상세 — 별점 강조 + 섹션 구분 라벨 */ .detail-rating { margin: .35rem 0 .6rem; font-size: 1.05rem; color: var(--accent); letter-spacing: 1px; font-weight: 600; } .detail-rating::after { content: ""; } .detail-section-label { margin: 0 0 .8rem; font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); padding-bottom: .5rem; } .comment-prompt { margin: 0 0 .6rem; font-family: var(--font-serif); color: var(--primary); font-size: .95rem; font-style: italic; } .comment-prompt:empty { display: none; } /* 한줄 평 입력 폼 — 별점은 자체 너비, 한줄 평 입력이 남은 공간을 모두 사용 */ #form-comment > label:nth-of-type(1) { flex: 0 0 auto; min-width: 0; } #form-comment > label:nth-of-type(2) { flex: 1 1 auto; min-width: 14rem; } #form-comment > label:nth-of-type(2) input { width: 100%; } .form-value-block { border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); padding: 1rem 1.2rem; color: var(--text); min-height: 5rem; max-height: 18rem; overflow-y: auto; font-family: var(--font-serif); line-height: 1.85; white-space: pre-wrap; word-break: break-all; } .form-value-block:empty::before { content: "책을 검색·선택하면 책 소개글이 여기 표시됩니다."; color: var(--muted); font-style: italic; } .form-label { display: block; font-weight: 500; color: var(--text); margin-bottom: .4rem; font-size: .92rem; } .date-range { display: flex; align-items: center; gap: .6rem; } .date-range .date-field { flex: 0 0 auto; display: inline-block; } .date-range .date-field input[type=date] { width: 11rem; } .date-range .tilde { color: var(--muted); } /* ============================================================ Quill 리치 텍스트 에디터 ============================================================ */ .rte { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; display: none; } .rte.mounted { display: block; } .rte.mounted + .rte-fallback { display: none; } .rte-fallback { width: 100%; border: 1px solid var(--border); background: #fff; border-radius: var(--radius-sm); padding: .65rem .8rem; font: inherit; color: var(--text); resize: vertical; min-height: 8rem; margin-top: .35rem; } #writeReview.rte-fallback { min-height: 14rem; } .rte .ql-toolbar { border: 0; border-bottom: 1px solid var(--border); background: var(--bg); } .rte .ql-container { border: 0; font-family: var(--font-serif); font-size: 1rem; } .rte .ql-editor { min-height: 8rem; font-family: var(--font-serif); line-height: 1.85; color: var(--text); } .rte.rte-tall .ql-editor { min-height: 14rem; } .rte .ql-editor.ql-blank::before { color: var(--muted); font-style: italic; font-family: var(--font-serif); } .form-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--border-soft); } /* ============================================================ 책 검색 모달 ============================================================ */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop { position: absolute; inset: 0; background: rgba(44, 42, 38, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .modal-dialog { position: relative; z-index: 1; background: var(--bg-elev); border-radius: var(--radius-lg); width: 100%; max-width: 580px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); border: 1px solid var(--border); } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--border); } .modal-header h3 { margin: 0; font-size: 1.15rem; font-family: var(--font-serif); } .modal-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: .3rem .5rem; border-radius: var(--radius-sm); transition: color .15s, background .15s; } .modal-close:hover { color: var(--accent); background: rgba(142, 43, 43, 0.06); } .modal-body { padding: 1.1rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; flex: 1 1 auto; min-height: 0; /* 자식(results)이 스크롤되도록 */ overflow: hidden; /* body 자체는 스크롤 안 함 — 검색어 input 고정 */ } /* 검색어 입력칸: 스크롤 영역 밖에 고정 (높이 유지) */ .modal-body > input[type=text] { flex: 0 0 auto; } /* 결과 목록만 스크롤 */ .modal-results { display: flex; flex-direction: column; gap: .45rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; } .modal-results .item { cursor: pointer; padding: .55rem .8rem; border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); transition: background .15s, border-color .15s; display: flex; align-items: center; gap: .8rem; position: relative; } .modal-results .item:hover { background: var(--bg); border-color: var(--secondary); } .modal-results .item .meta { color: var(--muted); font-size: .82rem; margin-top: .2rem; } .modal-results .empty { color: var(--muted); padding: .7rem .2rem; font-size: .9rem; font-style: italic; } .modal-results .item-body { flex: 1; min-width: 0; } .modal-results .item-body strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-results .item-thumb { flex-shrink: 0; width: 48px; height: 68px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; } .modal-results .item-thumb > .thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; pointer-events: none; } .modal-results .item-thumb-fallback { color: var(--muted); font-family: var(--font-serif); font-size: 1.1rem; } /* 호버 preview — 썸네일 옆 고정 위치에 등장. 별도 요소이므로 마우스 hover 판정은 항상 작은 썸네일에서만 발생 → 흔들림 없음. */ .modal-results .thumb-preview { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: 180px; height: 255px; border-radius: 6px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32); pointer-events: none; z-index: 20; opacity: 0; visibility: hidden; transition: opacity .12s ease; } .modal-results .thumb-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .modal-results .item-thumb:hover .thumb-preview { opacity: 1; visibility: visible; } /* ============================================================ 날짜 입력 ============================================================ */ .date-field { position: relative; display: block; } .date-field input[type="date"] { width: 100%; padding-right: 2.4rem; cursor: pointer; font: inherit; color: var(--text); } .date-field .date-icon { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: 1rem; pointer-events: none; opacity: .7; } .date-field input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; } /* ============================================================ 검색 결과 (책 기록 화면) ============================================================ */ .search-results { margin: .6rem 0 1.2rem; display: flex; flex-direction: column; gap: .45rem; } .search-results .item { cursor: pointer; padding: .65rem .9rem; border-radius: var(--radius-sm); background: var(--field-bg); border: 1px solid var(--border); transition: background .15s, border-color .15s; } .search-results .item:hover { background: var(--bg); border-color: var(--secondary); } .search-results .empty { color: var(--muted); padding: .7rem 0; font-size: .92rem; font-style: italic; } .manual-book summary { cursor: pointer; padding: .5rem 0; color: var(--muted); font-family: var(--font-serif); } .manual-book summary:hover { color: var(--primary); } /* ============================================================ Footer ============================================================ */ .footer { text-align: center; color: var(--muted); padding: 2.5rem 1rem 3rem; font-family: var(--font-serif); border-top: 1px solid var(--border-soft); margin-top: 3rem; } .footer code { background: rgba(107, 79, 59, 0.08); color: var(--primary); padding: 2px 8px; border-radius: 3px; font-size: .88rem; } /* 쿠팡 파트너스 대가성 표시 (v0.94) — 플래그 ON 일 때 JS 가 푸터에 주입. 조용한 톤. */ .affiliate-disclosure { margin: 1.2rem auto 0; max-width: 640px; font-size: .8rem; line-height: 1.5; color: var(--muted); font-family: var(--font-sans); } /* 푸터 정책 링크 — footer-policy-pages 모듈 (v0.44). 가로 한 줄, 모바일에서 자연스럽게 wrap. 톤 보호 — muted ↔ primary 만 사용. */ .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .55rem; margin-bottom: .55rem; font-size: .82rem; font-family: var(--font-sans); } .footer-nav a { color: var(--muted); text-decoration: none; transition: color .15s; } .footer-nav a:hover { color: var(--primary); text-decoration: underline; } .footer-nav a strong { font-weight: 600; } /* 현재 페이지 표시 (app.js markActiveFooter 가 aria-current 부여) */ .footer-nav a.active, .footer-nav a[aria-current="page"] { color: var(--primary); font-weight: 700; } .footer-sep { color: var(--border); -webkit-user-select: none; user-select: none; font-size: .82rem; } .footer-copy { display: block; color: var(--muted); } /* ============================================================ Policy / Static pages — about · terms · privacy · email-policy · partnership 디자인 톤: 종이 노트, Serif 헤딩, 차분한 본문. ============================================================ */ .policy-card { padding: 2rem 2.4rem; } .policy-card h1 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--primary); margin-bottom: .35rem; } .policy-effective { color: var(--muted); font-size: .92rem; margin-bottom: 1.5rem; } .policy-card h3 { font-family: var(--font-serif); margin-top: 2rem; margin-bottom: .6rem; font-size: 1.1rem; color: var(--primary); } .policy-card p, .policy-card li { line-height: 1.85; } .policy-card ul, .policy-card ol { margin-left: 1.25rem; margin-top: .3rem; } .policy-card li { margin-bottom: .3rem; } .policy-card code { background: rgba(107, 79, 59, 0.08); color: var(--primary); padding: 1px 6px; border-radius: 3px; font-size: .9em; } .policy-note { background: var(--bg-elev); border-left: 3px solid var(--accent); padding: .9rem 1.1rem; margin: 1rem 0 2rem; font-size: .92rem; color: var(--muted); border-radius: 0 4px 4px 0; } .policy-quote { border-left: 3px solid var(--secondary); padding: 1rem 1.2rem; background: var(--bg-elev); margin: 1.2rem 0; font-style: italic; color: var(--primary); font-family: var(--font-serif); line-height: 1.9; border-radius: 0 4px 4px 0; } .email-link { text-decoration: none; } .email-link:hover code { background: rgba(107, 79, 59, 0.16); } @media (max-width: 768px) { .policy-card { padding: 1.5rem 1.2rem; } .policy-card h1 { font-size: 1.5rem; } .policy-card h3 { font-size: 1.02rem; margin-top: 1.6rem; } .footer-nav { font-size: .78rem; gap: .25rem .4rem; } } /* ============================================================ About page (about-page-redesign, v0.45) — 랜딩 톤 정책 페이지 스킨(.policy-card)과 격리. 모든 색·여백은 기존 토큰만 사용 (다크모드 자동 대응). ============================================================ */ .about-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; padding: 4rem 0 3rem; max-width: 1100px; margin: 0 auto; } .about-hero h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15; color: var(--primary); margin: 0 0 1.2rem; } .about-hero .lead { font-size: 1.1rem; color: var(--text); line-height: 1.7; margin: 0 0 2rem; } .about-hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; } .about-hero-art { display: flex; justify-content: center; color: var(--primary); } .about-hero-art svg { width: 220px; height: auto; opacity: 0.9; } .about-section { max-width: 1100px; margin: 0 auto; padding: 3rem 0; } .about-section-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--primary); text-align: center; margin: 0 0 2.5rem; } .about-story-body { max-width: 680px; margin: 0 auto; font-family: var(--font-serif); font-size: 1.05rem; line-height: 1.9; color: var(--text); } .about-story-body p { margin: 0 0 1.3rem; } .about-story-sign { text-align: right; margin-top: 1.8rem; font-style: italic; font-size: .95rem; color: var(--muted); } .about-promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .about-promise-card { background: var(--bg-elev); border: 1px solid var(--secondary); border-radius: 10px; padding: 1.5rem 1.2rem; text-align: center; } .about-promise-icon { display: flex; justify-content: center; margin-bottom: .8rem; color: var(--secondary); } .about-promise-card h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0 0 .5rem; color: var(--primary); } .about-promise-card p { font-size: .88rem; color: var(--muted); line-height: 1.6; margin: 0; } .about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; } .about-feature { display: flex; gap: 1rem; align-items: flex-start; } .about-feature-icon { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; color: var(--accent); } .about-feature h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 .35rem; color: var(--primary); } .about-feature p { font-size: .95rem; color: var(--text); line-height: 1.7; margin: 0; } .about-quote { max-width: 720px; margin: 4rem auto; padding: 1.5rem 2rem; border-left: 3px solid var(--accent); font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--text); line-height: 1.7; } .about-quote cite { display: block; margin-top: .8rem; font-style: normal; font-size: .9rem; color: var(--muted); } .about-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .about-step { text-align: center; padding: 1.5rem 1rem; } .about-step-num { font-family: var(--font-serif); font-size: 2.2rem; color: var(--secondary); display: block; margin-bottom: .5rem; } .about-step h3 { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 .5rem; color: var(--primary); } .about-step p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0; } .about-cta-final { text-align: center; padding: 4rem 0; background: linear-gradient(180deg, transparent 0%, var(--bg-elev) 100%); border-radius: 12px; } .about-cta-final h2 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--primary); margin: 0 0 1.5rem; } .about-cta-final-btn { font-size: 1.05rem; padding: .85rem 2rem; } .about-end-note { text-align: center; color: var(--muted); font-size: .85rem; margin: 1rem 0 3rem; } @media (max-width: 768px) { .about-hero { grid-template-columns: 1fr; gap: 2rem; text-align: center; padding: 2rem 0; } .about-hero-cta { justify-content: center; } .about-hero-art { order: -1; } .about-hero-art svg { width: 140px; } .about-promises { grid-template-columns: 1fr 1fr; } .about-features { grid-template-columns: 1fr; } .about-steps { grid-template-columns: 1fr; } .about-section { padding: 2rem 1rem; } .about-section-title { font-size: 1.3rem; margin-bottom: 1.5rem; } .about-story-body { font-size: 1rem; line-height: 1.8; } .about-quote { margin: 2.5rem auto; padding: 1.2rem 1.4rem; font-size: 1.1rem; } .about-cta-final { padding: 3rem 1rem; } .about-cta-final h2 { font-size: 1.4rem; } } @media (max-width: 480px) { .about-promises { grid-template-columns: 1fr; } } /* ============================================================ Responsive — PRD §6.3 (1280 / 768) ============================================================ */ @media (max-width: 1279px) { .container { padding: 1.5rem 1.2rem 3rem; } } @media (max-width: 1279px) { /* 태블릿: 검색바 축소, 나머지 그대로 */ .search { max-width: 280px; } } @media (max-width: 768px) { /* 모바일 헤더 — Grid 로 brand/search/nav+actions 3행 배치. nav 와 actions 가 같은 행을 좌·우로 분리해 점유 → 두 줄 분리 회피. nav 항목은 짧아 스크롤 불요 (overflow visible). */ .topbar-inner { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand brand" "search search" "nav actions"; gap: .55rem .6rem; align-items: center; padding: .8rem 1rem; height: auto; } /* nav/actions 가 좁은 폭에서 점유폭을 못 줄여 헤더가 한 줄을 넘어가는 사고 방지. min-width:0 으로 grid 셀의 implicit min-content 를 풀어 줌. */ .topbar-inner > .nav, .topbar-inner > .header-actions { min-width: 0; } .brand { grid-area: brand; } .search { grid-area: search; max-width: none; } /* nav — 좌측 정렬, 스크롤바 제거. 항목 사이즈/패딩을 actions 와 시각적으로 일치 */ .nav { grid-area: nav; min-width: 0; /* 넘침 방지 — 트랙을 못 줄이는 폭에서도 actions(+ 독서록 쓰기) 위로 spill 하지 않도록 시각적 clip(가로 스크롤). 트림(≤560px) 이 적용되면 실제로는 스크롤이 생기지 않음. */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-wrap: nowrap; justify-content: flex-start; gap: .25rem; } .nav::-webkit-scrollbar { display: none; } .nav a { white-space: nowrap; padding: .55rem .7rem; font-size: .95rem; line-height: 1.2; } /* actions — 우측 정렬, nav 와 같은 vertical centering */ .header-actions { grid-area: actions; margin-left: 0; justify-content: flex-end; gap: .45rem; flex-wrap: nowrap; } .header-actions .btn.primary { padding: .55rem .85rem; font-size: .92rem; line-height: 1.2; white-space: nowrap; } .header-actions .theme-toggle { width: 36px; height: 36px; font-size: 1rem; } .header-actions .avatar { width: 36px; height: 36px; font-size: .92rem; } .header-actions .header-logout { font-size: .92rem; padding: .55rem .55rem; line-height: 1.2; } /* 좁은 폭(≤560px) — nav(3링크) + actions(CTA·테마·아바타·로그아웃) 가 한 줄에 다 못 들어가 겹치던 구간. 흔한 대화면 폰(~414~430px portrait) 도 여기 포함. 마이페이지는 우측 아바타로, 로그아웃은 마이페이지에서 가능하므로 둘을 숨겨 "+ 독서록 쓰기" / 테마 / 아바타 / nav 가 한 줄에 자연스럽게 들어가도록 함. */ @media (max-width: 560px) { .nav { gap: .1rem; } .nav a { padding: .5rem .5rem; font-size: .88rem; } .nav a[href="/mypage.html"] { display: none; } .header-actions { gap: .35rem; } .header-actions .btn.primary { padding: .5rem .65rem; font-size: .85rem; } .header-actions .theme-toggle, .header-actions .avatar { width: 32px; height: 32px; } .header-actions .header-logout { display: none; } } .container { padding: 1.2rem .9rem 3rem; } .card { padding: 1.2rem; } h2 { font-size: 1.4rem; } .write-top { grid-template-columns: 1fr; } .write-image { justify-self: center; } .date-range { flex-wrap: wrap; } .date-range .date-field input[type=date] { width: 100%; } .form-actions { justify-content: stretch; flex-direction: column; } .form-actions .btn { width: 100%; } } /* 터치 타깃 최소 44×44 (PRD §6.3) */ @media (pointer: coarse) { .nav a, .tab, .btn { min-height: 44px; } /* 헤더 아이콘류는 모바일에서 시각적으로 작게 유지하되 터치 타깃은 40px 이상 보장. ≤419 의 width:32px 는 유지(시각 크기) — pointer:coarse 가 min- 으로만 끌어올려 우선 */ .theme-toggle, .avatar { min-width: 40px; min-height: 40px; } .header-actions .header-logout { min-height: 40px; } } /* ============================================================ 스켈레톤 레이아웃 컴포넌트 (design-skeleton/index.html 의 hero / card-rail / cover-placeholder / row / my-reviews / book-grid 패턴을 SPA 에 반영) ============================================================ */ /* ----- Category strip (피드 상단 카테고리 칩) ----- */ .category-strip { background: var(--bg); border-bottom: 1px solid var(--border); margin: -2rem -1.5rem 2rem; padding: 0 1.5rem; position: sticky; /* sticky 헤더 실제 높이에 맞춤: .topbar-inner height 72px + padding 상하 1rem×2(=32px) + .topbar border-bottom 1px = 105px. 구 64px 은 칩 상단이 헤더에 가려지던 값. */ top: 105px; z-index: 40; } .categories { display: flex; gap: 1.5rem; overflow-x: auto; scrollbar-width: none; padding: .5rem 0; margin: 0; list-style: none; } .categories::-webkit-scrollbar { display: none; } .cat { font-size: .9rem; color: var(--muted); padding: .5rem 4px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .15s, border-color .15s; cursor: pointer; display: inline-block; } .cat:hover { color: var(--text); text-decoration: none; } .cat.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); } /* ----- Row (섹션 — 제목 + 컨트롤 + 콘텐츠) ----- */ .row { margin-bottom: 3rem; } .row-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .row-title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text); } .row-actions { display: flex; align-items: center; gap: .5rem; } .row-more { font-size: .85rem; color: var(--muted); margin-left: .8rem; transition: color .15s; } .row-more:hover { color: var(--primary); text-decoration: none; } .chip { padding: .35rem .9rem; border: 1px solid var(--border); border-radius: 999px; font-size: .85rem; color: var(--muted); background: var(--bg-elev); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .chip:hover { border-color: var(--primary); color: var(--primary); } .chip.active, .chip-active { background: var(--primary); color: #fff; border-color: var(--primary); } /* ----- Cover placeholder (책 표지 자리) ----- */ .cover-placeholder { --cover-tone: var(--primary); background: linear-gradient(135deg, var(--cover-tone) 0%, rgba(0,0,0,.35) 100%), var(--cover-tone); background-blend-mode: normal; color: #fff; font-family: var(--font-serif); font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-cover); position: relative; overflow: hidden; background-size: cover; background-position: center; } .cover-placeholder::before { content: ""; position: absolute; left: 8%; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.16); } .cover-placeholder.has-cover { color: transparent; } .cover-placeholder.has-cover::before { display: none; } .cover-xs { width: 64px; height: 92px; font-size: .7rem; flex-shrink: 0; } .cover-sm { width: 100%; height: 200px; font-size: 1rem; } .cover-md { width: 140px; height: 200px; font-size: .85rem; flex-shrink: 0; } .cover-hero { width: 200px; height: 280px; font-size: 1.3rem; flex-shrink: 0; } /* ----- Hero (피드 상단 큐레이션) ----- */ .hero { display: grid; grid-template-columns: 1fr auto; gap: 2.5rem; align-items: center; background: linear-gradient(135deg, #F2EAD9 0%, var(--bg-elev) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; margin-bottom: 3rem; cursor: pointer; transition: box-shadow .2s; } .hero:hover { box-shadow: var(--shadow-hover); } .hero-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin: 0 0 1rem; } .hero-title { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; line-height: 1.4; margin: 0 0 1rem; color: var(--text); } .hero-meta { font-size: .92rem; color: var(--muted); margin: 0 0 1.4rem; } .hero-book { font-family: var(--font-serif); font-weight: 700; color: var(--primary); } .hero-user { color: var(--secondary); font-weight: 500; } .btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); padding: .75rem 1.5rem; font-size: .95rem; } .btn.accent:hover { background: #732222; border-color: #732222; color: #fff; } /* ----- Card rail (가로 스크롤 캐러셀) ----- */ .card-rail { display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem; margin: 0 -.5rem 1rem; padding-left: .5rem; padding-right: .5rem; } .card-rail::-webkit-scrollbar { height: 8px; } .card-rail::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 4px; } /* ----- Search header (review-search v0.59) — 헤더 검색의 결과 모드 안내 ----- */ .search-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--bg-elev); border: 1px solid var(--secondary); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; margin-bottom: 2rem; } .search-header-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; margin: 0 0 .4rem; } .search-header-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; line-height: 1.45; margin: 0; color: var(--text); } .search-header-title strong { color: var(--accent); font-weight: 700; } .search-clear { flex: 0 0 auto; color: var(--muted); text-decoration: none; font-size: .9rem; padding: .4rem .7rem; border-radius: var(--radius-sm); border: 1px solid transparent; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .search-clear:hover { color: var(--text); border-color: var(--border); background: var(--bg); } @media (max-width: 600px) { .search-header { flex-direction: column; align-items: flex-start; gap: .8rem; } .search-header-title { font-size: 1.05rem; } } /* ----- Review grid (paginated 공개 독서록) ----- */ .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; margin-bottom: 1rem; } /* ----- Review card ----- */ .review-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem; box-shadow: var(--shadow-card); transition: transform .15s, box-shadow .15s, border-color .15s; cursor: pointer; scroll-snap-align: start; display: flex; flex-direction: column; } .card-rail .review-card { flex: 0 0 280px; } .review-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--secondary); } .review-card .cover-sm { margin-bottom: 1rem; } .card-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card-snippet { font-size: .85rem; color: var(--muted); line-height: 1.6; margin: 0 0 .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .card-meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); } .card-meta .user { color: var(--secondary); font-weight: 500; } /* ----- Book card / Book grid ----- */ .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.4rem; margin-bottom: 1rem; } .book-card { cursor: pointer; transition: transform .15s; scroll-snap-align: start; } .card-rail .book-card { flex: 0 0 140px; } .book-card:hover { transform: translateY(-3px); } .book-card .cover-md { margin-bottom: .6rem; } .book-card .book-title { font-family: var(--font-serif); font-size: .92rem; font-weight: 700; margin: 0 0 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .book-card .book-author { font-size: .78rem; color: var(--muted); margin: 0 0 .25rem; } .book-card .book-rating { font-size: .78rem; color: var(--accent); margin: 0; } /* ----- My reviews list (세로 리스트, 표지 xs) ----- */ .my-reviews { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 0; list-style: none; } .my-review { display: flex; gap: 1rem; padding: 1rem 1.1rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s, box-shadow .15s, transform .15s; cursor: pointer; } .my-review:hover { border-color: var(--secondary); box-shadow: var(--shadow-card); transform: translateY(-1px); } .my-review-body { flex: 1; min-width: 0; } /* 책 제목 — 리뷰 제목 위의 eyebrow. 베이지골드 톤으로 시각적 우선순위 강조. */ .my-review-book { display: flex; align-items: center; gap: .35rem; margin: 0 0 .35rem; font-size: .92rem; font-weight: 600; color: var(--primary); letter-spacing: -0.005em; line-height: 1.35; } .my-review-book-icon { flex: 0 0 auto; font-size: .95rem; filter: saturate(0.9); } .my-review-book-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .my-review-title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; margin: 0 0 .25rem; color: var(--text); } .my-review-snippet { font-size: .85rem; color: var(--muted); margin: 0 0 .5rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .my-review-meta { display: flex; gap: .25rem .55rem; font-size: .78rem; color: var(--muted); flex-wrap: wrap; align-items: center; } .my-review-meta .comment-stat { color: var(--accent); font-weight: 600; } .my-review-meta .meta-break { flex-basis: 100%; height: 0; margin: 0; } /* ----- Badge ----- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .72rem; font-weight: 500; } .badge-public { background: rgba(107, 79, 59, 0.12); color: var(--primary); } .badge-private { background: rgba(122, 111, 96, 0.16); color: var(--muted); } .badge-mine { background: rgba(142, 43, 43, 0.12); color: var(--accent); margin-left: .5rem; } /* 본인이 남긴 한줄 평은 살짝 강조 */ .comment.mine { border-left: 3px solid var(--accent); padding-left: .8rem; background: rgba(142, 43, 43, 0.04); } .stars { color: var(--accent); letter-spacing: 1px; } /* ----- 피드 뷰 컨테이너 (사이드 패널 통합 1-column 디자인) ----- */ #view-feed .feed-grid { display: block; /* 기존 2-column 그리드 무력화 — 스켈레톤은 single-column */ } /* 반응형 — hero / row 사이즈 축소 */ /* ============================================================ v0.38 모바일 보강 — uiux-analyst P0 / P1 결과 반영 - 한줄 평 폼 세로 스택, record.html inline form 풀기, 다크 미평가 별점 대비, sticky 카테고리 top 동기화, danger 버튼 위치, share-bar 라벨 축약, visibility-segment 세로 정렬, write 의 "다른 책 선택" 버튼 모바일 폭, 다크모드 danger/hero 토큰화 ============================================================ */ /* P1-1 — 다크모드에서 별점 미평가 상태가 배경(#1B1812 / #25201A) 과 거의 동일해 별이 보이지 않는 사고 방지. 라이트(#D8C8A6) 대비 보강 톤. */ html[data-theme="dark"] .star-rating .star { color: #6E5C44; } /* P1-8 — 다크모드에서 라이트 하드코딩이었던 .danger-zone / .hero 배경을 토큰화. 라이트 톤은 폴백 값으로 그대로 유지(노출 변화 없음), 다크에서만 새 톤 적용. */ .danger-zone { background: var(--danger-zone-bg, #fffaf7); border-color: var(--danger-zone-border, #e8d6c9); } .hero { background: var(--hero-grad, linear-gradient(135deg, #F2EAD9 0%, var(--bg-elev) 100%)); } html[data-theme="dark"] { --danger-zone-bg: #2A1F1A; --danger-zone-border: #4A332B; --hero-grad: linear-gradient(135deg, #2B221A 0%, var(--bg-elev) 100%); } @media (max-width: 768px) { /* P0-3 — review.html 한줄 평 폼: 모바일에서 별점/입력/제출이 한 줄에 못 들어가 좌우로 잘리던 문제. 세로 스택으로 풀어 입력영역에 충분한 폭 확보. */ #form-comment { flex-direction: column; align-items: stretch; } #form-comment > label { min-width: 0; width: 100%; } #form-comment > label:nth-of-type(2) { flex-basis: 100%; } #form-comment button[type=submit] { width: 100%; } /* P1-3 — record-edit 등의 form-actions 에서 danger(삭제) 버튼이 primary 와 같은 줄에 붙어 실수 클릭 위험. 모바일에서 맨 아래로 분리하고 색 강도도 약간 낮춤. */ .form-actions .btn.danger { order: 99; margin-top: .6rem; opacity: .9; } /* P1-9 — write.html "다른 책 선택" 버튼이 right-align 으로 작게 잘려 터치 어려움. */ .write-fields #btnWriteChangeBook { align-self: stretch; padding: .55rem 1rem; } } /* P0-4 / P1-6 / P1-7 — 매우 좁은 화면 전용 보강 */ @media (max-width: 419px) { /* P0-4 — record.html 의 form.inline label min-width:12rem 이 320px 화면을 깨던 문제. small 힌트는 라벨 옆이 아니라 다음 줄로 분리해 폭 절약 + 가독성. */ .form.inline label { min-width: 0; } .form.inline label > small { display: block; margin-top: .15rem; font-size: .8rem; } /* P1-6 — review.html 공유 바 "이 독서록 공유" 라벨이 한 줄 차지해 320px 에서 3 버튼이 두 줄로 깨짐. 라벨은 aria-label 로 충분(share-bar 의 aria-label 존재). */ .share-bar-label { display: none; } .share-btn { font-size: .9rem; } /* P1-7 — write.html 공개 범위 세그먼티드 컨트롤. 좁은 폭에서 inline-flex 의 chip 이 줄바꿈되며 절반 폭으로 시각적으로 어색. 세로 stack 으로 명확화. */ .visibility-segment { flex-direction: column; padding: .4rem; } .visibility-option { width: 100%; } .visibility-chip { justify-content: center; width: 100%; } } @media (max-width: 767px) { .hero { grid-template-columns: 1fr; padding: 1.5rem; text-align: center; } .hero-title { font-size: 1.4rem; } .hero .cover-hero { width: 140px; height: 200px; font-size: 1rem; margin: 0 auto; } .row-title { font-size: 1.25rem; } .row { margin-bottom: 2rem; } .card-rail .review-card { flex: 0 0 240px; } /* 모바일 헤더가 grid 3행 구조 (brand/search/nav+actions) 라 실제 높이 ≈ 124~140px. 기존 100px 은 헤더에 가려져 카테고리가 묻히던 사고를 유발. 안전 마진 포함 132px. */ .category-strip { top: 132px; } } /* ============================================================ 접근성 — :focus-visible 공용 토큰 키보드 포커스에만 외곽선 표시 (마우스 클릭 시 X) — WCAG 2.4.7 ============================================================ */ .btn:focus-visible, .tab:focus-visible, .nav a:focus-visible, details > summary:focus-visible, .modal-close:focus-visible, .toggle:focus-within, .star-rating .star:focus-visible, .star-rating .star-clear:focus-visible, .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible, .modal-body input[type=text]:focus-visible, input[type=date]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible, input[type=search]:focus-visible, input[type=text]:focus-visible, input[type=url]:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } /* 라운드 컨테이너(별점/토글)는 inherit 가 0 → 명시적으로 약간 둥글게 */ .star-rating .star:focus-visible, .toggle:focus-within { border-radius: 4px; } /* ============================================================ 공개 범위(Visibility) 세그먼티드 컨트롤 review.visibility_toggle 플래그 ON 시 노출 — 도서관 톤 ============================================================ */ .visibility-row { margin-bottom: 1.4rem; } .visibility-segment { display: inline-flex; gap: .4rem; padding: .25rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; flex-wrap: wrap; } .visibility-option { cursor: pointer; } .visibility-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .visibility-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem 1rem; font-family: var(--font-serif); font-size: .92rem; color: var(--muted); border-radius: 999px; transition: background .15s, color .15s, box-shadow .15s; -webkit-user-select: none; user-select: none; } .visibility-option input:checked + .visibility-chip { background: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(44, 42, 38, 0.18); } .visibility-option input:focus-visible + .visibility-chip { outline: 2px solid var(--accent); outline-offset: 2px; } .visibility-hint { margin: .5rem 0 0; } /* ============================================================ v0.67 — review-trusted-circle - .visibility-chip 의 PREMIUM 라벨 - .trusted-audience 입력 박스 - .trusted-banner 메인 알림 바 - .trusted-list (마이페이지 카드) ============================================================ */ .visibility-chip-tag { display: inline-block; margin-left: .4rem; padding: .12rem .45rem; font-size: .68rem; letter-spacing: .04em; color: var(--accent); background: rgba(142, 43, 43, 0.08); border: 1px solid rgba(142, 43, 43, 0.25); border-radius: 999px; font-family: var(--font-sans); font-weight: 600; } /* v0.90 — 프리미엄 기능 표식 (premium-feature-badge). "조용한 도서관" 톤의 따뜻한 금빛 칩. 통계 프리미엄 카드 제목 등에 부착. */ .premium-badge { display: inline-block; margin-left: .45rem; padding: .1rem .5rem; font-size: .66rem; letter-spacing: .03em; vertical-align: middle; color: var(--primary); background: rgba(201, 166, 107, 0.18); border: 1px solid rgba(201, 166, 107, 0.55); border-radius: 999px; font-family: var(--font-sans); font-weight: 700; white-space: nowrap; } .premium-badge::before { content: "✦ "; } .trusted-audience { margin-top: .8rem; padding: .9rem 1rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); } .trusted-audience textarea { width: 100%; font-family: var(--font-sans); font-size: .92rem; resize: vertical; } .trusted-audience-hint { margin: .5rem 0 0; line-height: 1.55; } /* 메인 페이지 상단 알림 바 */ .trusted-banner { display: flex; align-items: center; gap: .8rem; padding: .85rem 1.1rem; margin: 0 0 1rem; background: #F7EFD9; border: 1px solid #E6D9B3; border-radius: var(--radius-md); color: var(--primary); text-decoration: none; font-family: var(--font-serif); transition: transform .15s, box-shadow .15s; } .trusted-banner:hover { box-shadow: 0 2px 6px rgba(107, 79, 59, 0.12); transform: translateY(-1px); } .trusted-banner-icon { font-size: 1.2rem; } .trusted-banner-text { flex: 1; font-size: .96rem; } .trusted-banner-cta { color: var(--accent); font-weight: 500; font-size: .92rem; } /* 회원 탈퇴 — 비밀번호 확인 입력 (danger zone) */ .withdraw-password-row { margin: .9rem 0 1rem; max-width: 360px; } .withdraw-password-row .form-label { display: block; margin-bottom: .35rem; } .withdraw-password-row .form-control { width: 100%; } /* ============================================================ notice-board — 공지사항 - .notice-banner 홈 상단 고정 공지 배너 (닫기 버튼 포함) - .notice-list / .notice-item 목록 - .notice-detail-* 상세 ============================================================ */ .notice-banner { display: flex; align-items: stretch; gap: .4rem; margin: 0 0 1rem; background: #F7EFD9; border: 1px solid #E6D9B3; border-radius: var(--radius-md); overflow: hidden; } .notice-banner-link { display: flex; align-items: center; gap: .8rem; flex: 1; padding: .85rem 1.1rem; color: var(--primary); text-decoration: none; font-family: var(--font-serif); } .notice-banner-link:hover { background: rgba(107, 79, 59, 0.05); } .notice-banner-icon { font-size: 1.2rem; } .notice-banner-text { flex: 1; font-size: .96rem; font-weight: 500; } .notice-banner-cta { color: var(--accent); font-weight: 500; font-size: .92rem; } .notice-banner-dismiss { border: none; background: transparent; color: var(--primary); opacity: .55; font-size: 1rem; padding: 0 1rem; cursor: pointer; } .notice-banner-dismiss:hover { opacity: 1; } .notice-head { margin: 1.5rem 0 1.2rem; } .notice-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--primary); margin: 0 0 .4rem; } .notice-lead { color: var(--muted); font-size: .96rem; margin: 0; } .notice-list { list-style: none; margin: 0; padding: 0; } .notice-item { display: block; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface, #fff); text-decoration: none; color: inherit; margin-bottom: .7rem; transition: transform .15s, box-shadow .15s; } .notice-item:hover { box-shadow: 0 2px 6px rgba(107, 79, 59, 0.12); transform: translateY(-1px); } .notice-item-pinned { background: #F7EFD9; border-color: #E6D9B3; } .notice-item-meta { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; } .notice-item-date { color: var(--muted); } .notice-item-title { font-family: var(--font-serif); font-size: 1.08rem; color: var(--primary); margin: 0; } .notice-pin-badge { display: inline-block; padding: .12rem .5rem; font-size: .72rem; font-weight: 600; color: var(--accent); background: rgba(142, 43, 43, 0.08); border: 1px solid rgba(142, 43, 43, 0.25); border-radius: 999px; font-family: var(--font-sans); } .notice-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; } .notice-back { display: inline-block; margin-bottom: .8rem; text-decoration: none; } .notice-detail-card { padding: 1.4rem 1.5rem; } .notice-detail-head { border-bottom: 1px solid var(--border); padding-bottom: .9rem; margin-bottom: 1.1rem; } .notice-detail-title { font-family: var(--font-serif); font-size: 1.45rem; color: var(--primary); margin: .3rem 0 .4rem; } .notice-detail-date { color: var(--muted); margin: 0; } .notice-detail-content { font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--ink, var(--primary)); white-space: pre-wrap; word-break: break-word; margin: 0; background: transparent; border: none; padding: 0; } /* 마이페이지 trusted 섹션 헤드 배지 */ .trusted-unread-badge { display: inline-block; margin-left: .5rem; padding: .12rem .55rem; background: var(--accent); color: var(--bg); border-radius: 999px; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; } /* 마이페이지 trusted 목록 */ .trusted-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .6rem; } .trusted-list-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); transition: box-shadow .15s, border-color .15s; position: relative; } .trusted-list-item.unread { border-left: 3px solid var(--accent); } .trusted-list-item:hover { border-color: var(--secondary); box-shadow: 0 1px 4px rgba(0,0,0,.06); } .trusted-link { display: flex; gap: .9rem; padding: .8rem 1rem; text-decoration: none; color: inherit; align-items: center; } .trusted-cover { width: 44px; height: 60px; flex-shrink: 0; object-fit: cover; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); } .trusted-cover-empty { display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--muted); } .trusted-meta { flex: 1; min-width: 0; } .trusted-title { font-family: var(--font-serif); font-weight: 500; color: var(--primary); margin-bottom: .2rem; } .trusted-sender { margin: 0; } .trusted-book { margin: .25rem 0 0; } .trusted-unread-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } @media (max-width: 768px) { .trusted-banner { padding: .7rem .9rem; gap: .55rem; } .trusted-banner-cta { display: none; } .trusted-link { padding: .7rem .8rem; gap: .7rem; } } /* ============================================================ 글쓰기 일일 한도 안내 카드 writingLimitDaily 가 있을 때만 노출. 잔여 0 이면 강조(exhausted). 메인(굵게) + 서브(자정 리셋 안내) 두 줄 구조. ============================================================ */ .write-limit-card { display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1.1rem; margin-bottom: 1.4rem; background: var(--bg-elev); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--radius-md); color: var(--text); } .write-limit-card.exhausted { border-left-width: 4px; border-left-color: var(--accent); background: rgba(142, 43, 43, 0.06); } .write-limit-card .write-limit-icon { font-size: 1.3rem; line-height: 1.4; flex-shrink: 0; } .write-limit-card .write-limit-text { display: flex; flex-direction: column; gap: .15rem; font-family: var(--font-serif); font-size: .95rem; line-height: 1.5; } .write-limit-card .write-limit-main { font-weight: 500; } .write-limit-card .write-limit-sub { font-family: var(--font-serif); } .write-limit-card.exhausted .write-limit-main { font-weight: 700; } /* ============================================================ Confirm 다이얼로그 — 도서관 톤 모달 네이티브 confirm() 대체용 (app.js / admin.js 공용) ============================================================ */ .confirm-dialog { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 1rem; } .confirm-dialog[hidden] { display: none; } .confirm-dialog .confirm-backdrop { position: absolute; inset: 0; background: rgba(44, 42, 38, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .confirm-dialog .confirm-card { position: relative; z-index: 1; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 1.6rem 1.6rem 1.3rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .28); display: flex; flex-direction: column; gap: .8rem; } .confirm-dialog .confirm-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: var(--text); margin: 0; } .confirm-dialog .confirm-message { color: var(--text); line-height: 1.7; margin: 0; font-size: .96rem; } .confirm-dialog .confirm-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .4rem; } /* ============================================================ 마이페이지 통계 (mypage-stats) — 6개 서브 카드 요약 KPI · 12개월 막대 · 장르 분포 · 별점 분포 · 최근 활동 토큰만 사용 — 다크모드는 :root 토큰 전환으로 자동 반영. ============================================================ */ .stats-section { margin: 1.6rem 0 2rem; padding: 1.4rem 1.6rem 1.6rem; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .stats-section-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; color: var(--text); margin: 0 0 .35rem; } .stats-section-lead { margin: 0 0 1.2rem; font-size: .92rem; line-height: 1.55; } /* (1) KPI 4-up ---------------------------------------------- */ .stats-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.4rem; } .stats-kpi-card { display: flex; flex-direction: column; gap: .25rem; padding: 1rem 1.1rem 1.05rem; background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--radius-sm); min-height: 5.2rem; } .stats-kpi-label { font-size: .82rem; color: var(--muted); letter-spacing: .02em; } .stats-kpi-value { font-family: var(--font-serif); font-weight: 700; font-size: 1.65rem; color: var(--primary); line-height: 1.15; word-break: keep-all; } .stats-kpi-sub { font-size: .78rem; color: var(--muted); min-height: 1.1em; font-family: var(--font-serif); } /* 전체 회원 평균 비교 부제 — KPI 본인 값 아래 한 줄로 차분히 노출. 톤 보호: 등수·랭킹·경고색 없이 dot 마커 하나만으로 시각 단서를 줌. 평균 0(전체 회원 0명) 일 때 JS 가 hidden 유지 → 어색한 "전체 평균 0" 회피. */ .stats-kpi-sub-avg { min-height: 0; letter-spacing: .005em; } .stats-kpi-avg-marker { color: var(--secondary); margin-right: .2rem; font-weight: 700; } /* (2~4) 공통 차트 카드 ---------------------------------------- */ .stats-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem 1.15rem; margin-bottom: 1.1rem; } .stats-card-title { margin: 0 0 .75rem; font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: var(--text); } .stats-empty { margin: .25rem 0 0; padding: 1.2rem 0 .6rem; text-align: center; color: var(--muted); font-family: var(--font-serif); font-size: .92rem; } /* (2) 12개월 차트 */ .stats-chart-wrap { position: relative; width: 100%; height: 220px; } .stats-chart-wrap canvas { max-width: 100%; height: 100% !important; } /* (3·4) 가로 막대 목록 */ .stats-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .stats-bar-row { display: flex; flex-direction: column; gap: .3rem; } .stats-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; } .stats-bar-label { font-family: var(--font-serif); font-size: .95rem; color: var(--text); word-break: keep-all; } .stats-bar-meta { font-size: .82rem; white-space: nowrap; } .stats-bar-track { position: relative; width: 100%; height: 10px; background: var(--border-soft); border-radius: 999px; overflow: hidden; } .stats-bar-fill { height: 100%; background: var(--secondary); border-radius: 999px; transition: width .35s ease; } .stats-bars-rating .stats-bar-label { /* 별점 라벨은 etc 폰트보다 시스템 폰트가 정렬 일관 */ font-family: var(--font-sans); letter-spacing: .04em; color: var(--primary); } /* (4-2) 다른 분들이 매긴 별점 ---------------------------------- 본인 활동 KPI 와 톤이 달라(다른 사람의 반응) 별도 카드. 기존 .stats-card / .stats-bars-rating 재사용 + KPI 상단부만 신규. */ .stats-card-lead { margin: -.35rem 0 .8rem; line-height: 1.45; } .stats-received-kpi { display: flex; align-items: baseline; gap: .9rem; padding: .35rem 0 .9rem; border-bottom: 1px dashed var(--border); margin-bottom: .85rem; flex-wrap: wrap; } .stats-received-avg { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--primary); } .stats-received-star { font-size: 1.4rem; color: var(--secondary); line-height: 1; } .stats-received-num { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; color: var(--primary); line-height: 1.05; } .stats-received-count { font-family: var(--font-serif); } /* (V50) 평균 완독 소요일 큰 숫자 + 전환율 메모 ------------------ */ .stats-bignum { font-family: var(--font-serif); font-weight: 700; font-size: 2.4rem; color: var(--primary); line-height: 1.1; margin: .3rem 0 .2rem; display: flex; align-items: baseline; gap: .3rem; } .stats-bignum-unit { font-size: 1.1rem; color: var(--muted); font-weight: 500; } .stats-conversion-note { margin: .7rem 0 0; } /* 개인 독서 목표 (reading-goal, v0.97). ⚠️ 공용 .form / .form input 규칙(세로 스택·full-width)을 타지 않도록 전용 클래스만 사용. 입력 행은 flex row 로 한 줄 유지(좁은 화면 안전 위해 wrap 허용). */ .goal-figure { display: flex; align-items: baseline; gap: .15rem; font-family: var(--font-serif); margin: .2rem 0 .7rem; } .goal-done { font-size: 2.4rem; font-weight: 700; color: var(--primary); line-height: 1; } .goal-slash { font-size: 1.5rem; color: var(--muted); margin: 0 .15rem; } .goal-target { font-size: 1.5rem; color: var(--text); } .goal-unit { font-size: 1rem; color: var(--muted); margin-left: .15rem; } .goal-bar-track { height: .7rem; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .goal-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%); border-radius: 999px; transition: width .45s ease; } .goal-caption { margin: .55rem 0 .2rem; } .goal-edit-btn { margin-top: .25rem; } .goal-form-hint { margin: 0 0 .55rem; } .goal-input-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .goal-input-row input { width: 6.5rem; flex: 0 0 auto; padding: .55rem .7rem; border: 1px solid var(--border); background: var(--field-bg); border-radius: var(--radius-sm); font: inherit; color: var(--text); } .goal-input-row input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(107, 79, 59, 0.12); } .goal-input-unit { color: var(--muted); } .goal-save-btn, .goal-cancel-btn { white-space: nowrap; } /* (5) 최근 활동 3-up ----------------------------------------- */ .stats-activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; } .stats-activity-card { display: flex; flex-direction: column; gap: .55rem; padding: .95rem 1rem 1.05rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); } .stats-activity-label { font-size: .82rem; color: var(--muted); } .stats-activity-rows { display: flex; flex-direction: column; gap: .35rem; font-family: var(--font-serif); font-size: .95rem; color: var(--text); } .stats-activity-row { display: inline-flex; align-items: center; gap: .4rem; } .stats-activity-icon { font-size: 1.05rem; line-height: 1; } /* 반응형 ------------------------------------------------------- PRD §6.3 — 1280 / 768 / 419 브레이크포인트. */ @media (max-width: 768px) { .stats-section { padding: 1.1rem 1rem 1.2rem; } .stats-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } .stats-kpi-value { font-size: 1.45rem; } .stats-chart-wrap { height: 200px; } .stats-activity-grid { grid-template-columns: 1fr; gap: .65rem; } } @media (max-width: 419px) { .stats-section { padding: 1rem .85rem 1.1rem; } .stats-kpi-grid { grid-template-columns: 1fr; } .stats-kpi-value { font-size: 1.55rem; } .stats-chart-wrap { height: 180px; } .stats-bar-head { flex-wrap: wrap; } .stats-bar-meta { font-size: .78rem; } /* 단일 컬럼이라 카드 폭이 넓어 두 줄 줄바꿈 위험은 낮지만, 부제 폰트를 미세 축소해 한 줄 보장 + 시각적 위계 유지. */ .stats-kpi-sub-avg { font-size: .76rem; line-height: 1.35; } } /* 768~420 구간은 2열 그리드 — 카드 폭이 좁아 부제 두 줄로 흐를 수 있어 별도 축소. */ @media (max-width: 768px) and (min-width: 420px) { .stats-kpi-sub-avg { font-size: .74rem; line-height: 1.3; } } /* ───────────────────────────────────────────────────────────── * v0.53 — kakao-oauth-login * 로그인 폼 아래 SNS 영역. "조용한 도서관" 톤 유지 — 카카오 노란색(#FEE500) * 사용 안 함. 베이지/브라운 변형으로 통일. * ───────────────────────────────────────────────────────────── */ .oauth-section { margin-top: 1.4rem; } .oauth-divider { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .85rem; margin: 1.3rem 0 .9rem; } .oauth-divider::before, .oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .btn-oauth { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; padding: .85rem 1rem; background: var(--bg-elev); border: 1px solid var(--secondary); color: var(--primary); font-weight: 500; text-decoration: none; border-radius: 6px; transition: background .15s, border-color .15s; } .btn-oauth:hover { background: var(--bg); border-color: var(--primary); } .btn-oauth .oauth-icon { display: inline-flex; align-items: center; color: var(--accent); } .btn-oauth-kakao .oauth-icon { color: var(--accent); } /* ============================================================ 접근성 — 모션 감소 선호 전역 대응 (WCAG 2.3.3 / prefers-reduced-motion) hover lift transform, 별점 scale, stats-bar width, quote-roller fade 등 모든 애니메이션·트랜지션을 무력화. transform 자체는 유지(레이아웃 보존), duration 만 ~0 으로 줄여 즉시 적용되게 함. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 건의함 (member-feedback, v0.76) — 회원 의견·요청 페이지 "조용한 도서관 / 따뜻한 종이 노트" 톤. 모든 색은 토큰만 사용 (다크모드 자동). ============================================================ */ .feedback-head { max-width: 760px; margin: 2rem auto 1.5rem; } .feedback-title { font-family: var(--font-serif); font-size: 1.8rem; color: var(--primary); margin: 0 0 .6rem; } .feedback-lead { color: var(--muted); line-height: 1.7; margin: 0; } .feedback-form-card { max-width: 760px; margin: 0 auto 2rem; } .feedback-section-title { font-family: var(--font-serif); font-size: 1.2rem; color: var(--primary); margin: 0 0 1rem; } .feedback-form-row { margin-bottom: 1.1rem; } .feedback-form-row .form-label { display: block; margin-bottom: .4rem; } .feedback-select, .feedback-input, .feedback-textarea { width: 100%; padding: .65rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-family: inherit; font-size: .95rem; } .feedback-textarea { resize: vertical; line-height: 1.6; } .feedback-counter { display: block; text-align: right; margin-top: .3rem; font-size: .8rem; color: var(--muted); } .feedback-form-actions { display: flex; justify-content: flex-end; } .feedback-list-section { max-width: 760px; margin: 0 auto 3rem; } .feedback-list { display: flex; flex-direction: column; gap: 1rem; } .feedback-item { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1.4rem; } .feedback-item-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; } .feedback-item-date { margin-left: auto; } .fb-cat-badge { font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; background: var(--bg); border: 1px solid var(--secondary); color: var(--primary); } .fb-status-badge { font-size: .78rem; padding: .15rem .6rem; border-radius: 999px; font-weight: 700; } .fb-status-received { background: rgba(107, 79, 59, 0.10); color: var(--primary); } .fb-status-reviewing { background: rgba(201, 166, 107, 0.22); color: #6b4f1f; } .fb-status-done { background: rgba(46, 110, 64, 0.16); color: #2e6e40; } .fb-status-hold { background: rgba(142, 43, 43, 0.12); color: var(--accent); } [data-theme="dark"] .fb-status-reviewing { color: var(--secondary); } [data-theme="dark"] .fb-status-done { color: #8fd6a3; } .feedback-item-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text); margin: 0 0 .5rem; } .feedback-item-content { color: var(--text); line-height: 1.7; margin: 0 0 .8rem; white-space: pre-wrap; } .feedback-reply { border-left: 3px solid var(--secondary); background: var(--bg); border-radius: 0 8px 8px 0; padding: .8rem 1rem; margin: .6rem 0 .8rem; } .feedback-reply-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .feedback-reply-label { font-weight: 700; color: var(--primary); font-size: .9rem; } .feedback-reply-body { margin: 0; color: var(--text); line-height: 1.7; white-space: pre-wrap; } .feedback-item-actions { display: flex; justify-content: flex-end; } .feedback-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } @media (max-width: 768px) { .feedback-head, .feedback-form-card, .feedback-list-section { padding-left: 1rem; padding-right: 1rem; } .feedback-title { font-size: 1.5rem; } } /* ============================================================ Toast UI Editor — 독서록 쓰기(write) 에디터 프로토타입 (v0.78) 기존 .rte 래퍼(보더/패딩/높이)가 TUI 자체 UI 와 이중으로 겹치지 않도록 write 페이지에 한해 무력화. ============================================================ */ body[data-page="write"] #writeReviewEditor, body[data-page="write"] #writeBookContentEditor, body[data-page="record-edit"] #recordReviewEditor, body[data-page="record-edit"] #recordBookContentEditor { border: 0; padding: 0; min-height: 0; height: auto; background: transparent; } body[data-page="write"] .toastui-editor-defaultUI, body[data-page="record-edit"] .toastui-editor-defaultUI { border-radius: 8px 8px 0 0; /* 하단은 리사이즈 핸들(.tui-resize-handle)이 마감 */ border-color: var(--border); } /* 입력 영역 높이 조절 핸들 — JS(attachEditorResizer)가 .toastui-editor 하단에 삽입. 드래그하면 editor.setHeight() 로 에디터 "전체" 높이가 조절됨. */ .tui-resize-handle { height: 14px; cursor: ns-resize; background: var(--bg-elev); border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; display: flex; align-items: center; justify-content: center; touch-action: none; } .tui-resize-handle::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--secondary); opacity: .65; } .tui-resize-handle:hover::before { opacity: 1; }