/* 디자인 토큰(:root)은 tokens.css로 옮겼다 — 값의 단일 소스다. 값이 두 벌이
되면 한쪽이 조용히 낡는다(예전에 별도 저장소로 분리된 관리자 콘솔의
--ink-faint가 대비 미달인 옛 값으로 남아 있었다).
index.html이 이 파일보다 먼저 tokens.css를 링크한다. */
*{box-sizing:border-box;}
html{
background:var(--paper);
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
margin:0;
min-height:100%;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
-webkit-font-smoothing:antialiased;
/* 한국어는 단어 단위로만 줄바꿈 — "보여 / 요."처럼 단어가 찢어지는
줄바꿈이 화면을 급해 보이게 한다는 피드백(2026-07-18). 클래스마다
keep-all을 다시 걸지 말 것(전역이 이미 담당). overflow-wrap은
띄어쓰기 없는 긴 문자열(URL·코드)이 칸을 밀고 나가는 것만 막는
안전핀. */
word-break:keep-all;
overflow-wrap:break-word;
}
/* 입력 글꼴 통일(2026-07-18): 쓰는 자리(입력·텍스트영역·셀렉트)는 전부
세리프 — 책 제목·독후감은 세리프인데 검색창·일정 폼·한 줄 입력은
산세리프라 화면마다 섞여 보인다는 피드백. 크기·굵기는 각자 유지,
글씨체만 한 결로.
특이도 주의(2026-08-02): 여기서 (0,3,1)을 받는 건 :not 셋이 붙은 input
가지뿐이다. textarea·select 가지는 (0,0,1)이라 어떤 클래스 규칙에도 진다 —
예전 주석은 셋 다 이긴다고 적어 뒀고, 그 전제 때문에 #chat-input(textarea)과
.settings-provider-select·.exchange-control(select)이 산세리프로 새 있었다.
그래서 규칙을 뒤집었다: **입력 요소의 개별 규칙은 font-family를 아예 선언하지
않는다.** 글꼴은 이 한 줄만 정한다(test/typography.test.js가 지킨다). */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select{font-family:var(--serif);}
/* 조작(버튼·탭·칩·필터)은 전부 산세리프(branding/marginalia-branding.md §3.1).
입력 요소와 같은 모양으로 전역 한 줄이 바닥을 깐다 — 이유도 같다. 버튼은
UA 스타일시트가 `font: 400 13.333px Arial`을 얹어서 body의 --sans를 상속받지
않는다. 그래서 클래스에서 font-family를 빠뜨리면 조용히 Arial로 나가고,
선언이 없으니 grep으로도 안 보인다. 실제로 .library-share-btn과
.placard-review-btn이 그렇게 새고 있었다(2026-08-03, npm run scan:render).
둘 다 구경 모드에선 아이콘 옆 글자가 보이는 버튼이라 첫 화면에 그대로 나갔다.
이 줄은 (0,0,1)이라 개별 규칙의 var(--sans) 선언에 지므로 기존 선언은
그대로 둬도 무해하다 — 빠뜨린 자리만 이 줄이 받는다. */
button, [role="button"]{font-family:var(--sans);}
.app{
max-width:920px;
margin:0 auto;
padding:
calc(clamp(36px, 23px + 3.4vw, 56px) + env(safe-area-inset-top))
calc(clamp(20px, 15px + 1.4vw, 28px) + env(safe-area-inset-right))
calc(clamp(40px, 32px + 2vw, 64px) + env(safe-area-inset-bottom))
calc(clamp(20px, 15px + 1.4vw, 28px) + env(safe-area-inset-left));
box-sizing:border-box;
/* 로그인 직후 데이터가 아직 없을 때는 콘텐츠가 뷰포트보다 짧을 수 있는데,
iOS Safari는 페이지가 스크롤 안 될 만큼 짧으면 하단 고정(position:fixed;
bottom:0) 요소를 주소창 높이를 감안한 위치로 잘못 계산해 탭바가 화면
맨 아래에서 살짝 뜬 것처럼 보인다. 데이터가 로드돼 콘텐츠가 늘어나
스크롤 가능해지면 그제서야 재계산되어 정상화된다 — 처음부터 뷰포트를
꽉 채워서 이 재계산 타이밍에 좌우되지 않게 한다. */
min-height:100vh;
min-height:100dvh;
display:none;
}
/* ---------- Boot spinner ---------- */
/* 로그인 상태 확인 + Firebase SDK 로딩이 끝날 때까지는 login-view/.app이
둘 다 display:none이라 화면이 완전히 비어 보인다. 그 사이를 채우는
최소한의 로딩 표시 — JS 없이 HTML만으로 첫 페인트부터 바로 보이고,
로그인/앱 화면 중 하나가 뜨는 순간 app.js가 hidden 처리한다. */
.boot-spinner{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:var(--paper);
z-index:1;
}
.boot-spinner[hidden]{display:none;}
.boot-spinner-ring{
width:28px;
height:28px;
border:2.5px solid var(--line);
border-top-color:var(--ink-soft);
border-radius:50%;
animation:boot-spin 0.8s linear infinite;
}
@keyframes boot-spin{ to{ transform:rotate(360deg); } }
/* ---------- Login ---------- */
.login-view{
min-height:100vh;
min-height:100dvh;
display:flex;
align-items:center;
justify-content:center;
padding:calc(24px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
}
.login-box{
max-width:360px;
width:100%;
text-align:center;
padding: clamp(28px, 20px + 2vw, 40px) clamp(24px, 19px + 1.4vw, 32px);
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--card);
}
.login-title{font-family:'Cormorant Garamond', var(--serif); font-size:clamp(26px, 22px + 1.4vw, 32px); font-weight:500; letter-spacing:0.01em; margin-bottom:2px;}
/* 부제: marginalia의 뜻 한 줄이 아이브로우·설명 문단을 대체 — 워드마크 철자 반복 금지 */
.login-sub{font-family:var(--serif); font-size:12px; color:var(--ink-faint); letter-spacing:0.02em; margin:0;}
.login-promise{
margin:22px 0 24px; font-family:var(--serif); font-size:14px;
line-height:1.8; color:var(--ink-soft);
}
.login-btn{
display:block;
width:100%;
max-width:220px;
margin:0 auto;
padding:9.5px 16px;
border-radius:var(--radius);
border:1px solid var(--moss);
background:var(--moss);
color:var(--paper);
font-family:var(--sans);
font-size:12.5px;
font-weight:600;
cursor:pointer;
}
.login-btn:disabled{opacity:0.5; cursor:default;}
/* 공유·초대로 온 방문자에게만 뜨는 조용한 맞이 — 바로 아래 예시 서재 링크로
이어준다. 로그인 버튼과 각주 사이 여백에 세리프 한 줄로 낮게 둔다. */
.login-welcome{
margin:18px 0 0; font-family:var(--serif); font-size:13px;
line-height:1.7; color:var(--ink-soft);
}
.login-welcome[hidden]{display:none;}
/* 새 방문자용 조용한 미리보기 링크 — 주 동작(로그인) '위'에 놓여 '둘러보고
시작'을 잇는다(2026-08-07). 밑줄을 떼고 여백으로 떼어 채운 로그인 버튼과
경쟁하지 않게 낮춘다. 색은 --card 위에서 AA를 지나는 --ink-soft를 유지
(더 옅게는 a11y 대비 검사로 확인). */
.login-demo-btn{
position:relative;
display:block; margin:18px auto 16px; padding:0; border:0; background:none;
font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);
cursor:pointer;
}
/* 담백한 밑줄 링크의 모양은 그대로 두고, 손끝 히트 영역만 44px로 넓힌다
(보이지 않는 ::after — 실제 태핑 편의는 올리되 시각은 안 건드린다). */
.login-demo-btn::after{
content:''; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
width:100%; min-width:88px; height:44px;
}
/* 동의 문구는 링크까지 한 줄 — 좁은 화면에선 vw로 글자를 줄여서 줄바꿈을 막는다 */
/* 구경(예시 서재) 모드 — 진입은 두 곳: 로그인 화면 맨 아래 조용한 링크와
서재 빈 화면의 예시 링크. demo-only는 데모에서만 보이고, 쓰기 진입점은 일괄 숨긴다 */
.demo-only{display:none;}
body.demo-mode .demo-only{display:block;}
.demo-banner{
display:none; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap;
padding:10px 12px 10px 14px; margin-bottom:18px;
background:var(--moss-soft); border-radius:var(--radius);
font-family:var(--sans); font-size:12px; color:var(--moss-ink);
}
body.demo-mode .demo-banner{display:flex;}
.demo-banner span{flex:1 1 200px; text-align:left; line-height:1.5; text-wrap:balance;}
/* 배너의 돌아가기는 밑줄 링크가 아니라 눌리는 버튼으로 — 문장에 묻히지 않게.
흰 카드 배경은 연녹 배너 위에서 혼자 떠 보인다고 반려됨(2026-07-18) —
진한 모스 솔리드로 배너 안에 앉힌다. */
.demo-banner button{
flex-shrink:0; padding:5px 12px; font-family:var(--sans); font-size:12px;
font-weight:600; color:var(--paper); background:var(--moss);
border:none; border-radius:var(--radius); cursor:pointer;
/* 내 서재로 돌아가기(#demo-exit-btn)는 히트영역 규칙에서 inline-flex라 text-align이
안 먹는다 — 두 버튼 글씨를 가운데로 두려면 justify-content로 맞춘다. */
justify-content:center;
}
.demo-banner button:active{opacity:0.8;}
.demo-banner-actions{display:flex; gap:8px; flex-shrink:0;}
/* '둘러보기'는 보조라 채운 모스가 아니라 조용한 고스트로 — 두 버튼이 안 다투게 */
.demo-banner .demo-banner-ghost{background:transparent; color:var(--moss-ink); border:1px solid var(--moss);}
/* 방침·약관 변경 고지 배너(lib/policy-notice.js) — 헤더 아래 조용한 모스 틴트 한 줄.
동작 둘을 같은 텍스트 버튼 형태로 통일하고(읽어보기=모스, 닫기=옅은 잉크) 오른쪽 정렬. */
.policy-notice{
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
padding:10px 12px 10px 14px; margin-bottom:18px;
background:var(--moss-bg); border-radius:var(--radius);
font-family:var(--sans); font-size:13px; color:var(--ink);
}
/* hidden 속성이 위 display:flex를 이기게 — 안 그러면 app.js가 감추기 전(또는 조건이
안 맞을 때)에도 배너가 뜬다(scan:render가 잡은 자리). */
.policy-notice[hidden]{display:none;}
.policy-notice-text{flex:1 1 200px; line-height:1.5;}
.policy-notice-actions{display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto;}
.policy-notice-btn{
font-family:var(--sans); font-size:13px; line-height:1;
padding:7px 10px; border-radius:var(--radius); border:0; background:transparent;
cursor:pointer; white-space:nowrap; text-decoration:none;
}
.policy-notice-btn.primary{color:var(--moss-ink); font-weight:600;}
.policy-notice-btn.ghost{color:var(--ink-soft);}
.policy-notice-btn:hover{background:rgba(35,40,33,0.05);}
.policy-notice-btn:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 모임 탭은 예시 데이터로 통째로 열어두되, 쓰기 진입점만 골라서 숨긴다 —
만들기/가입/초대, 일정 저장, 한 줄 남기기, AI 추천 호출. 교환독서 설정 탭과
딥다이브(나를 더 읽는 대화)는 읽기 전용으로 노출한다(아래 별도 규칙). */
body.demo-mode #policy-notice,
body.demo-mode .notif-wrap,
body.demo-mode .header-settings-btn,
body.demo-mode #settings-feedback-btn,
body.demo-mode #feedback-modal-overlay,
body.demo-mode .social-nickname-nudge,
body.demo-mode .social-actions,
body.demo-mode .group-card-ghost,
body.demo-mode .group-space-actions,
body.demo-mode .group-space-footer,
body.demo-mode #member-space-remove,
body.demo-mode .group-card-handle,
body.demo-mode .exchange-note-form,
body.demo-mode .exchange-note-row-invite,
body.demo-mode #exchange-note-open-btn,
body.demo-mode .margin-note-open,
body.demo-mode .placard-margin-del,
body.demo-mode .handoff-card-actions,
body.demo-mode .handoff-gift-overlay,
body.demo-mode #group-recommend-btn,
body.demo-mode .exchange-setup-actions,
body.demo-mode #review-generate-btn,
body.demo-mode #review-galmuri,
body.demo-mode #review-galmuri-preview,
body.demo-mode #review-edit-btn,
body.demo-mode #review-refine-btn,
body.demo-mode #passages-merge-btn,
body.demo-mode .passage-share,
body.demo-mode .taste-report-refresh,
body.demo-mode .taste-report-start-inline,
body.demo-mode .wishlist-remove-btn,
body.demo-mode #settings-recover-btn,
body.demo-mode #settings-recover-deleted-btn,
body.demo-mode #settings-delete-account-btn,
body.demo-mode #milestone-modal-save,
body.demo-mode .rec-actions{display:none !important;}
/* 데모의 일정 패널은 날짜 선택과 입력 화면까지 체험하고, 저장만 코드에서 막는다. */
/* 교환독서 설정 탭도 같은 결로 읽기 전용 — 시작일·주기·책 검색을 얼리고
순서 드래그 손잡이도 잠근다(저장 버튼은 위 목록에서 이미 숨긴다). 쓰기
핸들러 자체가 데모에선 배선되지 않는다(views/groups.js). */
body.demo-mode .exchange-config-row .exchange-control,
body.demo-mode .exchange-books-subsection .exchange-control,
body.demo-mode .exchange-join-input,
body.demo-mode .exchange-order-handle{pointer-events:none;}
/* 딥다이브 대화는 데모에서 예시 대화를 읽기 전용으로 보여준다 — 입력창(컴포저)을
접어 '모습'만 남긴다(대화 내용은 lib/demo-seed.js DEMO_DEEP_DIVE). */
body.demo-mode #chat-view .chat-composer{display:none;}
/* ---------- AI 꺼짐 상태 (키 미등록 — 유료화 후엔 미구독) ----------
AI를 안 쓰는 계정에는 AI 표면을 통째로 접는다. 눌러야 "키를 등록해야…"
에러가 뜨던 버튼들을 아예 보이지 않게 — 발견 경로는 취향 탭의 초대
한 줄(.ai-invite)·설정의 키 섹션·독후감 화면의 메모 티저(.review-ai-invite,
2026-08-13). 스위치는 app.js aiEnabled()
하나라서, 유료화 때 그 함수의 조건만 구독 여부로 바꾸면 된다. */
body.ai-off .ai-surface,
body.ai-off #review-generate-btn,
body.ai-off #review-galmuri,
body.ai-off #review-galmuri-preview,
body.ai-off #review-refine-btn,
body.ai-off #settings-retag-row{display:none !important;}
/* '함께 읽을 책'(.exchange-subsection--recommend)은 ai-off라고 통째로 숨기지 않는다 —
키 없을 때 groups.js가 버튼·설명 대신 'AI 연결' 초대(.ai-connect-note)를 그려
연결 진입점이 되게 한다(예전엔 여기 숨겨 모임 탭엔 연결 수단이 없었다). */
/* 초대 한 줄 — 조용한 세리프, 링크 하나 */
.ai-invite{
display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
font-family:var(--serif); font-size:13px; color:var(--ink-faint); line-height:1.8;
margin-top:46px; margin-bottom:28px;
}
.ai-invite span{flex:1; text-wrap:balance;} /* 마지막 줄이 짧게 떨어지지 않게 */
.ai-invite[hidden]{display:none;}
/* 초대 한 줄이 '읽은 나날'과 'AI 묶음' 사이에 온다. AI-on 계정에선 초대가
display:none이라 .dash-group + .dash-group가 못 매칭한다(초대가 사이에 낌) —
그래서 읽은 나날↔취향 리포트 구분선·간격을 이 규칙이 직접 낸다. AI-off면
.ai-surface가 통째로 display:none이라 이 구분선도 함께 사라진다.
값은 아래 .deep-dive-block(§취향 리포트↔대화)과 똑같이 맞춰 섹션 간격을 통일. */
.ai-invite + .dash-group{margin-top:38px; border-top:1px solid var(--line); padding-top:34px;}
/* 키 없는 AI 기능의 빈 상태 — 문구 속 'AI 연결'이 곧 링크(별도 버튼 없이 중복 제거).
.ai-invite(섹션 사이 띠)와 달리 이건 결과가 뜨던 자리를 대신하는 좌측 한 줄이다. */
.ai-connect-note{
font-family:var(--serif); font-size:13px; color:var(--ink-faint); line-height:1.9;
margin:0; /* 줄바꿈은 전역 word-break:keep-all이 맡는다 — 한 줄에 들어가면
한 줄로, 넘칠 때만 어절 경계에서 */
}
/* 서체는 var(--serif) — 이 링크는 홀로 선 컨트롤이 아니라 세리프 문장 속 낱말이라
산세리프(버튼 관례)면 어절 안에서 튄다. 문맥이 서체를 정하는 인라인 링크다. */
.ai-connect-link{
font-family:var(--serif); font-size:inherit; font-weight:500; color:var(--moss);
background:none; border:none; padding:0; cursor:pointer;
text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--moss) 45%, transparent);
white-space:nowrap; /* 'AI 연결'이 어절 중간에서 쪼개지지 않게 */
}
.ai-connect-link:hover,
.ai-connect-link:focus-visible{border-bottom-color:var(--moss);}
/* 서재 빈 화면의 예시 서재 진입 링크 — empty-state의 세리프·옅은 잉크 톤을 잇는다 */
.empty-demo-btn{
display:block; margin:20px auto 0; background:none; border:none; padding:0;
font-family:var(--sans); font-size:13px; color:var(--ink-soft);
text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}
/* "로그인 시 …" 동의 문구는 로그인 버튼의 각주 — 버튼 바로 아래 한 줄로 둔다.
예전엔 nowrap으로 한 줄을 강제하고 글자를 clamp로 줄였는데, 360px에서
9.2px까지 작아지고 320px에선 링크가 카드 밖으로 잘렸다(2026-07-28 실측).
한 줄은 폰트가 아니라 문장 길이로 맞춘다 — 카드 안쪽이 360px 화면에서
262px이고 지금 문장이 11px에서 229px이라 한 줄로 들어간다.
nowrap은 걸지 않는다: 그보다 좁은 화면에선 잘리는 대신 두 줄로 흐르는 게 낫다.
문구를 늘릴 일이 생기면 이 폭부터 다시 재고 늘릴 것. */
.login-privacy-note{
font-size:11px; color:var(--ink-faint); line-height:1.65; margin-top:12px;
}
.login-privacy-note a{color:var(--moss); text-underline-offset:3px;}
/* 로그인 실패·부팅 지연 안내 — 개인정보 각주 아래·데모 링크 위. 각주(11px
ink-faint)보다 또렷하게 읽히도록 13px ink-soft로, 하지만 팔레트에 에러색이
없듯 요란하게 붉히지 않는다(문구가 뜻을 나른다). 비어 있으면 자리를 접어
각주와 데모 링크가 제 간격으로 붙게 한다 — 안내가 뜰 때만 그만큼 벌어진다. */
.login-status{margin-top:16px; font-size:13px; line-height:1.6; color:var(--ink-soft);}
.login-status:empty{margin-top:0;}
/* 카드 안에 또 박스를 두지 않는다 — 안내는 카드의 문구·버튼으로 그대로
흐르게 해서 일반 로그인 화면과 같은 담백한 결을 유지한다(테두리·배경 없음). */
.inapp-notice{text-align:center;}
/* 강제 줄바꿈 없이 흘려보내되, balance로 줄 길이를 고르게 — 한 단어만 다음
줄로 떨어지거나 문장이 어중간하게 잘려 보이는 걸 막는다(keep-all과 함께). */
.inapp-notice-desc{font-size:13px; color:var(--ink); line-height:1.65; margin:0 0 14px; text-wrap:balance;}
/* 일반 로그인 버튼(.login-btn)과 같은 크기·정렬 — 인앱 화면이 로그인 화면과 통일되게 */
.inapp-notice-btn{
display:block;
width:100%;
max-width:220px;
margin:0 auto;
padding:9.5px 16px;
border-radius:var(--radius);
border:1px solid var(--moss);
background:var(--moss);
color:var(--paper);
font-family:var(--sans);
font-size:12.5px;
font-weight:600;
cursor:pointer;
}
.inapp-notice-btn:active{opacity:0.8;}
/* 평소엔 비어 있어(숨김) 문구+버튼만 남고, 링크 복사 후 성공 안내가 들어올 때만 뜬다 */
.inapp-notice-hint{font-size:11px; color:var(--ink-soft); line-height:1.5; margin:10px 0 0;}
.inapp-notice-hint:empty{display:none;}
/* ---------- Hero ---------- */
.hero{
border-bottom:1px solid var(--line);
padding-bottom:12px;
margin-bottom:22px;
}
.hero-eyebrow{
font-size:11px;
letter-spacing:0.18em;
color:var(--moss);
font-weight:600;
margin-bottom:10px;
}
/* 제목 행이라 좌측 정렬이 의도다 — 액션 행이 아니다(우아함 헌장 B1/C1). */
.hero-title-row{
display:flex;
align-items:baseline;
gap:16px;
flex-wrap:wrap;
}
/* 종·설정·콘솔 묶음은 데스크톱에서 투명하다 — 감싼 div가 없는 것처럼 세 아이콘이
그대로 .hero-title-row의 flex 자식이 된다(폰에서만 실제 박스로 살아난다). */
.hero-actions{display:contents;}
.hero h1{
font-family:'Cormorant Garamond', var(--serif);
font-size:clamp(38px, 32px + 1.6vw, 46px);
font-weight:500;
margin:0;
letter-spacing:0.01em;
}
/* 워드마크: Marginalia — 뒷부분만 이탤릭 + 액센트 */
.wordmark em{ font-style:italic; color:var(--moss); }
.hero-count-inline{
display:flex;
align-items:baseline;
gap:6px;
}
/* display:flex가 [hidden]의 기본 display:none을 이긴다(.library-toolbar[hidden]와 같은
함정). 완독 0일 때 '0 권의 기록'을 감추려면(views/library.js renderLibrary) 명시한다. */
.hero-count-inline[hidden]{display:none;}
.hero-count-inline .num{
font-size:20px;
color:var(--ink);
font-family:var(--serif);
}
.hero-count-inline .label{
font-size:12px;
letter-spacing:0.05em;
color:var(--ink-faint);
}
.sync-status{font-size:11px;color:var(--moss);margin-top:8px;min-height:14px;}
.notif-wrap{position:relative; margin-left:auto;}
.notif-bell{
position:relative;
background:none;
border:none;
color:var(--ink-soft);
cursor:pointer;
padding:4px;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* 설정 진입점 — 탭이 아니라 알림 종 옆. 설정은 상시 목적지가 아니라
가끔 들르는 풀스크린 화면이라 헤더 아이콘이 자리에 맞다 */
.header-settings-btn{
background:none;
border:none;
color:var(--ink-soft);
cursor:pointer;
padding:4px;
display:inline-flex;
align-items:center;
justify-content:center;
}
.header-settings-btn:hover{color:var(--moss);}
.notif-dot{
position:absolute;
top:2px; right:2px;
width:8px; height:8px;
border-radius:50%;
background:var(--moss);
}
.notif-panel{
position:absolute;
top:calc(100% + 10px);
right:0;
z-index:30;
width:min(360px, calc(100vw - 32px));
display:flex;
flex-direction:column;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow-card);
opacity:0;
transform:translateY(-8px);
pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.notif-panel.open{opacity:1; transform:translateY(0); pointer-events:auto;}
.notif-item{
padding:14px 16px;
display:flex;
flex-direction:column;
gap:10px;
}
.notif-item[hidden]{display:none;}
/* 구분선은 항목마다 위쪽에 두되 패널에서 처음 '보이는' 항목만 뺀다
(updateNotifState가 .notif-first를 붙인다). 인접 선택자(+)는 #margin-banner
래퍼와 [hidden] 형제 때문에 부유하는 hairline/누락 구분선이 생겼다. */
.notif-item{border-top:1px solid var(--line);}
.notif-item.notif-first{border-top:none;}
.notif-empty{padding:14px 16px; font-size:11px; color:var(--ink-faint);}
.notif-empty[hidden]{display:none;}
.notif-dot[hidden]{display:none;}
.notif-item-text{font-size:11px; color:var(--ink-soft); line-height:1.45;}
.notif-item.tip .notif-item-text strong{color:var(--moss);}
.notif-item-btn{
align-self:flex-end;
border:1px solid currentColor;
border-radius:var(--radius-pill);
background:transparent;
padding:6px 14px;
font-family:var(--sans);
font-size:12px;
font-weight:600;
cursor:pointer;
white-space:nowrap;
}
.notif-item.tip .notif-item-btn{color:var(--moss);}
.margin-one{position:relative;}
.margin-one .notif-item-text{padding-right:16px;} /* 우상단 × 자리 */
/* 설치 안내도 같은 × 닫기를 쓴다(여백 알림과 같은 패턴) — 안 닫으면 미설치
사용자에게 벨 점이 영영 켜져 있다. margin-one 클래스는 뜻이 안 맞아 재사용 안 하고
같은 위치 규칙만 명시한다. */
#install-banner{position:relative;}
#install-banner .notif-item-text{padding-right:16px;}
.notif-item-dismiss{
position:absolute; top:8px; right:10px;
border:0; background:transparent;
padding:4px; line-height:1;
font-size:16px; color:var(--ink-faint);
cursor:pointer;
}
.boot-error-banner{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
position:sticky;
top:0;
z-index:50;
background:var(--ink);
color:var(--paper);
padding:calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
font-family:var(--sans);
font-size:12.5px;
line-height:1.5;
}
.boot-error-banner[hidden]{display:none;}
.boot-error-banner button{
flex-shrink:0;
background:var(--paper);
color:var(--ink);
border:none;
border-radius:var(--radius-pill);
padding:6px 14px;
font-family:var(--sans);
font-size:12px;
font-weight:600;
cursor:pointer;
}
.boot-error-banner button:disabled{opacity:0.6; cursor:default;}
.settings-link-btn{
background:none;
border:none;
padding:0;
font-family:var(--sans);
font-size:12px;
color:var(--ink-faint);
cursor:pointer;
text-decoration:underline;
text-underline-offset:2px;
white-space:nowrap;
flex:0 0 auto;
}
.settings-link-btn:disabled{opacity:0.4; cursor:default;}
.settings-link-btn[hidden]{display:none;}
.settings-list{display:flex; flex-direction:column;}
/* 설정 맨 아래 조용한 링크 줄 — 설치 안내처럼 "가끔 찾는" 항목은 별도
섹션(row)으로 세우면 설정 흐름을 끊어서, 푸터로 수납한다 */
.settings-footer-links{display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-top:56px;}
/* 둘째 줄 — 동작 둘(설치 안내·의견)과 버전이 한 세트. 버전이 10px로 링크(11px)보다
작아서 baseline으로 맞춘다(center로 맞추면 글자 밑선이 어긋나 보인다). */
.settings-footer-meta{display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:8px 20px; margin-top:16px;}
/* 버전 — 푸터에서 가장 조용하게(링크보다 더 옅게). 비어 있으면 자리 안 만든다. */
.settings-version{margin:0; font-family:var(--sans); font-size:10px; color:var(--line);}
.settings-version:empty{display:none;}
.settings-footer-link{
background:none; border:none; padding:0; cursor:pointer;
font-family:var(--sans); font-size:11px; color:var(--ink-faint); text-decoration:none;
}
/* 섹션(.settings-row)은 넉넉히 띄우고 hairline으로 가른다. 한 섹션 안에 여러 항목
(.settings-item)이 들어가고, 항목 사이는 촘촘히 둔다 — 섹션>항목 두 단 리듬. */
.settings-row{padding:30px 0; border-bottom:1px solid var(--line);}
.settings-row:last-child{border-bottom:none; padding-bottom:0;}
.settings-item + .settings-item{margin-top:24px;}
/* ④ 정리 섹션 — 구조·글씨체는 다른 섹션과 통일한다(§섹션 구조 통일: 한 섹션만 다른
모양을 만들지 않는다). 파괴적 동작의 '조용함'은 글씨 크기를 낮춰서가 아니라 맨 아래
배치 + 무채색 버튼(아래)만으로 신호한다. 그래서 첫 줄·항목 간격 오버라이드를 두지
않고 기본(.settings-primary 세리프 17px, 항목 간격 24px)을 그대로 쓴다. */
/* 설정 행의 타입 역할은 4개뿐 — 라벨(웜그레이 산세리프 11px), 첫 줄(세리프 17px),
보조 설명(12.5px), 링크(12.5px 600, 색만 모스/저강도 구분).
라벨은 구조 눈썹이라 액센트(모스) 자리가 아니다 — 앱의 다른 모든 눈썹
(round-summary-label·year-shelf-label·독후감 블록)과 같은 --ink-faint로 통일
(2026-08-27, 온보딩·연간결산 눈썹을 낮춘 08-13 방향을 이어간다). */
.settings-row-label{
display:flex;
align-items:center;
gap:8px;
font-family:var(--sans);
font-size:11px;
font-weight:600;
letter-spacing:0.1em;
color:var(--ink-faint);
margin-bottom:12px;
}
.settings-primary{font-family:var(--serif); font-size:17px; font-weight:500; color:var(--ink); line-height:1.5;}
.settings-primary strong{font-weight:600;}
/* "담아둔 책 / 30권"처럼 단위 중간에서 꺾이지 않게 — 줄바꿈은 · 구분점에서만 */
.settings-primary .stat-unit{white-space:nowrap;}
.settings-row-main{flex:1; min-width:0;}
.settings-row-desc{font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:5px 0 0;}
.settings-row-desc a{color:var(--moss);}
.settings-row-desc strong{color:var(--ink); font-weight:600;}
.settings-data-row{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.settings-data-row.nickname-editing{align-items:center;}
.settings-data-row[hidden]{display:none;}
.settings-data-row .settings-row-actions{margin-top:6px;}
/* 설정 동작은 밑줄 없는 조용한 모스 텍스트 — 밑줄이 나란히 쌓이면(변경 해제 /
백업 복원) 소음이 된다. 모스는 종이 위 4.96:1로 본문 대비 통과(tokens.css).
밑줄은 hover/active에서만 돌아온다. 스코프를 #settings-view로 좁혀 챗버블이
재사용하는 전역 .settings-link-btn(밑줄 링크)은 안 건드린다. */
#settings-view .settings-link-btn{font-size:12.5px; font-weight:600; text-decoration:none; color:var(--moss);}
#settings-view .settings-link-btn:hover,
#settings-view .settings-link-btn:active{text-decoration:underline; color:var(--moss);}
/* ④ 정리 섹션의 동작(지우기·되돌리기·삭제)은 모스로 물들이지 않는다 — 초록은
'가라'는 신호라 파괴적 동작에 안 맞는다. 붉게 칠하지도 않는다(현 브랜드는
파괴를 색이 아니라 격리·confirm으로 다룬다). 같은 저강도 무채색으로 조용히. */
#settings-view .settings-row--quiet .settings-link-btn{color:var(--ink-faint);}
#settings-view .settings-row--quiet .settings-link-btn:hover,
#settings-view .settings-row--quiet .settings-link-btn:active{color:var(--ink-soft);}
.settings-key-form{margin-top:4px;}
.settings-key-form[hidden]{display:none;}
.settings-key-form .settings-row-desc{margin:0 0 14px;}
/* 키 발급 3스텝 안내(views/settings.js PROVIDER_INFO) — 발급처 링크 한 줄을 대신한다.
desc(#settings-key-desc)는 이 ol/p를 담는 div다. 문구·색은 settings-row-desc와 같은 결. */
.key-steps{margin:0 0 14px; padding:0; list-style:none; display:grid; gap:6px;}
.key-steps li{font-size:12.5px; color:var(--ink-soft); line-height:1.55; display:flex; gap:8px;}
.key-steps li .n{color:var(--moss); font-weight:600; flex:0 0 auto;}
.key-steps a{color:var(--moss);}
.key-note{font-size:12.5px; color:var(--ink-faint); line-height:1.55; margin:0 0 14px;}
/* 무료 온램프를 폼 첫 줄로 올린다(gemini, 2026-08-24 A안). "무료"만 모스로 눌러
앞세우고, 발급 단계는 아래 .key-steps가 잇는다. 유료 제공자는 이 줄 없이 .key-note만. */
.key-lead{font-size:13px; color:var(--ink); line-height:1.55; margin:0 0 12px;}
.key-lead strong{color:var(--moss-ink); font-weight:600;}
/* 접힌 요약 desc가 none 상태에서 "무료"를 비출 때만 모스로(다른 상태는 기본 색). */
.settings-row-desc--free{color:var(--moss-ink);}
#settings-status{display:block; margin-top:10px;}
.settings-key-field{display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:1;}
.settings-key-field[hidden]{display:none;}
.settings-key-field input{flex:1; min-width:100px; margin-bottom:0;}
#settings-nickname-field{margin-top:10px;}
.settings-provider-select{
flex:0 0 auto;
box-sizing:border-box;
padding:10px 12px;
border:1px solid var(--line);
border-radius:var(--radius);
font-size:13px;
line-height:1.5;
background:var(--paper);
color:var(--ink);
cursor:pointer;
}
.settings-provider-select:focus{outline:none; border-color:var(--moss);}
.settings-provider-select:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.settings-key-field .review-keyword-input{background:var(--paper);}
.settings-row-actions{display:flex; align-items:center; justify-content:flex-end; gap:14px; flex:0 0 auto;}
.settings-data-status{font-size:12px; color:var(--ink-faint);}
/* ---------- 모달 오버레이(여섯 종 공통) ---------- */
/* confirm · invite · feedback · share-card · milestone · recover 여섯이 **선언 단위로
같은 값**이었다(2026-08-31 대조). 흩어져 있으면 딤 농도 하나를 손볼 때 고칠 자리가
여섯이다. 여기 모으는 것은 **평상시 공통값뿐**이고, 폰 바텀시트(align-items:flex-end)
처럼 조건이 다른 것은 각자의 미디어쿼리에 그대로 남는다. */
.confirm-modal-overlay,
.invite-modal-overlay,
.feedback-modal-overlay,
.share-card-modal-overlay,
.milestone-modal-overlay,
.recover-modal-overlay{
position:fixed; inset:0; background:var(--scrim);
display:flex; align-items:center; justify-content:center; padding:24px;
z-index:100; opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease-out);
}
.confirm-modal-overlay.open,
.invite-modal-overlay.open,
.feedback-modal-overlay.open,
.share-card-modal-overlay.open,
.milestone-modal-overlay.open,
.recover-modal-overlay.open{opacity:1; pointer-events:auto;}
/* ---------- Confirm modal ---------- */
/* 모달을 열 때 다이얼로그 컨테이너로 포커스를 들인다(lib/overlay.js) — 컨테이너는
클릭 대상이 아니라 포커스 링이 필요 없다. 스크립트 포커스라 :focus-visible은 어차피
안 뜨지만 브라우저 편차에 대비해 명시적으로 끈다. */
.confirm-modal:focus,.invite-modal:focus,.feedback-modal:focus,
.share-card-modal:focus,.milestone-modal:focus,.recover-modal:focus{outline:none;}
.confirm-modal{
max-width:360px;
width:100%;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:24px;
box-shadow:var(--shadow-card);
transform:translateY(16px);
transition:transform var(--dur-2) var(--ease-out);
}
.confirm-modal-overlay.open .confirm-modal{transform:translateY(0);}
.confirm-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:10px;}
.confirm-modal-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px; white-space:pre-line;}
/* 취소·삭제는 한 짝 — 같은 크기·모양의 버튼으로 두고 색만 나눈다
(placard-finish 확인/취소 결과 동일). 밑줄 링크 + 박스 버튼처럼
서로 다른 종류로 섞지 않는다. */
/* 액션 행 — 우측 정렬이 기본(§CLAUDE.md 디자인 원칙). 다섯이 공통이고 차이는
여백·간격뿐이라 그것만 아래에 남긴다. milestone은 세로 스택이라 따로 둔다. */
.confirm-modal-actions,
.invite-modal-actions,
.feedback-modal-actions,
.share-card-modal-actions,
.recover-modal-actions{display:flex; align-items:center; justify-content:flex-end; gap:10px;}
.feedback-modal-actions{margin-top:14px;}
.share-card-modal-actions{margin-top:16px;}
.recover-modal-actions{gap:18px;}
/* 모달 버튼 — confirm · invite · feedback 세 벌이 같은 값이었다(2026-08-31 대조).
share-card는 아이콘 문법이라, milestone은 세로 스택이라 여기 안 든다. */
.confirm-modal-actions button,
.invite-modal-actions button,
.feedback-modal-actions button{
font-family:var(--sans); font-size:12px; font-weight:600;
padding:9px 18px; border-radius:var(--radius); cursor:pointer;
white-space:nowrap; transition:background var(--dur-1) var(--ease-inout), border-color var(--dur-1) var(--ease-inout), color var(--dur-1) var(--ease-inout), opacity var(--dur-1) var(--ease-inout);
}
.confirm-modal-cancel-btn{background:none; border:1px solid var(--line); color:var(--ink-soft);}
.confirm-modal-confirm-btn{background:var(--moss); border:1px solid var(--moss); color:var(--paper);}
.confirm-modal-actions button:disabled,
.invite-modal-actions button:disabled,
.feedback-modal-actions button:disabled{opacity:0.4; cursor:default;}
/* 초대 링크 팝업 — confirm 모달과 같은 결. 다른 건 이름 한 칸과 결과 한 줄뿐이라
오버레이·카드·버튼 문법을 그대로 쓴다(버튼은 confirm의 클래스를 공유). */
.invite-modal{
max-width:360px; width:100%;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:24px; box-shadow:var(--shadow-card);
transform:translateY(16px); transition:transform var(--dur-2) var(--ease-out);
}
.invite-modal-overlay.open .invite-modal{transform:translateY(0);}
.invite-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:10px;}
.invite-modal-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px;}
.invite-modal-nick{margin:0 0 20px;}
.invite-modal-label{display:block; font-family:var(--sans); font-size:11px; letter-spacing:0.05em; color:var(--ink-faint); margin-bottom:8px;}
.invite-modal-nick input{
width:100%; box-sizing:border-box; padding:11px 13px;
border:1px solid var(--line); border-radius:var(--radius);
background:var(--paper); color:var(--ink);
font-size:14px;
}
.invite-modal-nick input:focus{outline:none; border-color:var(--moss);}
.invite-modal-nick input:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 결과 한 줄 — 비어 있을 땐 자리를 차지하지 않는다(로그인 상태줄과 같은 규칙) */
.invite-modal-status{font-size:12px; color:var(--ink-soft); line-height:1.5; margin-bottom:16px;}
.invite-modal-status:empty{display:none;}
/* 의견 보내기 팝업 — confirm 모달과 같은 오버레이 결(백드롭·중앙·올라오는
카드). 본문 입력이 있어 카드만 조금 넓다. */
.feedback-modal{
max-width:420px; width:100%;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:24px; box-shadow:var(--shadow-card);
transform:translateY(16px); transition:transform var(--dur-2) var(--ease-out);
}
.feedback-modal-overlay.open .feedback-modal{transform:translateY(0);}
.feedback-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:14px;}
.feedback-modal-input{
width:100%; box-sizing:border-box; min-height:120px; padding:14px 15px;
border:1px solid var(--line); border-radius:var(--radius);
font-size:14px; line-height:1.7; color:var(--ink);
background:var(--paper); resize:vertical;
}
.feedback-modal-input::placeholder{color:var(--ink-faint); font-family:var(--sans);}
.feedback-modal-status{display:block; min-height:16px; margin:10px 2px 0;}
/* 서재 한 장 모달 — feedback 모달과 같은 오버레이/카드 결. */
.share-card-modal{
position:relative;
max-width:420px; width:100%;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:24px; box-shadow:var(--shadow-card);
transform:translateY(16px); transition:transform var(--dur-2) var(--ease-out);
}
/* 닫기는 우측 상단에 작게 — 하단은 공유·저장만 남겨 깔끔하게. */
.share-card-modal-x{
position:absolute; top:14px; right:14px; width:30px; height:30px;
display:flex; align-items:center; justify-content:center;
background:none; border:none; border-radius:var(--radius); color:var(--ink-faint); cursor:pointer;
}
.share-card-modal-x svg{width:18px; height:18px;}
.share-card-modal-x:hover{color:var(--ink);}
.share-card-modal-x:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.share-card-modal-overlay.open .share-card-modal{transform:translateY(0);}
.share-card-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.share-card-modal-desc{font-size:13px; line-height:1.7; color:var(--ink-soft); margin:0 0 18px;}
.share-card-formats{display:flex; gap:10px;}
.share-card-format-btn{
flex:1 1 0; display:flex; align-items:center; justify-content:center;
background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
padding:14px; cursor:pointer;
font-family:var(--sans); font-size:15px; color:var(--ink);
}
.share-card-format-btn:hover{border-color:var(--moss);}
.share-card-format-btn:disabled{opacity:.5; cursor:default;}
.share-card-format-btn:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.share-card-modal-status{display:block; min-height:16px; margin:14px 2px 0; font-size:12px; color:var(--ink-soft);}
/* 만든 카드 미리보기 — 완독 카드와 같은 결(폭 꽉·각진 모서리·옅은 그림자). */
.share-card-preview{display:block; width:100%; height:auto; max-height:52vh; object-fit:contain; border-radius:var(--radius); margin:16px 0 2px; box-shadow:var(--shadow-card);}
.share-card-preview[hidden]{display:none;}
.share-card-modal-actions button[hidden]{display:none;}
/* 동작은 상자 없는 아이콘만 — 부차 기능은 이름도 테두리도 빼 가볍게(서재 공유
진입 버튼과 같은 결). 위계는 색으로만: 공유=모스(주 동작), 저장=옅은 잉크. */
.share-act{
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
background:none; border:none; border-radius:var(--radius); cursor:pointer;
transition:color var(--dur-1) var(--ease-inout), transform var(--dur-1) var(--ease-out);
}
.share-act svg{width:24px; height:24px;}
.share-act--primary{color:var(--moss);}
.share-act--primary:hover{color:var(--moss-deep);}
.share-act--muted{color:var(--ink-faint);}
.share-act--muted:hover{color:var(--ink);}
.share-act:active{transform:translateY(1px);}
.share-act:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.feedback-modal-cancel-btn{background:none; border:1px solid var(--line); color:var(--ink-soft);}
.feedback-modal-send-btn{background:var(--moss); border:1px solid var(--moss); color:var(--paper);}
.milestone-modal{
position:relative;
max-width:340px;
width:100%;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:32px 28px;
box-shadow:var(--shadow-card);
text-align:center;
transform:translateY(16px);
transition:transform var(--dur-2) var(--ease-out);
}
.milestone-modal-overlay.open .milestone-modal{transform:translateY(0);}
/* 우측 상단 닫기 X — 연말 결산 팝업 전용(서재 한 장 모달 .share-card-modal-x와 같은 결). */
.milestone-modal-x{position:absolute; top:14px; right:14px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:var(--radius); color:var(--ink-faint); cursor:pointer;}
.milestone-modal-x svg{width:18px; height:18px;}
.milestone-modal-x:hover{color:var(--ink);}
.milestone-modal-x[hidden]{display:none;}
.milestone-modal-x:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.milestone-modal-num{font-family:var(--serif); font-size:42px; font-weight:700; color:var(--moss); line-height:1; margin-bottom:4px;}
.milestone-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:14px;}
.milestone-modal-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 22px;}
/* 팝업이 미리 받아 보여주는 축하 카드 — 로딩되면 위 숫자·문구를 대신한다. */
.milestone-card-img{display:block; width:100%; height:auto; border-radius:var(--radius); margin:2px 0 18px; box-shadow:var(--shadow-card);}
.milestone-card-img[hidden]{display:none;}
/* 축하 카드 저장(주 액션)과 확인(조용한 링크)을 세로로. 저장이 자랑의 값진 동작. */
.milestone-modal-actions{display:flex; flex-direction:column; gap:10px; align-items:center;}
.milestone-modal-actions .social-primary-btn{width:100%;}
/* 메모 되살리기 — 이력에서 복원할 후보를 고르는 목록. 카드가 곧 프레임이니
항목은 hairline 구분선만(박스 안 박스 금지). */
.recover-modal{
max-width:420px; width:100%; max-height:80vh; display:flex; flex-direction:column;
background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
padding:24px; box-shadow:var(--shadow-card);
transform:translateY(16px); transition:transform var(--dur-2) var(--ease-out);
}
.recover-modal-overlay.open .recover-modal{transform:translateY(0);}
.recover-modal-title{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); margin-bottom:10px;}
.recover-modal-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 18px;}
.recover-list{overflow-y:auto; flex:1 1 auto; margin:0 0 18px;}
.recover-item{padding:16px 0; border-top:1px solid var(--line);}
.recover-item:first-child{border-top:none; padding-top:0;}
.recover-item-title{font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink); margin-bottom:2px;}
.recover-item-when{font-size:11px; color:var(--ink-faint); margin-bottom:8px;}
.recover-item-memo{font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin-bottom:10px;}
.recover-item-btn{
background:none; border:none; padding:0; cursor:pointer;
font-family:var(--sans); font-size:12px; font-weight:600; color:var(--moss);
}
.recover-item.done .recover-item-btn{color:var(--ink-faint); cursor:default;}
/* ---------- Add bar ---------- */
/* 책 검색은 서재·담아둔 책의 도구 — 모임 탭에서는 숨겨 탭이 콘텐츠 최상단이 되게 */
body.tab-social-active .add-bar{display:none;}
.add-bar{
position:relative;
min-height:52px;
box-sizing:border-box;
background:var(--card);
/* 평상시는 잉크 헤어라인 — 모스는 :focus-within(입력 시작)에만 살린다.
빈 화면의 모스 접점을 줄여 '기록하는 자리'라는 최우선 초점을 살린다(오너 승인 2026-08-17). */
border:1px solid var(--line);
border-radius:0;
--addbar-px: clamp(16px, 11px + 1.4vw, 24px);
padding:0 var(--addbar-px);
display:flex;
align-items:center;
gap: clamp(12px, 7px + 1.4vw, 20px);
flex-wrap:wrap;
margin-bottom:44px;
transition:border-color var(--dur-1) var(--ease-inout), box-shadow var(--dur-1) var(--ease-inout);
}
.add-bar input[type=text]{
flex:1;
min-width:200px;
min-height:50px;
border:none;
background:transparent;
font-size:15px;
padding:0 2px;
color:var(--ink);
outline:none;
}
.onboarding-card{
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
margin:-20px 0 32px; padding:20px 22px;
border:1px solid var(--line);
background:var(--card);
}
.onboarding-card[hidden], body.demo-mode .onboarding-card{display:none;}
/* 온보딩 카드는 서재(첫 화면)에서만 — 취향·담아둔 책·모임 탭 위에 얹히면 자리를
차지하며 어색하다(사용자 지시, 2026-08-01). */
body:not(.tab-library-active) .onboarding-card{display:none;}
/* 예시 서재 진입 버튼 — 데스크톱에서는 설명 오른쪽 끝에 배치한다. */
#onboarding-demo-btn{
flex:0 0 auto; max-width:max-content; margin:0 0 0 auto;
min-height:40px; padding:9px 18px;
border:1px solid var(--moss); border-radius:var(--radius);
background:none; color:var(--moss);
font-family:var(--sans); font-size:11.5px; font-weight:600;
text-align:center; text-decoration:none; cursor:pointer;
}
/* .empty-demo-btn{display:block}가 UA의 [hidden]{display:none}과 특정도가 같아
author 규칙이 이겨 hidden이 먹지 않는다 — id로 확실히 접는다(add-btn과 같은 관용). */
#onboarding-demo-btn[hidden]{display:none;}
/* 설명이 남는 폭을 다 먹는다 — 그래야 두 버튼이 카드 오른쪽에 나란히 붙는다.
예시 버튼의 margin-left:auto가 여유 공간을 통째로 흡수하는 바람에, 정작 주
버튼('책 기록하기')은 설명 바로 옆에 붙고 그 오른쪽에 빈 땅이 남았다
(e2e/journeys.spec.js '…두 버튼은 카드 오른쪽에 나란히 붙는다'가 두 버튼 간격까지 잠근다). */
.onboarding-copy{flex:1 1 auto; min-width:0;}
/* 액센트는 위쪽 히어로 눈썹(A READING JOURNAL)에 양보한다 — 폰에서 둘의 계산값이
색·크기·굵기·자간까지 똑같아, 어느 것이 화면 제목이고 어느 것이 카드 라벨인지
실눈으로 안 갈렸다(2026-08-13). 낮출 땐 검정이 아니라 웜 그레이로 — 검정이
모스보다 무겁다(docs/quality-checklist.md §6 무게 사다리). */
.onboarding-eyebrow{
margin-bottom:6px; font-family:var(--sans); font-size:9px; font-weight:500;
letter-spacing:.18em; color:var(--ink-faint); text-transform:uppercase;
}
.onboarding-copy h2{
margin:0; font-family:var(--serif); font-size:16px; font-weight:500;
line-height:1.5; color:var(--ink); text-wrap:balance;
}
.onboarding-copy p{
margin:5px 0 0; font-family:var(--sans); font-size:11.5px;
line-height:1.55; color:var(--ink-faint); text-wrap:balance;
}
.onboarding-action{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.onboarding-progress{display:flex; gap:5px;}
/* display:flex가 UA의 [hidden]{display:none}을 특정도 동률로 이겨 hidden이 안
먹는다 — 0권에서 진행 막대만 접으려면 명시 규칙이 필요하다(demo-btn과 같은 관용).
버튼은 0권에서도 항상 보여야 하는 CTA라 이 규칙에서 뺐다. */
.onboarding-progress[hidden]{display:none;}
.onboarding-progress span{
width:18px; height:3px; background:var(--line); transition:background var(--dur-2) var(--ease-inout);
}
.onboarding-progress span.filled{background:var(--moss);}
#onboarding-add-btn{
min-height:40px; padding:8px 13px; border:1px solid var(--moss);
border-radius:var(--radius); background:var(--moss); color:var(--paper);
font-family:var(--sans); font-size:11.5px; font-weight:600; cursor:pointer;
}
#onboarding-add-btn[hidden]{display:none;}
.add-bar input[type=text]::placeholder{color:var(--ink-faint); font-family:var(--sans); font-size:14px;}
.add-bar:focus-within{
border-color:var(--moss);
box-shadow:inset 0 0 0 1px var(--moss);
}
.add-bar:has(.add-bar-choices:not([hidden])),
.add-bar:has(.add-bar-finish:not([hidden])){
padding-top:14px;
padding-bottom:14px;
}
.add-bar:has(.add-bar-choices:not([hidden])) input[type=text],
.add-bar:has(.add-bar-finish:not([hidden])) input[type=text]{min-height:36px;}
.search-results{
position:absolute;
z-index:20;
top:calc(100% + 4px);
left: var(--addbar-px, 24px);
right: var(--addbar-px, 24px);
display:none;
max-height:360px;
overflow-y:auto;
background:var(--card);
border:1px solid var(--line);
box-shadow:var(--shadow-card);
}
.search-results.open{display:block;}
.search-result{
width:100%;
display:flex;
gap:12px;
align-items:center;
padding:12px;
border:0;
border-bottom:1px solid var(--line);
background:transparent;
color:var(--ink);
text-align:left;
cursor:pointer;
}
.search-result:last-child{border-bottom:0;}
.search-result:focus{background:var(--moss-soft); outline:none;}
.search-result img{width:42px;height:58px;object-fit:cover;background:var(--paper);}
/* 제목·메타는 제 줄로 쌓는다 — 둘 다 inline이면 한 줄에 붙어 나오고
meta의 margin-top(제목→저자 사이 간격)이 죽는다(inline엔 세로 여백이 안 먹는다). */
.search-result-title{display:block;font-family:var(--serif);font-size:14px;font-weight:600;}
.search-result-meta{display:block;font-size:11px;color:var(--ink-soft);margin-top:4px;}
.search-message{padding:14px;font-size:12px;color:var(--ink-soft);}
/* 결과 목록 끝 '더 보기' — 전폭 조용한 텍스트 액션. 바로 위 결과가 border-bottom을
가지므로(마지막이 아니게 됨) 헤어라인은 하나만 생긴다. 다음 15개를 이어 붙인다. */
.search-more{
width:100%; padding:13px 12px; border:0; background:transparent; cursor:pointer;
font-family:var(--sans); font-size:12px; letter-spacing:0.02em; color:var(--moss); text-align:center;
}
.search-more:hover{color:var(--ink);}
.search-more:disabled{color:var(--ink-faint); cursor:default;}
.add-bar-choices{display:flex; gap:8px; flex-wrap:wrap;}
.add-choice-btn{
padding:8px 14px;
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--card);
font-family:var(--sans);
font-size:13px;
color:var(--ink-soft);
cursor:pointer;
}
.add-choice-btn:focus-visible{border-color:var(--moss); color:var(--moss); outline:none;}
/* 읽은 시기·별점·기록하기는 오른쪽 끝에 모인다. flex-end인 이유: 아래 줄로
내려간 안내가 폭 계산에서는 같은 줄로 세어져 그룹에 gap 한 칸(20px)만큼
여유가 남는데, 기본값(flex-start)이면 그 여유가 '기록하기' 오른쪽에 붙는다. */
.add-bar-finish{display:flex; align-items:center; justify-content:flex-end; gap:20px; flex-wrap:wrap;}
.add-bar-choices[hidden]{display:none;}
.add-bar-finish[hidden]{display:none;}
/* 별점 잠금 안내 — 행 아래 제 줄에 온다(min-width:100%). 별점을 고르면 hidden.
width:0이 핵심이다: 이 안내는 아래 줄로 내려가는데도 .add-bar-finish의
max-content 폭에는 같은 줄인 것처럼 더해져서, 그룹이 제 내용보다 ~137px
넓어졌다. 그 폭을 flex:1인 제목 입력창에서 빼앗아 제목이 잘리고 '기록하기'
오른쪽에 빈 땅이 남았다. width:0으로 폭 계산에서 빠지고, 실제 렌더 폭은
min-width가 준다(e2e/journeys.spec.js '…기록하기가 오른쪽 끝에 붙는다'가 잠금). */
.add-finish-hint{flex-basis:100%; width:0; min-width:100%; margin:0; font-family:var(--sans); font-size:12.5px; color:var(--ink-soft);}
.add-finish-hint[hidden]{display:none;}
.star-input{display:flex; gap:2px; cursor:pointer; user-select:none;}
/* 슬라이더로 노출된 별점 입력(lib/stars.js) — 키보드 포커스 때만 링을 보인다. */
.star-input:focus{outline:none;}
.star-input:focus-visible{outline:2px solid var(--moss); outline-offset:3px; border-radius:var(--radius);}
.star-input .star{position:relative; width:22px; height:22px; font-size:22px; line-height:1;}
.star-input .star .base{color:var(--line); position:absolute; inset:0;}
.star-input .star .fill{color:var(--gold); position:absolute; inset:0; overflow:hidden; width:0%;}
.btn-add{
background:var(--moss);
color:var(--paper);
border:1px solid var(--moss);
padding:10px 22px;
font-size:13px;
letter-spacing:0.04em;
border-radius:var(--radius);
cursor:pointer;
font-family:var(--sans);
font-weight:600;
transition:opacity var(--dur-1) var(--ease-inout), transform var(--dur-1) var(--ease-out);
}
/* 누르면 살짝 들어갔다 나온다 — 눌렀다는 걸 손이 안다(모션 서명). 동작 줄이기면 꺼진다. */
.btn-add:active:not(:disabled){transform:scale(0.97);}
.btn-add:disabled{opacity:0.4; cursor:default;}
.btn-add:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
.add-bar input:focus-visible{outline:none;}
.read-month-input{
border:none;
border-bottom:1px solid var(--line);
background:transparent;
font-size:clamp(16px, 15px + 0.34vw, 18px);
color:var(--ink);
padding:6px 2px;
outline:none;
}
.read-month-input:focus{border-bottom-color:var(--moss);}
.year-pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px;}
/* display:flex가 UA의 [hidden]{display:none}을 이긴다 — 없으면 views/year-shelf.js가
hidden을 걸어도 빈 알약 줄의 여백만 남는다(scan:render가 잡는다). */
.year-pills[hidden]{display:none;}
.year-pill{
background:transparent;
border:1px solid var(--line);
color:var(--ink-soft);
font-size:12px;
padding:6px 14px;
border-radius:var(--radius-pill);
cursor:pointer;
font-family:var(--sans);
}
.year-pill.active{background:var(--moss); border-color:var(--moss); color:var(--paper);}
#year-pills{
gap:14px;
margin:0 0 0 auto;
}
#year-pills .year-pill{
display:inline-flex;
align-items:baseline;
gap:5px;
min-height:36px;
padding:4px 2px;
background:transparent;
border:0;
border-radius:0;
color:var(--ink-soft);
}
#year-pills .year-pill.active{
background:transparent;
color:var(--moss-deep);
}
#year-pills .year-pill-year{
padding-bottom:2px;
border-bottom:1px solid transparent;
}
#year-pills .year-pill.active .year-pill-year{
border-bottom-color:var(--moss);
}
#year-pills .year-pill-count{
color:var(--ink-faint);
font-size:10px;
font-weight:400;
}
.member-space-tabs{display:flex; gap:8px; margin-bottom:18px;}
.member-space-tab-btn{
background:transparent;
border:1px solid var(--line);
color:var(--ink-soft);
font-size:12px;
padding:6px 14px;
border-radius:var(--radius-pill);
cursor:pointer;
font-family:var(--sans);
}
/* 3단(멤버 서재)은 가장 깊고 읽기 전용이라 채운 모스가 아니라 모스 아웃라인으로 —
2단(모임 스페이스, 밑줄)보다 무겁지 않게, 깊어질수록 조용히(오너 승인 2026-08-17). */
.member-space-tab-btn.active{background:transparent; border-color:var(--moss); color:var(--moss);}
/* ---------- Tabs ---------- */
.tabs{
display:flex;
gap: clamp(16px, 8px + 2vw, 28px);
border-bottom:1px solid var(--line);
margin-bottom: clamp(20px, 8px + 3vw, 32px);
}
.tab-btn{
background:none;
border:none;
font-family:var(--sans);
font-size:14px;
font-weight:600;
letter-spacing:0.02em;
color:var(--ink-faint);
padding:0 0 14px;
cursor:pointer;
border-bottom:2px solid transparent;
margin-bottom:-1px;
}
.tab-btn.active{color:var(--ink); border-bottom-color:var(--moss);}
.tab-btn:focus-visible{outline:2px solid var(--moss); outline-offset:3px;}
.tab-icon{display:none;} /* 태블릿+데스크톱 상단 탭에서는 숨김, 폰 하단 탭바에서만 표시 */
.tab-icon svg{width:20px; height:20px; display:block; stroke:currentColor;}
.tab-panel{display:none;}
/* 탭 전환이 뚝 끊기는 컷으로 보이지 않게 — display 전환에도 애니메이션은
새로 재생되므로 짧은 페이드 하나만 얹는다(슬라이드는 풀스크린 뷰 전용). */
.tab-panel.active{display:block; animation:tab-fade .18s ease;}
@keyframes tab-fade{from{opacity:0;} to{opacity:1;}}
/* ---------- Empty state ---------- */
.empty-state{
text-align:center;
padding:80px 20px;
color:var(--ink-faint);
font-family:var(--serif);
font-size:15px;
/* 실선 — 2026-08-13 앱 전체 점선→실선 통일에서 빠졌던 잔재를 맞춘다(오너 승인 2026-08-17). */
border:1px solid var(--line);
border-radius:var(--radius);
}
/* 보조 상태 한 줄(카드 안 빈/로딩/에러) — 탭 대문의 .empty-state 박스가
아니라, 결과칸 안에 담백하게 얹는 안내. 여기저기 인라인 style로 흩어져 있던
같은 표현(--ink-faint · 13px)을 한 클래스로 모은다. */
.state-note{color:var(--ink-faint); font-size:13px; line-height:1.6;}
/* ---------- Gallery grid / placard cards ---------- */
/* 검색·정렬 컨트롤 바다. 좌측 정렬이 의도 — 액션 행이 아니다(우아함 헌장 B1/C1). */
.library-toolbar{
display:flex;
align-items:center;
gap:8px;
margin-bottom:14px;
}
/* display:flex가 [hidden]의 기본 display:none을 이긴다 — 빈 서재에서
도구를 감추려면(app.js renderLibrary) 여기서 명시해야 한다. */
.library-toolbar[hidden]{display:none;}
.library-search-input{
flex:1 1 auto;
min-width:0;
box-sizing:border-box;
padding:6px 12px;
border:1px solid var(--line);
border-radius:var(--radius);
font-size:12px;
background:var(--card);
color:var(--ink);
}
.library-search-input::placeholder{color:var(--ink-faint);}
.library-search-input:focus{outline:none; border-color:var(--moss);}
.library-search-input:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 툴바 안 정렬 버튼 묶음. 좌측 정렬이 의도다 — 누르는 컨트롤이지 화면의 액션 행이
아니다(우아함 헌장 B1/C1). */
.sort-btns{
display:flex;
flex:0 0 auto;
gap:6px;
}
.sort-btn{
background:transparent;
border:1px solid var(--line);
color:var(--ink-soft);
padding:6px 11px;
border-radius:var(--radius);
font-family:var(--sans);
font-size:11px;
cursor:pointer;
}
.sort-btn.active{background:var(--moss);border-color:var(--moss);color:var(--paper);}
.sort-btn:focus-visible{outline:2px solid var(--moss);outline-offset:2px;}
/* 서재 한 장(공유 이미지) 진입 — 표지 있는 책이 한 행 이상일 때만 library.js가
노출한다. 정렬 알약과 같은 결로 두되, 성격이 다른 행동이라 표지 그리드
아이콘을 하나 달아 무엇을 만드는지 보여준다. */
.library-share-btn{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
background:transparent;
border:1px solid var(--line);
color:var(--ink-soft);
/* 옆 정렬 알약(.sort-btn)과 같은 세로 높이로 — 실측해 padding 6px 9px에서
둘 다 29px로 맞았다(아이콘 15px + 위아래 6px + 테두리 2px). */
padding:6px 9px;
border-radius:var(--radius);
cursor:pointer;
}
.library-share-btn:hover{color:var(--ink); border-color:var(--moss);}
/* display를 지정했으므로 [hidden]의 기본 display:none이 덮인다 — 되돌린다
(모임 버튼들에서 한 번 겪은 자리, 아래 터치 타깃 규칙 옆 메모 참고). */
.library-share-btn[hidden]{display:none;}
.library-share-icon{width:15px; height:15px; flex:0 0 auto;}
/* 아이콘만 — 실제 앱과 똑같이 이름을 뺀다. 예전엔 구경 모드에서만 글자를
보여 예시 서재가 실제 화면과 달라 보였다(오너 지적, 2026-08-06). 구경 모드는
'실제 화면 + 시드'라야 하므로 데모 전용 라벨을 두지 않는다. */
.library-share-label{display:none;}
.library-share-btn:focus-visible{outline:2px solid var(--moss);outline-offset:2px;}
/* 정렬 토글·건네기 버튼을 오른쪽에 모은다. 건네기가 숨으면(내 서재) 정렬만
오른쪽에 남는다 — :has 없이도 안정적. */
.member-shelf-toolbar{display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-bottom:10px;}
/* 책 추천하기 — 이 서재 화면의 대표 동작이라 헤더 오른쪽에 앉힌다(내보내기보다
앞, margin-left:auto로 오른쪽 무리로 민다). 값진 동작이라 모스 아웃라인(commit CTA 문법). */
.member-give-btn{
margin-left:auto; align-self:center;
background:none; border:1px solid var(--moss); color:var(--moss);
padding:6px 13px; border-radius:var(--radius);
font-family:var(--sans); font-size:12px; font-weight:600; cursor:pointer;
white-space:nowrap;
}
.member-give-btn:hover{background:var(--moss-bg);}
.member-give-btn:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 건네받은 책 — 내 서재 상단에 얹히는 흔적. 서재 그리드와 구분되도록 여백만
두고 박스는 씌우지 않는다(카드 안 카드 금지). */
.handoff-received{margin-bottom:22px;}
/* '추천받은 책' 제목은 담아둔 책·맞춤 추천과 같은 결 — 앱 표준 .panel-title을 공유해
세 자락 제목이 어긋나지 않게 한다(2026-08-12, views/handoff-inbox.js). */
.handoff-received-list{display:flex; flex-direction:column; gap:12px;}
.handoff-card{
display:grid; grid-template-columns: clamp(54px, 42px + 3.1vw, 72px) 1fr; gap:16px;
border:1px solid var(--line); background:var(--card);
border-radius:var(--radius); padding:16px 18px;
}
.handoff-card-body{min-width:0; display:flex; flex-direction:column;}
.handoff-card-title{font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.3;}
.handoff-card-author{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.handoff-card-from{font-size:12px; color:var(--moss); margin-top:8px;}
.handoff-card-note{
font-size:13px; line-height:1.7; color:var(--ink); margin-top:6px;
padding-left:11px; border-left:2px solid var(--moss-soft);
}
.handoff-card-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:14px;}
.handoff-pass{
background:none; border:1px solid var(--line); color:var(--ink-soft);
padding:7px 14px; border-radius:var(--radius);
font-family:var(--sans); font-size:12px; cursor:pointer;
}
.handoff-pass:hover{color:var(--ink);}
.handoff-pass:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 모달 닫기는 우측 상단 ✕로 통일한다(서재 한 장 모달과 같은 자리·결). */
.modal-close-x{
position:absolute; top:12px; right:12px; width:30px; height:30px;
display:flex; align-items:center; justify-content:center;
background:none; border:none; border-radius:var(--radius); color:var(--ink-faint); cursor:pointer;
}
.modal-close-x svg{width:18px; height:18px;}
.modal-close-x:hover{color:var(--ink);}
.modal-close-x:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 추천 팝업 — feedback 모달 결. 앱을 열 때 새 추천을 처음 한 번 알린다. */
.handoff-gift-modal{max-width:420px; position:relative;}
/* ✕가 제목을 파고들지 않게 오른쪽 여백을 둔다(두 모달 공통). */
.handoff-gift-modal .feedback-modal-title,
.handoff-modal .feedback-modal-title{padding-right:30px;}
.handoff-gift-list{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
/* 팝업 안 카드는 카드 안 카드가 되지 않게 테두리를 빼고 여백만 둔다. */
.handoff-gift-list .handoff-card{border:none; background:none; padding:0;}
/* 추천하기 피커 모달 — feedback 모달 결을 그대로 쓰되, 목록이 있어 살짝 넓다. */
.handoff-modal{max-width:440px; position:relative;}
.handoff-search{
width:100%; box-sizing:border-box; padding:11px 13px; margin-bottom:12px;
border:1px solid var(--line); border-radius:var(--radius);
font-size:14px; color:var(--ink); background:var(--paper);
}
.handoff-search::placeholder{color:var(--ink-faint);}
.handoff-search:focus-visible{outline:2px solid var(--moss); outline-offset:1px;}
.handoff-pick-list{max-height:46vh; overflow-y:auto; display:flex; flex-direction:column; gap:4px;}
.handoff-pick-row{
display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center;
width:100%; text-align:left; background:none; border:none; cursor:pointer;
padding:8px; border-radius:var(--radius);
}
.handoff-pick-row:hover{background:var(--moss-bg);}
.handoff-pick-row:focus-visible{outline:2px solid var(--moss); outline-offset:-2px;}
.handoff-pick-cover{
width:38px; height:54px; object-fit:cover;
border:1px solid var(--line); background:var(--paper); border-radius:var(--radius);
}
.handoff-pick-text{min-width:0; display:flex; flex-direction:column;}
.handoff-pick-title{
font-family:var(--serif); font-size:15px; color:var(--ink); line-height:1.35;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.handoff-pick-author{font-size:12px; color:var(--ink-soft); margin-top:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.handoff-pick-empty{padding:24px 8px; text-align:center;}
.handoff-chosen-card{display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:center; margin-bottom:14px;}
.handoff-chosen-text{min-width:0; display:flex; flex-direction:column;}
.handoff-chosen-title{font-family:var(--serif); font-size:16px; color:var(--ink); line-height:1.35;}
.handoff-chosen-author{font-size:12px; color:var(--ink-soft); margin-top:2px;}
.handoff-note{min-height:72px;}
.handoff-modal-status{display:block; min-height:16px; margin:8px 2px 0;}
/* 멤버 서재 정렬은 내 서재와 같은 .sort-btns/.sort-btn을 그대로 쓴다 —
따로 스타일을 두지 않아 데스크톱 박스·모바일 보더리스가 저절로 통일된다. */
/* 카드 높이를 그리드 전체에서 하나로 묶는다. 제목·저자·키워드를 잘라도
카드가 여전히 들쭉날쭉했던 건(2026-07-23 실측: 270 / 322 / 367px) 글이
넘쳐서가 아니라 블록이 아예 없어서였다 — 여백의 한 줄이 없는 책엔
.placard-margins가, 읽는 중인 책엔 키워드·평점 줄이 통째로 빠진다.
자르기로는 못 메우는 차이라 행 높이를 1fr로 묶어 가장 큰 카드에 맞춘다.
.placard-foot가 이미 margin-top:auto라, 남는 공간은 제목 아래로 가고
평점 줄은 카드 바닥에 그대로 붙는다. */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
grid-auto-rows:1fr;
gap:16px;
}
.gallery-grid > .placard{height:100%;}
.placard{
position:relative;
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:18px 18px 16px;
/* 표지+서지는 한 줄(.placard-body), 감상·별점·방명록은 그 아래로 촘촘히 쌓인다.
높이 정책이 반응형이다(오너 2026-08-24): PC(3열 격자)는 카드 높이 통일+별점 바닥
정렬(한 행의 카드끼리 바닥선이 맞음), 모바일(1열)은 콘텐츠 높이라 슬랙 없이 촘촘
(§gallery-grid). base에 둔 flex:1·margin-top:auto는 PC에서만 효과가 있고 모바일
콘텐츠 높이에선 남는 공간이 없어 저절로 무력화된다. 표지를 서지 옆 flex 형제로
둬서(그리드 행 걸침이 아니라) 짧은 카드에서도 제목·저자·날짜가 안 벌어진다. */
display:flex;
flex-direction:column;
min-height:150px;
transition:border-color var(--dur-1) var(--ease-inout);
}
/* 표지 | 서지(제목·저자·날짜) 한 줄. 표지는 위에 붙고, 서지는 촘촘한 세로 스택. */
/* No.NNN 줄과 표지 사이에 숨 쉴 여백 — 카드가 촘촘해진 만큼 여기만 살짝 띄워
우아함을 준다(오너 2026-08-24 "여백 느낌 살게"). */
.placard-body{display:flex; gap:12px; margin-top:9px;}
.placard-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}
.placard-cover{
width:54px;
height:74px;
flex:0 0 auto;
object-fit:cover;
align-self:flex-start;
margin:0;
border:1px solid var(--line);
}
.placard.loading{opacity:0.6;}
.placard.placard-reading{background:var(--moss-bg);}
/* 종 알림 "한 줄 보기"로 왔을 때 — 어느 카드인지 잠깐 테두리를 밝혀 짚어준다. */
.placard.placard-cued{animation:placard-cue 1.6s ease-out;}
@keyframes placard-cue{
0%,55%{border-color:var(--moss); box-shadow:0 0 0 3px var(--moss-soft);}
100%{border-color:var(--line); box-shadow:0 0 0 0 transparent;}
}
@media (prefers-reduced-motion:reduce){
.placard.placard-cued{animation:none;}
}
.placard-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:8px;
}
.placard-no{
font-family:var(--sans);
font-size:10px;
color:var(--ink-faint);
letter-spacing:0.05em;
}
.placard-del{
background:none;
border:none;
color:var(--ink-faint);
font-size:13px;
cursor:pointer;
transition:color var(--dur-1) var(--ease-inout);
padding:0;
}
/* 장르는 구조 라벨이라 액센트를 쓰지 않는다 — 카드에서 제목보다 위에 있는 유일한
유채색이라 서재 그리드를 열면 모스 대문자 라벨이 먼저 눈에 들었다. 카드의 최우선
초점은 세리프 제목이다. 크기·자간·대문자는 그대로 두고 색만 한 단계 아래로
(2026-08-13). 카드의 모스는 키워드 칩·'다 읽음' 버튼·읽는 중 틴트로 남는다. */
.placard-tag{
font-size:10px;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--ink-faint);
font-weight:600;
}
/* 제목이 길면 줄이 늘어나며 카드가 통째로 커지고, 그리드 특성상 같은 줄에
선 다른 카드들까지 함께 늘어났다(2026-07-23 피드백). 서재는 책들이 나란히
선 선반이라 카드 높이가 제목 길이에 따라 들쭉날쭉하면 안 된다 — 두 줄에서
자르고 말줄임으로 넘긴다. 전체 제목은 눌러서 들어가면 보인다. */
/* 제목 줄 = [클램프되는 제목 텍스트] + [메모 아이콘]. 아이콘을 클램프 박스 안에 두면
줄 계산이 틀어져 마지막 줄이 잘렸다(오너 2026-08-24) — 그래서 클램프는 안쪽
.placard-title-text만 지고, 아이콘은 그 옆 flex 형제로 둔다. */
.placard-title{
display:flex; align-items:flex-start; gap:5px;
/* 잘릴 자리를 미리 잡아둔다 — 한 줄 제목 옆 두 줄 제목과 기준선이 안 어긋나게. */
min-height:calc(2 * 1.35em);
}
.placard-title-text{
flex:1; min-width:0;
font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.35; color:var(--ink);
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
max-height:calc(3 * 1.35em);
text-wrap:balance;
}
/* 저자도 같은 이유로 한 줄에서 자른다 — 공저·번역자까지 붙은 긴 저자명이
제목 다음으로 카드 높이를 흔드는 자리였다. */
.placard-author{
font-size:12px;
color:var(--ink-soft);
margin-top:2px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
/* flex 안에서 nowrap이 폭을 넓혀 320px에서 넘치던 것 — min-width:0(부모 .placard-meta
에도)로 폭이 줄고 ellipsis가 대신 자른다. */
min-width:0;
}
.placard-read-at{
font-size:11px;
color:var(--ink-faint);
font-family:var(--sans);
}
/* 감상·별점 묶음 — 남는 세로 공간을 먹어(flex:1) 별점 줄을 카드 바닥까지 민다. */
/* flex:1로 남는 세로 공간을 먹어 별점/상태 줄을 카드 바닥으로 민다(데스크톱 3열 격자
에서 카드 높이를 통일·정렬). 모바일은 콘텐츠 높이라(§gallery-grid) 남는 공간이 없어
이 고정이 저절로 무력화된다 — 그래서 모바일은 촘촘, PC는 정렬(오너 2026-08-24). */
.placard-foot{flex:1; display:flex; flex-direction:column; gap:7px; margin-top:8px;}
/* 멤버 서재에서 나도 읽은 책 표시 — 카드 결을 해치지 않는 작은 칩 하나 */
.placard-mine{
align-self:flex-start;
font-size:10px;
color:var(--moss-ink);
background:var(--moss-soft);
padding:3px 8px;
border-radius:var(--radius-pill);
font-family:var(--sans);
}
/* 제목·저자를 자르고 나면 카드 높이를 흔드는 건 칩 줄 수뿐이다. 칩이 세
줄까지 가는 책은 드물어서(사용자 판단, 2026-07-23) 두 줄에서 자른다.
칩 한 줄 = 글자(10px × 1.2) + 위아래 여백 3px씩, 줄 사이 간격 4px. */
/* 칩은 한 줄만 — 넘치면 잘린다. 2줄까지 허용하던 때는 키워드 많은 책 한 권이 그 줄
카드를 통째로 늘려 서재가 길쭉해 보였다(오너 2026-08-23, grid-auto-rows:1fr). */
.placard-keywords{
display:flex; flex-wrap:wrap; gap:4px;
max-height:calc(10px * 1.2 + 6px);
overflow:hidden;
}
.placard-keyword-chip{
font-size:10px;
line-height:1.2; /* 위 max-height 계산의 기준 — 같이 바꿔야 한다 */
color:var(--moss-ink);
background:var(--moss-soft);
padding:3px 8px;
border-radius:var(--radius-pill);
font-family:var(--sans);
}
.placard-bottom{
/* 별점 줄을 카드 바닥으로(데스크톱 격자 정렬). 모바일 콘텐츠 높이에선 무력화. */
margin-top:auto;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
border-top:1px solid var(--line);
padding-top:10px;
}
.placard-rating{display:inline-flex; align-items:center; gap:4px;}
.stars-display{display:flex; gap:1px; cursor:pointer;}
.placard-readonly .stars-display{cursor:default;}
.stars-display .star{position:relative; width:14px; height:14px; font-size:14px; line-height:1;}
.stars-display .base{position:absolute; inset:0; color:var(--line);}
.stars-display .fill{position:absolute; inset:0; overflow:hidden; color:var(--gold);}
.placard-rating-num{font-size:11px; color:var(--ink-faint); font-family:var(--sans);}
/* 실선 — 저장소의 --line 구분선은 solid가 다수이고, 점선은 이 카드와 rl-detail만
쓰던 소수 예외였다(2026-08-13). 같은 카드 안에서 문법을 하나로. */
.placard-reading-row, .placard-finish-form{
margin-top:auto;
border-top:1px solid var(--line);
padding-top:10px;
}
.placard-reading-row{display:flex; align-items:center; flex-wrap:wrap; gap:8px;}
/* 점은 뺐다(2026-08-13) — 카드 전체가 이미 moss 틴트(.placard-reading)이고 그 옆에
"읽는 중" 글자가 있어, 같은 사실을 세 겹으로 말하고 있었다. 점은 옆 글자를 그림으로
다시 그린 것이라 지워도 정보·기능이 하나도 안 사라진다. 틴트는 남긴다 — 그리드를
훑을 때 값이 있다. */
.reading-badge{
display:inline-flex; align-items:center;
font-size:11px; color:var(--ink-soft); font-family:var(--sans);
}
/* 덮어둔 책 배지 — 조용한 상태 표시. 바랜 바탕(--paper-2) 위라 --ink-faint는 대비
미달(a11y)이라 --ink-soft로 한 톤 올린다. 활성(읽는 중)과는 바탕색으로 갈린다. */
.stopped-badge{
display:inline-flex; align-items:center;
font-size:11px; color:var(--ink-soft); font-family:var(--sans);
}
/* 덮어두기 — '다 읽음'(채운 모스=주 동작) 옆 보조 동작이라 외곽선으로 갈린다(오너
2026-08-24: 채움 둘은 둘 다 주 동작처럼 읽힌다). 크기·모양은 같아 높이가 맞는다. */
.placard-stop-btn{
background:none; border:1px solid var(--moss); border-radius:var(--radius);
padding:4px 10px; font-size:11px; font-family:var(--sans); color:var(--moss-ink); cursor:pointer;
}
.placard-stop-btn:hover{background:var(--moss-soft);}
/* 기록하기 — 상태 전환(다 읽음·덮어두기=모스)이 아니라 '기록' 동작이라 중립 라인색으로
갈린다. 크기·모양은 상태 버튼과 같아 한 줄에서 높이가 맞는다(모바일 터치 padding도
아래 공통 규칙에 함께 넣는다). 완독 카드에선 별점 줄 오른쪽 끝으로 민다. */
.placard-memo-btn{
background:none; border:1px solid var(--line); border-radius:var(--radius);
padding:4px 10px; font-size:11px; font-family:var(--sans); color:var(--ink-soft); cursor:pointer;
}
.placard-memo-btn:hover{border-color:var(--moss); color:var(--moss-ink);}
.placard-bottom .placard-memo-btn{margin-left:auto;}
/* 다시 읽기 — 옆 '기록하기'와 통일한다(오너 2026-08-24): 흐린 잉크 중립 박스. 덮어둔
책은 쉬어가는 상태라 두 동작(다시 읽기·기록하기)을 똑같이 조용하게 둔다. */
.placard-resume-btn{
background:none; border:1px solid var(--line); border-radius:var(--radius);
padding:4px 10px; font-size:11px; font-family:var(--sans); color:var(--ink-soft); cursor:pointer;
}
.placard-resume-btn:hover{border-color:var(--moss); color:var(--moss-ink);}
/* 덮어두기 월 폼 — '다 읽음' 완료 폼(.placard-finish-form)과 같은 골격이라 그 스타일을
그대로 물려받고, 달 인풋만 폭을 채운다(별점 줄이 없어 한 줄이 비므로). */
.placard-shelve-form .placard-shelve-month{width:100%; text-align:left; padding:6px 10px;}
.placard-shelve-confirm{background:var(--moss); color:var(--paper); border:1px solid var(--moss);
font-size:11px; font-family:var(--sans); padding:4px 10px; border-radius:var(--radius); cursor:pointer;}
.placard-shelve-cancel{background:none; border:1px solid var(--line); color:var(--ink-soft);
font-size:11px; font-family:var(--sans); padding:4px 10px; border-radius:var(--radius); cursor:pointer;}
/* 메모 있으면 제목 아래 첫 줄 미리보기 — 그 줄이 곧 진입점. 세리프 한 줄, 왼쪽 모스 바.
색은 --ink(내 문장 = 내용이라 또렷하게, 바랜 덮어둔 책 바탕에서도 대비 통과). 선택자를
.placard-foot로 특정해 뒤에 오는 .placard-review-btn(+모바일 변형)에 안 덮이게 한다. */
.placard-foot .placard-memo-line{
display:block; width:100%; text-align:left; margin-top:2px;
background:none; border:none; border-left:2px solid var(--moss-soft); padding:0 0 0 10px; cursor:pointer;
font-family:var(--serif); font-size:13px; line-height:1.5; color:var(--ink);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.placard-memo-line:focus-visible{outline:2px solid var(--moss); outline-offset:2px;}
/* 덮어둔 책 — 완독과 날짜로 섞여 꽂히므로 색으로 구분한다(오너 2026-08-23). 바랜 바탕 +
제목 톤 낮춤으로 "접어둠"이 은은히 드러난다(읽는 중의 옅은 모스와도 갈린다). */
.placard-shelved{background:var(--paper-2);}
.placard-shelved .placard-title-text{color:var(--ink-soft);}
/* 바랜 바탕(--paper-2)에선 --ink-faint 메타가 대비 미달이라(a11y), 한 톤 올린다(--ink-soft).
읽는 중(--moss-bg)은 통과하지만 이 바탕은 살짝 더 진해 경계에 걸린다. */
.placard-shelved .placard-no,
.placard-shelved .placard-tag,
.placard-shelved .placard-read-at{color:var(--ink-soft);}
.placard-finish-btn{
background:var(--moss); border:1px solid var(--moss); border-radius:var(--radius);
padding:4px 10px; font-size:11px; font-family:var(--sans); color:var(--paper); cursor:pointer;
}
.placard-finish-form{display:flex; flex-direction:column; gap:10px;}
/* 별점과 날짜를 한 줄에 — 별점은 왼쪽, 날짜는 오른쪽 끝. 좁으면 날짜가 아랫줄로. */
.placard-finish-top{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
/* 별점 오른쪽 같은 줄 — 값 오른쪽 정렬. 날짜 폭은 브라우저마다 다른 month
인풋 기본 폭에 맡기지 않고 명시로 못 박는다(iOS·크로뮴 편차 제거). 별점은
모바일에서 5×32 + gap → ~176px, 여기에 행 gap 8px를 빼면 390 카드 안쪽(~323px)
에 날짜가 ~139px까지 한 줄로 들어간다 — 그 상한 안에서 136px로 넉넉히 키운다
(이전 패딩만으로 넓히던 것보다 확연히 크다). 좁은 360·320에선 flex-shrink로
줄고, 그래도 모자라면 아랫줄로 접힌다. 이 136px는 모바일 기준 — 데스크톱(≥640)은
서재가 3열이라 카드가 더 좁고 별점도 22px라, 아래 min-width:640 블록에서 폭·글자를
따로 잡아 별점 옆에 붙인다("웹만 모바일과 다르게 보여" 대응, 2026-08-08). */
.placard-finish-top .placard-finish-stars{flex:0 0 auto;}
/* 날짜 글자는 15px — 136px 상자 안에서 16px은 너무 빽빽했다(오너 2026-08-08).
데스크톱(≥640)은 아래 블록에서 14px로 더 줄인다. */
.placard-finish-top .placard-finish-month{flex:0 1 auto; width:136px; padding-left:10px; padding-right:6px; text-align:right; font-size:15px;}
.placard-finish-actions{display:flex; gap:8px; justify-content:flex-end;}
/* 완료/취소는 '다 읽음'(.placard-finish-btn)과 같은 크기로 둔다 — 한 카드의
다른 상태에 뜨는 형제 버튼이라 크기가 어긋나면 눈에 띈다(오너 2026-08-09). */
.placard-finish-confirm, .placard-finish-cancel{
font-size:11px; font-family:var(--sans); padding:4px 10px; border-radius:var(--radius); cursor:pointer;
}
.placard-finish-confirm{background:var(--moss); color:var(--paper); border:1px solid var(--moss);}
.placard-finish-cancel{background:none; border:1px solid var(--line); color:var(--ink-soft);}
/* 삭제 ✕를 절대배치해 상단 줄 높이에서 뺀다 — 모바일에서 ✕가 44px 터치 타깃이라
'No.NNN' 아래에 그만큼 빈 공간이 생겼다(오너 2026-08-24 "104랑 표지 사이 싹 지워").
절대배치면 44px 히트영역은 유지하되 줄 높이는 No 텍스트만큼으로 준다. */
.placard-top-actions{position:absolute; top:18px; right:18px; display:flex; align-items:center; gap:6px; z-index:1;}
/* 메모 아이콘(+ 읽는 중의 '다 읽음' 버튼 / 다 읽음의 평점)은 상태 줄 오른쪽 끝에
인라인으로 둔다. margin-left:auto로 항상 우측 정렬 — 좁은 2열에서 자리가
모자라면 통째로 아랫줄로 내려가되(부모의 flex-wrap) 오른쪽 정렬은 유지된다. */
.placard-foot-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
/* 메모 진입점 — 테두리 없는 맨 아이콘으로 둔다. 예전엔 '다 읽음'(채운 pill)
옆이라 외곽선 pill로 버튼임을 드러냈지만, 흰 카드 위 아이콘에 두른 네모가
'박스 안 박스'로 지저분해 걷어냈다(오너 결정) — 앱 전체 아이콘 버튼과 결을
맞추고, 높이도 '다 읽음' pill과 저절로 어긋나지 않는다. */
.placard-review-btn{
background:none;
border:none;
color:var(--ink-soft);
font-size:13px;
display:inline-flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:4px 9px;
transition:color var(--dur-1) var(--ease-inout);
}
/* 메모가 있으면 아이콘만 moss로 — 배경·테두리는 없다(박스 안 박스 방지). */
.placard-review-btn.has-review{color:var(--moss);}
/* ---------- Review writer screen ---------- */
/* 전체화면 뷰(리뷰작성/설정/모임스페이스/멤버서재/연말서재)는 메인 화면 위에
얹히는 고정 오버레이. 밑 화면을 없애지 않고 그대로 둔 채 오른쪽에서 밀려
들어오고, 닫힐 때는 오른쪽으로 밀려 나가며 밑 화면이 드러난다 — 스크롤
위치도 건드리지 않으므로 돌아왔을 때 보던 자리가 유지된다.
좌우 패딩의 max()는 .app처럼 콘텐츠를 920px 컬럼으로 가운데 정렬하는 역할.
z-index는 탭바(50)·알림 시트(60) 위, 확인/기념 모달(100) 아래. */
#review-writer-view, #settings-view, #group-space-view, #member-space-view, #year-shelf-view, #chat-view{
position:fixed;
inset:0;
z-index:70;
overflow-y:auto;
overscroll-behavior-y:contain;
background:var(--paper);
touch-action:pan-y;
padding:
calc(clamp(36px, 23px + 3.4vw, 56px) + env(safe-area-inset-top))
max(calc(clamp(20px, 15px + 1.4vw, 28px) + env(safe-area-inset-right)), calc((100% - 920px)/2 + 28px))
calc(clamp(40px, 32px + 2vw, 64px) + env(safe-area-inset-bottom))
max(calc(clamp(20px, 15px + 1.4vw, 28px) + env(safe-area-inset-left)), calc((100% - 920px)/2 + 28px));
box-sizing:border-box;
}
/* 진입·이탈 슬라이드 트랜지션. .tab-panel의 display:none<->block 전환은
애니메이션이 불가능해서, JS가 .active와 동시에 .entering(오프스크린 상태)을
걸고 다음 프레임에 .entering만 떼어내는 방식으로 실제 트랜지션을 발생시킨다
— openFullScreenView/closeFullScreenView 참고. 스와이프 뒤로가기(wireSwipeBack)는
인라인 transform으로 손가락을 따라가다가 화면 밖까지 밀어내며 닫는다.
102%는 왼쪽 그림자까지 완전히 화면 밖으로 내보내기 위한 여유. */
#review-writer-view.active, #settings-view.active,
#group-space-view.active, #member-space-view.active, #year-shelf-view.active, #chat-view.active{
transform:translateX(0);
transition:transform var(--dur-3) cubic-bezier(.32,.72,.33,1);
box-shadow:var(--shadow-drawer);
}
#review-writer-view.entering, #settings-view.entering,
#group-space-view.entering, #member-space-view.entering, #year-shelf-view.entering, #chat-view.entering{
transform:translateX(102%);
}
@media (prefers-reduced-motion:reduce){
#review-writer-view.active, #settings-view.active,
#group-space-view.active, #member-space-view.active, #year-shelf-view.active, #chat-view.active{
transition:none;
}
.tab-panel.active{animation:none;}
.confirm-modal, .milestone-modal, .notif-panel, #app-toast{transition:none;}
/* 움직임을 줄인 환경에서도 "대기 중"은 보여야 한다 — 애니메이션만 끄고
점은 은은하게 남긴다. */
.chat-pending span{animation:none; opacity:0.55;}
.group-compare-loading{animation:none; opacity:0.7;}
.taste-report-refresh.spinning{animation:none; opacity:0.55;}
}
/* ---------- 대화 뷰 (딥다이브·독후감 다듬기 공용) ---------- */
/* 다른 전체화면 뷰는 본문이 문서처럼 흐르지만, 대화는 로그가 남은 높이를
채우고 컴포저가 바닥에 붙는 앱 결이라 flex 컬럼으로 오버라이드한다. */
#chat-view.active{display:flex; flex-direction:column;}
/* flex 컬럼이 자식을 stretch시켜 뒤로가기 버튼 텍스트가 가운데로 몰렸다 —
다른 뷰들처럼 좌측 상단에 붙인다(2026-07-22 피드백). */
#chat-view .review-writer-back{align-self:flex-start;}
/* '새로 시작'은 취향 리포트·추천과 같은 ↻ 아이콘 결로 통일하고, 제목 줄
오른쪽에 붙인다(패널 헤더와 같은 자리) — 손이 자주 가는 자리가 아니어야 한다. */
.chat-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
.chat-head-titles{min-width:0;}
.chat-log{
flex:1 1 auto; overflow-y:auto; overscroll-behavior-y:contain;
display:flex; flex-direction:column; gap:14px;
/* 좌우 패딩 0 — 컴포저(입력 상자)가 컬럼 전폭이라, 대화 로그·문서형 버블의
가장자리를 입력창 너비에 딱 맞춘다(2026-07-22 피드백). */
padding:20px 0 16px;
}
.chat-bubble{
max-width:85%; box-sizing:border-box;
padding:12px 16px; border-radius:var(--radius);
font-family:var(--serif); font-size:14px; line-height:1.85;
white-space:pre-wrap; overflow-wrap:anywhere;
}
/* AI 버블은 전폭 — 긴 관찰 문단은 "말"보다 "글"이고, 85% 말풍선은 오른쪽
끝선이 컴포저와 어긋나 보였다(2026-07-22 실사용 리포트). 대화의 방향성은
오른쪽 정렬 유지하는 user 버블(85%)이 담당한다. */
.chat-bubble--ai{align-self:stretch; max-width:none; background:var(--card); border:1px solid var(--line); color:var(--ink);}
.chat-bubble--user{align-self:flex-end; background:var(--moss-soft); color:var(--ink);}
/* 문서형 버블 — AI 버블이 전폭이 되면서 사실상 동의어가 됐지만,
"글(독후감 전문)" 의미 표시로 남겨둔다. */
.chat-bubble--doc{max-width:none; align-self:stretch;}
/* 답변 대기 — 버블 껍데기 없이 점 세 개만. 껍데기가 있으면 빈 말풍선이
도착한 것처럼 보여서 "쓰는 중"으로 안 읽혔다(2026-07-23 피드백).
점은 원 대신 각진 사각 — 둥근 모서리를 반려한 에디토리얼 결을 따른다. */
.chat-pending{
align-self:flex-start; display:flex; gap:6px; align-items:center;
padding:6px 2px;
}
.chat-pending span{
width:5px; height:5px; border-radius:var(--radius); background:var(--sage);
animation:chat-dot 1.3s ease-in-out infinite;
}
.chat-pending span:nth-child(2){animation-delay:0.16s;}
.chat-pending span:nth-child(3){animation-delay:0.32s;}
@keyframes chat-dot{
0%,65%,100%{opacity:0.28; transform:translateY(0);}
30%{opacity:1; transform:translateY(-3px);}
}
/* 어시스턴트 버블 안의 동작(다듬기 확정 등) — settings-link-btn 결 재사용,
본문과 가는 룰로만 구분. 문서를 읽고 내리는 결정이라 문서 끝 오른쪽,
시선이 끝나는 자리에 둔다 */
/* 자리는 그대로 문서 끝 오른쪽(c1a2fa6) — 글을 다 읽고 내리는 결정이라
시선이 끝나는 자리에 둔다. 다만 모양을 고쳤다(2026-07-23):
· 가는 룰을 뺐다 — AI 버블이 이미 같은 색 테두리를 두르고 있어서
그 안에 또 선을 그으면 박스 안에 박스가 된다.
· width:100%를 뺐다 — 오른쪽 끝 작은 링크처럼 보이는데 실제 클릭
영역은 한 줄 전체였다. 보이는 것과 눌리는 것이 어긋나 있었다.
· 흐린 밑줄 링크(settings-link-btn)에서 버튼 결로 올렸다(메모·독후감
액션 줄과 같은 언어). 색 위계: 컴포저의 '보내기'는 대화를 잇는 hero라
채운 모스, 버전 적용은 편집을 갈무리하는 커밋이라 저장과 같은 모스
아웃라인(accent) — hero=채움 / commit=아웃라인 문법(app.js에서 부여). */
.chat-bubble-action{
display:block; margin:14px 0 0 auto;
}
.chat-error{
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
padding:10px 0; font-size:12px; color:var(--ink-soft); font-family:var(--sans);
}
.chat-error[hidden]{display:none;} /* display:flex가 hidden 속성을 이기지 않게 */
/* 컴포저는 구분선(border-top) 대신 그 자체가 하나의 입력 상자다 —
입력창과 보내기 버튼을 한 박스로 묶어 대화창의 결을 만든다
(2026-07-22 피드백: 구분선 제거, 더 대화창답게). 클로드 채팅창처럼
보내기 ↑ 버튼을 입력칸 오른쪽 아래에 둔다(2026-07-23 피드백). */
.chat-composer{
display:flex; align-items:flex-end; gap:8px;
border:1px solid var(--line); background:var(--card); border-radius:var(--radius);
padding:2px 8px 2px 14px; margin-top:12px;
}
.chat-composer:focus-within{border-color:var(--moss);}
#chat-input{
display:block; flex:1 1 auto; min-width:0; resize:none; box-sizing:border-box;
min-height:38px; max-height:132px;
border:none; background:transparent;
padding:9px 0; font-size:16px; line-height:1.5; color:var(--ink);
}
#chat-input:focus{outline:none;}
/* 채운 모스 동그라미 — 대화의 주 액션임을 색으로 보인다. 입력이 한 줄이든
여러 줄이든 늘 오른쪽 아래에 붙어 있게 align-self:flex-end. */
.chat-send-btn{
flex:0 0 auto; align-self:flex-end; margin-bottom:5px;
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border:none; border-radius:50%; cursor:pointer;
background:var(--moss); color:var(--paper); font-size:18px; line-height:1;
transition:background var(--dur-1) var(--ease-inout), opacity var(--dur-1) var(--ease-inout);
}
.chat-send-btn:hover{background:var(--moss-deep);}
.chat-send-btn:disabled{opacity:.4; cursor:default;}
/* ---------- 토스트 (순간 신호 전용, app.js showToast) ---------- */
#app-toast{
position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom));
transform:translate(-50%, 8px); z-index:70;
display:flex; align-items:center; gap:14px;
/* 모바일에서 폭이 좁아 문구가 어절 중간에서 잘려 어색했다(오너 지적,
2026-08-06). 좌우 여백을 40→24px로 줄여 폭을 넓히고, keep-all로 낱말이
쪼개지지 않게, text-wrap:pretty로 마지막 줄에 한 낱말만 남는 걸 막는다. */
max-width:min(440px, calc(100vw - 24px)); box-sizing:border-box;
background:var(--ink); color:var(--paper);
font-family:var(--sans); font-size:12.5px; line-height:1.5;
text-wrap:pretty;
padding:11px 16px; border-radius:var(--radius);
box-shadow:var(--shadow-lg);
opacity:0; pointer-events:none;
transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
#app-toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}
#app-toast button{
flex:0 0 auto; background:none; border:none; padding:0; cursor:pointer;
color:var(--gold); font-family:var(--sans); font-size:12.5px; font-weight:600;
}
.review-writer-back{
background:none; border:none; color:var(--ink-soft); font-size:13px;
font-family:var(--sans); cursor:pointer; padding:0; margin-bottom:20px;
}
.review-writer-head{margin-bottom:20px;}
.review-writer-title{font-family:var(--serif); font-size:22px; font-weight:600;}
.review-writer-author{font-size:13px; color:var(--ink-soft); margin-top:2px;}
/* font-weight:500 — 형제 섹션 라벨 셋(.passages-label·.review-ai-label·
.related-books-label)이 전부 500인데 이것만