/* BookTimer — 공통 스타일 (종이톤+세이지 디자인 리프레시: 입구부터 미감 통일) */

/* 본문 폰트 — 둥근 한글 산세리프 '고운돋움'(Google Fonts). 종이톤 무드와 어울리는
   부드러운 모서리. 한글 위주이며 라틴·숫자도 포함해 전 화면 본문에 깐다. */
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

:root {
    /* 종이톤 + 세이지 그린 팔레트. 이름은 유지(무파괴), 값만 교체 → 전역 리프레시. */
    --bg: #F3EEE4;          /* 종이 배경(따뜻한 크림) */
    --card-bg: #FCFAF5;     /* 카드 표면(종이톤 화이트) */
    --text: #2C2A24;        /* 잉크(따뜻한 차콜) */
    --muted: #6F6A5E;       /* 흐린 글자 */
    --accent: #6E8A6A;      /* 세이지(악센트/CTA) */
    --accent-hover: #4F6B4C;/* 딥 세이지(hover/강조·아이콘) */
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --border: #E4DDD0;      /* 따뜻한 보더 */
    --ok: #2F8F6B;          /* 타이머 달성색 — 세이지와 변별되게 더 선명한 초록으로 톤 조정 */
    --radius: 14px;
    --radius-sm: 8px;       /* 버튼·칩용 작은 라운드 */
    --shadow: 0 1px 2px rgba(60, 50, 30, .05), 0 8px 24px rgba(60, 50, 30, .06);
    /* 보조 토큰 — 랜딩부터 점진 적용(전역 강제 아님) */
    --sage-soft: #E7EEE2;   /* 연한 세이지 fill */
    /* 포커스 링 — 입력칸 focus·강조 hover가 공유(세이지 #6E8A6A=rgb(110,138,106) 기반).
       #287 토큰 교체가 못 건드린 raw 인디고 잔재를 토큰화해 전역 일관 유지. */
    --focus-ring: rgba(110, 138, 106, .30);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "Gowun Dodum", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    line-height: 1.5;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
}

.container {
    width: 100%;
    max-width: 460px;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 4px;
}

.brand h1 {
    font-size: 1.6rem;
    margin: 0;
    letter-spacing: -.02em;
    color: var(--accent-hover);
}

.brand .emoji { font-size: 1.4rem; }

/* 로고(이모지+제목)를 메인 대시보드(/) 링크로 — 최하단 '대시보드' 버튼 없이 어디서든 홈으로(UX 편의).
   링크 기본 스타일(파란색·밑줄) 제거하고 헤더 본래 모양 유지, 호버 시에만 제목에 밑줄로 클릭 가능 단서. */
.brand-home {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}
.brand-home:hover h1 { text-decoration: underline; }

.greeting {
    color: var(--muted);
    margin: 0 0 20px;
}

/* 입구 폼 화면(signup·onboarding) 환영 헤더 — landing 히어로의 축소판.
   greeting 한 줄 대신 헤드라인+서브카피로 첫인상을 강화한다(페이크볼드 대신 크기로 위계 — #287 원칙 계승). */
.entry-hero { margin: 4px 0 22px; }
.entry-hero h2 {
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 8px;
    letter-spacing: -.01em;
    word-break: keep-all;
}
.entry-hero p {
    color: var(--muted);
    margin: 0;
    line-height: 1.7;
    word-break: keep-all;
}

/* 입구 폼 안내 — 가치를 전달하는 문단을 연한 세이지 박스로 띄워 위계를 준다(onboarding 하루목표·7일 윈도우 설명).
   전역 공유 .status-line과 분리한 입구 전용 클래스(다른 화면 영향 차단). */
.entry-note {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--sage-soft);
    border-radius: var(--radius-sm);
    color: var(--text);
    line-height: 1.7;
    word-break: keep-all;
    font-size: .92rem;
}
.entry-note strong { color: var(--accent-hover); font-weight: 700; }

/* 인사말 자리의 작가 격언 — 문장은 본문 톤, 작가는 한 단 작고 흐리게(출처 표기). */
.greeting.quote .quote-text {
    font-style: italic;
}
.greeting.quote .quote-author {
    display: block;
    margin-top: 2px;
    font-size: 0.85em;
    opacity: 0.8;
}

.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 16px;
}

.card h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent-hover);
    margin: 0 0 12px;
}

/* 큰 타이머 숫자 */
.timer-display {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--accent);
    margin: 0;
}

.timer-display.met { color: var(--ok); }

/* 설정의 체크박스 행 — 라벨 텍스트와 체크박스를 가로로 정렬. */
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.check-row input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.timer-sub {
    color: var(--muted);
    margin: 8px 0 0;
    font-size: .95rem;
}

.timer-sub .mono {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
}

.goal-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: var(--ok);
    font-size: .85rem;
    font-weight: 600;
}

/* 누적 상한 도달 경고 (호박색) */
.cap-badge {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
    font-size: .9rem;
    font-weight: 600;
}

.status-line { margin: 0 0 14px; color: var(--muted); }
.status-line .mono { color: var(--text); font-weight: 600; }

/* "다시 분석" 버튼 안에 같이 보이는 오늘 남은 횟수 — 작고 옅게(버튼 라벨 보조) */
.refresh-count { margin-left: 8px; font-weight: 400; font-size: .82em; opacity: .8; }

/* 책BTI 독서 종족 태그 칩 — 책장 요약 카드 상단, 결정적 규칙 기반 태그 */
.tag-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-light, #e8f0fe);
    color: var(--accent, #3b5bdb);
    font-size: .82rem;
    font-weight: 500;
    white-space: nowrap;
}
/* 클릭 가능한 태그 칩(장르 종족·한우물형) — 폭 태그와 구분되게 호버시 살짝 진해진다.
   <button>으로 렌더되므로 button 기본값(테두리·폰트)을 리셋해 비클릭 span 칩과 동일하게 보이게 한다. */
.tag-chip-click {
    cursor: pointer;
    text-decoration: none;
    border: none;              /* button 기본 테두리 제거 */
    font-family: inherit;      /* button 기본 폰트로 떨어지지 않게(size/weight는 .tag-chip이 지정) */
    line-height: inherit;
    width: auto;               /* 전역 button{width:100%} 상쇄 — 빠지면 칩이 가로 전체로 늘어남(#286 회귀 원인) */
    background: var(--accent);  /* 책 기반(근거 책 드릴다운 가능) 칩 = 진한 채움으로 강조 → 비클릭(복합) 칩과 색 구분(안 A) */
    color: #fff;
}
.tag-chip-click:hover { background: var(--accent-hover); }  /* 채움 칩이라 btn-primary와 동일 hover(배경만 진하게). 기존 filter+underline은 채움엔 과함 */

/* 칩 클릭 시 근거 책이 펼쳐지는 패널 — 헤더 카드 아래 자연스러운 간격. */
#tag-books-panel { margin-top: 8px; }
.tag-books-panel {
    margin-top: 10px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--card-bg, #fff);
}
.tag-books-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.tag-books-head h3 { margin: 0; font-size: 1rem; }
.tag-books-head .btn-close { padding: 4px 10px; font-size: .85rem; }

/* 책BTI 공개 안내문 — '내 독서 성향' 서술 바로 밑에 작은 안내 톤. 서술과 구분되게 옅은 윗선. */
.personality-public-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: .88rem; }

/* 타이머와 한 카드로 합쳐진 측정 컨트롤 — 큰 숫자 바로 아래 답답하지 않게 위 여백을 둔다 */
.timer-controls { margin-top: 18px; }

/* 대시보드 첫 진입 빈상태(책 0권) — 측정 폼 대신 환영+첫 행동 유도(타이머는 00:00:00로 보이고 그 아래 CTA).
   "텅 빈 화면"이 아니라 "첫 책을 추가하면 시작"이라는 다음 행동을 또렷이 안내한다. */
.timer-empty { margin-top: 6px; }
.timer-empty p { color: var(--muted); line-height: 1.7; margin: 0 0 14px; word-break: keep-all; }
.timer-empty p strong { color: var(--accent-hover); font-weight: 700; }
.timer-empty .btn { display: block; text-decoration: none; text-align: center; } /* a는 기본 inline이라 .btn의 width:100%가 안 먹음 → block으로 측정 시작 버튼처럼 풀폭 */

/* 버튼 */
button, .btn {
    font: inherit;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    cursor: pointer;
    width: 100%;
    transition: background .15s ease;
}

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }

/* 비활성(disabled) 버튼 — '다시 분석' 일일 한도 소진 등으로 막혔을 때, 배경색을 명시한 버튼(.btn-primary)이
   그대로 눌리는 것처럼 보이던 문제를 막는다. 옅게 + 금지 커서로 "지금은 못 누름"을 시각화한다. */
button:disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--accent); } /* 비활성 중엔 hover 색 변화도 끈다 */

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); }

.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); }

/* 로그아웃 — 설정 바로가기와 너무 붙어 보여 간격을 띄우고(.logout-form),
   다른 타일처럼 hover 피드백을 주되 '떠나는' 동작이라 빨강으로 강조한다. */
.logout-form { margin-top: 18px; }
.btn-logout { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn-logout:hover {
    background: var(--bg);
    color: var(--danger);
    border-color: var(--danger);
}

/* 소셜 로그인 */
.oauth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: var(--muted);
    font-size: .85rem;
}
.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: 10px;
    text-decoration: none;
    box-sizing: border-box;
}
.btn-oauth-google {
    background: var(--card-bg);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-oauth-google:hover { background: var(--sage-soft); }
.oauth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4285f4;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

/* 폼 (회원가입 등) */
.field { margin-bottom: 16px; }
.field label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.field input,
.field select {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}
.field select { appearance: auto; cursor: pointer; }
.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}
/* 입력 보조 안내 — label과 input 사이/아래의 흐린 설명(아이디 규칙·타임존 이유 등).
   <small class="field-hint">로 쓰이나 정의가 없어 브라우저 기본 small만 먹던 것을 종이톤에 맞게 명시. */
.field-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5;
    word-break: keep-all;
}
.field-error {
    display: block;
    margin-top: 6px;
    color: var(--danger);
    font-size: .85rem;
}

/* 플래시 / 알림 */
.alert {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: .95rem;
}
.alert-error {
    background: #fef2f2;
    color: var(--danger);
    border: 1px solid #fecaca;
}
.alert-ok {
    background: #ecfdf5;
    color: var(--ok);
    border: 1px solid #a7f3d0;
}
.alert-warn {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}
/* 이메일 미검증 안내 배너 — 안내 문구 + 인라인 재발송 버튼을 한 줄에(좁으면 줄바꿈). */
.verify-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.verify-banner form {
    margin: 0;
}
/* 배너 안 재발송 버튼: 전역 button{width:100%}를 받지 않게 width:auto. 링크처럼 보이는 버튼(밑줄). */
.btn-inline-link {
    width: auto;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #92400e;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

/* 회원 탈퇴 등 위험 작업 구역 */
.danger-zone { border-color: #fecaca; }
.danger-zone h2 { color: var(--danger); }

/* 공용 하단 네비 — 대시보드 퀵 액션과 동일한 타일 양식(이것이 표준 양식).
   모든 페이지(검색/프로필/책장/기록/로그인 등)의 .link-row가 이 2열 타일을 공유한다.
   링크 수가 홀수면 마지막 타일이 전체폭(단일 링크 페이지=전체폭 버튼 1개). */
.link-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.link-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    word-break: keep-all;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.link-row a:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.link-row a:active { transform: translateY(1px); }
.link-row a:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 바로가기 타일 그리드 — 좁은 컬럼에서 라벨이 글자 단위로 깨지던 link-row 대체(대시보드 전용).
   2열 그리드, 각 타일은 카드 톤의 탭 타깃. 5번째(홀수 마지막)는 한 칸 전체폭. */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 8px;
}
.quick-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.quick-tile:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.quick-tile:active { transform: translateY(1px); }
.quick-tile .qt-icon { font-size: 1.3rem; line-height: 1; }
.quick-tile .qt-label { font-weight: 600; white-space: nowrap; }
.quick-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 하이라이트 밴드 — 측정 카드 바로 밑, '재미' 동선(내 책장·내 공개 프로필) 승격용.
   quick-tile보다 큼직하고 포인트 색으로 강조해 노출 우선순위를 위로 끌어올린다.
   좁은 화면(2칸이 답답할 때)에선 1열로 떨어뜨린다. */
.highlight-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 14px 0;
}
.highlight-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    background: var(--card-bg);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .05s;
}
.highlight-tile:hover { border-color: var(--accent-hover); box-shadow: 0 2px 6px rgba(110, 138, 106, .18), 0 8px 24px rgba(110, 138, 106, .12); }
.highlight-tile:active { transform: translateY(1px); }
.highlight-tile .ht-icon { font-size: 1.7rem; line-height: 1; }
.highlight-tile .ht-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.highlight-tile .ht-label { font-weight: 700; white-space: nowrap; }
.highlight-tile .ht-sub { font-size: .8rem; color: var(--muted); }
@media (max-width: 380px) {
    .highlight-actions { grid-template-columns: 1fr; }
}

/* 일자별 독서 기록 리스트 */
.record-list { list-style: none; margin: 0; padding: 0; }
.record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.record-row:last-child { border-bottom: none; }
/* 책장 요약(책BTI): 라벨(예: 자주 읽는 저자) 위 / 내용 아래로 세로 스택.
   기본 .record-row는 가로(space-between)라 내용이 길면 라벨이 줄바꿈돼 보기 나빴다. */
.summary-list .record-row { flex-direction: column; align-items: flex-start; gap: 4px; }
.summary-list .record-books { font-size: .9rem; }
.record-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.record-date { color: var(--text); font-weight: 600; }
.record-books {
    color: var(--muted);
    font-size: .85rem;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.record-time {
    color: var(--accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    white-space: nowrap;
}

/* === 독서 잔디 (GitHub 컨트리뷰션 그래프 스타일) === */
/* 헤더: 제목 좌측 / 성장 잔디 뱃지(연속 일수에 따라 땅→새싹→꽃→나무) 우측 상단.
   h2의 아래 여백(12px)을 래퍼로 옮겨 요약문과의 간격을 그대로 유지한다. */
.grass-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.grass-head h2 { margin: 0; }
.grass-streak { display: inline-flex; align-items: center; gap: 6px; }
.grass-streak-icon { font-size: 1.5rem; line-height: 1; }
.grass-streak-days { color: var(--muted); font-size: .8rem; white-space: nowrap; }

.grass-summary { color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.grass-summary strong { color: var(--text); }

.grass {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    overflow-x: auto;        /* 좁은 화면에선 가로 스크롤 */
    padding-bottom: 6px;
}
.grass-main { display: flex; flex-direction: column; gap: 4px; }

/* 좌측 요일 라벨 — 그리드 7행에 맞춤. 상단 월 라벨 높이(14+4)만큼 내려 정렬 */
.grass-weekdays {
    display: grid;
    grid-template-rows: repeat(7, 11px);
    gap: 3px;
    margin-top: 18px;
    font-size: 9px;
    color: var(--muted);
    line-height: 11px;
}

/* 상단 월 라벨 — 53열 트랙에 grid-column-start로 배치 */
.grass-months {
    display: grid;
    grid-template-columns: repeat(53, 11px);
    gap: 3px;
    height: 14px;
    font-size: 10px;
    color: var(--muted);
}
.grass-months span { white-space: nowrap; }

/* 본체 그리드 — 열=주, 행=요일(일~토). 열 방향으로 채운다 */
.grass-grid {
    display: grid;
    grid-template-rows: repeat(7, 11px);
    grid-auto-flow: column;
    grid-auto-columns: 11px;
    gap: 3px;
}

.grass-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: #ebedf0;       /* level-0 기본 */
}
.grass-cell.empty { background: transparent; }
.grass-cell.level-0 { background: #ebedf0; }
.grass-cell.level-1 { background: #9be9a8; }
.grass-cell.level-2 { background: #40c463; }
.grass-cell.level-3 { background: #30a14e; }
.grass-cell.level-4 { background: #216e39; }
/* 사용자가 직접 채운 날(수동 입력) — 측정값과 구별되게 안쪽 테두리(레이아웃 안 흔들리게 box-shadow). */
.grass-cell.manual { box-shadow: inset 0 0 0 2px #f59e0b; }
.grass-legend .legend-gap { margin-left: 8px; }

.grass-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
    font-size: 9px;
    color: var(--muted);
}
.grass-legend i { display: inline-block; }

/* === 내 책장 (Book) === */
.muted { color: var(--muted); }

.book-search-form, .book-manual-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.book-search-form input[type=text],
.book-manual-form input[type=text] {
    flex: 1 1 160px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .95rem;
}
.book-search-form select, .book-manual-form select,
.book-add-form select, .book-actions select {
    padding: 7px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

/* 검색 폼: 검색 기준(제목/저자) 라디오를 위에 두고, 입력+버튼을 아래 한 줄로. */
.book-search-form { flex-direction: column; align-items: stretch; }
.search-type { display: flex; flex-wrap: wrap; gap: 16px; }
.search-type label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: .9rem;
    color: var(--text);
}
.search-type input[type=radio] { accent-color: var(--accent); }
/* 검색 바(넓게) 위 + 검색 버튼 아래로 세로 배치 — 버튼이 입력칸을 잡아먹지 않게. */
.search-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.search-row input[type=text] {
    /* 부모가 column flex라 .book-search-form의 flex:1 1 160px가 '높이' 160px로 잘못 먹힌다 —
       리셋해서 한 줄 높이로 되돌린다(세로로 길쭉해지던 문제). */
    flex: none;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
}
.search-row .btn-primary { width: 100%; }

/* 사용자 검색(/search) 폼: input+버튼이 .book-search-form 바로 밑에 온다(검색 기준 라디오 없음).
   부모가 column flex라 input의 flex:1 1 160px가 '높이' 160px로 잘못 먹혀 세로로 길쭉해진다 —
   책 검색은 .search-row가 리셋하지만 이쪽은 감싸는 래퍼가 없어 직접 리셋한다. */
.book-search-form > input[type=text] { flex: none; width: 100%; box-sizing: border-box; }

/* 직접 추가(폴백) — '책 추가' 카드 안에 접어두는 <details>. 검색이 주 경로, 못 찾을 때만 펼친다.
   검색 결과/페이저 아래에 구분선을 두고, summary는 펼침 화살표(▸/▾)가 달린 은은한 토글. JS 불필요. */
.manual-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.manual-add > summary {
    cursor: pointer;
    color: var(--accent);
    font-size: .9rem;
    font-weight: 600;
    list-style: none;                                   /* Firefox 기본 마커 제거 */
}
.manual-add > summary::-webkit-details-marker { display: none; }  /* WebKit 기본 마커 제거 */
.manual-add > summary::before { content: "▸ "; }        /* 접힘 표시 */
.manual-add[open] > summary::before { content: "▾ "; }  /* 펼침 표시 */
.manual-add > summary:hover { text-decoration: underline; }
.manual-add .book-manual-form { margin-top: 12px; }
/* ⚠️ <details> 접힘이 실제로 동작하려면 닫혔을 때 폼을 author 규칙으로 직접 숨겨야 한다.
   위 .book-manual-form{display:flex}(author)가 브라우저 UA의 닫힘-숨김(details:not([open])>*{display:none})을
   이기기 때문(cascade origin: author > UA). 그대로 두면 접어도 폼이 늘 보인다.
   특정성을 .book-manual-form(0,1,0)보다 높여(0,3,0) 닫힘일 때만 재숨김. (cf. .book-row[hidden] 동일 함정) */
.manual-add:not([open]) .book-manual-form { display: none; }

.book-list { list-style: none; padding: 0; margin: 8px 0 0; }
/* 책 목록 — 고정 높이 스크롤 박스. 내 책장(/books)·책방(공개 프로필 /u/{id})의 공개 책장에 공용.
   책이 많아도 목록 자체는 화면의 60%까지만 차지하고 그 안에서만 스크롤되므로,
   페이지가 길어지지 않아 하단 네비(← 대시보드 등)가 늘 바로 아래 보인다.
   책이 적으면 max-height에 안 닿아 스크롤바도 안 생긴다(자연 폴백). scrollbar-gutter로 폭 흔들림 방지.
   상태 필터 칩은 이 ul 밖(위)이라 스크롤과 무관하게 고정된다. */
.shelf-scroll {
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;  /* iOS 관성 스크롤 */
    overscroll-behavior: contain;       /* 끝에서 페이지로 스크롤 번지지 않게 */
    padding-right: 6px;                 /* 스크롤바와 내용 간격 */
}
/* 검색 결과 — ~3행 고정높이 스크롤 박스. "다음" 페이저를 대체(한 번에 받아 박스 안에서만 스크롤).
   shelf-scroll과 같은 관성/거터/번짐방지, 높이만 작게. */
.search-scroll {
    max-height: 430px;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 6px;
}
/* 태그 드릴다운 — 헤더 카드 안 보조 미리보기라 메인 책 목록(shelf-scroll 60vh)보다 짧게 둬
   아래 팔로우·잔디·탭을 덜 밀어낸다. 헤드(제목·×닫기)는 이 ul 밖이라 스크롤 중에도 고정.
   shelf/search-scroll와 같은 관성·거터·번짐방지, 높이만 다름. 책 적으면 max-height 미도달로 스크롤바 없음(자연 폴백). */
.tag-books-scroll {
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 6px;
}
.book-row {
    display: flex;
    flex-wrap: wrap;            /* 좁으면 액션 줄을 통째로 다음 줄로 내린다 */
    align-items: center;
    gap: 12px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.book-row:last-child { border-bottom: none; }
.book-cover {
    width: 44px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--border);
}
.book-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.book-title { font-weight: 600; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
a.book-title { text-decoration: none; }
a.book-title:hover { text-decoration: underline; }
/* 책 상세 헤더 — 표지 + 메타 가로 배치 */
.book-detail-head { display: flex; gap: 16px; align-items: flex-start; }
.book-detail-head .book-cover { width: 84px; height: 120px; }
.book-detail-head .book-meta { gap: 6px; }
.book-sub { font-size: .9rem; color: var(--muted); margin: 0; }
.book-author, .book-pub { font-size: .85rem; color: var(--muted); }
.book-status-badge {
    align-self: flex-start;
    margin-top: 2px;
    font-size: .75rem;
    color: var(--accent);
    background: #eef2ff;
    padding: 1px 8px;
    border-radius: 999px;
}
.book-add-form, .book-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.book-actions { margin-left: auto; }   /* 같은 줄이면 우측 정렬, 줄바꿈되면 다음 줄 전체 사용 */
/* 리스트 행 버튼은 작게 통일 — btn-primary(팔로우)도 포함해 btn-ghost(언팔로우)와 같은 크기로
   (베이스 button은 padding 12px 18px라 팔로우만 부담스럽게 컸음). */
.book-actions .btn-primary, .book-actions .btn-ghost, .book-actions .btn-danger { padding: 6px 10px; font-size: .85rem; }
.book-actions a.btn-ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* 검색결과 '추가' 폼 — 상태 셀렉트+버튼을 행 우측 끝에 모으고, 버튼은 콤팩트하게.
   (전용 규칙이 없으면 베이스 button{width:100%; padding:12px 18px}을 그대로 받아
    버튼이 전체폭으로 셀렉트 아래 좌측에 떨어진다 — 위 .book-actions와 같은 톤으로 통일.) */
.book-add-form { margin-left: auto; }
.book-add-form .btn-primary { width: auto; padding: 6px 14px; font-size: .85rem; }

/* 공개/비공개 토글 스위치 — 드롭다운 대신 on/off. ON=🌍 책방 공개(accent), OFF=🔒 비공개(muted).
   버튼이 '현재의 반대' 값을 POST해 상태를 뒤집는다(JS 없이 폼 제출). 라벨+미니 트랙/노브로 현재 상태를 보여줌. */
.vis-toggle-form { display: inline-flex; }
.vis-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
    background: #fff; color: var(--muted); cursor: pointer;
    font-size: .8rem; font-weight: 600; line-height: 1;
}
.vis-toggle:hover { border-color: var(--accent); }
.vis-toggle.is-public { color: var(--accent); border-color: var(--accent); background: #eef2ff; }
.vis-toggle .vis-text { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.vis-toggle .vis-track {
    position: relative; width: 30px; height: 16px; border-radius: 999px;
    background: #cbd5e1; transition: background .15s ease; flex: none;
}
.vis-toggle.is-public .vis-track { background: var(--accent); }
.vis-toggle .vis-knob {
    position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; transition: transform .15s ease;
}
.vis-toggle.is-public .vis-knob { transform: translateX(14px); }

/* 내 책장 상단 안내 — 공개 토글이 '책방'에 반영됨을 한 줄로 설명(책방 링크 겸). */
.shelf-public-hint { font-size: .85rem; color: var(--muted); margin: 0 0 12px; }
.shelf-public-hint a { color: var(--accent); }

.affiliate-note { font-size: .8rem; color: var(--muted); text-align: center; margin: 16px 0 4px; }

/* 프로필 헤더 카드 — 책방명·@핸들·팔로우 카운트를 한 박스로 묶는다(페이지 카드 스택과 통일).
   카드 패딩(24px)이 바깥 여백을 담당하므로 내부 요소의 큰 마진은 제거하고 간격만 다시 잡는다. */
.profile-card .greeting { margin: 0; }
.profile-card > .muted { margin: 2px 0 0; }
.profile-card .profile-follow { margin: 14px 0 0; }

/* 프로필 — 팔로우 카운트 + 버튼 (관계는 카운트만 노출, SNS §7.3) */
.profile-follow { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; flex-wrap: wrap; }
.profile-follow .follow-count { font-size: .9rem; color: var(--muted); text-decoration: none; }
.profile-follow .follow-count strong { color: var(--text); }
/* 본인 프로필에서 카운트는 목록 링크 — 클릭 가능함을 hover로 알린다 */
.profile-follow a.follow-count:hover { color: var(--accent); }
.profile-follow a.follow-count:hover strong { color: var(--accent); }
.profile-follow .follow-action { margin-left: auto; }
.profile-follow .profile-actions { display: flex; gap: 8px; }
/* 차단 버튼 — 옅은 위험 톤(삭제만큼 강하지 않게) */
.btn-block { color: var(--danger); border-color: var(--danger); }

/* 사용자 신고 — 평소엔 접힌 disclosure, 펼치면 사유 선택 폼 */
.report-box { margin: 0 0 16px; }
.report-box > summary { cursor: pointer; color: var(--muted); font-size: .85rem; list-style: none; }
.report-box > summary:hover { color: var(--danger); }
.report-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.report-form label { font-size: .85rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.report-form select, .report-form textarea {
    width: 100%; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px; font: inherit; background: #fff;
}
.report-form .btn-block { align-self: flex-start; width: auto; padding: 6px 14px; }

/* 팔로워/팔로잉 목록 페이지 탭 */
.follow-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.follow-tabs a {
    flex: 1; text-align: center; padding: 8px 0; border: 1px solid var(--border);
    border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.follow-tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 대시보드 측정 시작 — 읽을 책 선택 */
/* 읽을 책 선택 — full-width flex. 라벨은 한 줄 고정(nowrap), select는 남은 폭에
   맞춰 줄어들도록 flex:1 + min-width:0. (inline-flex 시절 select 내재폭이 카드를
   넘쳐 카드 밖으로 튀어나오고 라벨이 세로로 깨지던 문제 해결.) */
.book-pick { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.book-pick select { flex: 1 1 auto; min-width: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.book-time { font-size: .8rem; color: var(--ok); font-weight: 600; }
/* 책장 상태 필터 칩 — 활성은 accent. 좁은 폭에서 줄바꿈 허용. */
.shelf-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.shelf-filter a {
    padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
    color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 600;
    white-space: nowrap;
}
.shelf-filter a:hover { border-color: var(--accent); color: var(--accent); }
.shelf-filter a.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* 팔로우 스코프 인기 카운트(§7.4) — 책 메타 안 작은 배지 */
.follow-popularity { font-size: .78rem; color: var(--accent); font-weight: 600; text-decoration: none; cursor: pointer; }
.follow-popularity:hover { text-decoration: underline; }

/* 검색 결과 중 이미 내 책장에 있는 책 표시(중복 추가 방지). followPopularity와 같은 메타 줄의 인포 배지지만,
   사회적 신호(accent)와 구분되게 소유 상태는 중립(muted) 톤. */
.shelf-owned-badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

/* 인기 카운트 drill-down — "이 책 읽는 내 팔로우" 버킷 제목 */
.reader-bucket { font-size: .85rem; color: var(--muted); margin: 1rem 0 .4rem; text-align: left; }

/* 개인정보처리방침 등 고지 문서 — 읽기용 본문(카드 기본 h2의 작은 라벨 스타일을 본문 제목으로 되돌림) */
.legal { text-align: left; line-height: 1.6; }
.legal h2 {
    font-size: .95rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text, inherit);
    margin: 20px 0 8px;
}
.legal h2:first-of-type { margin-top: 8px; }
.legal ul { margin: 0 0 8px; padding-left: 20px; }
.legal li { margin-bottom: 4px; }
.legal-date { font-size: .8rem; color: var(--muted); margin-top: 20px; }

/* 이번 주 빠뜨린 날 (독서 기록 화면 7일 윈도우 부채 채우기) */
.missed-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.missed-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.missed-list .missed-date { font-weight: 600; }
.missed-list .missed-debt { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.missed-list .btn-fill { margin-left: auto; padding: 6px 12px; font-size: .85rem; text-decoration: none; }

/* 독서 기록 카드: 헤드의 탭 버튼 2개로 바디를 전환한다(일자별 독서 시간 ↔ 이번 주 빠뜨린 날).
   JS 없이 라디오(:checked) + 형제 선택자(~)로 패널을 토글 — 두 데이터는 서버가 미리 렌더, 보이기만 전환.
   라디오는 시각만 숨기고(off-screen) 키보드 포커스는 살려 탭 전환이 키보드로도 된다. */
.record-card { position: relative; }
.record-card .tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
/* 탭 버튼 2개(라디오 뒤 라벨)를 가로로 반반 띄운다. float라 인접 라벨 사이 공백 간격이 없어
   밑줄(탭 바 baseline)이 끊김 없이 이어진다. 패널은 clear:both로 탭 바 아래로 내려간다. */
.record-card .record-tab {
    float: left;
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 12px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid var(--border);
    user-select: none;
    transition: color .15s ease, border-color .15s ease;
}
.record-card .record-tab:hover { color: var(--text); }
/* 활성 탭 = 액센트 밑줄. 인접 형제 선택자(:checked + 라벨)라 모든 렌더러가 토글 시 갱신한다. */
.record-card .tab-radio:checked + .record-tab {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.record-card .tab-radio:focus-visible + .record-tab {
    outline: 2px solid var(--accent);                 /* 키보드 포커스 표시(접근성) */
    outline-offset: 2px;
}
.tab-panel { display: none; }
#tab-records:checked ~ .panel-records,
#tab-missed:checked ~ .panel-missed,
#tab-bti:checked ~ .panel-bti,
#tab-shelf:checked ~ .panel-shelf { display: block; clear: both; padding-top: 18px; }
.panel-missed .muted { margin: 0 0 4px; font-size: .85rem; }

/* --- 광고 (AdSense) — 부가 화면 하단에 1개. 콘텐츠와 떨어뜨려 비침습적으로. --- */
.ad-slot {
    margin: 28px auto 8px;
    max-width: 100%;
    text-align: center;
    overflow: hidden;            /* 반응형 광고가 컨테이너를 넘지 않도록 */
}
.ad-slot .ad-label {
    display: block;
    margin-bottom: 4px;
    font-size: .7rem;
    color: var(--muted, #9aa0a6);
    letter-spacing: .04em;
    text-align: left;            /* '광고' 표기로 콘텐츠와 구분(투명성) */
}

/* === 공개 소개(랜딩) 페이지 — 비로그인 방문자·크롤러용. 루트("/")가 익명일 때 렌더. === */
.landing-hero { text-align: center; margin: 8px 0 20px; }
.landing-tagline {
    font-size: 1.95rem;
    line-height: 1.35;
    color: var(--text);
    margin: 0 0 16px;
    word-break: keep-all;
}
.landing-lead {
    color: var(--muted);
    line-height: 1.8;
    text-align: left;
    margin: 0 0 20px;
    word-break: keep-all;
}
.landing-lead strong { color: var(--text); }

/* CTA — 앵커지만 .btn 베이스를 받아 버튼 모양. 로그인 카드처럼 세로 스택
   (무료로 시작하기 → "또는" → Google로 시작하기). 간격은 oauth-divider가 자체 마진으로 준다. */
.landing-cta { display: flex; flex-direction: column; }
.landing-cta > a { width: 100%; text-decoration: none; text-align: center; }

/* 기능 목록 — 아이콘+강조 제목을 블록으로, 설명은 그 아래 흐리게. */
.landing-features { list-style: none; margin: 0; padding: 0; text-align: left; }
.landing-features li {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    line-height: 1.55;
    word-break: keep-all;
}
.landing-features li:last-child { border-bottom: none; }
.landing-features li strong { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 3px; }

/* 동작 방식 — 번호 매긴 단계. */
.landing-steps { margin: 0; padding-left: 22px; text-align: left; color: var(--muted); line-height: 1.7; }
.landing-steps li { margin-bottom: 6px; word-break: keep-all; }
.landing-steps strong { color: var(--text); }

/* 하단 재유도 CTA. */
.landing-bottom-cta { text-align: center; margin: 8px 0 16px; }
.landing-bottom-cta p { color: var(--muted); margin: 0 0 12px; word-break: keep-all; }
.landing-bottom-cta a { width: auto; display: inline-block; text-decoration: none; padding-left: 28px; padding-right: 28px; }

/* === 문의·피드백 (feedback.html / admin-feedback.html) === */
.fb-form .fb-field { display: block; margin: 0.6rem 0; }
.fb-form .fb-field select,
.fb-form .fb-field input,
.fb-form .fb-field textarea {
    display: block; width: 100%; margin-top: 0.25rem; padding: 0.5rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 8px; font: inherit; box-sizing: border-box;
}
.fb-form .fb-field textarea { resize: vertical; }

.fb-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.fb-item, .fb-admin-item { border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; padding: 0.8rem 0.9rem; }
.fb-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.fb-type { font-size: 0.78rem; font-weight: 700; background: rgba(0, 0, 0, 0.05); border-radius: 6px; padding: 0.12rem 0.45rem; }
.fb-author { font-size: 0.8rem; opacity: 0.65; margin-left: auto; }
.fb-title { font-weight: 700; margin: 0.45rem 0 0.2rem; }
.fb-content { margin: 0 0 0.5rem; white-space: pre-wrap; word-break: break-word; opacity: 0.9; }
.fb-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* 상태 배지 — 작성자 본인만 보는 처리 상태(미확인/읽음/처리완료) */
.fb-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; }
.fb-submitted { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); }
.fb-read { background: #e6f0ff; color: #1d4ed8; }
.fb-resolved { background: #e7f6ec; color: #15803d; }

.btn-small { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

/* 문의 — 유형 필터 탭 + 개발자 답장 */
.fb-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 1rem; }
.fb-filter a {
    font-size: 0.85rem; text-decoration: none; padding: 0.25rem 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 999px; color: inherit;
}
.fb-filter a.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.fb-reply-shown { margin: 0.5rem 0; padding: 0.55rem 0.7rem; background: #eef5ff; border-radius: 8px; }
.fb-reply-shown p { margin: 0.2rem 0 0; white-space: pre-wrap; word-break: break-word; }
.fb-reply-label { font-size: 0.78rem; font-weight: 700; color: #1d4ed8; }

.fb-reply-form { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.fb-reply-form textarea {
    width: 100%; padding: 0.45rem 0.6rem; border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px; font: inherit; box-sizing: border-box; resize: vertical;
}
.fb-reply-form button { align-self: flex-start; }

/* 책BTI 분석 카드 캐러셀 (CSS scroll-snap + 화살표 버튼 JS) */
.personality-carousel {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.personality-carousel::-webkit-scrollbar { display: none; }
.personality-slide {
    flex: 0 0 80%;              /* 90% → 80%: 양옆 이웃이 엿보이게 */
    scroll-snap-align: center;  /* start → center: 활성 카드를 가운데로 */
    scroll-snap-stop: always;
    min-width: 0;
    margin-top: 0;
}
.personality-slide:first-child { margin-left: 10%; }   /* 첫 카드도 중앙 (= (100-80)/2) */
.personality-slide:last-child  { margin-right: 10%; }  /* 끝 카드도 중앙 */
.personality-slide:only-child  { flex-basis: 100%; margin-left: 0; margin-right: 0; }  /* 1개면 꽉, 여백 0 */
@media (prefers-reduced-motion: reduce) {
    .personality-carousel { scroll-behavior: auto; }
}

.personality-carousel-wrap { position: relative; }

.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    color: #333;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-nav-prev { left: 0.25rem; }
.carousel-nav-next { right: 0.25rem; }
.carousel-nav:hover { background: #fff; }
.carousel-nav[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }

/* 넘칠 게 없으면(단일 카드 등) 버튼 자체 숨김 — JS가 .nav-hidden 토글 */
.personality-carousel-wrap.nav-hidden .carousel-nav { display: none; }

/* 터치 기기: 네이티브 스와이프 사용 — 버튼 숨김 */
@media (pointer: coarse) {
    .carousel-nav { display: none; }
}