:root {
  /* Light theme palette */
  --bg:#ffffff;
  --fg:#222222;
  --muted:#666666;
  --card:#f7f8fa;
  --accent:#ff2f6e;   /* 포인트색은 유지(왓챠 느낌) */
  --line:#e6e8ee;
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:14px/1.6 system-ui,Segoe UI,Apple SD Gothic Neo,Malgun Gothic,sans-serif;
}
a{color:#0b66d0;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:16px}

/* Top nav */
.nav{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.nav .container{display:flex;gap:12px;align-items:center}
.brand{font-weight:800;color:var(--accent);font-size:1.5rem}

/* 검색바 */
.searchbar{margin-left:auto;display:flex;gap:8px}
.searchbar .ac-wrap{
  flex: 0 0 auto;   /* 수축 방지 */
  min-width: 0;
  position: relative; /* 자동완성 패널 기준 */
}
#search-input{
  width: 400px;      /* 두 배 */
  min-width: 400px;  /* flex로 줄어드는 것 방지 */
  padding: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--fg);
  border-radius: 6px;
}
.searchbar button{
  padding:8px 12px;background:var(--accent);color:#fff;border:none;border-radius:6px
}
.right a{margin-left:12px;color:var(--muted)}

.msg{
  padding:10px;border-radius:8px;margin:12px 0;background:#eef7ff;border:1px solid #d5e9ff;color:#1a4a7a
}
.section-title{margin:24px 0 12px;font-size:18px}

/* Cards & grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.cover{background:#ddd center/cover no-repeat;width:100%;aspect-ratio:3/4}
.meta{padding:10px}
.title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--muted);font-size:12px;margin-top:4px}

/* Lists */
.list .item{
  display:flex;gap:12px;padding:12px;border:1px solid var(--line);
  background:#fff;border-radius:12px;margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.it-cover{width:64px;aspect-ratio:3/4;background:#ddd center/cover no-repeat;border-radius:8px}
.it-title{font-weight:700}
.it-meta{color:var(--muted);font-size:12px;margin:2px 0 6px}
.it-text{margin:0}

/* Buttons */
.btn, .btn-ghost{display:inline-block;padding:8px 12px;border-radius:8px;border:1px solid var(--line)}
.btn{background:var(--accent);color:#fff;border-color:transparent}
.btn:hover{filter:brightness(0.98)}
.btn-ghost{color:var(--muted);background:#fff}
.inline{display:inline}
.badge{
  display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;
  background:#f1f3f7;color:#555;font-size:11px;border:1px solid var(--line)
}

/* Book detail */
.book-detail{display:grid;grid-template-columns:160px 1fr;gap:16px;margin-top:8px}
.bd-cover{width:160px;aspect-ratio:3/4;background:#ddd center/cover no-repeat;border-radius:12px;border:1px solid var(--line)}
.bd-title{margin:0}
.bd-sub{color:var(--muted)}
.bd-auth,.bd-meta{color:var(--muted);font-size:13px;margin:4px 0}
.bd-desc{
  white-space: pre-wrap;      /* 줄바꿈 유지 */
  overflow: visible;
  display: block;
}
.bd-rating{margin-top:12px}

/* Rating histogram */
.hist{display:flex;align-items:flex-end;gap:6px;height:80px}
.hist .bar{
  width:16px;background:#eef0f4;position:relative;border-radius:4px;
  display:flex;flex-direction:column-reverse;align-items:center;border:1px solid var(--line)
}
.hist .bar-fill{display:block;width:100%;background:var(--accent);border-radius:4px}
.hist .bar-label{position:absolute;top:-16px;font-size:10px;color:var(--muted)}

/* Filters & forms */
.filters{display:flex;gap:8px;margin-bottom:12px}
.filters input, .filters select{
  padding:8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--fg)
}
.stack > * {margin-bottom:8px}
input[type="text"], input[type="number"], textarea, select{
  padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--fg);width:100%
}
textarea{resize:vertical}

/* Quotes */
.quote-list{list-style:none;padding:0}
.quote{
  border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;margin-bottom:8px;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.qt-text{font-style:italic}
.footer{color:var(--muted);border-top:1px solid var(--line);margin-top:24px;padding-top:12px;background:#fff}

.pagination{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px 0}
.pagination a{
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#0b66d0
}
.pagination span{color:var(--muted)}





/* 자동완성 패널 기본 */
.ac-wrap{ position: relative; }
.ac-panel{
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  max-height: 420px; overflow: auto; z-index: 20;
}
.ac-panel.hidden{ display: none; }

/* 아이템 레이아웃 */
.ac-item{
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px; text-decoration: none;
}
.ac-item:hover, .ac-item.active{ background: #f5f8ff; }

.ac-cover{
  width: 40px; height: 56px; flex: 0 0 40px;
  object-fit: cover; border-radius: 4px;
  background:#f3f3f3; border:1px solid var(--line);
}

.ac-info{ min-width: 0; display:flex; flex-direction:column; gap:2px; }
.ac-title{
  font-size: 14px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ac-sub{
  font-size: 12px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}





/* Spoiler */
.spoiler-blur{ filter: blur(6px); }
.btn-xs{ padding:4px 8px; font-size:12px; border-radius:6px; }

/* Counters */
.counter{ text-align:right; color:var(--muted); margin-top:2px; }

/* Profile summary */
.summary-card{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap:12px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:12px;
}
.summary-card > div{ text-align:center }
.summary-card strong{ display:block; color:#555; font-size:12px; }
.summary-card div div{ font-size:18px; font-weight:700; margin-top:4px; }





/* Motion-safe micro-interactions */
@media (prefers-reduced-motion:no-preference){
  .card, .item, .btn, .btn-ghost { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.item:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }
a:focus, button:focus, .btn:focus, .btn-ghost:focus{
  outline: none; box-shadow: 0 0 0 3px rgba(11,102,208,.2); border-color:#0b66d0;
}


.card-link{display:block}
.cover-img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#ddd}





.clamp-3{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.moreless{ color:#0b66d0; cursor:pointer; font-size:12px; margin-top:4px; display:inline-block }


.skeleton{ position:relative; overflow:hidden; background:#eee; border-radius:8px }
.skeleton::after{
  content:""; position:absolute; inset:0;
  transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer{ 100% { transform:translateX(100%); } }



.toast{
  position:fixed; right:16px; bottom:16px; z-index:9999;
  background:#1f2937; color:#fff; padding:10px 14px; border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,.15); opacity:.98
}


.spoiler-blur{ filter: blur(6px); position:relative }
.spoiler-blur::before{
  content:""; position:absolute; inset:0; border-radius:6px; background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.65));
}


input[type="text"], input[type="number"], textarea, select{
  padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--fg);width:100%
}
input:focus, textarea:focus, select:focus{ border-color:#0b66d0; box-shadow:0 0 0 3px rgba(11,102,208,.15) }
.form-error{ color:#b80000; font-size:12px; margin-top:4px }
.help{ color:var(--muted); font-size:12px }


.private-border {
    border: 2px solid red;
    padding: 5px;
    border-radius: 6px;
}



/* 로그인/회원가입 폼 전용 스타일 */
.form-card {
  max-width: 420px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  color: var(--fg);
}

.form-card h1 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
  color: var(--fg);
}

.form-card form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-card label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="password"] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--fg);
}

.form-card input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,47,110,0.15);
}

.form-card button {
  padding: 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.form-card button:hover {
  background: #e62661; /* accent 조금 어둡게 */
  transform: translateY(-1px);
}

.form-card p {
  text-align: center;
  margin-top: 0.5rem;
  color: var(--muted);
}

.form-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.form-card a:hover {
  text-decoration: underline;
}

/* 에러 메시지 */
.errorlist {
  color: #d93025;
  font-size: 0.9rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}




/* 버튼을 링크처럼 보이게 */
.linklike {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--muted); /* 로그인 링크와 동일 색상 */
  text-decoration: none;
  cursor: pointer;
}

.linklike:hover {
  text-decoration: underline;
}



.star-rating {
  display: inline-block;
  direction: rtl;   /* 오른쪽부터 */
  font-size: 32px;
}

.star-rating input {
  display: none;
}

.star-rating label {
  float: right;
  padding: 0;
  cursor: pointer;
  color: #ddd; /* 기본 회색 별 */
  position: relative;
}

.star-rating label.full::before {
  content: "★";
}
.star-rating label.half::before {
  content: "★";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #ddd; /* 반쪽 빈 별 배경 */
}
.star-rating label.half::after {
  content: "★";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: gold; /* 반쪽 채워진 별 */
}

/* 선택/호버 효과 */
.star-rating input:checked ~ label.full::before,
.star-rating input:checked ~ label.half::before,
.star-rating input:checked ~ label.half::after {
  color: gold;
}

.star-rating label:hover ~ label.full::before,
.star-rating label:hover ~ label.half::before,
.star-rating label:hover ~ label.half::after {
  color: gold;
}