:root{
  --brand:#ff7fa8; --brand-2:#9b8cff; --brand-ink:#e0558a;
  --ink:#3a3552; --muted:#8a85a3; --bg:#fff8fb; --card:#ffffff; --line:#f1e4ee;
  --shadow:0 10px 30px rgba(155,140,255,.14); --radius:20px;
  --font-ui:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-serif:'Noto Serif KR','Nanum Myeongjo','Apple SD Gothic Neo',serif;
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--font-ui);color:var(--ink);background:var(--bg);word-break:keep-all;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:var(--brand-ink);text-decoration:none}
a:hover{color:var(--brand)}
.text-brand{color:var(--brand-ink)}

/* 배경 블롭 */
.bg-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#fff6fa,#f6f3ff 60%,#f0f7ff)}
.bg-blobs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:float 18s ease-in-out infinite}
.bg-blobs span:nth-child(1){width:360px;height:360px;background:#ffd3e4;top:-80px;left:-80px}
.bg-blobs span:nth-child(2){width:420px;height:420px;background:#d8d2ff;top:30%;right:-140px;animation-delay:-6s}
.bg-blobs span:nth-child(3){width:320px;height:320px;background:#cfeaff;bottom:-80px;left:20%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.08)}}

/* 네비 */
.site-nav{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:.6rem 0}
.brand-text{font-weight:800;font-size:1.2rem;background:linear-gradient(90deg,var(--brand-ink),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-icon{border-radius:8px;transition:transform .4s}
.navbar-brand:hover .brand-icon{transform:rotate(-12deg) scale(1.12)}

/* 버튼 */
.btn{border-radius:14px;font-weight:600;transition:all .25s}
.btn-brand{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;box-shadow:0 8px 20px rgba(255,127,168,.35)}
.btn-brand:hover{color:#fff;transform:translateY(-2px);box-shadow:0 12px 26px rgba(155,140,255,.4)}
.btn-soft{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-soft:hover,.btn-soft.active{background:#fff0f6;color:var(--brand-ink);border-color:#ffc8dc}

/* 히어로 */
.hero{padding:4.5rem 0 2.5rem}
.hero-badge{display:inline-block;background:#fff;border:1px solid #ffd3e4;color:var(--brand-ink);padding:.4rem 1rem;border-radius:99px;font-size:.85rem;font-weight:600;box-shadow:var(--shadow)}
.hero-title{font-weight:800;font-size:clamp(2rem,6vw,3.6rem);line-height:1.25;margin:1.2rem 0 1rem;letter-spacing:-.02em}
.grad-text{background:linear-gradient(90deg,#ff7fa8,#9b8cff,#6cc4ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.hero-sub{color:var(--muted);font-size:1.05rem}
.hero-stats{display:flex;justify-content:center;gap:clamp(1rem,4vw,3rem);margin-top:2rem}
.hero-stats div{background:rgba(255,255,255,.8);border:1px solid var(--line);border-radius:18px;padding:.9rem 1.4rem;box-shadow:var(--shadow);min-width:96px}
.hero-stats b{display:block;font-size:1.6rem;color:var(--brand-ink)}
.hero-stats small{color:var(--muted)}

/* 검색/칩 */
.search-box{max-width:560px;margin:0 auto 1.2rem;display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:99px;padding:.4rem .5rem .4rem 1.1rem;box-shadow:var(--shadow);transition:box-shadow .25s}
.search-box:focus-within{box-shadow:0 0 0 4px rgba(255,127,168,.2)}
.search-box i{color:var(--muted)}
.search-box input{border:0;outline:0;flex:1;background:transparent;font-size:1rem;min-width:0}
.chip-container{position:relative;margin:0 auto .8rem;max-width:100%;display:flex;align-items:center}
.chip-row{
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:.4rem 2.6rem;
  margin:0;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling:touch;
  user-select:none;
  cursor:grab;
  width:100%;
  scrollbar-width:none;
}
.chip-row.is-dragging{cursor:grabbing;scroll-behavior:auto}
.chip-row::-webkit-scrollbar{display:none}

.chip{white-space:nowrap;background:#fff;border:1px solid var(--line);color:var(--ink);padding:.42rem .95rem;border-radius:99px;font-size:.88rem;font-weight:500;transition:all .2s;flex-shrink:0}
.chip small{color:var(--muted);margin-left:2px}
.chip:hover{transform:translateY(-2px);border-color:#ffc8dc;color:var(--brand-ink)}
.chip.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:transparent}
.chip.active small{color:#ffffffcc}

/* 좌우 이동 네비게이션 버튼 */
.chip-nav{
  position:absolute;
  top:50%;
  transform:translateY(calc(-50% - .2rem));
  z-index:5;
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  display:grid;
  place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  cursor:pointer;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  opacity:0;
  pointer-events:none;
  font-size:.9rem;
}
.chip-nav:hover{
  background:#fff;
  color:var(--brand-ink);
  border-color:#ffc8dc;
  transform:translateY(calc(-50% - .2rem)) scale(1.1);
  box-shadow:0 6px 18px rgba(255,127,168,.3);
}
.chip-nav.show{
  opacity:1;
  pointer-events:auto;
}
.chip-prev{left:0}
.chip-next{right:0}

/* 좌우 끝 페이드 인디케이터 */
.chip-container::before, .chip-container::after{
  content:'';
  position:absolute;
  top:0;
  bottom:.4rem;
  width:42px;
  z-index:3;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s ease;
}
.chip-container::before{
  left:0;
  background:linear-gradient(90deg, var(--bg, #fffdfb) 30%, transparent);
}
.chip-container::after{
  right:0;
  background:linear-gradient(270deg, var(--bg, #fffdfb) 30%, transparent);
}
.chip-container.fade-left::before{opacity:1}
.chip-container.fade-right::after{opacity:1}

@media (max-width:575.98px){
  .chip-row{padding:.4rem .4rem .6rem}
  .chip-nav{display:none!important}
  .chip-container::before, .chip-container::after{display:none}
}

.section-title{font-size:1.25rem;font-weight:800;margin:1rem 0 1.2rem}

/* 소설 카드 */
.novel-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;color:var(--ink);height:100%}
.novel-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(155,140,255,.25);color:var(--ink)}
.cover,.book-cover{position:relative;background:linear-gradient(145deg,hsl(var(--h) 90% 88%),hsl(calc(var(--h) + 50) 85% 84%));display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.cover{height:170px;padding:1rem 1.1rem}
.cover::after,.book-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.7),transparent 55%);pointer-events:none}
.cover-icon{position:absolute;right:-14px;top:-8px;font-size:7.5rem;color:rgba(255,255,255,.65);transition:transform .6s}
.novel-card:hover .cover-icon{transform:rotate(12deg) scale(1.12)}
.cover-title{position:relative;z-index:1;font-family:var(--font-serif);font-weight:700;font-size:1.3rem;line-height:1.35;color:hsl(var(--h) 40% 28%);text-shadow:0 1px 0 rgba(255,255,255,.6)}
.genre-tag{position:absolute;left:1rem;top:1rem;z-index:2;background:rgba(255,255,255,.85);color:hsl(var(--h) 45% 38%);font-size:.75rem;font-weight:700;padding:.2rem .65rem;border-radius:99px}
.live-tag{position:absolute;right:1rem;bottom:1rem;z-index:2;background:#fff;color:var(--brand-ink);font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;animation:pulse 1.8s infinite}
.live-tag.static{position:static;border:1px solid #ffc8dc}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,127,168,.5)}50%{box-shadow:0 0 0 8px rgba(255,127,168,0)}}
.novel-card .body{padding:1rem 1.15rem 1.15rem}
.tagline{font-weight:700;margin-bottom:.35rem;font-size:.98rem}
.syn{color:var(--muted);font-size:.88rem;margin-bottom:.8rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:.9rem;color:var(--muted);font-size:.8rem;flex-wrap:wrap}
.meta i{margin-right:3px;color:var(--brand)}
.meta.big{font-size:.92rem}

.pagination{--bs-pagination-border-radius:12px;gap:.3rem}
.page-link{border-radius:12px!important;border:1px solid var(--line);color:var(--ink)}
.page-item.active .page-link{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent}
.empty{padding:4rem 1rem}
.empty>i{font-size:3.5rem;color:var(--brand)}

/* 상세 */
.detail-hero{padding:2rem 0 2.5rem;background:linear-gradient(180deg,hsl(var(--h) 100% 95%),transparent)}
.breadcrumb a{color:var(--muted)}
.book-cover{aspect-ratio:3/4;border-radius:10px 22px 22px 10px;padding:1.4rem;box-shadow:-6px 8px 0 rgba(0,0,0,.04),0 22px 40px rgba(155,140,255,.28);max-width:260px;margin:0 auto;border-left:10px solid hsl(var(--h) 70% 78%);animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.book-cover .cover-icon{font-size:11rem}
.book-cover .cover-title{font-size:1.5rem}
.cover-by{position:relative;z-index:1;margin-top:.6rem;font-size:.75rem;letter-spacing:.2em;color:hsl(var(--h) 35% 40%)}
.detail-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.3}
.detail-tagline{color:var(--brand-ink);font-size:1.1rem;font-weight:600}
.detail-body{padding-bottom:4rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.panel-title{font-size:1.1rem;font-weight:800;margin-bottom:1rem}
.panel-title i{color:var(--brand);margin-right:.3rem}
.synopsis{line-height:1.85;margin:0}
.sticky-panel{position:sticky;top:80px}
.char-card{display:flex;gap:.8rem;padding:.9rem;border-radius:16px;background:hsl(var(--h) 100% 97%);border:1px solid hsl(var(--h) 60% 92%);height:100%;transition:transform .25s}
.char-card:hover{transform:translateY(-3px)}
.avatar{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1.2rem;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 80% 72%),hsl(calc(var(--h) + 40) 75% 66%))}
.badge-role{font-size:.7rem;font-weight:600;background:#fff;color:var(--brand-ink);border-radius:99px;padding:.1rem .5rem;margin-left:.2rem;vertical-align:middle}
.toc-list{max-height:70vh;overflow-y:auto;overflow-x:hidden;padding-right:4px;scrollbar-width:thin;scrollbar-color:#f3b6cf transparent;scrollbar-gutter:stable}
.toc-list::-webkit-scrollbar{width:6px}
.toc-list::-webkit-scrollbar-track{background:transparent}
.toc-list::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffc2d9,#d9d0ff);border-radius:99px}
.toc-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff9fc4,#bfb2ff)}
.toc-item{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;border-radius:14px;color:var(--ink);transition:background .2s,transform .2s}
.toc-item:hover{background:#fff0f6;transform:translateX(4px);color:var(--ink)}
.toc-item.active{background:#fff0f6;font-weight:700}
.toc-item.disabled{color:var(--muted);pointer-events:none}
.toc-no{flex:none;width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#ffe0ec,#e6e1ff);display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--brand-ink)}
.toc-name{flex:1;min-width:0}
.toc-blurb{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.15rem;font-size:.75rem;font-weight:400;line-height:1.4;color:var(--muted)}
.toc-len{font-size:.75rem;color:var(--muted)}
.toc-read{display:none;color:#6fd3a6}
.toc-item.is-read .toc-read{display:inline}
.toc-item.is-read .toc-name{color:var(--muted)}

/* 리더 */
.reader-body{--r-bg:#fffdfb;--r-ink:#2f2b3f;--fs:18px;--lh:1.95;--rfont:var(--font-serif)}
.reader-body[data-theme=sepia]{--r-bg:#f6ecd9;--r-ink:#4a3b28}
.reader-body[data-theme=mint]{--r-bg:#e9f5ee;--r-ink:#2b4036}
.reader-body[data-theme=night]{--r-bg:#26263a;--r-ink:#dedcee}
.reader-body{background:var(--r-bg);transition:background .4s}
.reader-body .bg-blobs{display:none}
.reader-body .site-nav{display:none}
.reader-body .site-footer{display:none}
.read-progress{position:fixed;top:0;left:0;height:4px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));z-index:1050;transition:width .1s}
.reader-tools{position:sticky;top:0;z-index:1030;padding:.6rem 0;background:color-mix(in srgb,var(--r-bg) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .3s}
.reader-tools.hide{transform:translateY(-100%)}
.tool-title{max-width:60vw}
.reader-wrap{max-width:720px;padding-top:2rem;padding-bottom:4rem;color:var(--r-ink)}
.chapter-head{padding:2rem 0 1.5rem}
.chapter-kicker{color:var(--brand-ink);font-weight:700;letter-spacing:.15em;font-size:.85rem}
.chapter-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(1.6rem,5vw,2.2rem);margin:.5rem 0}
.chapter-meta{font-size:.85rem;opacity:.65}
.ornament{display:flex;align-items:center;justify-content:center;gap:.8rem;color:var(--brand);margin:1.4rem 0}
.ornament span{height:1px;width:60px;background:linear-gradient(90deg,transparent,var(--brand),transparent)}
.prose{font-family:var(--rfont);font-size:var(--fs);line-height:var(--lh);word-break:keep-all;overflow-wrap:break-word;letter-spacing:-.005em}
.prose p{margin:0 0 1.15em;text-indent:.8em}
.prose p.dialog{text-indent:0}
.prose p.scene-break{text-align:center;color:var(--brand);text-indent:0;margin:2em 0;letter-spacing:.5em}
.prose p{animation:fadeUp .6s both}
.prose p:nth-child(-n+8){animation-delay:calc(var(--i,0)*60ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reader-body[data-font=sans]{--rfont:var(--font-ui)}
.chapter-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1.5rem}
.chapter-nav .btn{flex:0 1 auto}
.reader-body .btn-soft{background:color-mix(in srgb,var(--r-bg) 70%,#fff);color:var(--r-ink)}
.reader-body[data-theme=night] .btn-soft{border-color:#44445f}
.reader-body[data-theme=night] .offcanvas{background:#2f2f46;color:#dedcee}
.reader-body[data-theme=night] .btn-close{filter:invert(1)}
.reader-body[data-theme=night] .toc-item{color:#dedcee}
.reader-body[data-theme=night] .toc-item:hover,.reader-body[data-theme=night] .toc-item.active{background:#3c3c58}
.setting-canvas{height:auto!important;border-radius:24px 24px 0 0}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0;border-bottom:1px dashed var(--line)}
.set-row:last-child{border:0}
.set-row label{font-weight:700}
.theme-dot{width:34px;height:34px;border-radius:50%;border:2px solid #e3d9e6;transition:transform .2s}
.theme-dot:hover{transform:scale(1.15)}
.theme-dot.active{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,127,168,.3)}
.btn-group .btn.active{background:#fff0f6;color:var(--brand-ink);border-color:#ffc8dc}

/* 푸터/모달/탑버튼 */
.site-footer{padding:2.5rem 0 3rem;color:var(--muted);border-top:1px solid var(--line);background:rgba(255,255,255,.6)}
.site-footer a{color:var(--muted)}
.app-modal{border:0;border-radius:26px;box-shadow:0 30px 70px rgba(155,140,255,.35)}
.modal.fade .modal-dialog{transform:scale(.85) translateY(20px);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.modal.show .modal-dialog{transform:none}
.modal-icon{font-size:3rem;line-height:1}
.modal-icon .bi-info-circle-fill{color:var(--brand-2)}
.modal-icon .bi-question-circle-fill{color:var(--brand)}
.modal-icon .bi-check-circle-fill{color:#4cc9a0}
.modal-icon .bi-exclamation-triangle-fill{color:#ffb454}
.modal-icon i{display:inline-block;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(0) rotate(-30deg)}to{transform:none}}
.to-top{position:fixed;right:1rem;bottom:1.2rem;width:46px;height:46px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 20px rgba(155,140,255,.4);opacity:0;pointer-events:none;transform:translateY(20px);transition:all .3s;z-index:1020}
.to-top.show{opacity:1;pointer-events:auto;transform:none}

@media (max-width:575.98px){
  .hero{padding:2.8rem 0 1.5rem}
  .hero-stats div{padding:.7rem .8rem;min-width:0;flex:1}
  .hero-stats{gap:.5rem}
  .reader-wrap{padding-top:1rem}
  .prose p{text-indent:0}
  .sticky-panel{position:static}
  .chapter-nav .btn-lg{padding:.6rem 1rem;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* 등장인물 상세 */
.min-w-0{min-width:0}
.char-info{font-size:.85rem;color:var(--muted);margin-top:.1rem}
.char-info i{margin-right:2px}
.tag-row{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.4rem}
.tag{font-size:.72rem;font-weight:600;background:#fff;color:hsl(var(--h) 45% 42%);border-radius:99px;padding:.1rem .55rem}
.char-dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;margin:.4rem 0 0;font-size:.82rem}
.char-dl dt{font-weight:700;color:var(--brand-ink);white-space:nowrap}
.char-dl dt i{margin-right:3px}
.char-dl dd{margin:0}

/* 줄거리/세계관 문단 */
.synopsis p,.world-text p{margin:0 0 .9em}
.synopsis p:last-child,.world-text p:last-child{margin-bottom:0}

/* 히어로 타이핑 카드 */
.typing-card{max-width:620px;margin:1.8rem auto 0;text-align:left;background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.typing-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;background:linear-gradient(90deg,#fff0f6,#f1edff);border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.dots{display:flex;gap:5px}
.dots i{width:9px;height:9px;border-radius:50%;background:#ffc2d9}
.dots i:nth-child(2){background:#d7cdff}
.dots i:nth-child(3){background:#bfe3ff}
.typing-status{flex:1;font-weight:600;color:var(--brand-ink)}
.typing-status .bi{display:inline-block;margin-right:3px}
.typing-card.writing .typing-status .bi{animation:write 0.7s ease-in-out infinite}
@keyframes write{0%,100%{transform:rotate(0) translateX(0)}50%{transform:rotate(-14deg) translateX(2px)}}
.ellipsis::after{content:'';animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
.typing-genre{font-size:.72rem;font-weight:700;background:#fff;color:var(--brand-ink);border:1px solid #ffd3e4;border-radius:99px;padding:.1rem .6rem}
.typing-genre.swap{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
.typing-body{margin:0;padding:1.3rem 1.4rem;min-height:5.4rem;font-family:var(--font-serif);font-size:1.12rem;line-height:1.85;color:var(--ink);word-break:keep-all}
.caret{display:inline-block;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:var(--brand);animation:blink 1s steps(2,start) infinite}
.typing-card.writing .caret{animation:none}
@keyframes blink{to{visibility:hidden}}
@media (max-width:575.98px){.typing-body{font-size:1rem;padding:1.1rem;min-height:6.2rem}}

/* Font Awesome 아이콘도 Bootstrap Icons 와 같은 크기/정렬로 */
.cover-icon.fa-solid{font-size:6rem;top:10px;right:6px}
.book-cover .cover-icon.fa-solid{font-size:9rem;top:14px;right:10px}
.chip .fa-solid{font-size:.8em}

/* 댓글 놀이 스레드 */
.thread{display:flex;flex-direction:column;gap:.9rem;font-size:calc(var(--fs) * .92);line-height:1.8}
.thread .cm{--c:hsl(var(--h) 70% 62%);position:relative;padding:1rem 1.15rem 1.05rem;border-radius:18px;border:1px solid color-mix(in srgb,var(--r-ink) 13%,transparent);background:color-mix(in srgb,var(--r-bg) 78%,#fff);box-shadow:0 6px 18px rgba(80,60,120,.06);animation:fadeUp .5s both}
.thread .cm-reply{margin-left:1.1rem;border-left:4px solid var(--c)}
.thread .cm-topic{border:2px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,var(--r-bg)),color-mix(in srgb,var(--r-bg) 85%,#fff))}
.thread .cm-end{margin-top:.4rem;border:2px dashed color-mix(in srgb,var(--c) 60%,transparent);background:color-mix(in srgb,var(--c) 9%,var(--r-bg))}
.thread .cm-head{display:flex;align-items:center;gap:.65rem;margin-bottom:.55rem;font-family:var(--font-ui);line-height:1.3}
.thread .cm-ava{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:1rem;color:#fff;background:linear-gradient(135deg,hsl(var(--h) 75% 68%),hsl(calc(var(--h) + 40) 70% 60%))}
.thread .cm-who{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.thread .cm-who b{font-size:.95rem}
.thread .cm-who small{font-size:.72rem;opacity:.6}
.thread .cm-no{font-size:.75rem;font-weight:700;opacity:.5}
.thread .cm-badge{font-size:.7rem;font-weight:700;padding:.12rem .6rem;border-radius:99px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.thread .cm-badge-end{background:linear-gradient(135deg,#4cc9a0,#6fd3e8)}
.thread time{font-size:.72rem;opacity:.5;white-space:nowrap}
.thread .cm-body p{margin:0 0 .7em;text-indent:0;animation:none;word-break:keep-all}
.thread .cm-body p:last-child{margin-bottom:0}
.thread .cm-mention{font-weight:700;color:var(--brand-ink)}
.reader-body[data-theme=night] .thread .cm-mention{color:#ff9fc2}
.thread .cm-ref{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;font-family:var(--font-ui);font-size:.8rem;font-weight:600;padding:.25rem .75rem;border-radius:99px;border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--brand-ink)}
@media (max-width:575.98px){.thread .cm-reply{margin-left:.35rem}.thread .cm{padding:.85rem .9rem}}

/* 마음의 문장 (시·위로·글귀·명언) 서식 */
.prose.prose-sentence{max-width:620px;margin:1.5rem auto 2.5rem;padding:2.2rem 2rem;border-radius:24px;background:color-mix(in srgb,var(--r-bg) 80%,#fff);border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);box-shadow:0 12px 35px rgba(220,160,180,.08);position:relative}
.prose.prose-sentence::before{content:"“";position:absolute;top:1rem;left:1.5rem;font-size:3.5rem;line-height:1;font-family:var(--font-serif);color:color-mix(in srgb,var(--brand) 30%,transparent);pointer-events:none}
.prose.prose-sentence p{text-indent:0;margin:0 0 1.25em;line-height:2.1;font-size:1.05em;word-break:keep-all;letter-spacing:-.01em}
.prose.prose-sentence p:last-child{margin-bottom:0}
.reader-body[data-theme=night] .prose.prose-sentence{background:color-mix(in srgb,var(--r-bg) 92%,#fff);border-color:color-mix(in srgb,var(--brand) 30%,transparent);box-shadow:0 12px 35px rgba(0,0,0,.25)}
@media (max-width:575.98px){.prose.prose-sentence{padding:1.6rem 1.2rem;margin:1rem auto 2rem}.prose.prose-sentence::before{font-size:2.8rem;top:.6rem;left:1rem}}