/* 지관 플랫폼 화면 시안: 공통 스타일
   큰 글씨, 넓은 여백, 한 화면에 꼭 필요한 것만. 글꼴은 Pretendard 하나, 색은 지관 녹색 하나. */
@font-face {
  font-family: "Pretendard";
  src: url("a/3ed7f0bb007708f12e47ced84c504884.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
x-dc { display: block; }

.m {
  --bg: #ffffff;
  --surface: #f5f5f2;
  --surface-2: #ecece8;
  --line: #e4e3df;
  --line-strong: #c8c7c1;
  --text: #191919;
  --text-2: #474747;
  --text-3: #6b6b6b;
  --brand: #006633;
  --brand-dark: #004d26;
  --brand-wash: #e8f2ec;
  box-sizing: border-box;
  font-family: Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  letter-spacing: -0.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
.m *, .m *::before, .m *::after { box-sizing: border-box; }
:where(.m) :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.m) :where(button, input, textarea) { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.m) a { color: inherit; text-decoration: none; }
:where(.m) button { cursor: pointer; background: none; border: 0; padding: 0; }
.m svg.i { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m svg.i.sm { width: 22px; height: 22px; }
.m svg.i.lg { width: 34px; height: 34px; }

/* 목차 */
.toc { background: var(--surface); border-radius: 12px; padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.toc h2 { font-size: 23px; line-height: 32px; font-weight: 700; margin-bottom: 8px; }
.toc a { font-size: 19px; line-height: 31px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 휴대폰 화면 */
.phone { position: relative; width: 390px; height: 844px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }
.bar { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 0 20px; background: var(--bg); }
.bar.inner { padding-left: 12px; }
/* 왼쪽 위 로고: 글자 없이 심벌만. 누르면 검색 홈 */
.brand { display: inline-flex; align-items: center; height: 44px; padding: 0 6px; margin-left: -6px; }
/* 지관 심벌(세로 둘 = 멈춤, 가로 둘 = 같음). 가로:세로 19:9, 간격:짧은 변:긴 변 = 1:4:9 */
.sym { content: ""; flex: none; display: inline-block; width: 26.6px; height: 12.6px; --c: var(--brand); background: linear-gradient(var(--c), var(--c)) 0 0 / 5.6px 12.6px no-repeat, linear-gradient(var(--c), var(--c)) 7px 0 / 5.6px 12.6px no-repeat, linear-gradient(var(--c), var(--c)) 14px 0 / 12.6px 5.6px no-repeat, linear-gradient(var(--c), var(--c)) 14px 7px / 12.6px 5.6px no-repeat; }
.brand::before { content: ""; flex: none; display: inline-block; width: 38px; height: 18px; --c: var(--brand); background: linear-gradient(var(--c), var(--c)) 0 0 / 8px 18px no-repeat, linear-gradient(var(--c), var(--c)) 10px 0 / 8px 18px no-repeat, linear-gradient(var(--c), var(--c)) 20px 0 / 18px 8px no-repeat, linear-gradient(var(--c), var(--c)) 20px 10px / 18px 8px no-repeat; }
.sym.w { --c: #ffffff; }
.acts { display: flex; align-items: center; gap: 8px; }
.med { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 12px; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); font-size: 17px; font-weight: 600; color: var(--text); }
.me { position: relative; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: var(--text-2); flex: none; }
.me .nd { position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px #ffffff; }
.av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--text-2); flex: none; }
.back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 4px; font-size: 18px; font-weight: 600; color: var(--text); }
.bar-title { font-size: 19px; font-weight: 700; }
.body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 24px 150px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.22) transparent; }
.body::-webkit-scrollbar { width: 4px; }
.body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.22); border-radius: 2px; }
.body.short { padding-bottom: 40px; }
/* 하단 탭: 눈에 덜 띄게. 아이콘 없이 글자만, 흰 바탕에 위쪽 가는 선 하나. 지금 탭만 굵은 검정 */
.tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 0 4px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; background: #ffffff; border-top: 1px solid var(--line); z-index: 6; }
.tabs a { display: flex; align-items: center; justify-content: center; height: 48px; font-size: 18px; font-weight: 500; color: var(--text-3); letter-spacing: -0.02em; }
.tabs a.on { color: var(--text); font-weight: 700; }
.fab { position: absolute; right: 18px; bottom: 66px; width: 56px; height: 56px; border-radius: 50%; background: #ffffff; color: var(--brand); border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); z-index: 5; }
.fab svg.i { width: 30px; height: 30px; stroke-width: 2.4; }
.footer-cta { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 24px 26px; background: var(--bg); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 14px; z-index: 5; }

/* 글자 */
.h-display { font-size: 30px; line-height: 40px; font-weight: 700; letter-spacing: -0.025em; }
.h-title { font-size: 22px; line-height: 31px; font-weight: 700; letter-spacing: -0.02em; }
.h-head { font-size: 19px; line-height: 27px; font-weight: 700; }
.t-body { font-size: 18px; line-height: 29px; }
.t-strong { font-size: 18px; line-height: 29px; font-weight: 600; }
.t-small { font-size: 16px; line-height: 24px; color: var(--text-2); }
.t-cap { font-size: 15px; line-height: 22px; color: var(--text-3); }
.c2 { color: var(--text-2); }
.c3 { color: var(--text-3); }
.green { color: var(--brand); }

/* 배치 */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.sec { margin-top: 44px; display: flex; flex-direction: column; gap: 18px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.more { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.band { height: 12px; margin: 40px -24px 0; background: var(--surface); }

/* 검색창 */
.search { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border: 2px solid #191919; border-radius: 12px; background: var(--bg); color: var(--text-3); font-size: 18px; }
.search .q { color: var(--text); font-weight: 600; flex: 1; }
.search.focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); }
.caret { display: inline-block; width: 2px; height: 26px; background: var(--brand); }
.place { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-2); }

/* 칩, 배지 */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips.line { flex-wrap: nowrap; overflow-x: auto; margin-right: -24px; padding-right: 24px; scrollbar-width: none; }
.chips.line::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 22px; border: 1.5px solid #efeee9; background: #efeee9; font-size: 17px; font-weight: 500; white-space: nowrap; color: var(--text); }
.chip.on { border-color: var(--brand); background: var(--brand); color: #ffffff; font-weight: 700; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; font-size: 15px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge.green { background: var(--brand-wash); color: var(--brand); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); display: inline-block; flex: none; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 24px; border-radius: 10px; font-size: 18px; font-weight: 700; border: 1.5px solid #f1f0ec; background: #f1f0ec; color: var(--text); white-space: nowrap; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.btn.dark { background: #191919; border-color: #191919; color: #ffffff; }
.btn.block { display: flex; width: 100%; }
.btn.sm { height: 46px; padding: 0 18px; font-size: 17px; border-radius: 999px; }
.btn.soft { border-color: var(--surface); background: var(--surface); }
.btn.kakao { background: #fee500; border-color: #fee500; color: rgba(0, 0, 0, 0.88); }
/* 보조 단추(2026-10-21): 기본은 연한 회색 채움, 지관다운 다음 행동은 연한 녹색 채움(.weak), 작은 단추는 알약, 켜짐은 연한 녹색 */
.btn.weak { border-color: var(--brand-wash); background: var(--brand-wash); color: var(--brand); }
.btn.on { border-color: var(--brand-wash); background: var(--brand-wash); color: var(--brand); }
.textlink { font-size: 17px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* 상자 */
.panel { background: var(--surface); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.card { border: 1.5px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.hr { height: 1px; background: var(--line); }

/* 책, 포스터 */
.cover { display: block; border-radius: 6px; object-fit: cover; background: var(--surface-2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 6px 14px rgba(0, 0, 0, 0.08); flex: none; }
.poster { display: block; border-radius: 10px; object-fit: cover; background: var(--surface-2); flex: none; }
.shelf { display: flex; gap: 18px; overflow-x: auto; margin-right: -24px; padding: 2px 24px 6px 0; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.bookcard { width: 116px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.bookcard .cover { width: 116px; height: 168px; }
.bookcard .ttl { font-size: 17px; line-height: 24px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bookcard .sub { font-size: 15px; line-height: 22px; color: var(--text-3); margin-top: -6px; }
.bookcard .sub.here-b { color: var(--brand); font-weight: 700; }
.item { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.item:last-child { border-bottom: 0; }
.item .cover { width: 72px; height: 104px; }
.item .poster { width: 92px; height: 130px; }
.item .txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ttl2 { font-size: 19px; line-height: 27px; font-weight: 700; }
.quote { font-size: 17px; line-height: 27px; color: var(--text-2); }
.where { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; color: var(--text-2); }
.where.here { color: var(--brand); font-weight: 700; }

/* 진행 막대 */
.progress { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); border-radius: 5px; }

/* 시트 */
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 6; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--bg); border-radius: 14px 26px 0 0; padding: 14px 24px 32px; display: flex; flex-direction: column; gap: 22px; z-index: 7; }
.grab { width: 48px; height: 5px; border-radius: 3px; background: var(--line-strong); align-self: center; }

/* 입력 */
.field { display: flex; flex-direction: column; gap: 8px; }
.field .lab { font-size: 16px; font-weight: 600; color: var(--text-2); }
.input { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; padding: 0 18px; border: 1.5px solid var(--line-strong); border-radius: 10px; font-size: 18px; background: var(--bg); }
.input.fill { background: var(--surface); border-color: var(--surface); }
.textarea { min-height: 150px; padding: 16px 18px; border: 1.5px solid var(--line-strong); border-radius: 10px; font-size: 18px; line-height: 29px; color: var(--text); background: var(--bg); }
.check { display: flex; align-items: center; gap: 14px; min-height: 52px; font-size: 18px; }
.check input { width: 26px; height: 26px; accent-color: var(--brand); flex: none; margin: 0; }
.switch { width: 54px; height: 32px; border-radius: 16px; background: var(--brand); position: relative; flex: none; display: inline-block; }
.switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; }
.switch.off { background: var(--line-strong); }
.switch.off::after { right: auto; left: 3px; }

/* 목록 줄 */
.lrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--line); font-size: 18px; }
.lrow:last-child { border-bottom: 0; }
.lrow .r { font-size: 16px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }

/* 선택지 */
.option { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 12px; border: 1.5px solid var(--line-strong); }
.option.on { border: 2px solid var(--brand); background: var(--brand-wash); }
.tick { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; display: inline-flex; align-items: center; justify-content: center; color: transparent; margin-top: 1px; }
.on > .tick { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.tick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }

/* 눌러 보는 시안: 버튼으로 바꾼 줄·카드, 두 칸 고르기, 지점 고르기, 알림 */
.m button.lrow, .m button.item, .m button.card, .m button.panel, .m button.option, .m button.bookcard { width: 100%; text-align: left; }
.m button.bookcard { width: 116px; }
.m a:focus-visible, .m button:focus-visible { outline: 3px solid rgba(0, 102, 51, 0.45); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 10px; background: var(--surface); }
.seg button { height: 48px; border-radius: 11px; font-size: 18px; font-weight: 600; color: var(--text-2); }
.seg button.on { background: #ffffff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pick { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pick button { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-size: 18px; text-align: left; width: 100%; }
.pick button.on { color: var(--brand); font-weight: 700; }
.toast { position: absolute; left: 24px; right: 24px; bottom: 140px; z-index: 30; padding: 14px 18px; border-radius: 10px; background: rgba(25, 25, 25, 0.94); color: #ffffff; font-size: 16px; line-height: 24px; font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.rec { width: 12px; height: 12px; border-radius: 50%; background: #c2410c; flex: none; animation: recpulse 1.2s ease-in-out infinite; }
@keyframes recpulse { 50% { opacity: 0.3; } }
.breath { animation: breath 8s ease-in-out infinite; }
.breath.paused { animation-play-state: paused; }
@keyframes breath { 0%, 100% { transform: scale(0.82); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rec, .breath { animation: none; } }

/* 오늘의 한 문장 · 책갈피 */
.bmk { width: 30px; height: 44px; flex: none; display: block; }
.bmk path { fill: #72775d; }
.bmk.gold path { fill: #b08a2e; }
.bmk.empty path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 3; }
.bmk.lg { width: 44px; height: 64px; }
.quote-big { font-size: 25px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; white-space: pre-line; }
.cell3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.cell3 > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; text-align: center; border-left: 1px solid var(--line); min-height: 92px; }
.cell3 > *:first-child { border-left: 0; }
.cell3 .k { font-size: 15px; color: var(--text-3); font-weight: 600; }
.cell3 .v { font-size: 17px; line-height: 24px; font-weight: 700; }

/* 대화로 쓰는 회고 */
.chat-head { flex: none; display: flex; align-items: center; gap: 10px; height: 68px; padding: 0 10px 0 6px; border-bottom: 1px solid var(--line); background: #ffffff; }
.chat-av { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chat-av.s { width: 34px; height: 34px; }
.chat-av.s .sym { transform: scale(0.72); }
.chat-chips { flex: none; display: flex; gap: 6px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); background: #fafaf8; overflow-x: auto; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.cc { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid var(--line); color: var(--text-2); white-space: nowrap; }
.cc.g { background: var(--brand-wash); border-color: var(--brand-wash); color: var(--brand); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.day { align-self: center; font-size: 15px; color: var(--text-3); padding: 2px 0 6px; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.mine { justify-content: flex-end; }
.bub { max-width: 84%; padding: 12px 16px; border-radius: 12px; font-size: 18px; line-height: 28px; white-space: pre-line; }
.bub.bot { background: var(--surface); border-top-left-radius: 6px; }
.bub.q { font-weight: 700; }
.bub.mine { background: var(--brand-wash); border-top-right-radius: 6px; }
.typing { display: inline-flex; gap: 5px; padding: 16px 18px; background: var(--surface); border-radius: 12px; border-top-left-radius: 6px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); animation: tdot 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.sumcard { border: 1.5px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #ffffff; }
.chat-dock { flex: none; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: #ffffff; display: flex; flex-direction: column; gap: 8px; }
.sug { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 8px 14px 8px 16px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: #ffffff; font-size: 17px; line-height: 24px; font-weight: 600; text-align: left; width: 100%; }
.sug svg { color: var(--brand); }
/* 독후감 대화: 여러 문장 고르기, 사진 말풍선, 정리 카드의 인용문 */
.sug.multi { justify-content: flex-start; gap: 12px; }
.sug.on { border-color: var(--brand); background: var(--brand-wash); }
.sug .tick { width: 26px; height: 26px; margin-top: 0; }
.sug .tick svg { color: inherit; width: 16px; height: 16px; }
.bub.photo { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 10px; font-size: 16px; line-height: 22px; color: var(--text-2); }
.shot { display: block; width: 184px; height: 124px; border-radius: 12px; background: linear-gradient(rgba(0, 102, 51, 0.2), rgba(0, 102, 51, 0.2)) 16px 47px / 122px 12px no-repeat, repeating-linear-gradient(to bottom, #cfccc2 0 4px, transparent 4px 13px) 18px 18px / 148px 88px no-repeat, #fbfaf6; box-shadow: inset 0 0 0 1px var(--line); }
.sumq { padding-left: 14px; border-left: 4px solid var(--brand); font-size: 19px; line-height: 29px; font-weight: 600; white-space: pre-line; }
.inbar { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 5px 6px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: #ffffff; }
.inbar .plus { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.inbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; padding: 0 6px; }
.inbar .ib { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); flex: none; }
.inbar .ib.on { background: #fdf1e3; color: #9a4a00; }
.disc { font-size: 15px; line-height: 22px; color: var(--text-3); text-align: center; }
@media (prefers-reduced-motion: reduce) { .typing i { animation: none; opacity: 0.6; } }

/* 나의 이야기 */
.book { width: 164px; height: 236px; flex: none; border-radius: 4px 12px 12px 4px; background: #72775d; color: #ffffff; padding: 22px 18px 20px 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 7px 0 0 rgba(0, 0, 0, 0.14), 0 12px 26px rgba(0, 0, 0, 0.18); }
.book .bt { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.03em; }
.book .ba { font-size: 15px; line-height: 22px; opacity: 0.9; }
.page-text { font-size: 19px; line-height: 35px; letter-spacing: -0.005em; }

/* 기록 달력: 녹색 한 가지를 네 단계로(없음 · 1개 · 2개 · 3개 이상). 날짜 숫자는 늘 보이게 */
.seg a { height: 48px; border-radius: 11px; font-size: 18px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
.seg a.on { background: #ffffff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.cal-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cal-stats .num { font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: -0.02em; }
.cal-stats .num small { font-size: 16px; font-weight: 600; margin-left: 1px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .wd { text-align: center; font-size: 15px; line-height: 22px; color: var(--text-3); }
.cal .d { aspect-ratio: 1; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; }
.cal .d.blank { visibility: hidden; }
.lv0 { background: var(--surface); color: var(--text-3); }
.lv1 { background: #d9ecdf; color: #0b3d22; }
.lv2 { background: #8cc3a3; color: #0b3d22; }
.lv3 { background: #006633; color: #ffffff; }
.lvf { background: #ffffff; color: #b9b8b2; box-shadow: inset 0 0 0 1px var(--line); }
.cal .d.today { box-shadow: inset 0 0 0 2.5px #191919; }
.cal .d.sel { outline: 3px solid var(--brand); outline-offset: 2px; }
.legend-lv { display: inline-flex; align-items: center; gap: 5px; }
.legend-lv i { width: 18px; height: 18px; border-radius: 5px; display: inline-block; }
.dotlv { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); flex: none; margin-top: 10px; }
/* 연간: 달마다 작은 달력 하나 */
.year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mon { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-radius: 10px; border: 1.5px solid var(--line); background: #ffffff; text-align: left; width: 100%; }
.mon.on { border: 2px solid var(--brand); padding: 9.5px 7.5px; }
.mon .ml { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; font-size: 17px; font-weight: 700; padding: 0 2px; }
.mon .ml span { font-size: 15px; font-weight: 600; color: var(--text-3); }
.mini { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.mini i { aspect-ratio: 1; border-radius: 2.5px; display: block; }
.mini i.b { visibility: hidden; }
.hbar { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; min-height: 40px; font-size: 17px; }
.hbar .tr { height: 12px; border-radius: 6px; background: var(--surface); overflow: hidden; }
.hbar .tr i { display: block; height: 100%; border-radius: 6px; background: var(--brand); }
.hbar .v { text-align: right; font-weight: 700; }

/* 희망 TIME BOX: 봉한 편지 */
.envelope { position: relative; width: 176px; height: 118px; margin: 0 auto; border-radius: 10px; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--line-strong) calc(50% - 1px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)) left top / 50% 62% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), var(--line-strong) calc(50% - 1px), var(--line-strong) calc(50% + 0.5px), transparent calc(50% + 0.5px)) right top / 50% 62% no-repeat, #fbfaf6; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.envelope .seal { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px #fbfaf6; }
.letter { border-radius: 12px; background: #fbfaf6; box-shadow: inset 0 0 0 1.5px var(--line); padding: 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.minirow { display: inline-flex; gap: 3px; flex: none; }
.minirow i { width: 14px; height: 14px; border-radius: 3.5px; display: block; }

/* 오늘의 한 문장 뽑기 단추: 얼굴 있는 캡슐(뽑기 공). 아직 안 뽑았으면 별이 반짝이고, 처음 열면 두 번 콩 뛴다 */
.me.fortune { background: #ffffff; border-color: var(--line); }
.me.fortune svg { width: 32px; height: 32px; overflow: visible; animation: hop 1.3s ease-in-out 0.5s 2; }
.me.fortune .tw { transform-box: fill-box; transform-origin: center; animation: twinkle 1.4s ease-in-out 0.5s 4; }
@keyframes hop { 0%, 55%, 100% { transform: translateY(0); } 15% { transform: translateY(-4px); } 30% { transform: translateY(0); } 42% { transform: translateY(-2px); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .me.fortune svg, .me.fortune .tw { animation: none; } }

/* 止觀의 가을서재: 책가도 병풍 한 칸을 휴대폰 한 장으로. 한 장에 추천한 분 한 명과 책 두 권 */
.aki { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a3c476, #4f7b36); color: #ffffff; font-size: 16px; font-weight: 600; flex: none; }
.gado { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 2px 24px 6px; scrollbar-width: none; overscroll-behavior-x: contain; }
.gado::-webkit-scrollbar { display: none; }
.kan { flex: none; width: calc(100% - 22px); scroll-snap-align: start; scroll-margin-left: 24px; padding: 7px; border-radius: 3px; background: #6f5f4f; box-shadow: 0 6px 16px rgba(40, 28, 20, 0.22); }
.kan-in { padding: 5px; box-shadow: inset 0 0 0 1.5px #b59a58; }
.room { --grain: radial-gradient(rgba(255, 255, 255, 0.07) 0.6px, transparent 0.85px) 0 0 / 4px 4px, radial-gradient(rgba(255, 255, 255, 0.05) 0.6px, transparent 0.85px) 2px 1px / 7px 7px, radial-gradient(rgba(0, 0, 0, 0.13) 0.6px, transparent 0.85px) 1px 3px / 5px 5px, radial-gradient(rgba(0, 0, 0, 0.08) 0.7px, transparent 0.95px) 3px 0 / 11px 11px; position: relative; height: 356px; overflow: hidden; background: var(--grain), #45507a; }
.room i { position: absolute; inset: 0; display: block; pointer-events: none; }
.room .ceil { background: var(--grain), #9f938a; clip-path: polygon(0 0, 100% 0, calc(100% - 28px) 36px, 0 36px); }
.room .side { background: var(--grain), linear-gradient(180deg, #946551, #795b4d); clip-path: polygon(calc(100% - 28px) 36px, 100% 0, 100% 100%, calc(100% - 28px) calc(100% - 30px)); }
.room .floor { background: var(--grain), #8f857c; clip-path: polygon(0 calc(100% - 30px), calc(100% - 28px) calc(100% - 30px), 100% 100%, 0 100%); }
.jokja { position: absolute; left: 12px; top: 16px; width: 66%; padding: 9px 12px 10px; background: linear-gradient(180deg, #fbfaf6, #eceae4 85%, #e1ded7); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32); z-index: 2; }
.jokja::before { content: ""; position: absolute; left: -8px; right: -8px; top: -4px; height: 5px; border-radius: 3px; background: linear-gradient(180deg, #e2c27c, #9d7734); }
.jokja b { display: block; font-size: 20px; line-height: 27px; font-weight: 700; letter-spacing: -0.02em; color: #191919; }
.jokja span { display: block; font-size: 15px; line-height: 22px; color: #474747; }
.gpair { position: absolute; left: 10px; right: 36px; top: 84px; bottom: 10px; display: flex; align-items: stretch; gap: 12px; z-index: 2; }
.gbook { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.gbook img { display: block; flex: 0 1 auto; min-height: 0; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top; box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.42); background: #ffffff; }
.plaque { position: relative; flex: none; margin: -34px 0 0 10px; padding: 7px 9px 8px; background: #fbfaf7; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32); display: flex; flex-direction: column; gap: 2px; }
.plaque b { font-size: 15px; line-height: 20px; font-weight: 700; color: #191919; word-break: keep-all; }
.plaque span { font-size: 15px; line-height: 20px; color: #474747; }
.gado-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.gado-nav .me { border-radius: 50%; }

/* 글자 크기 세 단계: 보통(본문 18px) · 크게(20px) · 아주 크게(22px). 고르면 화면 전체가 같은 비율로 커진다 */
.fsize { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fsize button { height: 80px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text); }
.fsize button.on { border: 2px solid var(--brand); background: var(--brand-wash); color: var(--brand); }
.fsize .ga { font-weight: 700; line-height: 1.1; }
.fsize .nm { font-size: 15px; line-height: 20px; font-weight: 600; }
.kan.pic { padding: 0; display: flex; align-items: center; justify-content: center; background: #706150; overflow: hidden; }
.kan.pic img { display: block; width: 100%; height: auto; }
/* 원본 그림에서 오려 낸 소품: 단풍 가지·향로는 책 뒤에, 솔방울·청자 잔은 책 앞 바닥에 */
.orn { position: absolute; display: block; pointer-events: none; }
.orn.maple { right: 30px; top: 6px; width: 128px; z-index: 1; }
.orn.burner { right: 40px; top: 30px; width: 76px; z-index: 1; }
.orn.cone { left: calc(50% - 15px - 18px); bottom: 2px; width: 36px; z-index: 3; }
.orn.bowl { left: calc(50% - 15px - 23px); bottom: 2px; width: 46px; z-index: 3; }
.gado-credit { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--text-3); }
/* 검색창: 이 화면의 주인공. 녹색 테두리와 안쪽 [찾기] 단추 */
.search.hero { height: 64px; border: 2px solid var(--brand); box-shadow: 0 6px 18px rgba(0, 102, 51, 0.12); padding-right: 8px; }
.search.hero .go { margin-left: auto; height: 46px; padding: 0 18px; border-radius: 10px; background: var(--brand); color: #ffffff; font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; flex: none; }

/* 대화로 쓰기: 메신저 말풍선 대신 기록 노트처럼. 질문은 카드, 내 답은 왼쪽 녹색 선 아래 글 */
.chat-body.note { gap: 14px; padding: 14px 20px 18px; }
.ctx { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #ffffff; flex: none; }
.say { display: flex; gap: 10px; align-items: flex-start; }
.say p { font-size: 18px; line-height: 28px; color: var(--text-2); padding-top: 3px; }
.say .who { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-3); padding-top: 1px; }
.qcard { background: var(--surface); border-radius: 12px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.qcard .qn { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--brand); }
.qcard p { font-size: 20px; line-height: 30px; font-weight: 700; }
.ans { margin-left: 4px; padding: 2px 0 2px 14px; border-left: 3px solid var(--brand); font-size: 18px; line-height: 28px; white-space: pre-line; }
.ans.photo { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--text-2); }

/* 새로 그린 화면: 세 칸 고르기, 내 서가 표지 격자 */
.seg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 10px; background: var(--surface); }
.seg3 button { height: 48px; border-radius: 11px; font-size: 17px; font-weight: 600; color: var(--text-2); }
.seg3 button.on { background: #ffffff; color: var(--text); font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.shelf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
.shelf-grid .bookcard { width: auto; }
.shelf-grid .bookcard .cover { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }

/* 고르는 줄: 칩 대신 밑줄 탭. 고른 탭은 굵은 글씨와 검은 밑줄 두 가지로 표시 */
.utabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-right: -24px; padding-right: 24px; }
.utabs::-webkit-scrollbar { display: none; }
.utabs button { flex: none; height: 48px; font-size: 18px; font-weight: 600; color: var(--text-3); box-shadow: inset 0 -3px 0 transparent; }
.utabs button.on { color: var(--text); font-weight: 800; box-shadow: inset 0 -3px 0 #191919; }
/* 제목 옆 i: 누르면 설명이 말풍선으로 열린다 */
.info-i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); flex: none; }
.tip-pop { position: absolute; left: 0; right: 0; top: 46px; z-index: 8; padding: 16px 18px; border-radius: 12px; background: #191919; color: #ffffff; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 8px; }
.tip-pop p { font-size: 17px; line-height: 27px; }
.tip-pop .src { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.72); }
.tip-pop button { align-self: flex-end; font-size: 16px; font-weight: 700; color: #ffffff; padding: 6px 2px; }
/* 큰 그림은 한 화면에 하나: 아래 줄 표지는 작게 */
.shelf.sm { gap: 14px; }
.shelf.sm .bookcard { width: 96px; gap: 8px; }
.shelf.sm .bookcard .cover { width: 96px; height: 139px; }
.shelf.sm .bookcard .ttl { font-size: 16px; line-height: 22px; }
/* 시트 닫기: X 아이콘 대신 글자 */
.sheet-close { font-size: 18px; font-weight: 600; color: var(--text-2); padding: 10px 4px; }
/* 고르는 마음을 한 줄로 */
.pick-note { font-size: 16px; line-height: 24px; color: var(--text-2); margin-top: 12px; }

/* 상단바 (10월 18일 밤): 마음정돈은 눈 감은 새싹 얼굴, 프로필은 흐리게. 안쪽 화면은 [‹ 뒤로] [닫기] */
.me.calm { background: #ffffff; border-color: var(--line); }
.me.calm svg { width: 32px; height: 32px; }
.me.plain { width: 40px; background: transparent; border-color: transparent; box-shadow: none; color: #8a8a84; }
.xbtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text); flex: none; }
/* 첫 화면 상단바: 아래로 내리면 숨고, 위로 올리면 나타난다 */
.bar.float { position: absolute; top: 0; left: 0; right: 0; z-index: 7; transition: transform 0.22s ease; }
.bar.float.hide { transform: translateY(-100%); }
.body.under-bar { padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { .bar.float { transition: none; } }
/* 책 한 권씩 넘기는 슬라이드: 표지, 제목, 지은이, 있는 곳, 소개 두세 줄 */
.bslides { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 14px -24px 0; padding: 2px 24px 6px; scrollbar-width: none; }
.bslides::-webkit-scrollbar { display: none; }
.bslide { flex: none; width: calc(100% - 22px); scroll-snap-align: start; scroll-margin-left: 24px; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 20px; border-radius: 12px; background: var(--surface); }
.bslide .top { display: flex; gap: 16px; align-items: flex-start; }
.bslide .cover { width: 92px; height: 134px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.bslide .ttl { font-size: 19px; line-height: 27px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bslide .au { font-size: 16px; line-height: 23px; color: var(--text-2); }
.bslide .wh { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--text-3); margin-top: 4px; }
.bslide .wh.here { color: var(--brand); }
.bslide .pub { font-size: 15px; line-height: 22px; color: var(--text-3); }
.bslide .hook { font-size: 19px; line-height: 28px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.bslide .intro { font-size: 18px; line-height: 30px; color: var(--text-2); }
.bslide .facts { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.bslide .facts .loc { display: flex; gap: 3px; align-items: flex-start; }
.bslide .facts .loc svg.pin { margin: 2px 0 0 -2px; }
.bslide .bq { display: block; padding-left: 12px; border-left: 3px solid var(--brand); font-size: 16px; line-height: 25px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.bslide .bq small { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-3); }
.bslide .bq small:empty { display: none; }
.bslide .bq.none { display: none; }
.bslide .bq small { margin-top: 2px; }
.bslide .sum { display: flex; flex-direction: column; gap: 6px; }
.bslide .sum b { font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.bslide .sum span { font-size: 17px; line-height: 27px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.bslide .who { display: flex; gap: 8px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; color: var(--text-2); }
.bslide .who b, .bslide .where > b { flex: none; width: 70px; font-size: 15px; color: var(--brand); }
.bslide .where { display: flex; gap: 8px; align-items: baseline; margin-top: -4px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.bslide .where .ls { display: flex; flex-direction: column; gap: 2px; }
.bslide .where strong { font-weight: 700; color: var(--text); }
.tip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; font-size: 15px; line-height: 23px; color: rgba(255, 255, 255, 0.85); }
.tip-list { display: flex; flex-direction: column; margin-top: 4px; }
.tip-list span { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, 0.8); }
.tip-list b { flex: none; width: 76px; font-weight: 700; color: #ffffff; }
/* 닫기는 어디서나 글자로 */
.xtext { display: inline-flex; align-items: center; height: 44px; padding: 0 6px; font-size: 18px; font-weight: 600; color: var(--text); flex: none; }

/* 뽑기·마음정돈으로 들어갈 때 1초 남짓 보이는 시작 화면. 저절로 사라진다 */
.splash { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; animation: sp-out 0.35s ease 1.5s forwards; }
.splash.sp-draw { background: #fbfaf7; color: #2b2a26; }
.splash.sp-calm { background: #1d2420; color: #f2f1ec; }
.splash .sp-ic { display: block; width: 116px; height: 116px; }
.splash .sp-ic svg { width: 116px; height: 116px; overflow: visible; display: block; }
.sp-draw .sp-ic { animation: sp-drop 0.95s cubic-bezier(.3, 1.3, .5, 1) 0.05s both; }
.sp-calm .sp-ic { animation: sp-breathe 1.1s ease-in-out both; }
.splash .sp-t { font-size: 18px; line-height: 26px; font-weight: 600; animation: sp-fade 0.5s ease 0.25s both; }
@keyframes sp-out { to { opacity: 0; visibility: hidden; } }
@keyframes sp-drop { 0% { transform: translateY(-46px) rotate(-14deg); opacity: 0; } 45% { transform: translateY(0) rotate(8deg); opacity: 1; } 65% { transform: rotate(-5deg); } 82% { transform: rotate(2deg); } 100% { transform: none; } }
@keyframes sp-breathe { 0% { transform: scale(0.84); opacity: 0.3; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .splash { animation: sp-out 0.2s ease 0.5s forwards; } .splash .sp-ic, .splash .sp-t { animation: none; } }

/* 오늘의 한 문장: 서가에서 한 권 꺼내기(Q1)와 펼친 책(Q2). 한 번 누르면 5초 남짓 이어서 움직인다. */
.m.paper { --bg: #fbfaf7; background: #fbfaf7; }
.draw-wrap { min-height: 100%; display: flex; flex-direction: column; }
.draw { position: relative; height: 466px; margin: 0 -24px; overflow: hidden; }
.draw-foot { margin-top: auto; padding-top: 14px; min-height: 150px; }
.draw-btn { height: 60px; font-size: 19px; }
.draw-after { animation: sp-fade 0.4s ease both; }
.saved { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--brand); }
.saved svg.i { width: 20px; height: 20px; stroke-width: 2.4; }
.ds-idle { position: absolute; left: 24px; right: 24px; top: 64px; text-align: center; }
.ds-ask { font-size: 23px; line-height: 35px; font-weight: 700; letter-spacing: -0.02em; }
.ds-sub { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--text-3); }
.case { position: absolute; left: 0; right: 0; top: 176px; height: 290px; }
/* 선반·후광·그림자 그림은 Codex가 만든 에셋(mockups/codex-v2/shelf/) */
.case .glow { position: absolute; left: 0; right: 0; top: -8px; height: 260px; background: url(a/2110877cb9f72bf011e6c770efa5abde.png) center / 390px 260px no-repeat; pointer-events: none; }
.case .lamp { display: none; }
.case .back { position: absolute; left: 0; right: 0; top: 62px; height: 180px; background: url(a/5e900701bca7fb84c5926b631af48b37.png) center top / 780px 180px repeat-x; pointer-events: none; }
.case .row1 { position: absolute; left: 0; right: 0; top: 60px; height: 180px; overflow: hidden; }
.case .plank { position: absolute; left: 0; right: 0; top: 231px; height: 81px; background: url(a/41538ffc1f94f0aef8e803672a4ab40e.png) center top / 780px 24px repeat-x, url(a/abbf97ee77ca83757537ba4a9988cf98.png) center 1px / 780px 40px repeat-x, url(a/bce9f35153f05dff4304a1ad5c871762.png) center 23px / 780px 56px repeat-x; }
.reel { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: 1px; }
.sp, .pk-spine { position: relative; flex: none; border-radius: 1px 1px 0 0; background-color: #8f857c; background-size: 100% 100%; background-repeat: no-repeat; }
.sp::before, .pk-spine::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(to right, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.08) 40%, rgba(0, 0, 0, 0.16)); }
.pkw { position: absolute; z-index: 3; left: 117px; top: 18px; width: 156px; height: 228px; transform-origin: 50% 0; }
.pk { position: absolute; inset: 0; opacity: 0; transform: translateY(170px); }
.pk-spine { position: absolute; bottom: 0; height: 160px; box-shadow: 0 0 0 3px rgba(255, 214, 150, 0.9), 0 10px 24px rgba(0, 0, 0, 0.35); }
.pk-shift { position: absolute; inset: 0; perspective: 1300px; }
.pk-book { position: absolute; inset: 0; transform-style: preserve-3d; transform: scaleX(0); }
.pg-r { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 18px; border-radius: 0 6px 6px 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 18px), #fffdf8; box-shadow: 0 10px 26px rgba(60, 45, 30, 0.18); }
.pg-r .ln { display: flex; flex-direction: column; gap: 9px; }
.pg-r .ln i { display: block; height: 5px; border-radius: 3px; background: #e6dfd0; }
.pg-r .hl-line i { height: 9px; background: rgba(242, 193, 78, 0.75); }
.lf { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; transform: rotateY(0deg) translateZ(var(--z)); }
.lf .f, .lf .b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fffdf8; border-radius: 0 6px 6px 0; box-shadow: inset 1px 0 0 #eee6d6; }
.lf .b { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: linear-gradient(to left, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 18px), #fffdf8; box-shadow: 0 10px 26px rgba(60, 45, 30, 0.14); }
.lf.cv .f { overflow: hidden; background: #4f7a6a; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }
.lf.cv .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lf.cv .b { background: #e9e2d0; }
.pg-l { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px 14px; }
.pg-date { font-size: 15px; line-height: 22px; font-weight: 700; color: #8a6a48; }
.pg-t { font-size: 17px; line-height: 25px; font-weight: 700; color: #2b2118; }
.pg-l .sym { margin-top: 10px; transform: scale(0.8); --c: #72775d; }
.ds-say { position: absolute; left: 24px; right: 24px; top: 178px; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; visibility: hidden; }
.ds-q { font-size: 30px; line-height: 46px; font-weight: 700; letter-spacing: -0.02em; color: #191919; }
.ds-q .hl { background-image: linear-gradient(transparent 60%, rgba(242, 193, 78, 0.55) 60%, rgba(242, 193, 78, 0.55) 92%, transparent 92%); background-repeat: no-repeat; background-size: 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ds-src { display: inline-flex; align-items: center; gap: 2px; margin-top: 18px; font-size: 17px; line-height: 25px; font-weight: 600; color: var(--text-2); }
.ds-src svg.i { width: 18px; height: 18px; color: var(--text-3); }
.ds-locs { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.ds-locs span { display: flex; align-items: center; gap: 4px; }
/* 움직임 순서: 책등이 쫘르륵 넘어감(0~3초) → 한 권이 올라옴 → 표지로 돌아섬 → 펼쳐짐(3.75~4.5) → 책은 위로 작아지고 문장이 크게(4.6~) → 밑줄(5.05) */
.draw.run .ds-idle { animation: d-fade 0.25s ease forwards; }
.draw.run .reel { animation: d-reel 3s cubic-bezier(.22, .62, .18, 1) forwards; }
.draw.run .reel .sp.t { animation: d-hide 0s linear 3s forwards; }
.draw.run .pk { animation: d-show 0s linear 3s forwards, d-lift 0.85s cubic-bezier(.3, .7, .3, 1) 3s forwards; }
.draw.run .pk-spine { animation: d-thin 0.15s ease-in 3.25s forwards; }
.draw.run .pk-book { animation: d-wide 0.2s ease-out 3.4s forwards; }
.draw.run .case { animation: d-fade 0.4s ease 3.55s forwards; }
.draw.run .pk-shift { animation: d-shift 0.5s ease 3.75s forwards; }
.draw.run .lf { animation: d-turn 0.45s cubic-bezier(.4, .1, .3, 1) var(--d) forwards; }
.draw.run .pkw { animation: d-shrink 0.45s cubic-bezier(.3, .7, .3, 1) 4.6s forwards; }
.draw.run .ds-say { animation: d-in 0.45s ease 4.75s forwards; }
.draw.run .ds-q .hl { animation: d-mark 0.7s ease 5.05s forwards; }
.draw.done, .draw.done * { animation-delay: 0s !important; animation-duration: 0s !important; }
@keyframes d-fade { to { opacity: 0; visibility: hidden; } }
@keyframes d-in { from { opacity: 0; visibility: visible; transform: translateY(10px); } to { opacity: 1; visibility: visible; transform: none; } }
@keyframes d-reel { to { transform: translateX(var(--d)); } }
@keyframes d-hide { to { visibility: hidden; } }
@keyframes d-show { to { opacity: 1; } }
@keyframes d-lift { 0% { transform: translateY(170px); } 30% { transform: translateY(128px); } 100% { transform: none; } }
@keyframes d-thin { to { transform: scaleX(0); } }
@keyframes d-wide { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes d-shift { to { transform: translateX(78px); } }
@keyframes d-turn { from { transform: rotateY(0deg) translateZ(var(--z)); } to { transform: rotateY(-180deg) translateZ(var(--z)); } }
@keyframes d-shrink { to { transform: translateY(-6px) scale(0.6); } }
@keyframes d-mark { to { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .draw.run *, .draw.run { animation-delay: 0s !important; animation-duration: 0s !important; }
}

/* 위치 표시: 토스처럼 면을 채운 핀 */
.m svg.pin { width: 18px; height: 18px; flex: none; color: #b0b5ad; }

/* 쓰기(+) 메뉴: 지금 화면 위에서 열린다. 단추에서 위로 펼쳐지는 카드 두 장. */
.fab .fab-x { display: none; }
.fab.open { width: auto; padding: 0 22px; border-radius: 16px; color: var(--text); font-size: 17px; font-weight: 700; z-index: 22; }
.fab.open svg.i { display: none; }
.fab.open .fab-x { display: inline; }
.plus-scrim { position: absolute; inset: 0; z-index: 20; background: rgba(24, 24, 22, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: pm-fade 0.2s ease both; }
.plus-menu { position: absolute; right: 18px; bottom: 136px; z-index: 21; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pm-item { display: flex; align-items: center; gap: 14px; width: 292px; padding: 14px 18px 14px 14px; border-radius: 14px; background: #ffffff; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16); animation: pm-rise 0.26s cubic-bezier(.2, .8, .3, 1) calc(var(--i) * 50ms) both; }
.pm-ic { width: 52px; height: 52px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pm-ic svg.i { width: 28px; height: 28px; stroke-width: 1.8; }
.pm-ic.g { background: #e8f2ec; color: var(--brand); }
.pm-ic.o { background: #f0eee5; color: #5f6450; }
.pm-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-tx b { font-size: 19px; line-height: 27px; font-weight: 700; color: var(--text); }
.pm-tx span { font-size: 15px; line-height: 22px; color: var(--text-3); }
@keyframes pm-fade { from { opacity: 0; } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(14px) scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .plus-scrim, .pm-item { animation: none; } }

/* Codex 3D 그림: 마음정돈 돌탑(돌 3개), 쓰기 메뉴 아이콘 */
.me.calm img { width: 34px; height: 34px; display: block; }
.pm-ic { background: #f6f5f1; }
.pm-ic img { width: 44px; height: 44px; display: block; }
.splash.sp-calm .sp-ic, .splash.sp-calm .sp-ic img { width: 230px; height: 230px; display: block; }

/* 뽑기 아이콘: 월넛 책장에서 한 권을 비스듬히 꺼내는 3D (Codex, codex-v2/drawicon4/b-walnut-4) */
.me.fortune img { width: 36px; height: 36px; display: block; }
.splash.sp-draw .sp-ic, .splash.sp-draw .sp-ic img { width: 200px; height: 200px; display: block; }

/* 시작 화면: 이름을 그림 위에 둔다 */
.splash .sp-t { order: -1; font-size: 20px; line-height: 28px; font-weight: 700; }

/* 뽑은 문장(Q3): 문장 카드와 인생테마 모음 */
.kp-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.kp-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 12px; background: var(--surface); }
.kp-day { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-3); }
.kp-card.today .kp-day { color: var(--brand); }
.kp-q { font-size: 20px; line-height: 31px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.kp-card.today .kp-q span { background-image: linear-gradient(transparent 60%, rgba(242, 193, 78, 0.55) 60%, rgba(242, 193, 78, 0.55) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kp-meta { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.kp-meta .cover { width: 34px; height: 50px; border-radius: 3px; }
.kp-bk { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kp-bk b { font-size: 16px; line-height: 23px; font-weight: 700; color: var(--text); }
.kp-bk span { font-size: 15px; line-height: 22px; color: var(--text-3); }
.kp-th { flex: none; font-size: 15px; line-height: 22px; font-weight: 600; color: #5f6450; }
.kp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.kp-tile { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 14px 12px; border-radius: 12px; background: var(--surface); }
.kp-tile b { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--text); }
.kp-tile span { font-size: 15px; line-height: 21px; color: var(--text-3); }
.kp-tile em { margin-top: 8px; font-style: normal; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--brand); }
.kp-tile.k-gold { background: #f6eedb; }
.kp-tile.k-gold em { color: #8a6a1e; }
.kp-tile.k-new { background: #eef5f0; box-shadow: inset 0 0 0 1.5px var(--brand); }
.kp-tile.k-none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.kp-tile.k-none b, .kp-tile.k-none em { color: var(--text-3); }

/* 책 상세(S5): 토스처럼 위에서 아래로 한 가지씩, 행동은 아래 고정 단추 둘 */
.bd-body { padding-bottom: 120px; }
.bd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 4px; }
.bd-hero .cover { width: 148px; height: 214px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 14px 30px rgba(0, 0, 0, 0.16); }
.bd-title { margin-top: 22px; font-size: 28px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; }
.bd-meta { margin-top: 6px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.bd-social { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--text-3); }
.bd-where { margin-top: 26px; padding: 18px 18px 8px; border-radius: 12px; background: var(--surface); }
.bd-lab { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--brand); }
.bd-place { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.bd-place .pin { width: 22px; height: 22px; color: var(--brand); }
.bd-place.sm .pin { width: 18px; height: 18px; color: #b0b5ad; }
.bd-pl { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bd-pl b { font-size: 18px; line-height: 26px; font-weight: 700; }
.bd-pl span { font-size: 15px; line-height: 22px; color: var(--text-3); }
.bd-place.sm .bd-pl b { font-size: 16px; line-height: 24px; font-weight: 600; }
.bd-km { flex: none; font-size: 15px; font-weight: 600; color: var(--text-3); }
.bd-more { display: block; width: 100%; margin-top: 10px; padding: 12px 0 10px; border-top: 1px solid var(--line); text-align: left; font-size: 16px; font-weight: 600; color: var(--text-2); }
.bd-others { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.bd-sec { margin-top: 30px; }
.bd-h { font-size: 21px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.bd-quote { margin-top: 12px; padding-left: 14px; border-left: 3px solid var(--brand); font-size: 20px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.bd-quote small { display: block; margin-top: 4px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-3); }
.bd-desc { margin-top: 10px; font-size: 18px; line-height: 30px; color: var(--text-2); }
.bd-for { display: flex; gap: 12px; align-items: baseline; margin-top: 16px; padding: 14px 16px; border-radius: 10px; background: var(--surface); }
.bd-for span { flex: none; font-size: 15px; font-weight: 700; color: var(--brand); }
.bd-for b { font-size: 17px; line-height: 26px; font-weight: 600; }
.bd-rv { display: block; margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--surface); }
.bd-rvh { display: flex; gap: 8px; align-items: baseline; }
.bd-rvh b { font-size: 16px; font-weight: 700; }
.bd-rvh span { font-size: 15px; color: var(--text-3); }
.bd-rv p { margin-top: 6px; font-size: 17px; line-height: 27px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bd-fold { display: flex; justify-content: space-between; width: 100%; margin-top: 30px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--text-2); }
.bd-fold .r { color: var(--text-3); font-size: 16px; }
.bd-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; gap: 10px; padding: 18px 20px 26px; background: linear-gradient(rgba(255, 255, 255, 0), #ffffff 26%); }
.bd-cta .btn { height: 58px; font-size: 18px; }
.bd-read { flex: 1; border-color: var(--surface-2); background: var(--surface-2); color: var(--text); }
.bd-read.on { background: var(--brand-wash); border-color: var(--brand-wash); color: var(--brand); }
.bd-plan { flex: 2; }
/* 책 상세 2차: 보유 서가는 책 정보 바로 아래, 단추는 위로 올릴 때만 */
.bd-info { display: flex; flex-direction: column; align-items: center; }
.bd-own { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--text-2); }
.bd-own b { font-weight: 700; color: var(--text); }
.bd-own .pin { width: 18px; height: 18px; color: var(--brand); flex: none; }
.bd-own.sm { margin-top: 6px; font-size: 15px; }
.bd-own.sm .pin { color: #b0b5ad; }
.bd-own-more { margin-top: 6px; padding: 6px 2px; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.bd-others { display: flex; flex-direction: column; align-items: inherit; }
.bd-hero.side { flex-direction: row; align-items: flex-start; gap: 18px; text-align: left; padding-top: 12px; }
.bd-hero.side .cover { width: 112px; height: 162px; flex: none; }
.bd-hero.side .bd-info { align-items: flex-start; flex: 1; min-width: 0; }
.bd-hero.side .bd-title { margin-top: 0; font-size: 24px; line-height: 32px; }
.bd-hero.side .bd-own { margin-top: 12px; align-items: flex-start; }
.bd-hero.side .bd-own .pin { margin-top: 3px; }
.bd-folds { margin-top: 30px; }
.bd-folds .bd-fold { margin-top: 0; }
.bd-foldin { display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px; }
.bd-cta { transform: translateY(110%); transition: transform 0.25s ease; }
.bd-cta.show { transform: none; }
.bd-body { padding-bottom: 60px; }
.m .bd-own svg.pin { color: var(--brand); }
.m .bd-own.sm svg.pin { color: #b0b5ad; }

/* 책 상세: 줄거리 팝업 */
.bd-plot { margin-top: 18px; }
.bd-sheet { max-height: 78%; gap: 10px; padding-top: 18px; z-index: 30; }
.m .scrim { z-index: 29; }
.bd-sh-head { display: flex; align-items: center; justify-content: space-between; }
.bd-sh-body { overflow-y: auto; padding-bottom: 8px; }
.bd-sh-body p { margin: 0 0 16px; font-size: 18px; line-height: 30px; color: var(--text-2); }

/* 슬라이드 2차: 표지를 크게, 굵은 글씨는 제목·소개 제목 둘만, 새 책은 들어온 날 */
.bslide .cover { width: 104px; height: 152px; border-radius: 4px; }
.bslide .ttl { font-size: 20px; line-height: 28px; }
.bslide .bq { font-weight: 500; color: var(--text-2); }
.bslide .came { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--brand); margin-bottom: -2px; }
.bslide .came:empty { display: none; }
.bslide .sum b { font-size: 19px; line-height: 27px; }
.bslide .sum span { -webkit-line-clamp: 4; }

/* 검색창을 누른 직후(S2): 입력이 먼저, 쓰는 동안 책이 바로 뜬다 */
.sx-top { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 14px 0 20px; }
.sx-box { flex: 1; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 12px 0 16px; border-radius: 12px; background: var(--surface); color: var(--text-3); }
.sx-box:focus-within { background: #ffffff; box-shadow: inset 0 0 0 2px var(--brand); }
.sx-in { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 20px; font-weight: 600; color: var(--text); }
.sx-in::placeholder { color: var(--text-3); font-weight: 500; }
.sx-clear { flex: none; font-size: 15px; font-weight: 600; color: var(--text-3); padding: 8px 4px; }
.sx-close { flex: none; font-size: 18px; font-weight: 600; padding: 10px 6px; }
.sx-where { flex: none; display: flex; align-items: center; gap: 6px; margin: 12px 24px 0; padding: 6px 0; font-size: 16px; line-height: 24px; color: var(--text-2); text-align: left; }
.sx-where b { color: var(--text); font-weight: 700; }
.sx-where .pin { width: 18px; height: 18px; color: var(--brand); flex: none; }
.sx-where .ch { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.sx-body { padding-top: 0; }
.sx-sec { margin-top: 30px; display: flex; flex-direction: column; gap: 6px; }
.sx-h { display: flex; align-items: center; justify-content: space-between; }
.sx-h h2 { font-size: 19px; line-height: 27px; font-weight: 700; }
.sx-h button { font-size: 15px; font-weight: 600; color: var(--text-3); padding: 6px 2px; }
.sx-rrow { display: flex; align-items: center; min-height: 54px; }
.sx-rrow .go { flex: 1; display: flex; align-items: center; gap: 12px; font-size: 18px; text-align: left; color: var(--text); min-height: 54px; }
.sx-rrow .go svg { color: var(--text-3); }
.sx-rrow .del { font-size: 15px; font-weight: 500; color: var(--text-3); padding: 8px 2px 8px 12px; }
.sx-rank { list-style: none; margin: 0; padding: 0; }
.sx-rank a { display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 18px; }
.sx-rank .n { width: 18px; flex: none; font-weight: 800; color: var(--brand); text-align: center; font-variant-numeric: tabular-nums; }
.sx-rank .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m .at { flex: none; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--text-3); }
.m .at.here { color: var(--brand); }
.sx-sec .chips { margin-top: 8px; }
.sx-hits { display: flex; flex-direction: column; margin-top: 10px; }
.sx-hit { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sx-hit .cover { width: 48px; height: 70px; border-radius: 4px; }
.sx-hit .tx { display: flex; flex-direction: column; min-width: 0; }
.sx-hit .t { font-size: 19px; line-height: 27px; color: var(--text-2); }
.sx-hit .t b { color: var(--text); font-weight: 800; }
.sx-hit .a { font-size: 15px; line-height: 22px; color: var(--text-3); }
.sx-none { margin-top: 24px; font-size: 18px; color: var(--text-2); }
.sx-all { display: flex; align-items: center; gap: 12px; min-height: 60px; margin-top: 4px; font-size: 18px; font-weight: 600; color: var(--brand); }
.sx-all span { flex: 1; }
.m .sx-where svg.pin { color: var(--brand); width: 18px; height: 18px; }

/* 마음정돈 2차: 지금 1분 → 호흡 · 명상 · 이야기. 어두운 바탕, 큰 글씨, 줄마다 길이 */
.cm { --cm-2: rgba(242, 241, 236, 0.72); --cm-3: rgba(242, 241, 236, 0.56); --cm-line: rgba(242, 241, 236, 0.13); --cm-surf: rgba(242, 241, 236, 0.07); }
.cm .bar-title { color: #f2f1ec; }
.cm-body { padding-top: 4px; }
.cm-hero { display: flex; flex-direction: column; gap: 4px; padding: 22px 22px 20px; border-radius: 12px; background: var(--cm-surf); }
.cm-hero .k { font-size: 15px; line-height: 22px; font-weight: 700; color: #9cc9ad; }
.cm-hero .t { font-size: 26px; line-height: 34px; font-weight: 800; letter-spacing: -0.02em; }
.cm-hero .d { font-size: 17px; line-height: 26px; color: var(--cm-2); }
.cm-hero .go { margin-top: 16px; height: 56px; border-radius: 10px; background: #f2f1ec; color: #1d2420; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cm-tabs { display: flex; gap: 26px; margin-top: 30px; border-bottom: 1px solid var(--cm-line); }
.cm-tabs button { height: 50px; font-size: 19px; font-weight: 600; color: var(--cm-3); box-shadow: inset 0 -3px 0 transparent; }
.cm-tabs button.on { color: #f2f1ec; font-weight: 800; box-shadow: inset 0 -3px 0 #f2f1ec; }
.cm-label { margin-top: 22px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--cm-2); }
.cm-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.cm-seg button { height: 48px; border-radius: 12px; border: 1.5px solid rgba(242, 241, 236, 0.24); font-size: 17px; font-weight: 600; color: #f2f1ec; }
.cm-seg button.on { background: #f2f1ec; border-color: #f2f1ec; color: #1d2420; font-weight: 800; }
.cm-list { display: flex; flex-direction: column; margin-top: 8px; }
.cm-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--cm-line); }
.cm-row:last-child { border-bottom: 0; }
.cm-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-row .t { font-size: 21px; line-height: 29px; font-weight: 700; }
.cm-row .d { font-size: 16px; line-height: 24px; color: var(--cm-2); }
.cm-row .p { font-size: 15px; line-height: 22px; color: var(--cm-3); font-variant-numeric: tabular-nums; }
.cm-row .len { flex: none; font-size: 16px; font-weight: 600; color: var(--cm-2); }
.cm-row.sm { padding: 14px 0; }
.cm-row.sm .t { font-size: 19px; line-height: 27px; }
.cm-voice { display: flex; align-items: center; gap: 16px; width: 100%; margin-top: 14px; padding: 16px 18px; border-radius: 12px; background: var(--cm-surf); text-align: left; }
.cm-voice .tx { flex: 1; display: flex; flex-direction: column; }
.cm-voice .t { font-size: 18px; font-weight: 700; }
.cm-voice .d { font-size: 15px; line-height: 22px; color: var(--cm-2); }
.cm-voice .sw { position: relative; flex: none; width: 54px; height: 32px; border-radius: 16px; background: rgba(242, 241, 236, 0.25); transition: background 0.2s; }
.cm-voice .sw i { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #f2f1ec; transition: transform 0.2s; }
.cm-voice .sw.on { background: #9cc9ad; }
.cm-voice .sw.on i { transform: translateX(22px); background: #1d2420; }
.cm-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; }
.cm-ring { position: relative; width: 280px; height: 280px; border-radius: 50%; border: 1.5px solid rgba(242, 241, 236, 0.2); display: flex; align-items: center; justify-content: center; }
.cm-disc { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(156, 201, 173, 0.34), rgba(156, 201, 173, 0.12)); transform: scale(0.56); }
.cm-ring.soft .cm-disc { transform: none; }
.cm-cue { position: relative; display: flex; flex-direction: column; align-items: center; }
.cm-cue .c { font-size: 22px; line-height: 30px; font-weight: 700; }
.cm-cue .n { font-size: 54px; line-height: 62px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-round { margin-top: 36px; font-size: 18px; color: var(--cm-2); font-variant-numeric: tabular-nums; }
.cm-sound { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--cm-3); text-decoration: underline; text-underline-offset: 4px; padding: 6px; }
.cm-sub { margin-top: 30px; font-size: 18px; line-height: 28px; color: var(--cm-2); text-align: center; }
.cm-bar { width: 100%; height: 6px; margin-top: 40px; border-radius: 3px; background: rgba(242, 241, 236, 0.16); overflow: hidden; }
.cm-bar i { display: block; height: 100%; background: #f2f1ec; border-radius: 3px; }
.cm-time { width: 100%; display: flex; justify-content: space-between; margin-top: 10px; font-size: 16px; color: var(--cm-3); font-variant-numeric: tabular-nums; }
.cm-ctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 28px; padding: 0 24px 56px; }
.cm-pp { width: 80px; height: 80px; border-radius: 50%; background: #f2f1ec; color: #1d2420; display: flex; align-items: center; justify-content: center; }
.cm-end, .cm-skip { min-width: 92px; height: 52px; padding: 0 16px; border-radius: 26px; background: rgba(242, 241, 236, 0.1); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #f2f1ec; }
@media (prefers-reduced-motion: reduce) { .cm-disc { transition: none !important; } }
.bslide.nb { background: #f6f1e7; }
/* 새 책 3차: 들어온 날은 있는 곳 아래 회색, 인용에는 ‘책 속 한 문장’ 이름표 */
.bslide .facts .came { margin: 0; font-size: 15px; line-height: 22px; font-weight: 400; color: var(--text-3); }
.bslide .bq .ql { display: block; margin-bottom: 2px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--brand); letter-spacing: 0; }

/* 검색 2차: 덧말 빼고 촘촘하게. 결과는 제목·지은이 / 내용에서 찾은 책 두 묶음 */
.sx-sec { margin-top: 28px; gap: 2px; }
.sx-h button { display: inline-flex; align-items: center; gap: 0; font-size: 16px; font-weight: 600; color: var(--text-3); }
.sx-h button svg.i.sm { width: 18px; height: 18px; }
.sx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sx-li { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; font-size: 18px; text-align: left; color: var(--text); }
.sx-li svg { color: var(--text-3); }
.sx-li span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-rank .n { width: 18px; flex: none; font-weight: 800; color: var(--brand); text-align: center; font-variant-numeric: tabular-nums; }
.sx-kw { margin-top: 10px; gap: 8px; }
.sx-res { margin-top: 18px; }
.sx-res + .sx-res { margin-top: 28px; }
.sx-rh { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--text-2); }
.sx-rh span { color: var(--brand); }
.sx-hits { margin-top: 2px; }
.sx-hit .why { margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sx-hit .why b { color: var(--text); font-weight: 800; background: var(--brand-wash); }
.sx-hit .why .f { font-weight: 700; color: var(--text-3); margin-right: 6px; }
.sx-hit .at { margin-top: 2px; }
.sx-none { margin-top: 28px; display: flex; flex-direction: column; gap: 4px; }
.sx-none p { font-size: 19px; font-weight: 700; }
.sx-none span { font-size: 16px; color: var(--text-3); }
.sx-sheet { max-height: 82%; gap: 16px; }
.sx-sl { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sx-srow { display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); }
.sx-srow .go { flex: 1; text-align: left; font-size: 18px; min-height: 56px; }
.sx-srow .del { font-size: 15px; font-weight: 600; color: var(--text-3); padding: 8px 2px 8px 14px; }
.sx-delall { align-self: flex-start; font-size: 16px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; }
.sx-empty { font-size: 17px; color: var(--text-3); padding: 12px 0; }

/* 마음정돈 3차: 화면엔 숨 쉬는 원 하나. 고르기·횟수·목소리·소리는 [설정] 안에 */
.cm-set { font-size: 18px; font-weight: 600; color: #f2f1ec; padding: 10px 6px; }
.cm-quiet { font-size: 17px; font-weight: 600; color: var(--cm-3); }
.cm-orb { position: relative; width: 248px; height: 248px; display: flex; align-items: center; justify-content: center; }
.cm-orb .halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(156, 201, 173, 0.28) 0%, rgba(156, 201, 173, 0.08) 58%, rgba(156, 201, 173, 0) 72%); animation: cm-breathe 8s ease-in-out infinite; }
.cm-orb .core { position: relative; width: 156px; height: 156px; border-radius: 50%; background: #f2f1ec; color: #1d2420; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); }
.cm-orb .core b { font-size: 26px; font-weight: 800; letter-spacing: 0.02em; }
@keyframes cm-breathe { 0%, 100% { transform: scale(0.86); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } }
.cm-pick { margin-top: 34px; font-size: 18px; line-height: 26px; color: var(--cm-2); }
.cm .sheet.cm-sheet { background: #252d28; color: #f2f1ec; max-height: 86%; gap: 14px; z-index: 30; }
.cm .scrim { z-index: 29; background: rgba(0, 0, 0, 0.55); }
.cm .h-title { color: #f2f1ec; }
.cm .sheet-close { color: var(--cm-2); }
.cm-sheet .cm-tabs { margin-top: 0; }
.cm-sl { overflow-y: auto; margin: 0 -4px; padding: 0 4px; display: flex; flex-direction: column; gap: 12px; }
.cm-sl .cm-list { margin-top: 0; }
.cm-sl .cm-label { margin-top: 6px; }
.cm-sl .cm-seg { margin-top: 0; }
.cm-sl .cm-voice { margin-top: 0; }
.cm-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 4px; border-bottom: 1px solid var(--cm-line); text-align: left; }
.cm-opt:last-child { border-bottom: 0; }
.cm-opt .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-opt .t { font-size: 19px; line-height: 27px; font-weight: 600; }
.cm-opt .d { font-size: 15px; line-height: 22px; color: var(--cm-3); }
.cm-opt .len { flex: none; font-size: 16px; color: var(--cm-2); }
.cm-opt.on .t { font-weight: 800; color: #9cc9ad; }
.cm-opt.on .len { color: #9cc9ad; font-weight: 700; }
.cm-done { flex: none; height: 58px; border-radius: 10px; background: #f2f1ec; color: #1d2420; font-size: 18px; font-weight: 700; }
.cm-finish { height: 60px; padding: 0 44px; border-radius: 30px; background: #f2f1ec; color: #1d2420; display: inline-flex; align-items: center; font-size: 18px; font-weight: 700; }
.cm-ctl { min-height: 136px; }
.cm-line { width: 220px; height: 3px; margin-top: 48px; border-radius: 2px; background: rgba(242, 241, 236, 0.16); overflow: hidden; }
.cm-line i { display: block; height: 100%; background: rgba(242, 241, 236, 0.8); }
.cm-stage .cm-time { width: auto; justify-content: center; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .cm-orb .halo { animation: none; } }

/* 검색 3차: 원래 검색창 모양(녹색 테두리) + 닫기 늘 보임, 통합검색·의미검색 제목 크게, 장소는 핀+이름, 필터 창 */
.sx-box { min-width: 0; height: 60px; border-radius: 12px; background: #ffffff; border: 2px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-wash); color: var(--brand); }
.sx-box:focus-within { box-shadow: 0 0 0 4px var(--brand-wash); }
.sx-close { white-space: nowrap; }
.sx-where { display: flex; align-items: center; gap: 10px; margin: 14px 24px 0; padding: 0; }
.sx-where .pl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 17px; line-height: 24px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-where .pl b { color: var(--text); font-weight: 700; }
.sx-where .pl .ex { overflow: hidden; text-overflow: ellipsis; }
.sx-where .fb { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px 0 10px; border-radius: 20px; border: 1.5px solid var(--line-strong); font-size: 16px; font-weight: 700; color: var(--text); }
.sx-where .fb.on { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
.sx-where .fb .c:empty { display: none; }
.sx-res { margin-top: 26px; }
.sx-res + .sx-res { margin-top: 36px; padding-top: 28px; border-top: 8px solid var(--surface); margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
.sx-rhd { display: flex; align-items: baseline; justify-content: space-between; }
.sx-rh { font-size: 22px; line-height: 30px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.sx-rhd .n { font-size: 16px; font-weight: 600; color: var(--text-3); }
.sx-rcap { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--text-3); }
.sx-hits { margin-top: 6px; }
.sx-hit { padding: 14px 0; gap: 16px; }
.sx-hit .cover { width: 60px; height: 88px; }
.sx-hit .t { font-size: 19px; line-height: 27px; color: var(--text); font-weight: 600; }
.sx-hit .t b { font-weight: 800; }
.sx-hit .a { font-size: 16px; line-height: 23px; }
.m .sx-hit .at { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 16px; font-weight: 500; color: var(--text-2); }
.m .sx-hit .at svg.pin { width: 17px; height: 17px; color: #b0b5ad; margin-left: -2px; }
.m .sx-hit .at.here { color: var(--brand); font-weight: 700; }
.m .sx-hit .at.here svg.pin { color: var(--brand); }
.sx-filter { max-height: 88%; gap: 14px; }
.sx-fbody { overflow-y: auto; display: flex; flex-direction: column; gap: 24px; margin: 0 -4px; padding: 2px 4px 4px; }
.sx-fg h3 { margin: 0 0 10px; font-size: 18px; line-height: 26px; font-weight: 700; }
.sx-fg h3 span { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--text-3); }
.sx-places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sx-places button { height: 48px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 16px; font-weight: 600; color: var(--text-2); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-places button.on { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); font-weight: 800; }
.sx-fg .chips { gap: 8px; }
.sx-fbtns { flex: none; display: flex; gap: 10px; padding-top: 4px; }
.sx-reset { flex: none; height: 56px; padding: 0 18px; font-size: 17px; font-weight: 600; color: var(--text-3); }
.sx-fbtns .btn { flex: 1; }
/* 책 속 한 문장: 이름표를 인용 밖, 아래 소개 제목과 같은 크기·색으로 */
.bslide .qbox { display: flex; flex-direction: column; gap: 8px; }
.bslide .qbox.none { display: none; }
.bslide .qbox .qh { font-size: 19px; line-height: 27px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

/* 마음정돈 4차: 고급스럽고 모던하게. 깊은 숲빛 그라데이션, 유리 같은 원, 가는 글씨와 넓은 자간 */
.m.cm { background: radial-gradient(120% 70% at 50% 34%, #26382d 0%, #16211b 46%, #0c110e 100%); color: #efeee7; --cm-2: rgba(239, 238, 231, 0.68); --cm-3: rgba(239, 238, 231, 0.46); --cm-line: rgba(239, 238, 231, 0.1); --cm-surf: rgba(239, 238, 231, 0.06); --sage: #a9cdb6; }
.m.cm::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 100%, rgba(169, 205, 182, 0.08), transparent 70%); }
.cm .bar { position: relative; z-index: 2; }
.cm .xtext, .cm-set { font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: rgba(239, 238, 231, 0.72) !important; }
.cm-quiet { font-size: 15px; font-weight: 500; letter-spacing: 0.08em; color: var(--cm-3); }
.cm-stage { position: relative; z-index: 1; }
/* 시작 원 */
.cm-orb { width: 280px; height: 280px; }
.cm-orb .halo { inset: -10px; background: radial-gradient(circle, rgba(169, 205, 182, 0.30) 0%, rgba(169, 205, 182, 0.10) 42%, rgba(169, 205, 182, 0) 68%); animation: cm-breathe 9s ease-in-out infinite; }
.cm-orb::before, .cm-orb::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(239, 238, 231, 0.10); }
.cm-orb::before { inset: 18px; }
.cm-orb::after { inset: 48px; border-color: rgba(239, 238, 231, 0.16); animation: cm-breathe 9s ease-in-out infinite reverse; }
.cm-orb .core { width: 148px; height: 148px; background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.26); color: #f6f5ef; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -18px 40px rgba(0, 0, 0, 0.18), 0 24px 70px rgba(0, 0, 0, 0.45); transition: transform 0.25s ease; }
.cm-orb:active .core { transform: scale(0.96); }
.cm-orb .core b { font-size: 21px; font-weight: 500; letter-spacing: 0.32em; margin-right: -0.32em; }
.cm-pick { margin-top: 40px; font-size: 16px; font-weight: 400; letter-spacing: 0.06em; color: var(--cm-2); }
/* 진행 화면 */
.cm-ring { width: 290px; height: 290px; border: 1px solid rgba(239, 238, 231, 0.12); }
.cm-ring::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid rgba(239, 238, 231, 0.06); }
.cm-disc { inset: 18px; background: radial-gradient(circle at 40% 32%, rgba(169, 205, 182, 0.42), rgba(169, 205, 182, 0.14) 55%, rgba(169, 205, 182, 0.04)); box-shadow: 0 0 80px rgba(169, 205, 182, 0.18); }
.cm-cue .c { font-size: 17px; line-height: 26px; font-weight: 500; letter-spacing: 0.16em; color: var(--cm-2); }
.cm-cue .n { font-size: 68px; line-height: 76px; font-weight: 200; letter-spacing: -0.02em; }
.cm-round { margin-top: 40px; font-size: 15px; letter-spacing: 0.2em; color: var(--cm-3); }
.cm-pp { width: 72px; height: 72px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); color: #f6f5ef; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2); }
.cm-pp svg.i { width: 24px !important; height: 24px !important; stroke-width: 1.6; }
.cm-finish { height: 56px; padding: 0 40px; border-radius: 28px; background: #efeee7; color: #14201a; font-size: 17px; font-weight: 600; letter-spacing: 0.08em; }
.cm-line { width: 200px; height: 2px; margin-top: 52px; background: rgba(239, 238, 231, 0.12); }
.cm-line i { background: var(--sage); }
.cm-stage .cm-time { font-size: 15px; letter-spacing: 0.14em; color: var(--cm-3); }
.cm-ring.soft .cm-cue .n { font-weight: 300 !important; letter-spacing: 0.2em; margin-right: -0.2em; }
/* 설정 창 */
.cm .scrim { background: rgba(4, 7, 5, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.cm .sheet.cm-sheet { background: linear-gradient(180deg, rgba(34, 46, 39, 0.96), rgba(18, 25, 21, 0.98)); border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px 28px 0 0; padding: 22px 24px 30px; }
.cm .h-title { font-weight: 600; letter-spacing: 0.02em; }
.cm-tabs { border-bottom-color: var(--cm-line); }
.cm-tabs button { font-weight: 500; letter-spacing: 0.04em; }
.cm-tabs button.on { font-weight: 700; box-shadow: inset 0 -2px 0 #efeee7; }
.cm-opt { padding: 16px 2px; }
.cm-opt .t { font-size: 18px; font-weight: 500; }
.cm-opt.on .t { color: #ffffff; font-weight: 700; }
.cm-opt.on .len { color: var(--sage); }
.cm-opt.on .tx::before { content: ""; }
.cm-opt.on { box-shadow: inset 3px 0 0 var(--sage); padding-left: 14px; }
.cm-seg button { height: 46px; border-radius: 23px; border: 1px solid rgba(239, 238, 231, 0.18); font-weight: 500; }
.cm-seg button.on { background: #efeee7; border-color: #efeee7; color: #14201a; font-weight: 700; }
.cm-voice { border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.06); }
.cm-voice .t { font-weight: 600; }
.cm-voice .sw.on { background: var(--sage); }
.cm-done { height: 56px; border-radius: 28px; background: #efeee7; color: #14201a; font-weight: 700; letter-spacing: 0.06em; }
.cm-label { letter-spacing: 0.08em; color: var(--cm-3); }
.m .sheet { z-index: 30; }

/* 검색 4차: 지점 이름 + 바꾸기, 바꾸기 창은 지점만 여러 곳 */
.sx-where .ch { flex: none; font-size: 16px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 8px 2px; }
.sx-places button { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 56px; }
.sx-places button .nm { display: flex; flex-direction: column; min-width: 0; line-height: 20px; overflow: hidden; }
.sx-places button small { font-size: 14px; font-weight: 600; color: var(--brand); }
.sx-places button small:empty { display: none; }
.sx-places button svg { flex: none; width: 20px; height: 20px; color: transparent; }
.sx-places button.on svg { color: var(--brand); }
.sx-none .btn { margin-top: 14px; align-self: flex-start; }
.sx-filter .btn.block { width: 100%; flex: none; }

/* 마음정돈 5차: Codex 3D 에셋 — 새벽 소나무 숲 배경, 서리 유리 원, 물결 고리 */
.m.cm { background: #0c110e url("a/95957a4c97c566ccf4cfbf63631f1cc0.jpg") center bottom / cover no-repeat; }
.m.cm::before { display: none; }
.cm-orb { width: 300px; height: 300px; }
.cm-orb::before, .cm-orb::after { display: none; }
.cm-orb .halo { inset: 0; background: url("a/6d14a62baff4314495b38c7fd9a341a8.png") center / contain no-repeat; animation: cm-ripple 6s ease-out infinite; opacity: 0; }
.cm-orb .halo + .halo { animation-delay: 3s; }
@keyframes cm-ripple { 0% { transform: scale(0.55); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } }
.cm-orb .core { width: 172px; height: 172px; background: url("a/05081120f2c687d87b5abd94d1f36c0f.png") center / 112.5% no-repeat; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.cm-orb .core::before { content: ""; position: absolute; inset: -10px; z-index: -1; background: url("a/ed276118e0275b039e2c327a2492ab7b.png") center / 112.5% no-repeat; transform: translateY(8px) scale(1.12); }
.cm-orb .core b { font-weight: 500; color: #f6f5ef; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.cm-disc { background: url("a/05081120f2c687d87b5abd94d1f36c0f.png") center / 112.5% no-repeat; box-shadow: none; }
.cm-ring { border-color: rgba(239, 238, 231, 0.09); }
.cm-cue { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
@media (prefers-reduced-motion: reduce) { .cm-orb .halo { animation: none; opacity: 0.4; } }
/* 검색 결과: 책 사이 가로선 없이 여백으로만 나눈다 */
.sx-hit { border-bottom: 0; padding: 12px 0; }
.sx-hits { gap: 6px; display: flex; flex-direction: column; }

/* 마음정돈 6차: Calm 결 · 지관 숲 버전 (밝은 아침 숲 배경, 흰 거품 원, 초록 글자) */
.m.cm.cl { --cl-ink: #1f5a3a; color: #ffffff; background: #5e9a86 url("a/29beab7aa350d4942c411dc79711cdf7.jpg") center top / cover no-repeat; }
.m.cm.cl:has(.cm-orb) { background-image: url("a/961b754ba468f764641d12095c743243.jpg"); background-position: center center; }
.m.cl::before { display: block; content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16, 48, 38, 0.30) 0%, rgba(16, 48, 38, 0) 24%, rgba(16, 48, 38, 0) 70%, rgba(16, 48, 38, 0.28) 100%); }
.cl .xtext, .cl .cm-set, .cl .cm-quiet { font-size: 16px; font-weight: 600; letter-spacing: 0; color: #ffffff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.cl .splash.sp-calm { background: #6fa592 url("a/961b754ba468f764641d12095c743243.jpg") center / cover no-repeat; color: #ffffff; }
.cl .splash.sp-calm .sp-ic img { content: url("a/0775884fb2953c27eb361a7dfefeeea3.png"); }
.cl .splash .sp-t { text-shadow: 0 2px 12px rgba(10, 40, 30, 0.35); }
.cl-hello { position: absolute; top: 92px; left: 0; right: 0; text-align: center; font-size: 28px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; text-shadow: 0 2px 16px rgba(10, 40, 30, 0.35); }
.cl .cm-stage { padding-top: 40px; }
/* 시작 거품 */
.cl .cm-orb { width: 250px; height: 250px; }
.cl .cm-orb .halo { inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); opacity: 1; animation: cl-swell 8s ease-in-out infinite; }
.cl .cm-orb .halo + .halo { inset: 26px; background: rgba(255, 255, 255, 0.24); animation-delay: 0.6s; }
@keyframes cl-swell { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.04); } }
.cl .cm-orb .core { width: 146px; height: 146px; background: rgba(255, 255, 255, 0.96); border-radius: 50%; box-shadow: 0 12px 40px rgba(16, 60, 44, 0.28); }
.cl .cm-orb .core::before { display: none; }
.cl .cm-orb .core b { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; margin-right: 0; color: var(--cl-ink); text-shadow: none; }
.cl .cm-pick { margin-top: 0; position: absolute; bottom: 92px; left: 50%; transform: translateX(-50%); height: 46px; padding: 0 22px; border-radius: 23px; background: rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 16px; font-weight: 600; letter-spacing: 0; color: #ffffff; white-space: nowrap; }
/* 호흡·듣기 */
.cl .cm-ring { width: 290px; height: 290px; border: 0; }
.cl .cm-ring::after { display: none; }
.cl-arc { position: absolute; inset: 0; transform: rotate(-90deg); }
.cl-arc circle { fill: none; stroke: rgba(255, 255, 255, 0.32); stroke-width: 4; }
.cl-arc circle.on { stroke: #ffffff; stroke-linecap: round; stroke-dasharray: 886; transition: stroke-dashoffset 1s linear; }
.cl .cm-disc { inset: 18px; background: rgba(255, 255, 255, 0.3); box-shadow: none; }
.cl .cm-cue { width: 168px; height: 168px; border-radius: 50%; background: #f4f8f5; box-shadow: 0 12px 40px rgba(10, 50, 36, 0.3); justify-content: center; color: var(--cl-ink); text-shadow: none; }
.cl .cm-cue .c { font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--cl-ink); }
.cl .cm-cue .n { font-size: 44px; line-height: 52px; font-weight: 300; }
.cl .cm-ring.soft .cm-cue .n { font-size: 30px !important; font-weight: 700 !important; letter-spacing: 0.04em; margin-right: 0; }
.cl .cm-ring.soft .cm-disc { background: rgba(255, 255, 255, 0.3); }
.cl .cm-round { margin-top: 36px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
.cl .cm-pp { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.22); border: 0; color: #ffffff; box-shadow: none; }
.cl .cm-finish { background: #ffffff; color: var(--cl-ink); letter-spacing: 0; }
.cl .cm-line { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.cl .cm-line i { background: #ffffff; }
.cl .cm-stage .cm-time { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
/* 설정 창: 밝은 시트 */
.cl .scrim { background: rgba(10, 40, 30, 0.35); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cl .sheet.cm-sheet { background: #ffffff; color: #191919; border-top: 0; }
.cl .h-title { color: #191919; font-weight: 700; letter-spacing: 0; }
.cl .sheet-close { color: #474747; }
.cl .cm-tabs { border-bottom-color: #e4e3df; }
.cl .cm-tabs button { color: #6b6b6b; letter-spacing: 0; }
.cl .cm-tabs button.on { color: #191919; box-shadow: inset 0 -3px 0 #191919; }
.cl .cm-opt { border-bottom-color: #ecebe7; }
.cl .cm-opt .t { color: #191919; }
.cl .cm-opt .d { color: #6b6b6b; }
.cl .cm-opt .len { color: #474747; }
.cl .cm-opt.on { box-shadow: inset 3px 0 0 var(--cl-ink); }
.cl .cm-opt.on .t, .cl .cm-opt.on .len { color: var(--cl-ink); }
.cl .cm-label { color: #6b6b6b; letter-spacing: 0; }
.cl .cm-seg button { border-color: #d6d5cf; color: #191919; }
.cl .cm-seg button.on { background: var(--cl-ink); border-color: var(--cl-ink); color: #ffffff; }
.cl .cm-voice { background: #f5f5f2; border: 0; }
.cl .cm-voice .t { color: #191919; }
.cl .cm-voice .d { color: #6b6b6b; }
.cl .cm-voice .sw { background: #d6d5cf; }
.cl .cm-voice .sw.on { background: var(--cl-ink); }
.cl .cm-voice .sw.on i { background: #ffffff; }
.cl .cm-done { background: var(--cl-ink); color: #ffffff; letter-spacing: 0; }
/* 끝 화면 */
.cl .h-display { color: #ffffff; }
.cl .btn.block { color: var(--cl-ink) !important; }
.m.cl:has(.cm-orb)::before { background: linear-gradient(180deg, rgba(16, 48, 38, 0.46) 0%, rgba(16, 48, 38, 0.18) 26%, rgba(16, 48, 38, 0) 42%, rgba(16, 48, 38, 0) 72%, rgba(16, 48, 38, 0.3) 100%); }
.cl-hello { text-shadow: 0 1px 2px rgba(10, 40, 30, 0.35), 0 2px 18px rgba(10, 40, 30, 0.45); }

/* 마음정돈 7차: 진행 화면도 홈과 같은 숲 배경(살짝 흐리게), 원 중심을 모든 화면에서 같은 자리(위에서 430px)로 */
.m.cm.cl:has(.cm-ring) { background-image: url("a/961b754ba468f764641d12095c743243.jpg"); background-position: center center; }
.m.cl:has(.cm-ring)::before { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background: linear-gradient(180deg, rgba(16, 48, 38, 0.42) 0%, rgba(16, 48, 38, 0.14) 28%, rgba(16, 48, 38, 0.14) 70%, rgba(16, 48, 38, 0.34) 100%); }
.cl .cm-stage { position: static; }
.cl .cm-stage > * { z-index: 1; }
.cl .cm-orb, .cl .cm-ring { position: absolute; left: 50%; top: 430px; transform: translate(-50%, -50%); }
.cl-hello { top: 120px; z-index: 1; }
.cl .cm-round { position: absolute; left: 0; right: 0; top: 604px; margin: 0; text-align: center; }
.cl .cm-line { position: absolute; left: 50%; top: 604px; margin: 0 0 0 -100px; }
.cl .cm-stage .cm-time { position: absolute; left: 0; right: 0; top: 618px; margin: 0; display: block; text-align: center; }
.cl .cm-pick { z-index: 1; }
/* 끝 화면: 한 줄 남기기 글자 흰색, 돌 아이콘 */
.cl .cl-line { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.6) !important; background: rgba(255, 255, 255, 0.1) !important; }
.cl .cl-line::placeholder { color: rgba(255, 255, 255, 0.9); }
/* 뽑기 시작 화면은 0.5초 더 길게(2초) */
.splash.sp-draw { animation: sp-out 0.35s ease 2s forwards; }
@media (prefers-reduced-motion: reduce) { .splash.sp-draw { animation: sp-out 0.2s ease 0.5s forwards; } }
.cl .cm-round, .cl .cm-stage .cm-time, .cl .cm-pick { text-shadow: 0 1px 2px rgba(10, 40, 30, 0.35), 0 1px 10px rgba(10, 40, 30, 0.35); }
.cl .cm-pick { background: rgba(20, 60, 45, 0.28); }
.cl .cm-pp { background: rgba(20, 60, 45, 0.3); }

/* 참여 홈·강연 상세 2차: 내 신청 먼저, 지점 한 줄 + 종류 탭, 달마다 묶은 목록(줄 없이), 상세는 표 대신 이름표 목록 */
.jn-mine { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 16px 16px 18px; border-radius: 12px; background: #eef5ef; }
.jn-mine .dd { flex: none; width: 54px; height: 54px; border-radius: 10px; background: var(--brand); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.jn-mine .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jn-mine .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.jn-mine b { font-size: 19px; line-height: 27px; font-weight: 800; }
.jn-mine .tx > span:last-child { font-size: 15px; line-height: 22px; color: var(--text-2); }
.jn-mine svg { color: var(--text-3); }
.jn-where { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.jn-where .pl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 17px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-where .pl b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.m .jn-where svg.pin { width: 18px; height: 18px; color: var(--brand); flex: none; }
.jn-where .ch { flex: none; font-size: 16px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 8px 2px; }
.jn-tabs { margin-top: 8px; }
.jn-month { margin-top: 26px; display: flex; flex-direction: column; gap: 20px; }
.jn-month h2 { font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.jn-item { display: flex; gap: 16px; align-items: flex-start; }
.jn-item .poster { width: 96px; height: 134px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.08); }
.jn-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.jn-item .k { font-size: 15px; line-height: 22px; color: var(--text-3); }
.jn-item b { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.jn-item .sub { font-size: 16px; line-height: 23px; color: var(--text-2); }
.jn-item .sub:empty { display: none; }
.jn-item .dt { margin-top: 6px; font-size: 16px; line-height: 23px; color: var(--text); }
.jn-item .st { margin-top: 2px; font-size: 16px; line-height: 23px; font-weight: 700; color: var(--text-2); }
.jn-item .st.few { color: #c4421a; }
.jn-item .st.open { color: var(--brand); }
.jn-item .st.wait { color: var(--text-3); font-weight: 600; }
.jn-item .st.mine { color: var(--brand); }
.jn-item .st.mine::before { content: "✓ "; }
.jn-empty { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 18px; color: var(--text-2); }
.jn-past { display: flex; gap: 14px; overflow-x: auto; margin: 0 -24px; padding: 0 24px 4px; scrollbar-width: none; }
.jn-past::-webkit-scrollbar { display: none; }
.jn-pc { flex: none; width: 150px; display: flex; flex-direction: column; gap: 4px; }
.jn-pc img { width: 150px; height: 208px; border-radius: 10px; object-fit: cover; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.08); }
.jn-pc b { margin-top: 6px; font-size: 17px; line-height: 24px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jn-pc span { font-size: 15px; line-height: 20px; color: var(--text-3); }
.jn-pc .go { font-size: 15px; font-weight: 700; color: var(--brand); }
/* 강연 상세 */
.jd-body { padding-bottom: 140px; }
.jd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 6px; }
.jd-hero .poster { width: 176px; height: 248px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 14px 32px rgba(0, 0, 0, 0.14); }
.jd-hero .k { margin-top: 22px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jd-hero h1 { margin-top: 4px; font-size: 27px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.jd-hero .sub { font-size: 19px; line-height: 27px; font-weight: 600; color: var(--text-2); }
.jd-hero .by { margin-top: 6px; font-size: 16px; color: var(--text-3); }
.jd-facts { margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; }
.jd-facts div { display: flex; gap: 16px; align-items: baseline; }
.jd-facts dt { flex: none; width: 56px; font-size: 16px; font-weight: 600; color: var(--text-3); }
.jd-facts dd { margin: 0; font-size: 18px; line-height: 26px; color: var(--text); display: flex; flex-direction: column; }
.jd-facts dd small { font-size: 15px; line-height: 22px; color: var(--text-3); }
.jd-facts.sm { margin-top: 0; gap: 10px; }
.jd-seat { margin-top: 24px; padding: 18px 18px 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.jd-seat b { font-size: 17px; font-weight: 700; }
.jd-seat .g { font-size: 16px; font-weight: 800; color: #c4421a; }
.jd-sec { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.jd-sec h2 { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.jd-sec p { font-size: 18px; line-height: 30px; color: var(--text-2); }
.jd-book { display: flex; align-items: center; gap: 14px; }
.jd-book .cover { width: 64px; height: 92px; border-radius: 4px; }
.jd-book .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.jd-book b { font-size: 18px; font-weight: 700; }
.jd-book .tx > span { font-size: 15px; color: var(--text-3); }
.jd-book .at { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2) !important; }
.m .jd-book svg.pin { width: 16px; height: 16px; color: #b0b5ad; }
.jd-book > svg { color: var(--text-3); }
.jd-rv { padding: 16px 18px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.jd-rv b { font-size: 15px; font-weight: 700; color: var(--text-2); }
.jd-rv p { font-size: 17px; line-height: 27px; color: var(--text); }
.jd-cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; gap: 10px; padding: 12px 20px 26px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 28%); }
.jd-cta .btn { height: 58px; }
.jd-share { flex: none; padding: 0 20px; }
.jd-cta .btn.primary { flex: 1; font-size: 19px; }
.jd-sheet { gap: 16px; }
.jd-edit { align-self: center; font-size: 16px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 4px; }
.jd-facts.sm dt { width: 66px; }

/* 강연 상세 비교안(P2b·P2c): 예전 통합 서비스에서 가져온 것 */
.jd-tags { margin-top: 22px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.jd-tags span { height: 30px; padding: 0 12px; border-radius: 15px; background: var(--surface); font-size: 15px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; }
.jd-tags .st { background: var(--brand); color: #ffffff; }
.jd-map { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jd-map svg { width: 16px; height: 16px; }
.jd-kw { gap: 8px; }
.jd-kw .chip { height: 38px; padding: 0 14px; font-size: 16px; }
.jd-note { margin-top: -6px; font-size: 15px; color: var(--text-3); }
.jd-sheet2 { max-height: 90%; gap: 14px; }
.jd-sb { overflow-y: auto; display: flex; flex-direction: column; gap: 20px; margin: 0 -4px; padding: 2px 4px; }
.jd-kakao { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 10px; background: #fef6d8; text-align: left; }
.jd-kakao .tx { flex: 1; display: flex; flex-direction: column; }
.jd-kakao b { font-size: 16px; font-weight: 800; color: #3b2f00; }
.jd-kakao .tx span { font-size: 15px; line-height: 20px; color: #6b5a1e; }
.jd-kakao .go { flex: none; height: 38px; padding: 0 14px; border-radius: 10px; background: #fee500; color: #191919; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.jd-ok { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jd-q h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.jd-q h3 span { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--text-3); }
.jd-radio { display: flex; flex-direction: column; gap: 8px; }
.jd-radio button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--line); text-align: left; }
.jd-radio button i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); }
.jd-radio button.on { border-color: var(--brand); background: var(--brand-wash); }
.jd-radio button.on i { border: 7px solid var(--brand); }
.jd-radio .tx { display: flex; flex-direction: column; }
.jd-radio b { font-size: 17px; font-weight: 700; }
.jd-radio .tx span { font-size: 15px; color: var(--text-3); }
.jd-ta { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); font-size: 17px; line-height: 26px; resize: none; background: #ffffff; }
.jd-agree { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; font-size: 16px; line-height: 24px; color: var(--text); }
.jd-agree i { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: transparent; }
.jd-agree i svg { width: 16px; height: 16px; }
.jd-agree.on i { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.jd-off { background: var(--surface-2); border-color: var(--surface-2); color: var(--text-3); width: 100%; }
.jd-sb { flex: 1 1 auto; min-height: 0; gap: 18px; } .jd-ta { height: 76px; } .jd-sheet2 .jd-agree { padding-top: 12px; border-top: 1px solid var(--line); }

/* 참여 홈 3차: 내 신청 여러 개, 온라인 켜고 끄기, 지난 프로그램(P5), 내 신청(P6) */
.jn-my { margin-top: 18px; border-radius: 12px; background: #eef5ef; overflow: hidden; }
.jn-my .jn-mine { margin-top: 0; border-radius: 0; background: transparent; padding-bottom: 6px; }
.jn-mynote { margin: 0 18px 0 86px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.jn-mymore { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px 14px 18px; background: rgba(31, 107, 58, 0.07); font-size: 16px; line-height: 22px; }
.jn-mymore .nx { flex: 1; min-width: 0; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn-mymore .n { flex: none; display: flex; align-items: center; gap: 2px; font-weight: 700; color: var(--brand); }
.jn-pastlink { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding: 18px 16px 18px 20px; border-radius: 12px; background: #f4f3ef; }
.jn-pastlink .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.jn-pastlink b { font-size: 18px; line-height: 25px; font-weight: 700; }
.jn-pastlink .tx span { font-size: 15px; line-height: 21px; color: var(--text-3); }
.jn-pastlink svg { color: var(--text-3); }
.jn-online { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 22px; padding: 16px 16px; border-radius: 10px; text-align: left; background: #f4f3ef; }
.jn-online .tx { flex: 1; display: flex; flex-direction: column; }
.jn-online b { font-size: 17px; line-height: 24px; font-weight: 700; }
.jn-online .tx span { font-size: 15px; line-height: 21px; color: var(--text-3); }
.jn-online .sw { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #d6d4cd; position: relative; transition: background 0.2s; }
.jn-online .sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
.jn-online .sw.on { background: var(--brand); }
.jn-online .sw.on i { transform: translateX(20px); }
.jp-search { display: flex; align-items: center; gap: 8px; margin-top: 8px; height: 52px; padding: 0 16px; border-radius: 10px; background: #f4f3ef; color: var(--text-3); }
.jp-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 17px; color: var(--text); outline: none; }
.jp-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; height: 40px; padding: 0 16px 0 12px; border-radius: 20px; border: 1px solid #dcdad3; background: #ffffff; font-size: 16px; font-weight: 600; color: var(--text-2); }
.jp-chip svg { color: #c9c6bd; }
.jp-chip.on { border-color: var(--brand); background: #eef5ef; color: var(--brand); }
.jp-chip.on svg { color: var(--brand); }
.jp-month { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.jp-month h2 { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.jp-row { display: flex; gap: 16px; align-items: flex-start; }
.jp-row .d { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; padding-top: 1px; }
.jp-row .d b { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--text-2); }
.jp-row .d span { font-size: 15px; line-height: 20px; color: var(--text-3); }
.jp-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jp-row .tx b { font-size: 18px; line-height: 25px; font-weight: 700; color: var(--text); }
.jp-row .by { font-size: 15px; line-height: 21px; color: var(--text-2); }
.jp-row .by:empty { display: none; }
.jp-row .k { font-size: 15px; line-height: 21px; color: var(--text-3); }
.jp-row .ag { align-self: flex-start; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jp-older { margin-top: 32px; }
.jm-card { display: flex; flex-direction: column; gap: 2px; margin-top: 22px; padding: 20px; border-radius: 12px; background: #eef5ef; }
.jm-card .top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.jm-card .dd { padding: 4px 10px; border-radius: 8px; background: var(--brand); color: #ffffff; font-size: 15px; font-weight: 800; }
.jm-card .dd.soft { background: #d9e8dc; color: var(--brand); }
.jm-card .st { font-size: 15px; font-weight: 700; color: var(--brand); }
.jm-card b { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.jm-card .ln { font-size: 16px; line-height: 23px; color: var(--text); }
.jm-card .nt { margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--text-2); }
.jm-acts { display: flex; gap: 10px; margin-top: 10px; }
.jm-acts .btn { flex: 1; }
.jm-old { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.jm-old .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jm-old .k { font-size: 15px; line-height: 20px; color: var(--text-3); }
.jm-old b { font-size: 17px; line-height: 24px; font-weight: 700; }
.jm-old .tx > span:last-child { font-size: 15px; line-height: 21px; color: var(--text-2); }
.jm-old .dn { flex: none; display: flex; align-items: center; gap: 2px; font-size: 15px; color: var(--text-3); }

/* 희망 TIME BOX: 헤더 단추와 오늘의 한 줄(X0) */
.me.tbox { background: #ffffff; border-color: var(--line); }
.me.tbox img { width: 36px; height: 36px; display: block; }
.tb-body { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 120px; }
.tb-icon { width: 104px; height: 104px; margin-top: 18px; }
.tb-h { margin-top: 10px; font-size: 26px; line-height: 35px; font-weight: 800; letter-spacing: -0.02em; }
.tb-lead { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--text-2); }
.tb-q { align-self: stretch; margin-top: 28px; padding: 20px; border-radius: 12px; background: #f6f1e7; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.tb-q .k { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.tb-q b { font-size: 20px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.tb-other { align-self: flex-start; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; background: none; padding: 4px 0; }
.tb-in { align-self: stretch; margin-top: 14px; min-height: 104px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line-strong); font: inherit; font-size: 18px; line-height: 27px; color: var(--text); resize: none; outline: none; background: #ffffff; }
.tb-in:focus { border-color: var(--brand); }
.tb-week { display: flex; gap: 10px; margin-top: 26px; }
.tb-week span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 15px; color: var(--text-3); }
.tb-week i { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); }
.tb-week .on i { background: var(--brand); }
.tb-week .today { color: var(--brand); font-weight: 700; }
.tb-week .today i { background: #ffffff; border: 2px dashed var(--brand); }
.tb-wnote { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.tb-letter { margin-top: 26px; font-size: 15px; line-height: 22px; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.tb-ago { align-self: stretch; margin-top: 30px; padding: 22px 20px; border-radius: 12px; background: #f6f1e7; text-align: left; }
.tb-ago .k { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.tb-ago p { margin-top: 8px; font-size: 19px; line-height: 30px; font-weight: 600; color: var(--text); }
.tb-acts { align-self: stretch; display: flex; gap: 10px; margin-top: 14px; }
.tb-acts .btn { flex: 1; }
.btn.off { opacity: 0.45; }

/* 참여 3차: 상세·신청·결과·지난 프로그램·내 신청 */
.jd-cta { padding: 12px 20px 26px; }
.jd-cta .btn.primary { flex: 1; }
.jd-cta.soon { flex-direction: column; gap: 10px; }
.jd-cta.soon .when { align-self: center; font-size: 15px; font-weight: 600; color: var(--text-2); }
.jd-cta.soon .btn { gap: 8px; }
.jd-cta.soon .btn.done { background: #eef5ef; color: var(--brand); border-color: #eef5ef; }
.jd-host { display: flex; flex-direction: column; gap: 4px; }
.jd-host b { font-size: 18px; font-weight: 700; }
.jd-host p { font-size: 17px !important; line-height: 28px !important; }
.jd-sec h2.sm { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--text-2); }
.jd-kws { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: -4px; }
.jd-kws a { font-size: 16px; line-height: 26px; color: var(--text-2); }
.jd-kws a span { margin-right: 1px; color: #b5b3ab; }
.jd-folds { margin-top: 26px; }
.jd-sharebox { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; margin-top: 30px; border-radius: 10px; background: var(--surface); font-size: 17px; font-weight: 600; color: var(--text-2); }
.jw-sheet { gap: 18px; }
.jw-h { font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.jw-ways { display: flex; flex-direction: column; gap: 10px; }
.jw-ways button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 14px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: #ffffff; text-align: left; }
.jw-ways button i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); }
.jw-ways button .tx { display: flex; flex-direction: column; }
.jw-ways button b { font-size: 19px; line-height: 27px; font-weight: 700; }
.jw-ways button .tx span { font-size: 16px; line-height: 22px; color: var(--text-3); }
.jw-ways button.on { border-color: var(--brand); background: #f3f8f4; }
.jw-ways button.on i { border: 7px solid var(--brand); }
.jw-note { margin-top: -6px; font-size: 16px; line-height: 23px; color: var(--text-2); }
.jw-next { margin-top: 4px; }
.ja-body { padding-bottom: 130px; }
.ja-sum { display: flex; gap: 14px; align-items: center; margin-top: 6px; padding: 14px; border-radius: 12px; background: var(--surface); }
.ja-sum .poster { width: 52px; height: 74px; border-radius: 6px; }
.ja-sum .tx { display: flex; flex-direction: column; gap: 1px; }
.ja-sum b { font-size: 18px; font-weight: 800; }
.ja-sum .tx span { font-size: 15px; line-height: 22px; color: var(--text-2); }
.ja-sec { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.ja-sec h2 { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.ja-sec h2 .opt { margin-left: 8px; font-size: 15px; font-weight: 500; color: var(--text-3); }
.ja-help { margin-top: -6px; font-size: 15px; line-height: 22px; color: var(--text-3); }
.ja-edit { font-size: 16px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 6px 2px; }
.ja-me { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ja-me div { display: flex; gap: 16px; }
.ja-me dt { flex: none; width: 60px; font-size: 16px; color: var(--text-3); }
.ja-me dd { margin: 0; font-size: 18px; color: var(--text); }
.ja-opts { display: flex; flex-direction: column; gap: 8px; }
.ja-opts.row2 { flex-direction: row; }
.ja-opts.row2 button { flex: 1; justify-content: center; }
.ja-opts button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--line); background: #ffffff; font-size: 17px; font-weight: 600; color: var(--text); text-align: left; }
.ja-opts.row2 button i { display: none; }
.ja-opts button i { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-strong); }
.ja-opts button.on { border-color: var(--brand); background: #f3f8f4; color: var(--brand); }
.ja-opts button.on i { border: 6px solid var(--brand); }
.ja-ta { min-height: 92px; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--line-strong); font: inherit; font-size: 17px; line-height: 26px; resize: none; outline: none; background: #ffffff; }
.ja-agree { gap: 4px; padding: 18px 16px 10px; border-radius: 12px; background: var(--surface); }
.ja-all { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 0 14px; border-bottom: 1px solid var(--line); text-align: left; background: none; }
.ja-all b { font-size: 18px; font-weight: 800; }
.ja-all i, .ja-ag button:first-child i { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #d9d7cf; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.ja-all i svg, .ja-ag i svg { width: 16px; height: 16px; stroke-width: 3; }
.ja-all.on i, .ja-ag button.on i { background: var(--brand); }
.ja-ag { display: flex; align-items: center; gap: 8px; }
.ja-ag button:first-child { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 0; text-align: left; background: none; }
.ja-ag .tx { display: flex; flex-direction: column; }
.ja-ag .tx b { font-size: 17px; line-height: 24px; font-weight: 600; }
.ja-ag .tx span { font-size: 15px; line-height: 20px; color: var(--text-3); }
.ja-see { flex: none; font-size: 15px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; padding: 8px 2px; background: none; }
.ja-doc { gap: 14px; }
.ja-docl { font-size: 17px; line-height: 27px; color: var(--text-2); }
.jr-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 24px; }
.jr-top .ok { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; }
.jr-top .ok svg { width: 34px; height: 34px; stroke-width: 2.6; }
.jr-top h1 { margin-top: 8px; font-size: 27px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.jr-top p { font-size: 17px; line-height: 26px; color: var(--text-2); }
.jr-box { margin-top: 30px; padding: 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 4px; }
.jr-box b { font-size: 17px; font-weight: 700; }
.jr-box > span { font-size: 15px; line-height: 22px; color: var(--text-2); }
.jr-box .row { gap: 10px; margin-top: 12px; }
.jr-box .row .btn { flex: 1; background: #ffffff; border-color: #ffffff; }
.jr-book { margin-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.jr-book h2 { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.jr-book .at { color: var(--text-2) !important; }
.jr-book .at.no { color: #a35a1f !important; }
.jr-read { display: flex; align-items: center; gap: 6px; height: 54px; justify-content: center; border-radius: 10px; background: var(--surface); font-size: 17px; font-weight: 600; color: var(--brand); }
.jn-item.past .st.end { color: var(--text-3); font-weight: 600; }
.jn-item.past .st.again { color: var(--brand); }
.jn-item.past .poster { filter: saturate(0.85); }
.jm-card { gap: 0; padding: 18px; background: #eef5ef; }
.jm-main { display: flex; gap: 14px; align-items: flex-start; }
.jm-main .poster { width: 64px; height: 90px; border-radius: 6px; flex: none; }
.jm-main .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jm-main .top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jm-main b { font-size: 20px; line-height: 27px; font-weight: 800; letter-spacing: -0.02em; }
.jm-main .tx > span:not(.top) { font-size: 16px; line-height: 23px; color: var(--text); }
.jm-nt { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.jm-card .jm-acts { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 0; }
.jm-card .jm-acts .btn { flex: none; background: #ffffff; border-color: #ffffff; padding: 0 20px; }
.jm-cancel { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; padding: 10px 2px; background: none; }
.jm-foot { margin-top: 20px; }
.jm-olds { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.jm-old { display: flex; gap: 14px; align-items: flex-start; padding: 0; }
.jm-old .poster { width: 56px; height: 79px; border-radius: 6px; flex: none; }
.jm-old .k { font-size: 15px; }
.jm-rv { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jm-rv svg { width: 16px; height: 16px; }
.jm-old .dn { margin-top: 4px; }
.ja-opts.row2 button { text-align: center; }
.me.plain img { width: 30px; height: 30px; display: block; }
.jd-cta.soon .btn { width: 100%; }
.jk-sheet { gap: 14px; padding-top: 24px; }
.jk-ch { display: flex; align-items: center; gap: 12px; }
.jk-ch .ic { width: 48px; height: 48px; border-radius: 12px; background: #1f6b3a; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; font-family: serif; }
.jk-ch .tx { display: flex; flex-direction: column; }
.jk-ch b { font-size: 16px; font-weight: 700; }
.jk-ch .tx span { font-size: 15px; color: var(--text-3); }
.jk-p { font-size: 17px; line-height: 27px; color: var(--text-2); }
.jk-go { margin-top: 6px; background: #fee500; border-color: #fee500; color: #191919; }
.jk-later { align-self: center; font-size: 16px; font-weight: 600; color: var(--text-3); padding: 8px; background: none; }
.jk-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 8px 0 4px; }
.jk-done .ok { width: 60px; height: 60px; border-radius: 50%; background: #fee500; color: #191919; display: inline-flex; align-items: center; justify-content: center; }
.jk-done .ok svg { width: 30px; height: 30px; stroke-width: 2.6; }
.ja-sum .poster.ph { width: 52px; height: 74px; border-radius: 6px; background: #dfe9e1; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; text-align: center; padding: 4px; }
.ja-opts.multi button i { border-radius: 6px; }
.ja-opts.multi button.on i { border: 0; background: var(--brand); box-shadow: inset 0 0 0 5px #f3f8f4; }
.ja-in { height: 56px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--line-strong); font: inherit; font-size: 17px; outline: none; background: #ffffff; }
.jm-main > svg { flex: none; align-self: center; color: var(--text-3); }
.jm-card .jm-acts.two .btn, .jm-acts.two .btn { flex: 1; }
.jm-acts.two { display: flex; gap: 10px; }
.jm-acts .btn.on { color: var(--brand); }
.jm-old { align-items: center; }
.jm-rvbtn { flex: none; height: 42px; padding: 0 14px; font-size: 16px; background: var(--brand); border-color: var(--brand); color: #ffffff; }
.jm-rvsee { flex: none; height: 42px; padding: 0 14px; font-size: 16px; color: var(--text-2); }
.jq-top { display: flex; gap: 16px; align-items: flex-start; margin-top: 8px; }
.jq-top .poster { width: 88px; height: 124px; border-radius: 8px; flex: none; }
.jq-top .tx { display: flex; flex-direction: column; gap: 2px; }
.jq-top .st { font-size: 15px; font-weight: 700; color: var(--brand); }
.jq-top b { font-size: 24px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.jq-top .tx > span:not(.st) { font-size: 16px; line-height: 23px; color: var(--text); }
.jq-qr { margin-top: 24px; padding: 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 6px; }
.jq-qr b { font-size: 19px; font-weight: 800; }
.jq-qr > span { font-size: 15px; line-height: 22px; color: var(--text-2); }
.jq-qr .btn { margin-top: 10px; gap: 8px; }
.jq-note { margin-top: 22px; padding: 16px 18px; border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 24px; color: var(--text-2); }
.jq-link { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding: 18px 0; font-size: 17px; font-weight: 600; color: var(--text-2); }
.jq-cancel { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 40px; }
.jq-cancel .jm-cancel { margin: 0; font-size: 16px; }
.jq-cancel span { font-size: 15px; color: var(--text-3); }

/* 기록 탭 2차 */
.rc-today { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 16px 16px 16px 14px; border-radius: 12px; background: #f6f1e7; }
.rc-today img { width: 60px; height: 60px; flex: none; }
.rc-today .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.rc-today .k { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.rc-today b { font-size: 18px; line-height: 25px; font-weight: 800; }
.rc-today .go { flex: none; height: 40px; padding: 0 14px; border-radius: 12px; background: #ffffff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; }
.rc-score { margin-top: 12px; padding: 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 6px; }
.rc-score .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.rc-score .lv { display: inline-flex; align-items: center; font-size: 16px; font-weight: 700; color: var(--text); }
.rc-score .lv svg { color: var(--text-3); }
.rc-score .num { font-size: 17px; font-weight: 700; color: var(--text-2); }
.rc-score .num b { font-size: 34px; line-height: 42px; font-weight: 800; color: var(--text); margin-right: 2px; letter-spacing: -0.02em; }
.rc-score .progress { display: block; width: 100%; background: #d9e8dc; }
.rc-score .nx { font-size: 15px; line-height: 22px; color: var(--text-2); }
.rc-month { margin-top: 12px; padding: 18px 20px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.rc-month b { font-size: 18px; font-weight: 800; }
.rc-month .r { display: inline-flex; align-items: center; font-size: 15px; color: var(--text-3); }
.rc-week { display: flex; justify-content: space-between; }
.rc-week span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; color: var(--text-3); }
.rc-week i { width: 30px; height: 30px; border-radius: 50%; background: #e3e1da; }
.rc-week .on i { background: var(--brand); }
.rc-week .today i { background: #ffffff; border: 2px dashed var(--brand); }
.rc-week .today { color: var(--brand); font-weight: 700; }
.rc-month .sm { font-size: 15px; color: var(--text-2); }
.rc-sec { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.rc-book { display: flex; gap: 16px; align-items: flex-start; }
.rc-book .cover { width: 76px; height: 110px; border-radius: 4px; flex: none; }
.rc-book .tx { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.rc-book b { font-size: 20px; font-weight: 800; }
.rc-book .tx span { font-size: 15px; color: var(--text-3); }
.rc-book .go { margin-top: 10px; font-size: 16px !important; font-weight: 700; color: var(--brand) !important; }
.rc-next { display: flex; align-items: center; gap: 10px; }
.rc-next .k { font-size: 15px; color: var(--text-3); margin-right: 4px; }
.rc-next .cover { width: 40px; height: 58px; border-radius: 3px; display: block; }
.rc-join { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line); }
.rc-join .k { flex: none; font-size: 15px; font-weight: 700; color: var(--brand); }
.rc-join b { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-join .r { flex: none; display: inline-flex; align-items: center; font-size: 15px; color: var(--text-3); }
.rc-stamps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
.rc-stamps button { aspect-ratio: 1; border-radius: 50%; border: 2px dashed #d3d1c9; background: none; font-size: 14px; font-weight: 600; color: #b5b3ab; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 4px; }
.rc-stamps button.on { border: 2.5px solid var(--brand); color: var(--brand); background: #f3f8f4; font-weight: 800; }
.rc-qr { gap: 8px; margin-top: 4px; }
.rc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 30px; }
.rc-two a { padding: 16px 18px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.rc-two .k { font-size: 15px; color: var(--text-3); }
.rc-two b { font-size: 18px; font-weight: 800; }
.rc-recent { display: flex; flex-direction: column; gap: 18px; }
.rc-recent a { display: flex; flex-direction: column; gap: 2px; }
.rc-recent .k { font-size: 15px; color: var(--text-3); }
.rc-recent b { font-size: 17px; font-weight: 600; }
.rl-top { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 18px; padding: 26px 20px 22px; border-radius: 12px; background: #eef5ef; text-align: center; }
.rl-top .lv { font-size: 16px; font-weight: 700; color: var(--brand); }
.rl-top b { font-size: 48px; line-height: 56px; font-weight: 800; letter-spacing: -0.03em; }
.rl-top b span { font-size: 20px; margin-left: 2px; color: var(--text-2); }
.rl-top .progress { display: block; width: 100%; margin-top: 6px; background: #d9e8dc; }
.rl-top .nx { font-size: 15px; color: var(--text-2); }
.rl-sec { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.rl-sec h2 { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.rl-ways { display: flex; flex-direction: column; gap: 12px; }
.rl-ways div, .rl-log > div, .rl-levels > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rl-ways .n { font-size: 17px; color: var(--text); }
.rl-ways b { font-size: 17px; font-weight: 800; color: var(--brand); }
.rl-log { display: flex; flex-direction: column; gap: 16px; }
.rl-log .tx, .rl-levels .tx { display: flex; flex-direction: column; }
.rl-log b { font-size: 16px; font-weight: 600; }
.rl-log .tx span { font-size: 15px; color: var(--text-3); }
.rl-log .pt { font-size: 16px; font-weight: 800; color: var(--brand); }
.rl-levels { display: flex; flex-direction: column; gap: 8px; }
.rl-levels > div { padding: 14px 16px; border-radius: 10px; background: var(--surface); }
.rl-levels b { font-size: 17px; font-weight: 700; }
.rl-levels .tx span { font-size: 15px; color: var(--text-3); }
.rl-levels .pt { font-size: 15px; color: var(--text-3); }
.rl-levels .now { background: #eef5ef; box-shadow: inset 0 0 0 2px var(--brand); }
.rl-levels .now b, .rl-levels .now .pt { color: var(--brand); }
.rl-levels .done { opacity: 0.6; }
.rq-cam { position: absolute; inset: 0; background: #1a1d1b; display: flex; flex-direction: column; }
.rq-bar { background: transparent; }
.rq-bar .xtext { color: #ffffff; }
.rq-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.rq-h { font-size: 21px; font-weight: 700; color: #ffffff; }
.rq-s { font-size: 16px; color: rgba(255, 255, 255, 0.7); }
.rq-frame { position: relative; width: 240px; height: 240px; }
.rq-frame i { position: absolute; width: 44px; height: 44px; border: 4px solid #ffffff; }
.rq-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.rq-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.rq-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.rq-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.rq-demo { margin: 0 24px 36px; width: auto; background: rgba(255, 255, 255, 0.12); border-color: transparent; color: #ffffff; }
.rq-res { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 16px; }
.rq-res .stamp { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--brand); color: var(--brand); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(-6deg); }
.rq-res .stamp b { font-size: 20px; font-weight: 800; }
.rq-res .stamp span { font-size: 15px; font-weight: 600; }
.rq-res h1 { margin-top: 14px; font-size: 27px; line-height: 36px; font-weight: 800; }
.rq-res p { font-size: 17px; line-height: 26px; color: var(--text-2); }
.rq-res .plus { margin-top: 4px; height: 34px; padding: 0 14px; border-radius: 17px; background: #eef5ef; color: var(--brand); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.rq-next { margin-top: 26px; padding: 18px 20px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.rq-next b { font-size: 17px; font-weight: 700; }
.rq-next span { font-size: 15px; color: var(--text-2); }
.jd-cta.soon .btn.primary { flex: none; height: 58px; }

/* 콘텐츠 2차 */
.tc-week { margin-top: 16px; padding: 18px; border-radius: 12px; background: #f6f1e7; display: flex; flex-direction: column; gap: 12px; }
.tc-week > .k { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.tc-wk { display: flex; gap: 14px; align-items: flex-start; }
.tc-wk img { width: 84px; height: 118px; border-radius: 8px; flex: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }
.tc-wk .tx { display: flex; flex-direction: column; gap: 4px; }
.tc-wk b { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.tc-wk .tx > span { font-size: 15px; line-height: 21px; color: var(--text-2); }
.tc-wk .len { margin-top: 2px; font-weight: 700; color: var(--brand) !important; }
.tc-line { font-size: 17px; line-height: 27px; color: var(--text); }
.tc-acts { display: flex; gap: 10px; }
.tc-acts .btn { flex: 1; gap: 6px; }
.tc-acts .btn:not(.primary) { background: #ffffff; border-color: #ffffff; }
.tc-sec { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.tc-kws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tc-kw { padding: 16px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; min-height: 78px; }
.tc-kw b { font-size: 17px; line-height: 24px; font-weight: 700; }
.tc-kw span { font-size: 15px; color: var(--text-3); }
.tc-cont { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); }
.tc-cont img { width: 44px; height: 62px; border-radius: 5px; flex: none; }
.tc-cont .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tc-cont .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.tc-cont b { font-size: 17px; font-weight: 700; }
.tc-cont .progress { display: block; width: 100%; height: 6px; }
.tc-cont .r { flex: none; font-size: 15px; font-weight: 700; color: var(--text-3); }
.tc-rows { display: flex; flex-direction: column; gap: 18px; }
.tc-row { display: flex; gap: 14px; align-items: flex-start; }
.tc-row img { width: 64px; height: 90px; border-radius: 6px; flex: none; }
.tc-rows.big .tc-row img { width: 76px; height: 106px; }
.tc-row .tx { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.tc-row b { font-size: 18px; line-height: 25px; font-weight: 700; }
.tc-row .tx > span { font-size: 15px; color: var(--text-3); }
.tc-row .st { margin-top: 4px; font-size: 15px !important; font-weight: 600; }
.tc-row .st.done { color: var(--text-3) !important; }
.tc-row .st.ing { color: var(--brand) !important; }
.tc-weekly { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding: 18px; border-radius: 12px; background: var(--surface); }
.tc-weekly .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tc-weekly .k { font-size: 15px; color: var(--text-3); }
.tc-weekly b { font-size: 17px; line-height: 24px; font-weight: 700; }
.tc-weekly > svg { color: var(--text-3); }
.tc-news { gap: 12px; }
.tc-news > a:not(.more) { display: flex; flex-direction: column; }
.tc-news b { font-size: 16px; font-weight: 600; }
.tc-news span { font-size: 15px; color: var(--text-3); }
.tc-chips { margin-top: 8px; }
.tc-chips .chip { height: 40px; font-size: 16px; }
.tc-chips .chip.on { background: var(--brand); border-color: var(--brand); color: #ffffff; }
.tc-cnt { margin: 14px 0 10px; font-size: 15px; color: var(--text-3); }
.ta-prog { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 8; background: transparent; }
.ta-prog i { display: block; height: 100%; background: var(--brand); transition: width 0.2s; }
.ta-body { padding-bottom: 60px; }
.ta-body p { font-size: 18px; line-height: 31px; color: var(--text); margin-top: 14px; }
.ta-body.lg p, .ta-body.lg .ta-three li { font-size: 20px; line-height: 34px; }
.ta-body.xl p, .ta-body.xl .ta-three li { font-size: 23px; line-height: 38px; }
.ta-k { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--brand); }
.ta-h { margin-top: 6px; font-size: 27px; line-height: 37px; font-weight: 800; letter-spacing: -0.02em; }
.ta-by { margin-top: 8px !important; font-size: 15px !important; line-height: 22px !important; color: var(--text-3) !important; }
.ta-tools { display: flex; gap: 8px; margin-top: 16px; }
.ta-tools .btn { gap: 6px; padding: 0 14px; }
.ta-three { margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: var(--surface); }
.ta-three b { font-size: 16px; font-weight: 800; }
.ta-three ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.ta-three li { font-size: 17px; line-height: 27px; }
.ta-sub { margin-top: 32px; font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.ta-q { margin: 20px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand); }
.ta-q blockquote { margin: 0; font-size: 20px; line-height: 32px; font-weight: 700; color: var(--text); }
.ta-qa { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.ta-scene { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--brand); }
.ta-save { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 18px; border: 1.5px solid var(--line); background: #ffffff; font-size: 15px; font-weight: 700; color: var(--text-2); }
.ta-save.on { border-color: var(--brand); background: #eef5ef; color: var(--brand); }
.ta-book { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; padding: 16px; border-radius: 12px; background: #eef5ef; }
.ta-book .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.ta-book .row { gap: 14px; align-items: flex-start; }
.ta-book img { width: 56px; height: 80px; border-radius: 4px; flex: none; }
.ta-book .tx { display: flex; flex-direction: column; gap: 2px; }
.ta-book b { font-size: 17px; font-weight: 700; }
.ta-book .tx > span { font-size: 15px; color: var(--text-3); }
.ta-book .at { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2) !important; }
.ta-book svg.pin { width: 15px; height: 15px; color: var(--brand); }
.ta-src { margin-top: 30px !important; font-size: 15px !important; line-height: 21px !important; color: var(--text-3) !important; }
.ta-src .ex { color: #a35a1f; }
.ta-done { margin-top: 22px; }
.te-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 10px; }
.te-top .ok { width: 60px; height: 60px; border-radius: 50%; background: #eef5ef; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.te-top .ok svg { width: 28px; height: 28px; stroke-width: 2.6; }
.te-top h1 { margin-top: 6px; font-size: 25px; font-weight: 800; }
.te-top p { font-size: 16px; color: var(--text-3); }
.te-rate { display: flex; gap: 10px; margin-top: 22px; }
.te-rate button { flex: 1; height: 52px; border-radius: 10px; border: 1.5px solid var(--line); background: #ffffff; font-size: 17px; font-weight: 700; color: var(--text-2); }
.te-rate button.on { border-color: var(--brand); background: #eef5ef; color: var(--brand); }
.te-saved { margin-top: 18px; padding: 18px; border-radius: 12px; background: #f6f1e7; display: flex; flex-direction: column; gap: 6px; }
.te-saved .k { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.te-saved p { font-size: 18px; line-height: 29px; font-weight: 600; }
.te-h { margin-top: 30px; font-size: 21px; font-weight: 800; }
.te-next { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.te-next a { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; border: 1.5px solid var(--line); }
.te-next .cover { width: 44px; height: 62px; border-radius: 4px; flex: none; }
.te-next .ic { width: 44px; height: 44px; border-radius: 12px; background: #eef5ef; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.te-next .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.te-next .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.te-next b { font-size: 17px; font-weight: 700; }
.te-next .tx > span:last-child { font-size: 15px; color: var(--text-3); }
.te-next > a > svg { color: var(--text-3); flex: none; }
.te-more { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding: 16px 0; }
.te-more .k { flex: none; font-size: 15px; color: var(--text-3); }
.te-more b { flex: 1; font-size: 16px; font-weight: 600; }
.tl-body { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-cover { width: 168px; height: 236px; border-radius: 12px; margin-top: 8px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.tl-body h1 { margin-top: 18px; font-size: 21px; line-height: 29px; font-weight: 800; }
.tl-by { margin-top: 4px; font-size: 15px; color: var(--text-3); }
.tl-bar { align-self: stretch; margin-top: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-3); }
.tl-bar .progress { display: block; width: 100%; }
.tl-ctl { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
.tl-ctl button { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); font-size: 15px; font-weight: 800; color: var(--text-2); }
.tl-ctl .pp { width: 72px; height: 72px; background: var(--brand); color: #ffffff; font-size: 24px; }
.tl-opt { display: flex; gap: 8px; margin-top: 16px; }
.tl-opt .chip { height: 38px; font-size: 15px; }
.tl-now { align-self: stretch; margin-top: 24px; padding: 18px; border-radius: 12px; background: #f6f1e7; text-align: left; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tl-now .k { font-size: 14px; font-weight: 700; color: #8a6a3b; }
.tl-now p { font-size: 18px; line-height: 29px; font-weight: 600; }
.tl-parts { align-self: stretch; margin-top: 24px; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.tl-parts h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.tl-parts button { display: flex; gap: 14px; align-items: center; padding: 10px 0; text-align: left; font-size: 16px; color: var(--text-2); background: none; }
.tl-parts .at { width: 48px; font-size: 15px; color: var(--text-3); }
.tl-parts button.on { color: var(--brand); font-weight: 700; }
.rs-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.rs-card { padding: 18px; border-radius: 12px; background: #f6f1e7; display: flex; flex-direction: column; gap: 6px; }
.rs-card .k { font-size: 14px; font-weight: 700; color: #8a6a3b; }
.rs-card p { font-size: 18px; line-height: 29px; font-weight: 600; }
.rs-card .src { font-size: 15px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; }
.rs-card .go { display: inline-flex; align-items: center; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--brand); }
.rs-card .go svg { width: 16px; height: 16px; }
.rc-two.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rc-two.three a { padding: 14px; }
.rc-two.three b { font-size: 16px; }

/* 콘텐츠 3차 */
.tc-sec.first { margin-top: 18px; }
.tc-slide { background: #f6f1e7; gap: 12px; position: relative; }
.tc-slide .cover { width: 100px; height: 140px; border-radius: 8px; }
.tc-len { font-size: 15px; font-weight: 700; color: #8a6a3b; }
.tc-slide .hook { font-size: 19px; line-height: 28px; }
.tc-slide .tc-acts .btn { height: 52px; }
.tc-n { position: absolute; top: 16px; right: 18px; font-size: 14px; font-weight: 600; color: #a39780; }
.tc-reco { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 18px 16px 18px 20px; border-radius: 12px; background: #eef5ef; }
.tc-reco .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tc-reco b { font-size: 18px; font-weight: 800; }
.tc-reco .tx span { font-size: 15px; line-height: 21px; color: var(--text-2); }
.tc-reco .go { flex: none; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--brand); color: #ffffff; font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; }
.tc-reco.sm { margin-top: 8px; padding: 12px 12px 12px 18px; }
.tc-reco.sm b { font-size: 16px; font-weight: 700; color: var(--text-2); }
.tc-reco.sm .go { height: 40px; }
.tc-wkly { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 12px; background: var(--surface); }
.tc-wkly .k { font-size: 15px; font-weight: 700; color: var(--text-3); }
.tc-wkly b { font-size: 18px; line-height: 26px; font-weight: 700; }
.tc-wkly .sm { font-size: 15px; color: var(--text-3); }
.tc-news > a:not(.more) { gap: 1px; }
.tc-news .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.seg3 { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); }
.seg3 button { height: 38px; padding: 0 14px; border-radius: 9px; font-size: 15px; font-weight: 600; color: var(--text-3); background: none; }
.seg3 button.on { background: #ffffff; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.seg3.sm button { height: 34px; padding: 0 12px; font-size: 15px; }
.tc-sort { margin: 22px 0 6px; font-size: 15px; color: var(--text-3); align-items: center; }
.tc-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.tc-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 12px; background: #ffffff; border: 1.5px solid #efeee9; }
.tc-card img { width: 84px; height: 118px; border-radius: 8px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.tc-card .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tc-card .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.tc-card b { font-size: 18px; line-height: 25px; font-weight: 800; letter-spacing: -0.02em; }
.tc-card .hk { font-size: 15px; line-height: 22px; color: var(--text-2); }
.tc-card .who { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.tr-q { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.tr-q h2 { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.ja-opts.row3 { flex-direction: row; }
.ja-opts.row3 button { flex: 1; justify-content: center; padding: 0 8px; }
.tr-res { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.tr-res h2 { font-size: 21px; font-weight: 800; }
.tn-list { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; }
.tn-list a { display: flex; flex-direction: column; gap: 2px; }
.tn-list .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.tn-list b { font-size: 18px; line-height: 25px; font-weight: 700; }
.tn-list a > span:last-child { font-size: 15px; color: var(--text-3); }
.ta-aa { height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface); font-size: 14px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: baseline; gap: 1px; }
.ta-aa b { font-size: 19px; }
.ta-video { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 12px; border-radius: 12px; background: #1d211f; color: #ffffff; }
.ta-video .pl { width: 56px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); display: inline-flex; align-items: center; justify-content: center; }
.ta-video .tx { display: flex; flex-direction: column; }
.ta-video b { font-size: 16px; font-weight: 700; }
.ta-video .tx span { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.ta-tip { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #fef6d8; font-size: 15px; line-height: 21px; color: #5c4a10; }
.ta-tip span { flex: 1; }
.ta-tip button { flex: none; font-size: 15px; font-weight: 700; color: #5c4a10; text-decoration: underline; background: none; }
.ta-body .sn { display: inline; padding: 0; margin: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; line-height: inherit; cursor: pointer; border-radius: 3px; }
.ta-body .sn.line { background: linear-gradient(transparent 58%, #fbe7a1 58%); }
.ta-body .sn.sel { background: #d9ebdc; box-shadow: 0 0 0 2px #d9ebdc; }
.ta-pop { font-size: 14px; color: var(--text-3); display: none; }
.ta-body.pop .ta-pop { display: inline; }
.ta-body.pop .ta-q .sn:not(.line):not(.sel) { background-image: linear-gradient(transparent 92%, #c9c6bd 92%); }
.ta-body.paper { background: #f7f1e3; }
.ta-body.dark { background: #1d211f; color: #e8e6df; }
.ta-body.dark p, .ta-body.dark .ta-h, .ta-body.dark .ta-sub, .ta-body.dark blockquote { color: #e8e6df; }
.ta-body.dark .ta-three { background: #2a2f2c; }
.ta-bar { position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 9; display: flex; gap: 4px; padding: 6px; border-radius: 12px; background: #191919; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.ta-bar button { flex: 1; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 15px; font-weight: 700; color: #ffffff; background: none; }
.ta-bar button:first-child { flex: 1.6; background: rgba(255, 255, 255, 0.12); }
.ta-bar .x { flex: 0.8; color: rgba(255, 255, 255, 0.6); }
.ta-memo { gap: 14px; }
.ta-mq { font-size: 17px; line-height: 27px; font-weight: 600; padding-left: 12px; border-left: 3px solid #e3c86a; }
.ta-set { gap: 18px; }
.ta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 600; }
.ta-row.tg { width: 100%; background: none; text-align: left; padding: 4px 0; }
.ta-row .sw { flex: none; width: 50px; height: 30px; border-radius: 15px; background: #d6d4cd; position: relative; }
.ta-row .sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; transition: transform 0.2s; }
.ta-row .sw.on { background: var(--brand); }
.ta-row .sw.on i { transform: translateX(20px); }
.ta-listen { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--surface); }
.ta-listen .tx { flex: 1; display: flex; flex-direction: column; }
.ta-listen b { font-size: 16px; font-weight: 700; }
.ta-listen .tx span { font-size: 15px; color: var(--text-3); }

.ta-body p .sn, .ta-body blockquote .sn { display: inline !important; width: auto !important; min-height: 0 !important; }

/* 콘텐츠 4차 · 슬라이드 높이 맞춤(검색 홈 포함) */
.bslides { align-items: stretch; }
.bslide .tc-acts, .bslide > .go, .bslide > .bq:last-child { margin-top: auto; }
.tc-head { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tc-head h1 { flex: 1; }
.tc-icon { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); }
.tc-pill { height: 40px; padding: 0 14px; border-radius: 20px; background: #eef5ef; color: var(--brand); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.tc-intro { font-size: 16px; line-height: 26px; color: var(--text-2); }
.tc-slide .tc-intro { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tc-sub { margin-top: -8px; font-size: 15px; color: var(--text-3); }
.tc-cont { position: relative; }
.tc-x { flex: none; align-self: flex-start; width: 32px; height: 32px; margin: -6px -6px 0 0; border-radius: 50%; font-size: 15px; color: var(--text-3); background: none; }
.tc-wslide { background: #ffffff; border: 1.5px solid #efeee9; }
.tc-wslide .k { font-size: 15px; font-weight: 700; color: var(--text-3); }
.tc-wslide .cover { width: 64px; height: 92px; border-radius: 4px; flex: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); }
.tc-wslide b { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.tc-wslide ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 23px; color: var(--text-2); }
.tc-wslide .go { display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--brand); }

/* 콘텐츠 5차: 오늘의 한 편 · 검색과 같은 슬라이드 틀 */
.tc-today { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.tc-tlabel { display: flex; align-items: baseline; gap: 10px; }
.tc-tlabel b { font-size: 22px; line-height: 30px; font-weight: 800; color: var(--brand); letter-spacing: -0.02em; }
.tc-tlabel span { font-size: 15px; color: var(--text-3); }
.tc-feature { width: 100%; }
.tc-feature .cover { width: 112px; height: 158px; }
.tc-feature .ttl { font-size: 21px; line-height: 29px; }
.tc-slide { padding-top: 20px; }
.tc-slide .sum ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 26px; color: var(--text-2); }
.tc-slide .sum ul li { display: list-item; }
.tc-slide .top .stack { padding-right: 34px; }
.tc-feature .top .stack { padding-right: 0; }

/* 콘텐츠 6차: 슬라이드 배경은 키워드 섹션과 같게, 세로선 없음 */
.bslide.nb, .tc-slide { background: var(--surface); }
.bslide .bq { border-left: 0; padding-left: 0; }
.tc-today2 { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--surface); }
.tc-today2 img { width: 76px; height: 106px; border-radius: 8px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.tc-today2 .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-today2 .m { font-size: 14px; font-weight: 700; color: var(--brand); }
.tc-today2 b { font-size: 19px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; }
.tc-today2 .w { font-size: 15px; color: var(--text-3); }
.tc-today2 .h { margin-top: 6px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.tw-letter { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border-radius: 12px; background: var(--surface); }
.tw-letter .no { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--text-3); }
.tw-letter b { font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; font-size: 22px; line-height: 31px; font-weight: 800; letter-spacing: -0.02em; }
.tw-letter .lead { font-size: 16px; line-height: 26px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tw-letter .by { margin-top: 4px; font-size: 14px; color: var(--text-3); }
.tw-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; padding: 0 4px; }
.tw-row { display: flex; gap: 14px; align-items: baseline; }
.tw-row .no { flex: none; width: 64px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.tw-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tw-row b { font-size: 16px; line-height: 23px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-row .tx span { font-size: 14px; color: var(--text-3); }
.tn-rows { display: flex; flex-direction: column; gap: 16px; }
.tn-row { display: flex; gap: 14px; align-items: center; }
.tn-row img { width: 56px; height: 78px; border-radius: 6px; flex: none; }
.tn-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.tn-row .pill { height: 24px; padding: 0 8px; border-radius: 6px; background: var(--surface-2); font-size: 14px; font-weight: 700; color: var(--text-2); display: inline-flex; align-items: center; }
.tn-row .pill.on { background: #eef5ef; color: var(--brand); }
.tn-row b { font-size: 17px; line-height: 24px; font-weight: 700; }
.tn-row .tx > span:last-child { font-size: 15px; color: var(--text-3); }
.tw-body { padding-bottom: 60px; }
.tw-no { display: block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--text-3); }
.tw-h { margin-top: 10px; font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; font-size: 27px; line-height: 38px; font-weight: 800; letter-spacing: -0.02em; }
.tw-p { margin-top: 16px; font-size: 18px; line-height: 31px; color: var(--text); }
.tw-item { margin-top: 26px; padding: 20px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.tw-item .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.tw-item h2 { font-size: 20px; line-height: 28px; font-weight: 800; }
.tw-item p { font-size: 16px; line-height: 26px; color: var(--text-2); }
.tw-item dl { margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.tw-item dl div { display: flex; gap: 12px; font-size: 15px; }
.tw-item dt { width: 32px; color: var(--text-3); }
.tw-item dd { margin: 0; color: var(--text); }
.tw-sub { margin-top: 24px; }

/* 콘텐츠 7차 */
.tc-today3 { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 12px; background: var(--surface); }
.tc-today3 .hd { display: flex; align-items: flex-start; gap: 12px; }
.tc-today3 .hd b { flex: 1; font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; }
.tc-today3 .hd .m { flex: none; margin-top: 3px; height: 26px; padding: 0 9px; border-radius: 13px; background: #ffffff; font-size: 14px; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; }
.tc-today3 .bd { display: flex; gap: 14px; align-items: flex-start; }
.tc-today3 img { width: 72px; height: 100px; border-radius: 6px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.tc-today3 .tx { display: flex; flex-direction: column; gap: 4px; }
.tc-today3 .w { font-size: 15px; color: var(--text-3); }
.tc-today3 .h { font-size: 16px; line-height: 25px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ta-q { border-left: 0; padding: 18px 4px 0 4px; position: relative; }
.ta-q::before { content: "“"; position: absolute; top: -14px; left: -2px; font-family: Georgia, 'Times New Roman', serif; font-size: 64px; line-height: 1; color: #c9c6bd; }
.ta-q blockquote { padding-left: 0; }
.ta-end { display: flex; flex-direction: column; gap: 12px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.ta-end .ta-video, .ta-end .ta-book { margin-top: 0; }
.ta-end { border-top: 0; padding-top: 0; margin-top: 40px; }
.tc-icon.d3 img { width: 34px; height: 34px; display: block; }
.tc-pill.d3 { gap: 4px; padding: 0 14px 0 6px; height: 44px; background: #ffffff; border: 1.5px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); color: var(--text); }
.tc-pill.d3 img { width: 32px; height: 32px; }
.fab .fab3d { width: 44px; height: 44px; display: block; }
.fab.open .fab3d { display: none; }

/* 콘텐츠 8차: 강연 글 머리 단추·인용 간격·함께 읽을 책 */
.tc-today3 .hd { flex-direction: column; gap: 6px; }
.tc-today3 .hd .m { margin-top: 0; align-self: flex-start; }
.ta-hbtns { display: flex; align-items: center; gap: 6px; }
.ta-hb { height: 38px; padding: 0 11px; border-radius: 19px; border: 1.5px solid var(--line); background: #ffffff; display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.ta-hb svg { width: 16px; height: 16px; }
.ta-hb.done { border-color: var(--brand); color: var(--brand); }
.ta-hb.done svg { stroke-width: 2.6; }
.ta-aa { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: #ffffff; display: inline-flex; align-items: baseline; justify-content: center; gap: 0; color: var(--text); font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; line-height: 40px; }
.ta-aa span { font-size: 12px; font-weight: 700; }
.ta-aa b { font-size: 18px; font-weight: 800; }
.ta-q { margin-top: 40px; }
.ta-books { margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
.ta-books h2 { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.ta-bk { display: flex; gap: 16px; align-items: flex-start; }
.ta-bk img { width: 92px; height: 134px; border-radius: 4px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); }
.ta-bk .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ta-bk b { font-size: 19px; line-height: 26px; font-weight: 800; }
.ta-bk .au { font-size: 15px; color: var(--text-3); }
.ta-bk .why { margin-top: 4px; font-size: 15px; line-height: 23px; color: var(--text-2); }
.ta-bk .at { margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.ta-bk svg.pin { width: 15px; height: 15px; color: var(--brand); }
.ta-plan { gap: 6px; }
.ta-plan.on { border-color: var(--brand); background: #eef5ef; color: var(--brand); }
.ta-aa { width: 44px; height: 40px; border-radius: 20px; align-items: flex-end; padding-bottom: 7px; line-height: 1; } .ta-aa span { margin-right: 1px; }

/* 콘텐츠 9차: 머리 도구·장면 섹션 */
.ta-tools2 { display: flex; align-items: center; gap: 2px; }
.ta-t { width: 52px; height: 52px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; color: var(--text-2); }
.ta-t .ic { height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.ta-t .ic svg { width: 21px; height: 21px; }
.ta-t .lb { font-size: 13px; font-weight: 700; line-height: 16px; }
.ta-t.done { color: var(--brand); }
.ta-t.done svg { stroke-width: 2.6; }
.ta-t .gg { font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; font-size: 19px; font-weight: 800; align-items: flex-end; line-height: 1; }
.ta-t .gg small { font-size: 12px; margin-right: 1px; }
.ta-pop { display: none; font-size: 14px; color: var(--text-3); }
.ta-scenes { margin-top: 30px; display: flex; flex-direction: column; gap: 4px; }
.ta-scenes h2 { font-size: 21px; line-height: 29px; font-weight: 800; letter-spacing: -0.02em; }
.ta-scenes .all { font-size: 15px; color: var(--text-3); }
.ta-scenes .sc { display: flex; align-items: center; gap: 14px; padding: 14px 0; color: var(--text-2); }
.ta-scenes .sc .t { flex: none; width: 48px; font-size: 15px; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ta-scenes .sc .x { flex: 1; font-size: 17px; line-height: 24px; color: var(--text); }
.ta-scenes .sc svg { color: #c9c6bd; }
.tc-b3 { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.tc-b3.sq { width: 48px; height: 48px; }
.tc-b3.sq img { width: 52px; height: 52px; }
.tc-b3.pill { width: 158px; height: 50px; }
.tc-b3.pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tc-b3.pill span { position: relative; margin-left: 40px; font-size: 16px; font-weight: 800; color: #2d2a24; }
.fab.fab3 { width: 68px; height: 68px; background: transparent; border: 0; box-shadow: none; right: 12px; }
.fab.fab3 .fab3d { width: 72px; height: 72px; }
.ta-tools3 { display: flex; align-items: center; gap: 4px; }
.ta-t3 { width: 50px; display: inline-flex; flex-direction: column; align-items: center; gap: 0; background: none; padding: 0; }
.ta-t3 img { width: 40px; height: 40px; display: block; }
.ta-t3 span { font-size: 13px; font-weight: 700; line-height: 16px; color: var(--text-2); }
.ta-t3.done span { color: var(--brand); }
.fab.fab3.open { width: auto; height: 56px; padding: 0 22px; background: #ffffff; border: 1.5px solid var(--line); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); right: 18px; }

/* 3D 시안: 하단 탭 · 달력 · 도장 · 레벨 · 완료 */
.tabs.t3 a { flex-direction: column; gap: 0; height: 52px; font-size: 14px; }
.tabs.t3 a img { width: 28px; height: 28px; filter: grayscale(1) opacity(0.5); }
.tabs.t3 a.on img { filter: none; }
.tabs.t3 { height: 60px; }
.jn-mine .dd.cal3 { position: relative; background: none; width: 60px; height: 60px; }
.jn-mine .dd.cal3 img { position: absolute; inset: -4px; width: 68px; height: 68px; }
.jn-mine .dd.cal3 b { position: relative; margin-top: 16px; font-size: 16px; font-weight: 800; color: #1f3d2a; }
.rc-stamps button.s3 { border: 0; background: none; flex-direction: column; gap: 2px; padding: 0; aspect-ratio: auto; border-radius: 0; }
.rc-stamps button.s3 img { width: 64px; height: 64px; }
.rc-stamps button.s3 span { font-size: 14px; font-weight: 600; color: var(--text-3); }
.rc-stamps button.s3.on span { color: var(--brand); font-weight: 800; }
.rc-score .num.badge3 { display: flex; align-items: center; justify-content: space-between; }
.rc-score .num.badge3 img { width: 64px; height: 64px; margin: -14px -6px -14px 0; }
.rl-top .lvbig { width: 112px; height: 112px; margin-bottom: -4px; }
.rl-levels .lvi { width: 48px; height: 48px; flex: none; margin: -6px 4px -6px -6px; }
.rl-levels > div { justify-content: flex-start; }
.rl-levels > div .tx { flex: 1; }
.rl-levels > div:not(.now):not(.done) .lvi { filter: grayscale(0.8) opacity(0.6); }
.rq-res .stamp3 { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rq-res .stamp3 img { width: 150px; height: 150px; }
.rq-res .stamp3 b { font-size: 15px; font-weight: 700; color: var(--brand); }
.big3 { width: 128px; height: 128px; }

/* 3D 시안 3차: 순간 · 지점 도장 ①~⑩ */
.hide3 { display: none !important; }
.row3i { display: inline-flex; align-items: center; gap: 6px; }
.c3 { width: 30px; height: 30px; flex: none; margin: -4px 0; }
.rc-qr img.q3 { width: 30px; height: 30px; margin: -6px 2px -6px 0; }
.rc-stamps a.s3 { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; }
.rc-stamps a.s3 img { width: 64px; height: 64px; }
.rc-stamps a.s3 span { font-size: 14px; font-weight: 600; color: var(--text-3); }
.rc-stamps a.s3.on span { color: var(--brand); font-weight: 800; }
.more3 { color: var(--brand); font-weight: 700; text-decoration: none; }
.ctr3 { display: flex; justify-content: center; margin-top: 18px; }
.opt3 { width: 52px; height: 52px; flex: none; margin: -6px 0; }
.row3p { flex-direction: row; align-items: center; gap: 14px; }
.row3p > img { width: 72px; height: 72px; flex: none; }
.newst { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 15px; font-weight: 700; color: #8a6d3b; }
.newst img { width: 24px; height: 24px; }
.st3hint { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--surface); font-size: 15px; line-height: 22px; color: var(--text-2); }
.st3hint img { width: 44px; height: 44px; flex: none; opacity: 0.55; }
.st3hint b { color: var(--text); }
.jd-info dd .row3i, dd .row3i { display: flex; }
small.new3 { color: #8a6d3b !important; font-weight: 700; }
.pre3 { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.pre3 img { width: 44px; height: 44px; flex: none; }
.pre3 > span { display: flex; flex-direction: column; font-size: 15px; color: var(--text-2); }
.pre3 b { font-size: 16px; font-weight: 700; color: var(--text); }
.pin3 { width: 26px; height: 26px; flex: none; margin: -3px 0; }
.pin3.dim { filter: grayscale(1) opacity(0.45); }
.sx-places button .pin3 { margin: -4px 0; }
.sx-places button { justify-content: flex-start; }
.sx-places button .nm { flex: 1; }
.cal .d { position: relative; }
.cal .d .cst { position: absolute; right: -3px; bottom: -3px; width: 22px; height: 22px; }
.lg3 { width: 34px; height: 34px; flex: none; margin-right: 10px; }
.lg3.blank { visibility: hidden; }
.rl-log > div { align-items: center; }
.rl-log .tx { flex: 1; }
.sd3-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 8px; }
.sd3-top img { width: 168px; height: 168px; }
.sd3-top b { font-size: 24px; line-height: 32px; font-weight: 800; }
.sd3-top span { font-size: 16px; color: var(--text-2); }
.sd3-theme { margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 4px; }
.sd3-theme .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.sd3-theme b { font-size: 22px; font-weight: 800; }
.sd3-theme span:last-child { font-size: 15px; line-height: 22px; color: var(--text-2); }
.sd3-mini { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.sd3-mini img { width: 100%; aspect-ratio: 1; }
.sc3-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 4px; }
.sc3-top img { width: 230px; height: 230px; }
.sc3-top h1 { font-size: 27px; line-height: 36px; font-weight: 800; }
.sc3-top p { font-size: 16px; color: var(--text-2); }
.sc3-top .plus { margin-top: 4px; height: 34px; padding: 0 14px; border-radius: 17px; background: #eef5ef; color: var(--brand); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.sx-places button .pin3 { width: 22px; height: 22px; margin: -2px -2px -2px -4px; }
.sx-places button:has(.pin3) { gap: 6px; padding: 0 10px; }

/* 인용은 세로선 대신 큰따옴표 (콘텐츠 상세 .ta-q와 같은 결) */
.sumq, .bd-quote, .ta-mq, .qmark { border-left: 0; padding: 18px 4px 0 4px; position: relative; }
.sumq::before, .bd-quote::before, .ta-mq::before, .qmark::before { content: "“"; position: absolute; top: -14px; left: -2px; font-family: Georgia, 'Times New Roman', serif; font-size: 56px; line-height: 1; color: #c9c6bd; font-weight: 400; }
.ta-mq::before { font-size: 48px; top: -12px; }
/* 대화 속 내 답: 세로선 대신 연한 바탕 */
.ans { border-left: 0; margin-left: 0; padding: 12px 16px; border-radius: 10px; background: var(--surface); }
.bd-quote { padding: 0; }
.bd-quote::before { content: none; }
.bs3 { display: flex; flex-direction: column; margin-top: 10px; }
.bs3-row { display: grid; grid-template-columns: 74px 1fr 1fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.bs3-row .nm { display: flex; flex-direction: column; font-size: 13px; color: var(--text-3); }
.bs3-row .nm b { font-size: 15px; color: var(--text); }
.bs3-row .c { display: grid; grid-template-columns: 26px 44px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; }
.bs3-row .c .sym { width: 26px; height: 26px; }
.bs3-row .c .stp { width: 44px; height: 44px; }
.bs3-row .c small { grid-column: 1 / 3; font-size: 11px; line-height: 14px; color: var(--text-2); margin-top: 2px; }
.bs3-row { grid-template-columns: 84px 1fr 1fr; }
.bs3-row .nm b { font-size: 14px; line-height: 19px; word-break: keep-all; }
.bs3-row .c .sy3 { width: 26px; height: 26px; }
.bs3-row .c .sp3 { width: 44px; height: 44px; }

/* 따옴표는 문장 첫머리에 붙여서 (위로 떠 보이지 않게) */
.sumq, .ta-mq, .qmark, .ta-q { padding: 0; }
.ta-q { margin-top: 24px; }
.sumq::before, .ta-mq::before, .qmark::before, .ta-q blockquote::before {
  content: "“"; position: static; display: inline-block; margin-right: 6px;
  font-family: Georgia, 'Times New Roman', serif; font-size: 2em; line-height: 0; vertical-align: -0.42em;
  font-weight: 400; color: #b9b5aa;
}
.ta-q::before { content: none; }
.sumq::before, .ta-mq::before, .qmark::before, .ta-q blockquote::before { font-size: 2.3em; vertical-align: -0.48em; margin-right: 5px; color: #a9a497; }
.tb3 { display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 0 6px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff; }
.tb3 span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tb3 img { width: 28px; height: 28px; filter: grayscale(1) opacity(0.5); }
.tb3 b { font-size: 12px; font-weight: 600; color: var(--text-3); }
.tb3 .on img { filter: none; }
.tb3 .on b { color: var(--text); font-weight: 800; }
.lab3 { margin: 12px 0 6px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.cmp3 { display: flex; gap: 14px; margin-top: 10px; }
.cmp3 span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 12px; background: var(--surface); }
.cmp3 img { width: 72px; height: 72px; }
.cmp3 small { font-size: 13px; color: var(--text-2); text-align: center; }
.fx3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.fx3 .c { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 10px; background: var(--surface); text-align: center; }
.fx3 .c.now { background: #ffffff; border: 1px dashed var(--line-strong); }
.fx3 .sy3 { width: 28px; height: 28px; }
.fx3 .sp3 { width: 60px; height: 60px; }
.fx3 small { font-size: 11px; line-height: 14px; color: var(--text-2); word-break: keep-all; }

/* 커뮤니티 다시 그리기 (cy-) — 줄 대신 여백, 한 화면 한 할 일 */
.chip.sm { height: 38px; padding: 0 14px; font-size: 15px; }
.chip.sm.on { background: var(--brand); border-color: var(--brand); color: #ffffff; font-weight: 700; }
.btn.sm.on3 { color: #c4421a; border-color: #f1c9b9; background: #fdf3ef; }
.cy-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: hsl(var(--h) 30% 30%); background: hsl(var(--h) 35% 90%); }
.cy-av.more { --h: 90; font-size: 13px; color: var(--text-2); background: var(--surface); }
.cy-av.empty { background: none; border: 1.5px dashed var(--line-strong); }
.cy-who { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--text-3); }
.cy-who img { width: 20px; height: 20px; }
.cy-who b { font-size: 15px; font-weight: 700; color: var(--text); }
.cy-link { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; font-weight: 700; color: var(--brand); }
.cy-next { margin-top: 22px; font-size: 15px; line-height: 23px; color: var(--text-3); }

.cy-q { margin-top: 18px; padding: 22px 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 10px; }
.cy-q .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.cy-q h2 { font-size: 23px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.cy-picks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cy-picks button, .cy-picks a { height: 44px; padding: 0 16px; border-radius: 22px; background: #ffffff; border: 1.5px solid #d6e6da; font-size: 16px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; }
.cy-picks a { color: var(--text-2); font-weight: 600; background: none; }
.cy-peek { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.cy-peek p { font-size: 15px; line-height: 22px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cy-peek b { color: var(--text); margin-right: 6px; }
.cy-n { font-size: 15px; color: var(--text-3); }
.cy-mine { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--brand); color: #ffffff; font-size: 16px; font-weight: 700; }
.cy-rx { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface); font-size: 16px; color: var(--text-2); }
.cy-rx b { color: var(--text); }
.cy-rx > span:nth-child(2) { flex: 1; }
.cy-rx .dot { width: 8px; height: 8px; border-radius: 50%; background: #c4421a; flex: none; }
.cy-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 30px; padding: 22px 20px; border-radius: 12px; background: #f6f1e7; }
.cy-pick .k { font-size: 15px; font-weight: 700; color: #8a6d3b; }
.cy-pick .q { font-size: 21px; line-height: 31px; font-weight: 800; letter-spacing: -0.02em; }
.cy-pick .q::before { content: "“"; font-family: Georgia, serif; font-size: 2.1em; line-height: 0; vertical-align: -0.45em; margin-right: 4px; color: #b9a98a; font-weight: 400; }
.cy-pick .by { font-size: 15px; color: var(--text-2); }
.cy-pick .note { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--text); }
.cy-pick .note img { width: 26px; height: 26px; }
.cy-filter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cy-mine-only { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-2); background: none; }
.cy-mine-only .switch { width: 44px; height: 26px; }
.cy-mine-only .switch::after { width: 20px; height: 20px; }
.cy-feed { display: flex; flex-direction: column; gap: 26px; margin-top: 8px; }
.cy-post { display: flex; gap: 14px; align-items: flex-start; }
.cy-post .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cy-post .k { font-size: 15px; color: var(--text-3); }
.cy-post .t { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cy-post .cv { width: 60px; height: 86px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.cy-rc { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--text-3); }
.cy-rc i { width: 10px; }
.cy-group { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--surface); }
.cy-group img { width: 56px; height: 80px; border-radius: 6px; object-fit: cover; flex: none; }
.cy-group .tx { display: flex; flex-direction: column; gap: 2px; }
.cy-group .k { font-size: 15px; color: var(--text-3); }
.cy-group b { font-size: 17px; line-height: 25px; font-weight: 800; }
.cy-group .n { font-size: 15px; font-weight: 700; color: var(--brand); }
.cy-rule { margin: 30px 0 30px; font-size: 14px; color: var(--text-3); text-align: center; }

.cy-author, .cy-host, .cy-cm, .cy-me, .cy-rxrow { display: flex; gap: 12px; align-items: center; }
.cy-author { margin-top: 8px; }
.cy-author .tx, .cy-host .tx, .cy-cm .tx, .cy-me .tx, .cy-rxrow .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cy-book { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.cy-book img { width: 52px; height: 75px; border-radius: 5px; flex: none; }
.cy-book .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-2); }
.cy-book b { font-size: 18px; color: var(--text); }
.cy-book .at { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--brand); }
.cy-book .at img { width: 20px; height: 20px; border-radius: 0; box-shadow: none; }
.cy-chosen { display: flex; gap: 10px; align-items: center; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #f6f1e7; font-size: 15px; color: var(--text-2); }
.cy-chosen img { width: 30px; height: 30px; flex: none; }
.cy-chosen span { display: flex; flex-direction: column; }
.cy-chosen b { font-size: 15px; color: #8a6d3b; }
.cy-react { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cy-grouped { display: flex; flex-wrap: wrap; gap: 6px; }
.cy-grouped span { padding: 6px 12px; border-radius: 12px; background: var(--surface); font-size: 15px; font-weight: 600; color: var(--text-2); }
.cy-cm { align-items: flex-start; margin-top: 6px; padding: 14px 0; }
.cy-input { display: flex; gap: 8px; align-items: center; height: 54px; padding: 0 8px 0 16px; border-radius: 10px; border: 1.5px solid var(--line); }
.cy-input input { flex: 1; border: 0; font-size: 17px; background: none; outline: none; }
.cy-input .mic { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); display: inline-flex; align-items: center; justify-content: center; }
.cy-avs { display: flex; gap: 6px; flex-wrap: wrap; }
.cy-most { margin-top: 4px; padding: 14px 16px; border-radius: 10px; background: var(--surface); display: flex; flex-direction: column; gap: 4px; }
.cy-most .k { font-size: 15px; color: var(--text-3); }
.cy-most b { font-size: 17px; line-height: 26px; }
.cy-open { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; border: 1.5px dashed var(--line-strong); }
.cy-open .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-2); }
.cy-open b { font-size: 17px; color: var(--text); }
.cy-open .go { flex: none; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--brand); color: #ffffff; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; }
.cy-other { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 0; text-align: left; font-size: 17px; line-height: 26px; font-weight: 600; color: var(--text); background: none; width: 100%; }
.cy-other .k { font-size: 15px; font-weight: 500; color: var(--text-3); }

.cy-gtop { display: flex; gap: 16px; margin-top: 8px; }
.cy-gtop img { width: 92px; height: 132px; border-radius: 6px; flex: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14); }
.cy-gtop .tx { display: flex; flex-direction: column; gap: 6px; }
.cy-gtop .k { font-size: 15px; color: var(--text-3); }
.cy-gtop h1 { font-size: 23px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.cy-host { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.cy-info { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.cy-info > div { display: flex; gap: 16px; }
.cy-info dt { flex: none; width: 52px; font-size: 16px; color: var(--text-3); }
.cy-info dd { display: flex; flex-direction: column; gap: 2px; font-size: 17px; line-height: 25px; font-weight: 600; }
.cy-info small { font-size: 15px; font-weight: 500; color: var(--text-3); }
.cy-steps, .cy-flow { display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.cy-steps li { display: flex; gap: 12px; align-items: baseline; font-size: 17px; line-height: 26px; }
.cy-steps li::before { counter-increment: s; content: counter(s); flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef5ef; color: var(--brand); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.cy-flow { gap: 0; }
.cy-flow li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 16px 26px; }
.cy-flow li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.cy-flow li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: #d6e6da; }
.cy-flow b { font-size: 17px; }
.cy-flow span { font-size: 15px; color: var(--text-2); }
.cy-prev { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding: 18px; border-radius: 12px; background: #f6f1e7; }
.cy-prev .k { font-size: 15px; color: #8a6d3b; font-weight: 700; }
.cy-prev b { font-size: 18px; }
.cy-prev .q { font-size: 16px; line-height: 25px; color: var(--text-2); }
.cy-prev .go { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 700; color: var(--brand); }
.jd-cta.jm-bar { align-items: center; gap: 16px; }
.jd-cta.jm-bar .left { display: flex; flex-direction: column; font-size: 15px; color: var(--text-3); }
.jd-cta.jm-bar .left b { font-size: 18px; color: var(--brand); }
.jd-cta .btn.done { background: #eef5ef; color: var(--brand); border-color: #eef5ef; }

.cy-myans { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #eef5ef; }
.cy-myans .k { font-size: 16px; font-weight: 800; color: var(--brand); }
.cy-myans a { display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--text-2); }
.cy-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.cy-bars button { display: grid; grid-template-columns: 112px 1fr 40px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; background: none; text-align: left; }
.cy-bars button.on { background: var(--surface); }
.cy-bars .l { font-size: 15px; font-weight: 600; }
.cy-bars .tr { height: 10px; border-radius: 5px; background: #efeee9; overflow: hidden; }
.cy-bars .tr i { display: block; height: 100%; background: #b9d3c0; border-radius: 5px; }
.cy-bars .mine .tr i { background: var(--brand); }
.cy-bars .n { font-size: 15px; color: var(--text-3); text-align: right; }
.cy-answers { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.cy-ans { padding: 16px 18px; border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.cy-ans .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.cy-ans p { font-size: 17px; line-height: 27px; }
.cy-ans .foot { display: flex; justify-content: space-between; align-items: center; }

.cy-btop { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-bottom: 6px; }
.cy-btop .k { font-size: 15px; font-weight: 700; color: #8a6d3b; }
.cy-btop h1 { font-size: 27px; line-height: 36px; font-weight: 800; }
.cy-lines { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.cy-line { padding: 18px; border-radius: 12px; background: #f6f1e7; display: flex; flex-direction: column; gap: 10px; }
.cy-line.me { background: #eef5ef; }
.cy-line p { font-size: 18px; line-height: 28px; font-weight: 700; }

.cy-me { margin-top: 10px; }
.cy-me b { font-size: 20px; }
.cy-me .t-cap { display: inline-flex; align-items: center; gap: 4px; }
.cy-me .t-cap img { width: 20px; height: 20px; }
.cy-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.cy-stats span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 4px; border-radius: 10px; background: var(--surface); font-size: 14px; color: var(--text-3); }
.cy-stats b { font-size: 22px; color: var(--text); }
.cy-rxrow { padding: 10px 0; }
.cy-rxrow .tx > span:first-child { font-size: 16px; color: var(--text-2); }
.cy-rxrow b { color: var(--text); }
.cy-ladder { margin-top: 28px; padding: 20px; border-radius: 12px; background: #eef5ef; display: flex; flex-direction: column; gap: 12px; }
.cy-ladder ol { display: flex; flex-wrap: wrap; gap: 6px; }
.cy-ladder li { padding: 6px 10px; border-radius: 10px; background: #ffffff; font-size: 14px; font-weight: 600; color: var(--text-3); }
.cy-ladder li.done { color: var(--brand); }
.cy-ladder li.done::before { content: "✓ "; }
.cy-ladder li.now { background: var(--brand); color: #ffffff; font-weight: 800; }
.cy-ladder p { font-size: 16px; line-height: 25px; color: var(--text-2); }
.cy-ladder .cy-group { background: #ffffff; }

.cy-kit { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 16px; border-radius: 12px; background: #eef5ef; }
.cy-kit .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-2); }
.cy-kit b { font-size: 17px; color: var(--text); }
.cy-help { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.cy-help b { color: var(--brand); margin-right: 4px; }
.cy-line.mine3 { background: #eef5ef; }
.jd-cta.cy-two { gap: 10px; }
.jd-cta.cy-two .btn { flex: 1; min-width: 0; padding: 0 12px; font-size: 17px; }
.cy-ladder ol { list-style: none; padding: 0; margin: 0; }
.cy-avs .cy-av { width: 36px; height: 36px; font-size: 15px; }

/* 커뮤니티 2차(cy2-): 콘텐츠 홈·강연 상세와 같은 틀, 토스식 고르기 */
.cy2-me { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface); font-size: 15px; font-weight: 700; color: var(--text); }
.cy2-me .dot { width: 7px; height: 7px; border-radius: 50%; background: #c4421a; }
.cy2-q { display: flex; flex-direction: column; gap: 6px; }
.cy2-q .d { font-size: 15px; color: var(--text-3); }
.cy2-q .qq { font-size: 24px; line-height: 33px; font-weight: 800; letter-spacing: -0.02em; }
.cy2-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cy2-opt { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 10px; background: var(--surface); text-align: left; }
.cy2-opt .r { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9c7bf; background: #ffffff; flex: none; }
.cy2-opt .l { flex: 1; font-size: 18px; font-weight: 600; color: var(--text); }
.cy2-opt .n { font-size: 15px; font-weight: 600; color: var(--text-3); }
.cy2-opt.on { background: #eef5ef; box-shadow: inset 0 0 0 2px var(--brand); }
.cy2-opt.on .r { border: 0; background: var(--brand); box-shadow: inset 0 0 0 6px var(--brand), inset 0 0 0 11px #ffffff; }
.cy2-opt.on .l { font-weight: 800; }
.cy2-opt.done:not(.on) .l { color: var(--text-2); }
.cy2-write { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; margin-top: 4px; padding: 6px 2px; font-size: 16px; font-weight: 600; color: var(--text-2); }
.cy2-res { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; height: 56px; padding: 0 16px 0 18px; border-radius: 10px; background: var(--brand); color: #ffffff; font-size: 17px; font-weight: 600; }
.cy2-res b { font-weight: 800; }
.cy2-res svg { color: #ffffff; }

.cy2-story { gap: 10px !important; }
.cy2-story .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.cy2-story .q { font-size: 21px; line-height: 30px; font-weight: 800; letter-spacing: -0.02em; }
.cy2-story .q::before { content: "“"; font-family: Georgia, serif; font-size: 2.1em; line-height: 0; vertical-align: -0.46em; margin-right: 4px; color: #b9b5aa; font-weight: 400; }
.cy2-story .tx { font-size: 17px; line-height: 27px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cy2-story .ft { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.cy2-story .cv { width: 40px; height: 58px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); }
.cy2-story .note { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #ffffff; font-size: 15px; font-weight: 600; color: var(--text-2); }
.cy2-story .note img { width: 22px; height: 22px; }

.cy2-groups { display: flex; gap: 12px; overflow-x: auto; margin: 0 -24px; padding: 2px 24px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cy2-groups::-webkit-scrollbar { display: none; }
.cy2-g { flex: none; width: 216px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; }
.cy2-g .im { height: 150px; border-radius: 12px; background: #f1ede4; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.cy2-g .im img { height: 122px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.cy2-g .k { font-size: 15px; color: var(--text-3); }
.cy2-g b { font-size: 18px; line-height: 25px; font-weight: 800; letter-spacing: -0.02em; }
.cy2-g .d { font-size: 15px; line-height: 22px; color: var(--text-2); }
.cy2-g .s { font-size: 15px; font-weight: 800; color: var(--brand); }
.cy2-g.open .im { background: none; border: 2px dashed var(--line-strong); }
.cy2-g.open .plus { font-size: 44px; font-weight: 300; color: var(--text-3); }

.cy2-feed { display: flex; flex-direction: column; gap: 28px; margin-top: 8px; }
.cy2-post { display: flex; gap: 16px; align-items: flex-start; }
.cy2-post .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cy2-post .k { font-size: 15px; color: var(--text-3); }
.cy2-post .t { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cy2-post .ft { display: flex; align-items: center; gap: 10px; }
.cy2-post .rc { font-size: 15px; color: var(--text-3); }
.cy2-post .cv { width: 56px; height: 80px; border-radius: 4px; flex: none; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14); }

.cy2-ak { display: block; margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--brand); }
.cy2-title { margin-top: 8px; font-size: 26px !important; line-height: 37px !important; font-weight: 800 !important; letter-spacing: -0.02em; }
.cy2-by { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.cy2-by .tx { display: flex; flex-direction: column; gap: 2px; }
.cy2-body { margin-top: 22px; font-size: 18px; line-height: 32px; color: var(--text); }
.cy2-body + .cy2-body { margin-top: 14px; }
.cy2-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.cy2-act button { height: 54px; border-radius: 10px; border: 1.5px solid var(--line); background: #ffffff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.cy2-act button.on { color: #c4421a; border-color: #f1c9b9; background: #fdf3ef; }
.cy2-sum { font-size: 15px !important; line-height: 22px !important; color: var(--text-3) !important; }
.cy2-more { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; background: none; text-align: left; width: 100%; }
.cy2-more .t { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text); }
.cy2-sheet { gap: 16px; }
.cy2-chips { display: flex; flex-direction: column; gap: 8px; }
.cy2-chips button { height: 54px; padding: 0 18px; border-radius: 10px; background: var(--surface); text-align: left; font-size: 17px; font-weight: 600; color: var(--text); }

.cy2-ppl { display: flex; gap: 6px; margin-top: 2px; }
.cy2-ppl .cy-av { width: 34px; height: 34px; font-size: 14px; }
.cy2-after { font-size: 16px !important; line-height: 25px !important; color: var(--text-2); padding: 14px 16px; border-radius: 10px; background: #f6f1e7; }
.cy2-g { scroll-margin-left: 24px; }
.cy2-sum { font-size: 15px !important; }

/* 마음정돈 끝: 물 위에 뜬 돌, 둘레로 물결이 천천히 퍼진다 */
.rip3 { position: relative; width: 240px; height: 190px; display: flex; align-items: center; justify-content: center; }
.rip3 .stone { position: relative; z-index: 2; width: 128px; height: 128px; animation: rip3-bob 5s ease-in-out infinite; }
.rip3 .w { position: absolute; left: 50%; top: 74%; width: 132px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(242, 241, 236, 0.55); transform: translate(-50%, -50%) scale(0.55); opacity: 0; animation: rip3-wave 6s ease-out infinite; }
.rip3 .w:nth-child(2) { animation-delay: 2s; }
.rip3 .w:nth-child(3) { animation-delay: 4s; }
.rip3::after { content: ""; position: absolute; left: 50%; top: 74%; width: 120px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10, 40, 30, 0.35), rgba(10, 40, 30, 0) 70%); transform: translate(-50%, -50%); z-index: 1; }
@keyframes rip3-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rip3-wave { 0% { transform: translate(-50%, -50%) scale(0.55); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rip3 .stone, .rip3 .w { animation: none; } .rip3 .w:first-child { opacity: 0.4; transform: translate(-50%, -50%) scale(1.2); } }
.cy2-story .note { display: block; line-height: 21px; }
.cy2-story .note b { color: var(--text); }
.cy-chosen.nb { background: #f6f1e7; }
.m.cl.calmbg::before { background: linear-gradient(180deg, rgba(8, 28, 24, 0.25) 0%, rgba(8, 28, 24, 0) 18%, rgba(8, 28, 24, 0) 46%, rgba(8, 28, 24, 0.18) 100%); }
.calmbg .h-display { text-shadow: 0 2px 14px rgba(5, 25, 20, 0.45); }
.cy-guide { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 16px; border-radius: 12px; background: var(--surface); text-align: left; }
.cy-guide .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 22px; color: var(--text-2); }
.cy-guide b { font-size: 17px; color: var(--text); }
.cy-guide .go { flex: none; height: 40px; padding: 0 12px; border-radius: 12px; background: #ffffff; border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; }
.cy-gsheet { gap: 12px; max-height: 82%; overflow-y: auto; }
.cy-gsheet h3 { margin-top: 8px; font-size: 17px; font-weight: 800; }
.cy-gsheet ul { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.cy-gsheet li { padding: 12px 14px; border-radius: 12px; background: var(--surface); font-size: 16px; line-height: 24px; }
.cy-worry { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.cy-worry b { color: var(--text); }
.cy-gnote { font-size: 15px; color: var(--text-3); margin-top: 4px; }
/* 2차 배경(밝은 수채화 호수)에서 흰 글자가 읽히게: 글자·카드 뒤 물만 살짝 어둡게 */
.m.cl.calmbg::before { background: linear-gradient(180deg, rgba(8, 40, 36, 0.10) 0%, rgba(8, 40, 36, 0) 14%, rgba(8, 40, 36, 0) 44%, rgba(8, 44, 40, 0.30) 52%, rgba(8, 44, 40, 0.42) 100%); }
.calmbg .h-display, .calmbg main p { text-shadow: 0 1px 10px rgba(5, 30, 26, 0.45); }
.calmbg main > div[style*="border-radius: 20px"] { background: rgba(10, 46, 42, 0.32) !important; backdrop-filter: blur(6px); }
.m.cl.calmbg::before { background: linear-gradient(180deg, rgba(8, 40, 36, 0.10) 0%, rgba(8, 40, 36, 0) 14%, rgba(8, 40, 36, 0) 40%, rgba(8, 44, 40, 0.30) 47%, rgba(8, 44, 40, 0.44) 100%); }
.calmbg main p[style*="rgba(242, 241, 236, 0.8)"] { color: rgba(255, 255, 255, 0.94) !important; }
.calmbg > header, .calmbg > main { position: relative; z-index: 1; }

/* 커뮤니티 3차(cy3-): 오늘의 질문 = 실제 문장, 글 상세는 브런치처럼 */
.cy3-me { display: inline-flex; align-items: center; gap: 6px; position: relative; height: 44px; padding: 0 14px 0 8px; border-radius: 22px; background: #ffffff; border: 1.5px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text); }
.cy3-me img { width: 30px; height: 30px; }
.cy3-me .badge { position: absolute; top: -6px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #c4421a; color: #ffffff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #ffffff; }
.cy3-q { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px; border-radius: 12px; background: #eef5ef; }
.cy3-q .qq { font-size: 24px; line-height: 33px; font-weight: 800; letter-spacing: -0.02em; }
.cy3-q .hint { font-size: 15px; color: var(--text-2); }
.cy3-saved { display: flex; flex-direction: column; gap: 8px; }
.cy3-saved button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 16px; border-radius: 10px; background: #ffffff; text-align: left; }
.cy3-saved .t { font-size: 17px; line-height: 26px; font-weight: 700; color: var(--text); }
.cy3-saved .t::before { content: "“"; color: var(--text-3); }
.cy3-saved .t::after { content: "”"; margin-left: 1px; color: var(--text-3); }
.cy3-saved .s { font-size: 15px; color: var(--text-3); }
.cy3-alt { display: flex; gap: 8px; }
.cy3-alt a, .cy3-alt button { flex: 1; height: 46px; border-radius: 12px; border: 1.5px solid #d6e6da; background: none; font-size: 16px; font-weight: 700; color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.cy3-mine { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 2px var(--brand); }
.cy3-mine .k { font-size: 15px; font-weight: 800; color: var(--brand); }
.cy3-mine .q { font-size: 19px; line-height: 28px; font-weight: 800; }
.cy3-mine .q::before { content: "“"; } .cy3-mine .q::after { content: "”"; }
.cy3-mine .s { font-size: 15px; color: var(--text-3); }
.cy3-mine .add { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand); }
.cy3-peek { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.cy3-peek p { display: flex; flex-direction: column; gap: 2px; }
.cy3-peek .q { font-size: 17px; line-height: 25px; font-weight: 600; }
.cy3-peek .by { font-size: 15px; color: var(--text-3); }
.cy3-keep { font-size: 15px; line-height: 21px; color: var(--text-2); }
.cy3-yday { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 14px 4px; }
.cy3-yday .k { flex: none; font-size: 15px; font-weight: 700; color: var(--text-3); }
.cy3-yday .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cy3-yday b { font-size: 16px; }
.cy3-yday .tx span { font-size: 15px; color: var(--text-3); }

.cy3-books { margin-top: 14px; font-size: 15px; color: var(--text-2); }
.cy3-answers { display: flex; flex-direction: column; gap: 22px; }
.cy3-ans { display: flex; flex-direction: column; gap: 6px; }
.cy3-ans .q { font-size: 19px !important; line-height: 29px !important; font-weight: 700; color: var(--text) !important; }
.cy3-ans .why { font-size: 16px !important; line-height: 25px !important; color: var(--text-2) !important; }
.cy3-ans .foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cy3-same { flex: none; height: 34px; padding: 0 12px; border-radius: 17px; border: 1.5px solid var(--line); background: #ffffff; font-size: 15px; font-weight: 700; color: var(--text-2); }
.cy3-same.on { background: #eef5ef; border-color: #eef5ef; color: var(--brand); }
.cy3-past { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; background: none; text-align: left; }
.cy3-past .d { flex: none; width: 70px; font-size: 15px; color: var(--text-3); }
.cy3-past .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cy3-past b { font-size: 17px; }
.cy3-past .tx span { font-size: 15px; color: var(--text-3); }

.cy3-art .cy3-kick { display: block; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--brand); }
.cy3-title { margin-top: 12px; font-size: 28px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; }
.cy3-meta { margin-top: 12px; font-size: 15px; color: var(--text-3); }
.cy3-body { margin-top: 34px; display: flex; flex-direction: column; gap: 22px; }
.cy3-body p { font-size: 19px; line-height: 36px; color: #262626; letter-spacing: -0.01em; }
.cy3-book { display: flex; align-items: center; gap: 14px; margin-top: 40px; padding: 14px 16px; border-radius: 12px; background: var(--surface); }
.cy3-book > img { width: 48px; height: 69px; border-radius: 4px; flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); }
.cy3-book .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-3); }
.cy3-book b { font-size: 17px; color: var(--text); }
.cy3-book .at { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--text-2); }
.cy3-book .at img { width: 18px; height: 18px; }
.cy3-author { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.cy3-author .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cy3-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 4px; padding: 10px 16px 24px; background: #ffffff; box-shadow: 0 -1px 0 var(--line); }
.cy3-bar > button { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border-radius: 12px; background: none; font-size: 16px; font-weight: 700; color: var(--text-2); }
.cy3-bar > button.on { color: #c4421a; }
.cy3-bar .btn.primary { margin-left: auto; height: 48px; padding: 0 22px; font-size: 17px; }

.cy3-bk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 4px; }
.cy3-bk > img { width: 92px; height: 133px; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.12); margin-bottom: 10px; }
.cy3-bk .k { font-size: 15px; font-weight: 700; color: #8a6d3b; }
.cy3-bk h1 { font-size: 26px; line-height: 35px; font-weight: 800; }
.cy3-bk p { font-size: 15px; color: var(--text-3); }
.cy3-bk .cy2-ppl { justify-content: center; margin-top: 8px; }
.cy3-lines { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; padding: 0 6px; }
.cy3-lines .ln { display: flex; flex-direction: column; gap: 8px; }
.cy3-lines .ln p { font-size: 20px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
.cy3-lines .ln span { font-size: 15px; color: var(--text-3); }
.cy3-lines .ln span::before { content: "— "; }
.cy3-lines .ln.mine span { color: var(--brand); font-weight: 700; }

.cy3-mylist { display: flex; flex-direction: column; margin-top: 6px; }
.cy3-next { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 16px; border-radius: 12px; background: #eef5ef; }
.cy3-next .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-2); }
.cy3-next b { font-size: 17px; color: var(--text); }
.cy3-next .go { flex: none; height: 40px; padding: 0 12px; border-radius: 12px; background: #ffffff; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; }

/* 화면 규칙: 머리 오른쪽 기능 아이콘, 단계 흐름 제목 */
.hd-acts { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.hd-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--text); }
button.back { background: none; }
.flowcap { display: block; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--brand); }
.flowcap + sc-if > .h-title, .flowcap + * .h-title { margin-top: 6px !important; }

/* 커뮤니티 4차(cy4-) */
.cy3-q .cy3-mine .q { font-size: 23px; line-height: 33px; }
.cy4-react { display: flex; gap: 8px; margin-top: 30px; }
.cy4-react button { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px; border-radius: 23px; border: 1.5px solid var(--line); background: #ffffff; font-size: 16px; font-weight: 700; color: var(--text); }
.cy4-react button.on { color: #c4421a; border-color: #f1c9b9; background: #fdf3ef; }
.cy4-write { margin-bottom: 4px; }
.cy4-ref { margin-top: 10px; height: 50px; font-size: 17px; }
.cy4-list { display: flex; flex-direction: column; }
.cy4-a { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cy4-a:last-child { border-bottom: 0; }
.cy4-a .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cy4-a .top { display: flex; align-items: baseline; gap: 6px; font-size: 15px; color: var(--text-3); }
.cy4-a .top b { font-size: 15px; color: var(--text); }
.cy4-a .q { font-size: 18px !important; line-height: 28px !important; font-weight: 700; color: var(--text) !important; }
.cy4-a .why { font-size: 16px !important; line-height: 25px !important; color: var(--text-2) !important; }
.cy4-same { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; height: 32px; padding: 0 10px 0 6px; border-radius: 16px; background: none; font-size: 15px; font-weight: 700; color: var(--text-3); }
.cy4-same.on { color: #c4421a; background: #fdf3ef; }
.cy4-me { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cy4-me .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.cy4-me b { font-size: 18px; }
.cy4-me .tx span { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--text-3); }
.cy4-me .tx img { width: 20px; height: 20px; }
.cy4-me > a { font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.cy4-n { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 8px; margin-left: 4px; border-radius: 13px; background: #c4421a; color: #ffffff; font-size: 15px; font-weight: 800; vertical-align: 3px; }
.cy4-rx { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--surface); }
.cy4-rx .k { font-size: 15px; color: var(--text-3); }
.cy4-rx b { font-size: 17px; line-height: 25px; }
.cy4-rx .who { font-size: 16px; font-weight: 700; color: var(--brand); }
.cy4-rx .cm { font-size: 16px; line-height: 24px; color: var(--text-2); }
.cy4-rx .cm i { font-style: normal; color: var(--text-3); font-size: 15px; }
.cy4-rx .d { font-size: 14px; color: var(--text-3); }
.cy4-seg { display: flex; padding: 4px; border-radius: 10px; background: var(--surface); }
.cy4-seg button { flex: 1; height: 44px; border-radius: 11px; background: none; font-size: 16px; font-weight: 700; color: var(--text-3); }
.cy4-seg button.on { background: #ffffff; color: var(--text); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }
.cy4-cards { display: flex; flex-direction: column; gap: 10px; }
.cy4-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 12px; border: 1.5px solid var(--line); background: #ffffff; text-align: left; }
.cy4-card .k { font-size: 15px; color: var(--text-3); }
.cy4-card b { font-size: 18px; line-height: 27px; }
.cy4-card .ft { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-3); }
.cy4-card .pill { padding: 3px 9px; border-radius: 10px; background: var(--surface); font-size: 14px; font-weight: 700; color: var(--text-2); }
.cy4-card .pill.pub { background: #eef5ef; color: var(--brand); }

/* 화면 규칙: 머리 제목을 본문 맨 위로 */
.pg-title { margin-top: 14px; font-size: 25px; line-height: 35px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.bar .hd-acts:empty { display: none; }

/* 답 모음 이웃의 답: 짧은 문장 하나 = 카드 하나 (토스식 정렬) */
.cy5-sort { display: flex; gap: 4px; }
.cy5-sort button { height: 34px; padding: 0 12px; border-radius: 17px; background: none; font-size: 15px; font-weight: 700; color: var(--text-3); }
.cy5-sort button.on { background: var(--surface); color: var(--text); }
.cy5-cards { display: flex; flex-direction: column; gap: 12px; }
.cy5-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 14px; border-radius: 12px; background: var(--surface); }
.cy5-card .q { font-size: 19px !important; line-height: 29px !important; font-weight: 800; color: var(--text) !important; letter-spacing: -0.02em; }
.cy5-card .why { font-size: 16px !important; line-height: 25px !important; color: var(--text-2) !important; }
.cy5-card .ft { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.cy5-card .ft .cy-av { width: 30px; height: 30px; font-size: 13px; }
.cy5-card .by { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 18px; color: var(--text-3); }
.cy5-card .by b { font-size: 15px; color: var(--text); }
.cy5-card .cy4-same { margin-top: 0; align-self: center; background: #ffffff; }
.cy5-card .cy4-same.on { background: #fdf3ef; }

/* 커뮤니티 홈 다듬기: 매니아 이야기 따옴표·표지 없음, 모임 카드 높이 맞춤, 이웃의 이야기는 당근식 목록 */
.cy2-story .q.nq::before { content: none; }
.cy2-g .im.kind { background: #eef5ef; }
.cy2-g .im.kind img { height: 96px; width: 96px; border-radius: 0; box-shadow: none; }
.cy2-g { height: 286px; }
.cy2-g b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 50px; }
.cy2-g .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy2-g .s { margin-top: auto; }
.cy6-feed { display: flex; flex-direction: column; gap: 34px; margin-top: 10px; }
.cy6-post { display: flex; flex-direction: column; gap: 4px; }
.cy6-post .t { font-size: 19px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cy6-post .pv { font-size: 16px; line-height: 24px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cy6-post .mt { font-size: 15px; line-height: 21px; color: var(--text-3); }
.cy6-post .rc { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 15px; color: var(--text-3); }
.cy6-post .rc i { width: 10px; }
.cy6-post .rc svg { width: 18px; height: 18px; }

/* 오늘의 질문: 답을 골라도 카드 높이 그대로, 결과는 엽서처럼 */
.cy3-q { min-height: 480px; }  /* 고르기 전·후 실제 높이(480) — 둘이 같게 유지 */
.cy3-q > sc-if, .cy3-q { box-sizing: border-box; }
.cy7-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 8px 0; text-align: center; }
.cy7-done .ok { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px; background: #ffffff; font-size: 15px; font-weight: 800; color: var(--brand); }
.cy7-done .card { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 34px 22px; border-radius: 12px; background: #ffffff; box-shadow: 0 2px 10px rgba(16, 60, 36, 0.08); }
.cy7-done .card .q { font-size: 23px; line-height: 35px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.cy7-done .card .s { font-size: 15px; color: var(--text-3); }
.cy7-done .keep { font-size: 15px; line-height: 21px; color: var(--text-2); }
.cy7-change { align-self: center; margin-top: 2px; padding: 8px 6px; background: none; font-size: 15px; font-weight: 600; color: var(--text-2); text-decoration: underline; text-underline-offset: 4px; }
.cy3-q .cy2-res { margin-top: 0; }
.hd-ic.cnt { width: auto; gap: 4px; padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--text-2); }
.hd-ic.cnt.on { color: #c4421a; }
.cy4-react .ic { width: 46px; padding: 0; justify-content: center; }
.cy6-moreb { margin-top: -6px; height: 50px; font-size: 16px; }
.cy6-acts { display: flex; flex-direction: column; margin-top: 10px; border-radius: 12px; background: var(--surface); }
.cy6-acts a { display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.cy6-acts a + a { border-top: 1px solid #e7e5de; }
.cy6-acts .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: var(--text-3); }
.cy6-acts b { font-size: 17px; color: var(--text); }
button.cy6-post { background: none; text-align: left; width: 100%; padding: 0; }

/* 브런치식 글 목록·글 상세 (br-) */
.br-list { display: flex; flex-direction: column; margin-top: 4px; }
.br-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 0 24px; border-bottom: 1px solid #efede7; background: none; text-align: left; width: 100%; }
.br-item:last-child { border-bottom: 0; }
.br-item .k { font-size: 15px; color: var(--text-3); }
.br-item .t { font-size: 20px; line-height: 29px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.br-item .pv { font-size: 16px; line-height: 26px; color: #74746f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.br-item .by, .br-meta { margin-top: 6px; font-size: 15px; color: var(--text-3); }
.br-item .by i, .br-meta i { font-family: Georgia, 'Times New Roman', serif; font-style: italic; margin-right: 3px; color: #9a9a95; }
.br-title { font-weight: 700 !important; font-size: 27px !important; line-height: 39px !important; }
.br-meta { margin-top: 12px; padding-bottom: 26px; border-bottom: 1px solid #efede7; }
.cy3-art .cy3-body { margin-top: 30px; }
.cy3-art .cy3-body p { font-size: 18px; line-height: 35px; color: #333331; }
.br-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.br-tags a { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid #e3e1da; font-size: 15px; color: var(--text-2); display: inline-flex; align-items: center; }
.br-react { display: flex; align-items: center; gap: 4px; margin-top: 24px; padding: 6px 0; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.br-react button { display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 10px; background: none; font-size: 15px; font-weight: 600; color: var(--text-2); }
.br-react button.on { color: #c4421a; }
.br-react button.r { margin-left: auto; }
.br-author { display: flex; align-items: flex-start; gap: 16px; margin-top: 30px; }
.br-author .tx { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.br-author b { font-size: 19px; }
.br-author .lv { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--text-3); }
.br-author .lv img { width: 18px; height: 18px; }
.br-author .in { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--text-2); }
.br-author .cy-av { width: 56px; height: 56px; font-size: 20px; }
.br-more { margin-top: 18px; height: 50px; font-size: 16px; }
.hd-ic.on { color: #c4421a; }
.br-item.cy4-card { border-radius: 0; border: 0; border-bottom: 1px solid #efede7; padding: 18px 0 20px; }
.br-item.cy4-card .ft { margin-top: 4px; }
.hd-ic.h3 img { width: 32px; height: 32px; }

/* 브런치 결은 살리고 지관식으로: by 대신 레벨 배지+이름, 머리말은 지관 녹색, 제목 아래 짧은 녹색 막대(누리집 섹션 제목 결) */
.br-item .k { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-item .by, .br-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: var(--text-2); font-weight: 600; }
.br-item .by img, .br-meta img { width: 20px; height: 20px; }
.br-item .by span, .br-meta span { font-weight: 400; color: var(--text-3); }
.br-meta { display: flex; position: relative; padding-bottom: 28px; border-bottom: 0; }
.br-meta::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--brand); }
.br-title { font-weight: 800 !important; }
.br-kws { margin-top: 34px; }

/* 내 활동 새 반응: 알림 목록 (누가·무엇을 → 한마디 → 어느 글) */
.cy9-list { display: flex; flex-direction: column; margin-top: 2px; }
.cy9-rx { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 16px 0; border-bottom: 1px solid #efede7; }
.cy9-rx:last-child { border-bottom: 0; }
.cy9-rx .avs { flex: none; display: flex; width: 44px; }
.cy9-rx .avs .cy-av { width: 36px; height: 36px; font-size: 14px; box-shadow: 0 0 0 2px #ffffff; }
.cy9-rx .avs .cy-av + .cy-av { margin-left: -26px; margin-top: 12px; width: 30px; height: 30px; font-size: 12px; }
.cy9-rx .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cy9-rx .w { font-size: 17px; line-height: 25px; color: var(--text); }
.cy9-rx .w b { font-weight: 800; }
.cy9-rx .cm { padding: 10px 12px; border-radius: 10px; background: var(--surface); font-size: 16px; line-height: 24px; color: var(--text); }
.cy9-rx .on { font-size: 15px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cy9-rx .new { position: absolute; right: 0; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: #c4421a; }

/* 브런치 결 비교(br-t4·br-t9·br-r5) */
.br-item.br-th { flex-direction: row; align-items: flex-start; gap: 16px; }
.br-th .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.br-th img { width: 64px; height: 90px; border-radius: 4px; flex: none; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14); margin-top: 22px; }
.br-th .by { margin-top: 4px; font-weight: 600; }
.br-t9 { gap: 0 !important; }
.br-t9 a { padding: 20px 0 22px; border-bottom: 1px solid #efede7; gap: 6px !important; }
.br-t9 a:last-child { border-bottom: 0; }
.br-t9 a .k { font-size: 14px; font-weight: 700; color: var(--brand); }
.br-t9 a b { font-size: 19px; line-height: 28px; font-weight: 600; }
.br-t9 a > span:last-child { font-size: 15px; color: var(--text-3); }
.br-r5 .page-text { font-size: 18px !important; line-height: 35px !important; color: #333331 !important; }
.br-r5 .br-meta { margin-top: 12px; margin-bottom: 8px; }
.tn-list.br-t9 a .k { font-size: 14px !important; font-weight: 700 !important; color: var(--brand) !important; }
.tn-list.br-t9 a b { font-size: 19px !important; line-height: 28px !important; font-weight: 700 !important; color: var(--text) !important; }
.tn-list.br-t9 a > span:last-child { font-size: 15px !important; color: var(--text-3) !important; }
.br-r5 .cy3-kick { font-size: 15px; font-weight: 700; color: var(--brand); }

/* 브런치 결 2차 후보 */
.br-t2 .ta-by { position: relative; padding-bottom: 22px; font-weight: 600; color: var(--text-2); }
.br-t2 .ta-by::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--brand); }
.br-t2 .ta-three { background: none !important; border-radius: 0 !important; padding: 18px 0 !important; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.br-t5 .tw-no { font-size: 14px; font-weight: 700; color: var(--brand); }
.br-t5 .tw-item { background: none; border-radius: 0; padding: 26px 0 4px; margin-top: 26px; border-top: 1px solid #efede7; }
.br-t5 .tw-item dl { padding: 12px 0 0; }
.br-r10 .rs-list { gap: 0 !important; }
.br-r10 .rs-card { background: none; border-radius: 0; padding: 22px 0 24px; border-bottom: 1px solid #efede7; }
.br-r10 .rs-card .k { color: var(--brand); }
.br-r10 .rs-card p { font-size: 20px; line-height: 31px; }
.br-r10 .rs-card .src { text-decoration: none; }
.br-q3 .kp-card { background: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid #efede7; padding-left: 0 !important; padding-right: 0 !important; }
.br-p5 .jn-item { flex-direction: row-reverse; padding: 20px 0 22px; border-bottom: 1px solid #efede7; }
.br-p5 .jn-item .poster { width: 64px; height: 90px; border-radius: 4px; }
.br-p5 .jn-item .k { color: var(--brand); font-weight: 700; font-size: 14px; }
.hd-acts button.h3 img, .hd-acts .h3 img { width: 30px; height: 30px; display: block; }
.hd-acts button.h3 { background: none; }

/* 브런치 결 3차 후보 */
.br-t8 .tc-card { flex-direction: row-reverse; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 20px 0 22px !important; border-bottom: 1px solid #efede7 !important; }
.br-t8 .tc-card img { width: 64px; height: 90px; border-radius: 4px; }
.br-t8 .tc-card b { font-weight: 700; font-size: 19px; line-height: 27px; }
.br-t3 .te-saved { background: none !important; border-radius: 0 !important; padding: 20px 0 !important; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.br-t3 .te-next a, .br-t3 .te-next > * > a { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; border-bottom: 1px solid #efede7 !important; }
.br-r6 .card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 22px 0 !important; border-bottom: 1px solid #efede7 !important; }
.br-r6 .card .btn { border: 0; height: auto; padding: 6px 0; color: var(--brand); justify-content: flex-start; background: none; font-size: 15px; }
.br-x3 .letter { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 8px 0 22px !important; border-bottom: 1px solid #efede7; }
.br-x3 .letter .t-body { font-size: 18px; line-height: 33px; }
.br-x3 .card { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 16px 0 !important; border-bottom: 1px solid #efede7 !important; }
.br-w2 .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 20px 0 !important; border-top: 1px solid #efede7 !important; border-bottom: 1px solid #efede7 !important; }

/* 브런치 결 4차: R7 고른 날 기록, C8 공지와 약관, R2 인문지수 내역 */
.br-day { display: flex; flex-direction: column; }
.br-day .h-head { font-size: 20px; line-height: 28px; font-weight: 800; letter-spacing: -0.02em; padding-bottom: 6px; }
.br-ditem { display: flex; flex-direction: column; gap: 4px; padding: 16px 0 18px; border-bottom: 1px solid #efede7; }
.br-ditem:last-child { border-bottom: 0; }
.br-ditem .k { font-size: 15px; font-weight: 600; color: var(--brand); }
.br-ditem b { font-size: 18px; line-height: 27px; font-weight: 600; }
.br-c8 .sec h2.t-cap { font-size: 15px; color: var(--brand); }
.br-c8 .lrow { min-height: 0; padding: 18px 0 20px; border-bottom-color: #efede7; }
.br-c8 .lrow .stack { flex-direction: column-reverse; gap: 4px !important; }
.br-c8 .lrow .stack .t-cap { font-size: 15px; color: var(--text-3); }
.br-c8 .lrow > span:first-child, .br-c8 .lrow .stack > span:not(.t-cap) { font-size: 18px; line-height: 27px; font-weight: 600; }
.br-c8 .sec p.t-body { font-size: 17px; line-height: 30px; padding: 4px 0 22px !important; border-bottom: 1px solid #efede7; }
.br-r2 .rl-log { gap: 0; }
.br-r2 .rl-log > div { padding: 16px 0; border-bottom: 1px solid #efede7; }
.br-r2 .rl-log > div:last-child { border-bottom: 0; }
.br-r2 .rl-log b { font-size: 17px; line-height: 25px; }
.br-r2 .rl-levels { gap: 0; }
.br-r2 .rl-levels > div { background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid #efede7; }
.br-r2 .rl-levels > div:last-child { border-bottom: 0; }
.br-r2 .rl-levels .now { background: none; box-shadow: none; }

/* 머리 3D 비교: 책 상세 아래 단추가 '읽었어요' 하나일 때 주 단추로 */
.bd-cta .bd-read.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
/* 제목 안 글자(sc-interp span)가 '.tx span' 회색·작은 글씨를 받던 오류 */
.rl-log .tx b span, .rl-levels .tx b span { color: inherit; font-size: inherit; }

/* 브런치 결 5차: P1 참여 홈 목록(P5와 같게), P6 내 신청, W4 회고 저장 뒤(W2와 같게), X2 TIME BOX 넣은 뒤, R4 나의 이야기 차례, T6 영상 차례 */
.br-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.br-links button, .br-links a { font-size: 16px; font-weight: 700; color: var(--brand); padding: 6px 0; background: none; border: 0; }
.br-links button.on { color: var(--text-3); }
.br-p1 .jn-item { flex-direction: row-reverse; padding: 20px 0 22px; border-bottom: 1px solid #efede7; }
.br-p1 .jn-item .poster { width: 64px; height: 90px; border-radius: 4px; }
.br-p1 .jn-item .k { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-p6 .jm-card { background: none; border-radius: 0; padding: 20px 0 16px; margin-top: 0; border-bottom: 1px solid #efede7; }
.br-p6 .jm-main { flex-direction: row-reverse; }
.br-p6 .jm-main > svg { display: none; }
.br-p6 .jm-main .poster { border-radius: 4px; }
.br-p6 .jm-card .br-links { margin-top: 8px; }
.br-p6 .jm-old { border-bottom: 1px solid #efede7; padding: 18px 0; }
.br-p6 .jm-olds { gap: 0; }
.br-p6 .jm-old .k { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-w4 .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 20px 0 !important; border-top: 1px solid #efede7 !important; border-bottom: 1px solid #efede7 !important; }
.br-w4 .card .t-body { font-size: 18px; line-height: 31px; }
.br-x2 .lrow { border-bottom-color: #efede7; }
.br-x2 .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 18px 0 !important; border-top: 1px solid #efede7 !important; border-bottom: 1px solid #efede7 !important; }
.br-x2 .card .t-cap { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-r4 > .panel { background: none; padding: 0 !important; margin-top: 16px !important; }
.br-r4 > .panel .t-strong { font-size: 16px; font-weight: 500; color: var(--text-2); }
.br-r4 .lrow { min-height: 0; padding: 16px 0 18px; border-bottom-color: #efede7; }
.br-r4 .lrow .t-cap { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-r4 .lrow .stack > span:not(.t-cap) { font-size: 18px; line-height: 27px; font-weight: 700; }
.br-r4 .br-links { justify-content: flex-start; }
.br-t6 .lrow { min-height: 0; padding: 14px 0 16px; border-bottom-color: #efede7; }
.br-t6 .lrow .t-cap { color: var(--brand); font-weight: 700; font-size: 14px; }
.br-t6 .lrow .stack > span:not(.t-cap) { font-size: 18px; line-height: 27px; font-weight: 600; }
.br-w4 a.card { border-top: 0 !important; margin-top: 0 !important; }

/* 글자 크기 바닥(2026-10-21, 40대 이상): 본문 18 · 보조 16 · 설명 15 · 머리말·작은 표시 14가 가장 작게. 13 이하는 쓰지 않아요(아래 탭 이름 13, 숫자 배지·이름 첫 글자 동그라미만 예외) */

/* 브런치 결 6차: P4 신청 결과, P7 내 신청 상세, R11 도장 하나, T7 소리로 듣기 차례, R8 연간 요약 */
.br-p4 .jr-box { background: none; border-radius: 0; padding: 20px 0; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.br-p4 .jr-box .br-links { margin-top: 8px; }
.br-p7l { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid #efede7; }
.br-p7 .ja-me { gap: 0; }
.br-p7 .ja-me div { padding: 13px 0; border-bottom: 1px solid #efede7; }
.br-p7 .ja-me div:last-child { border-bottom: 0; }
.br-r11 .sd3-theme { background: none; border-radius: 0; padding: 20px 0 6px; border-top: 1px solid #efede7; }
.br-r11 .sd3-theme span:last-child { font-size: 17px; line-height: 28px; }
.br-r11l { margin-top: 6px; padding-bottom: 18px; border-bottom: 1px solid #efede7; }
.br-t7 .tl-parts { gap: 0; }
.br-t7 .tl-parts button { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0 16px; border-bottom: 1px solid #efede7; font-size: 18px; color: var(--text); font-weight: 600; }
.br-t7 .tl-parts button:last-child { border-bottom: 0; }
.br-t7 .tl-parts .at { width: auto; font-size: 14px; font-weight: 700; color: var(--brand); }
.br-t7 .tl-parts button.on { color: var(--brand); }
.br-r8 .panel { background: none; border-radius: 0; padding: 20px 0 !important; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.br-r8 .panel .btn { height: auto; padding: 6px 0; border: 0; background: none !important; color: var(--brand); font-size: 16px; }
.br-r8 .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; padding: 18px 0 !important; border-top: 1px solid #efede7 !important; border-bottom: 1px solid #efede7 !important; }
.br-r8 .card .t-cap { color: var(--brand); font-weight: 700; font-size: 14px; }


/* 오늘의 질문 비교 (B 글처럼 · C 한 줄로 접기 · D 한 장씩) */
.q-kick { display: block; font-size: 15px; font-weight: 700; color: var(--brand); }
.q-hint { margin: 0; font-size: 16px; line-height: 24px; color: var(--text-2); }
.q-link { align-self: flex-start; padding: 8px 0; font-size: 17px; font-weight: 700; color: var(--brand); }
.q-link.c { align-self: center; }
.q-row { display: flex; align-items: center; justify-content: space-between; min-height: 60px; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; font-size: 18px; font-weight: 700; color: var(--text); }
.q-change { align-self: flex-start; padding: 6px 0; background: none; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.qb, .qc, .qd { display: flex; flex-direction: column; gap: 14px; }
.qb-q { margin: 0; font-size: 26px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.qb-bar { width: 28px; height: 3px; border-radius: 2px; background: var(--brand); margin-top: -2px; }
.qb-list { display: flex; flex-direction: column; border-top: 1px solid #efede7; }
.qb-item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 0; border-bottom: 1px solid #efede7; background: none; text-align: left; }
.qb-item .t { font-size: 19px; line-height: 29px; font-weight: 700; color: var(--text); }
.qb-item .s { font-size: 15px; color: var(--text-3); }
.qb-mine, .qc-mine { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 8px; }
.qb-mine .k, .qc-mine .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.qb-mine b { font-size: 24px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.qc-mine b { font-size: 20px; line-height: 30px; font-weight: 800; }
.qb-mine .s, .qc-mine .s { font-size: 15px; color: var(--text-3); }
.qc-q { margin: -4px 0 0; font-size: 24px; line-height: 34px; font-weight: 800; letter-spacing: -0.02em; }
.qc-n { margin-top: -8px; font-size: 15px; color: var(--text-3); }
.qc-acts { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 4px; }
.qc-acts .q-link { align-self: center; }
.qc-dim { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.4); }
.qc-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 41; display: flex; flex-direction: column; gap: 6px; max-height: 80%; overflow: auto; padding: 22px 24px 34px; border-radius: 20px 20px 0 0; background: #ffffff; }
.qc-sheet .hd { display: flex; align-items: center; justify-content: space-between; }
.qc-sheet .hd b { font-size: 21px; font-weight: 800; }
.qc-sheet .hd button { padding: 8px 0; background: none; font-size: 17px; font-weight: 600; color: var(--text-2); }
.qc-sheet .qb-item:last-child { border-bottom: 0; }
.qd-q { margin: -6px 0 0; font-size: 22px; line-height: 32px; font-weight: 800; letter-spacing: -0.02em; }
.qd-page { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 230px; padding: 26px 22px 22px; border-radius: 6px; background: #faf8f3; border: 1px solid #ece8de; }
.qd-page .n { font-size: 15px; font-weight: 700; color: var(--brand); }
.qd-page b { font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; font-size: 24px; line-height: 38px; font-weight: 800; color: var(--text); }
.qd-page .s { font-size: 15px; color: var(--text-3); }
.qd-page .nav { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 6px; }
.qd-page .nav button { width: 44px; height: 44px; border-radius: 50%; background: #ffffff; border: 1px solid #ece8de; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.qd-page.done { min-height: 0; }

/* 오늘의 질문 형태 다섯 가지 (B 글처럼): 보기 고르기·비율, 한 단어 쓰기, 책 고르기 */
.qb-opt { flex-direction: row !important; align-items: center !important; justify-content: space-between; min-height: 64px; }
.qb-opt i { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #94928b; }
.qb-res { display: flex; flex-direction: column; gap: 14px; padding: 4px 0 2px; }
.qb-res > div { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.qb-res .l { font-size: 18px; font-weight: 600; color: var(--text); }
.qb-res .l em { margin-left: 8px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--brand); }
.qb-res .v { font-size: 17px; font-weight: 700; color: var(--text-2); }
.qb-res .bar { grid-column: 1 / 3; height: 10px; border-radius: 5px; background: #efede7; overflow: hidden; }
.qb-res .bar i { display: block; height: 100%; border-radius: 5px; background: #cfcdc6; }
.qb-res .qb-me .l, .qb-res .qb-me .v { color: var(--brand); font-weight: 800; }
.qb-res .qb-me .bar i { background: var(--brand); }
.qb-in { height: 60px; padding: 0 18px; border-radius: 10px; border: 1.5px solid #e4e3df; background: #ffffff; font-size: 20px; font-weight: 600; color: var(--text); }
.qb-in:focus { outline: none; border-color: var(--brand); }
.qb-words { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qb-words .k { width: 100%; font-size: 15px; font-weight: 700; color: var(--text-2); }
.qb-words span:not(.k) { padding: 8px 14px; border-radius: 999px; background: #f1f0ec; font-size: 17px; font-weight: 600; color: var(--text); }
.qb-book { flex-direction: row !important; align-items: center !important; gap: 14px !important; }
.qb-book img, .qb-mybook img { width: 44px; height: 64px; border-radius: 3px; flex: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); object-fit: cover; }
.qb-book .tx, .qb-mybook .tx { display: flex; flex-direction: column; gap: 2px; }
.qb-mybook .row { display: flex; align-items: center; gap: 14px; }
.qb-mybook b { font-size: 22px; line-height: 30px; }

/* 이웃의 답(M5) 형태별: 많이 나온 단어 순위, 이웃이 고른 책 순위, 주말 돌아보기 */
.qb-rank, .qb-books { display: flex; flex-direction: column; border-top: 1px solid #efede7; }
.qb-rank > div, .qb-books > a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #efede7; }
.qb-rank .n, .qb-books .n { width: 20px; flex: none; font-size: 17px; font-weight: 800; color: var(--text-3); }
.qb-rank b { flex: 1; font-size: 20px; font-weight: 700; }
.qb-rank .c { font-size: 16px; color: var(--text-2); }
.qb-books img { width: 44px; height: 64px; border-radius: 3px; flex: none; object-fit: cover; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.qb-books .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.qb-books b { font-size: 18px; font-weight: 700; }
.qb-books .tx span { font-size: 15px; color: var(--text-3); }
.qb-rank .qb-me .n, .qb-rank .qb-me b, .qb-books .qb-me .n, .qb-books .qb-me b, .qb-books .qb-me .tx span { color: var(--brand); }
.qb-week .qb-item { gap: 2px; padding: 14px 0; }
.qb-week .qb-item .s { font-size: 15px; }
.qb-week .qb-item .t { font-size: 18px; line-height: 27px; }

/* 커뮤니티 카드 걷어내기 (.nc): 상자 대신 연한 가로선 목록 */
/* M1 매니아가 고른 이야기: 옆으로 넘기는 카드 → 세로 목록 */
.nc .bslides { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; scroll-snap-type: none; border-top: 1px solid #efede7; }
.nc .bslide { width: auto; background: none !important; border-radius: 0; padding: 20px 0; border-bottom: 1px solid #efede7; gap: 8px !important; }
.nc .cy2-story .q { font-size: 20px; line-height: 29px; }
.nc .cy2-story .tx { -webkit-line-clamp: 2; }
.nc .cy2-story .note { padding: 0; background: none; font-size: 15px; color: var(--brand); }
.nc .cy2-story .note b { color: var(--brand); }
/* M1 함께 읽는 모임: 옆으로 넘기는 카드 → 세로 목록, 표지는 오른쪽 작게 */
.nc .cy2-groups { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 1px solid #efede7; }
.nc .cy2-g { width: auto; height: auto; display: grid; grid-template-columns: 1fr 64px; column-gap: 16px; row-gap: 3px; padding: 18px 0; border-bottom: 1px solid #efede7; }
.nc .cy2-g > :not(.im) { grid-column: 1; }
.nc .cy2-g .im { grid-column: 2; grid-row: 1 / span 4; height: auto; margin: 0; background: none !important; border: 0; align-self: start; }
.nc .cy2-g .im img { width: 64px; height: 92px; object-fit: cover; border-radius: 3px; }
.nc .cy2-g .im.kind img { width: 56px; height: 56px; }
.nc .cy2-g .k { font-size: 15px; font-weight: 700; color: var(--brand); }
.nc .cy2-g b { min-height: 0; font-size: 19px; line-height: 27px; }
.nc .cy2-g .s { margin-top: 2px; }
.nc .cy2-g.open { grid-template-columns: 1fr; }
.nc .cy2-g.open .im { display: none; }
.nc .cy2-g.open .k { color: var(--text-3); font-weight: 600; }
.nc .cy2-g.open b { color: var(--brand); }
/* M2·M6 책 상자, M7 다음 한 걸음 → 위아래 가로선 한 줄 */
.nc .cy3-book, .nc .cy3-next { background: none; border-radius: 0; padding: 16px 0; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.nc .cy3-next .go { background: none; padding: 0; color: var(--brand); }
/* M2·M3 한마디·후기 상자 → 목록 */
.nc .jd-rv { background: none; border-radius: 0; padding: 16px 0; border-bottom: 1px solid #efede7; }
.nc .jd-rv b { color: var(--text); }
/* M3 자리 상자·안내 상자 → 가로선 사이, 안내는 글만 */
.nc .jd-seat { background: none; border-radius: 0; padding: 18px 0; border-top: 1px solid #efede7; border-bottom: 1px solid #efede7; }
.nc .cy2-after { background: none; padding: 0; color: var(--text-3); }
/* M4 고르기 상자 → 줄 + 오른쪽 동그라미 */
.nc .option { position: relative; border: 0; border-radius: 0; border-bottom: 1px solid #efede7; background: none !important; padding: 18px 44px 18px 0; }
.nc .option::after { content: ""; position: absolute; right: 2px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; box-sizing: border-box; border: 2px solid #94928b; }
.nc .option.on::after { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 16px no-repeat; }
.nc .option.on .h-head { color: var(--brand); }
.nc .stack:has(> .option) { gap: 0 !important; border-top: 1px solid #efede7; }
.nc .cy-guide { background: none; border-radius: 0; padding: 16px 0; }
.nc .cy-guide .go { border: 0; background: var(--brand-wash); color: var(--brand); border-radius: 999px; }
/* M5 나의 답(녹색 테두리 상자) → 글처럼, 이웃의 답 카드 → 목록 */
.nc .cy3-mine { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.nc .cy3-mine .q { font-size: 23px; line-height: 34px; }
.nc .cy3-mine .cy4-ref { margin-top: 10px; }
.nc .cy5-cards { gap: 0; border-top: 1px solid #efede7; }
.nc .cy5-card { background: none; border-radius: 0; padding: 18px 0 16px; border-bottom: 1px solid #efede7; }
.nc .cy5-card .cy4-same { background: #f1f0ec; }
/* M7 받은 한마디 상자 → 글만 */
.nc .cy9-rx .cm { padding: 0; background: none; color: var(--text-2); }
.nc .cy9-rx .cm::before { content: "“"; } .nc .cy9-rx .cm::after { content: "”"; }

/* 기록 탭 다듬기 제안: R1 '나의 기록' 목록, R5 아래 단추 */
.rv-list { display: flex; flex-direction: column; border-top: 1px solid #efede7; }
.rv-list > a { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid #efede7; }
.rv-list .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rv-list .tx b { font-size: 18px; font-weight: 700; color: var(--text); }
.rv-list .tx > span { font-size: 15px; color: var(--text-3); }
.rv-list .n { flex: none; font-size: 16px; font-weight: 700; color: var(--brand); }
.rv-list > a > svg { color: var(--text-3); }
.rv-list .mini { display: flex; gap: 4px; margin-top: 4px; }
.rv-list .mini img { width: 26px; height: 26px; }
.rv-list .mini img.off { opacity: 0.55; }
.rv-pager { align-items: center; gap: 18px; }
.rv-pager .prev { flex: none; padding: 0 6px; background: none; font-size: 17px; font-weight: 600; color: var(--text-2); }
.rv-pager .btn { flex: 1; }
.rv .rl-log img { display: none; }

/* 나의 이야기 전자책 보기 (R5b, 2026-10-24 전체 화면): 예전 지관 자서전처럼 종이가 화면을 가득 채우고, 가운데를 누르면 도구가 겹쳐 나타난다 */
.eb { background: #fafaf8 !important; color: #2a2825; height: 844px !important; min-height: 844px; overflow: hidden; position: relative; padding: 0 !important; }
.eb.is-cover, .eb.is-back { background: #ede9e0 !important; }
.eb-page { position: absolute; inset: 0; font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; color: #3a3833; }
.eb-zone { position: absolute; top: 0; bottom: 0; z-index: 5; background: none; border: 0; padding: 0; }
.eb-zone.l { left: 0; width: 33%; } .eb-zone.c { left: 33%; width: 34%; } .eb-zone.r { right: 0; width: 33%; }
.eb-cover { position: absolute; inset: 0; }
.eb-cover .ti { position: absolute; left: 32px; right: 32px; top: 38%; transform: translateY(-50%); text-align: center; }
.eb-cover b { display: block; font-size: 34px; line-height: 48px; font-weight: 700; color: #555; }
.eb-cover .sub { display: block; margin-top: 16px; font-size: 16px; line-height: 26px; color: #888; }
.eb-cover .au { position: absolute; left: 0; right: 0; top: 70%; text-align: center; font-size: 19px; color: #555; }
.eb-seal { position: absolute; right: 24px; bottom: 26px; font-size: 14px; letter-spacing: 0.18em; color: #9a958a; }
.eb-toc { position: absolute; inset: 0; padding: 72px 30px 60px; display: flex; flex-direction: column; }
.eb-toc .hd { font-size: 15px; color: #9a958a; margin-bottom: 22px; }
.eb-toc .row { position: relative; z-index: 6; display: block; width: 100%; padding: 0 0 26px; background: none; border: 0; text-align: left; color: inherit; font-family: inherit; }
.eb-toc .row .no { display: block; font-size: 15px; color: #aaa; }
.eb-toc .row b { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; color: #555; }
.eb-toc .row .ln { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-size: 16px; color: #999; }
.eb-toc .row .ln i { flex: 1; border-bottom: 1px dotted #d4d0c6; height: 0.7em; }
.eb-toc .row.off b { color: #b8b3a8; }
.eb-chap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 36px 80px; }
.eb-chap .no { font-size: 16px; color: #9a958a; }
.eb-chap b { margin-top: 10px; font-size: 32px; line-height: 44px; font-weight: 700; color: #4a4741; }
.eb-chap .bar, .eb-end .bar { width: 40px; height: 1px; background: #d5d0c8; margin: 22px 0 16px; }
.eb-chap .sub { font-family: Pretendard, sans-serif; font-size: 16px; color: #9a958a; }
.eb-text { position: absolute; inset: 0; padding: 64px 30px 70px; overflow: hidden; }
.eb-text .kick { font-size: 14px; color: #aaa; }
.eb-text h2 { margin: 12px 0 24px; font-size: 24px; line-height: 34px; font-weight: 700; color: #3a3833; }
.eb-text p { margin: 0 0 18px; font-size: var(--fs, 19px); line-height: 1.9; word-break: keep-all; }
.eb-text .src { display: block; margin-top: 10px; font-family: Pretendard, sans-serif; font-size: 14px; color: #9a958a; }
.eb-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 34px 90px; }
.eb-end .q { margin: 0; font-size: 21px; line-height: 36px; color: #555; }
.eb-end .st { font-family: Pretendard, sans-serif; font-size: 15px; line-height: 26px; color: #aaa; }
.eb-back { position: absolute; inset: 0; }
.eb-back .msg { position: absolute; left: 0; right: 0; top: 46%; text-align: center; font-size: 16px; color: #888; }
.eb-num { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font-family: Pretendard, sans-serif; font-size: 14px; color: #b5b0a6; }
/* 가운데를 누르면 위·아래로 겹쳐 나타나는 도구: 예전 자서전처럼 어둡게 번지는 띠 위에 반투명 칩 */
.eb-top { position: absolute; z-index: 8; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; height: 76px; padding: 0 18px 12px; background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); color: #fff; }
.eb-top .x { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.eb-top .chips { flex: 1; display: flex; justify-content: center; gap: 8px; }
.eb-top .pg { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.chip2 { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; border: 0; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; }
.eb-dl { position: absolute; z-index: 9; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; min-width: 220px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); overflow: hidden; }
.eb-dl button { height: 54px; padding: 0 18px; border: 0; border-bottom: 1px solid #f0efeb; background: none; text-align: left; font-size: 16px; font-weight: 600; color: #191919; }
.eb-dl button:last-child { border-bottom: 0; }
.eb-bot { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 14px; padding: 40px 16px 24px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); }
.eb-bot .prog { display: block; height: 3px; margin: 0 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.eb-bot .prog i { display: block; height: 100%; background: #fff; }
.eb-bot .chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.eb-hint { position: absolute; z-index: 7; left: 50%; bottom: 64px; transform: translateX(-50%); padding: 10px 16px; border-radius: 20px; background: rgba(20, 20, 18, 0.72); color: #fff; font-size: 14px; white-space: nowrap; }

/* R5 이 쪽 고치기: 고칠 수 있는 글은 옅은 밑줄 */
.r5-edit .ed-hint { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #f1f0ec; font-size: 15px; line-height: 22px; color: var(--text-2); }
.r5-edit .ed { outline: none; border-bottom: 1px dashed #cfcac0; padding-bottom: 2px; }
.r5-edit .ed:focus { border-bottom-color: var(--brand); background: #fffdf6; }
.rv-pager a.prev { flex: none; padding: 0 6px; font-size: 17px; font-weight: 600; color: var(--text-2); }

/* 전자책 도구 줄이기(2026-10-24): 위 닫기·제목·고치기, 아래 진행 막대·쪽, 차례 · 글자·바탕 두 개. 바탕 셋 */
.eb-top .tt { flex: 1; text-align: center; font-size: 15px; color: rgba(255, 255, 255, 0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eb-top .ed { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }
.eb-bot .pr { display: flex; align-items: center; gap: 12px; padding: 0 4px; }
.eb-bot .pr .prog { flex: 1; margin: 0; }
.eb-bot .pr .pg { font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.eb-bot .two { display: flex; gap: 10px; }
.eb-bot .two button { flex: 1; height: 52px; border-radius: 26px; border: 0; background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 17px; font-weight: 700; }
.eb-bot .two button.on { background: #fff; color: #191919; }
.eb-aa { position: absolute; z-index: 9; left: 16px; right: 16px; bottom: 150px; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; border-radius: 18px; background: #fff; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28); font-family: Pretendard, sans-serif; }
.eb-aa .lb { font-size: 15px; font-weight: 700; color: #474747; }
.eb-aa .seg3 { display: flex; gap: 8px; padding: 0; background: none; border-radius: 0; }
.eb-aa .seg3 button { flex: 1; height: 54px; border-radius: 12px; border: 1.5px solid #e4e3df; background: #fff; color: #191919; font-weight: 700; font-family: 'Nanum Myeongjo', 'AppleMyungjo', serif; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.eb-aa .seg3 button.on { border: 2px solid var(--brand); color: var(--brand); }
.eb-aa .seg3.bg button { font-family: Pretendard, sans-serif; font-size: 15px; }
.eb-aa .seg3.bg i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #d6d3cb; }
.eb.bg-cream, .eb.bg-cream.is-cover { background: #f3ecd9 !important; }
.eb.bg-dark { background: #24231f !important; }
.eb.bg-dark .eb-page { color: #d9d4c8; }
.eb.bg-dark .eb-text h2, .eb.bg-dark .eb-chap b, .eb.bg-dark .eb-cover b, .eb.bg-dark .eb-toc .row b, .eb.bg-dark .eb-end .q { color: #e6e1d6; }
/* R4 차례: 줄을 누르면 책 보기, 오른쪽 '고치기'는 이 쪽 고치기 */
.r4-ch { gap: 12px; }
.r4-ch .go { flex: 1; min-width: 0; display: flex; align-items: center; min-height: 64px; }
.r4-ch .fix { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; background: #f1f0ec; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: var(--text-2); }
.btn.block.rq-demo { width: auto; }
.rv-list > .rv-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 72px; padding: 14px 0; border: 0; border-bottom: 1px solid #efede7; background: none; text-align: left; color: inherit; font: inherit; }
.rv-list > .rv-row > svg { color: var(--text-3); }

/* T3 끝까지 읽은 뒤: 3D 하트 '마음에 남았어요' 하나 + 작은 글자 '그저 그랬어요' */
.te-love { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 22px; }
.te-love .love { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 999px; border: 0; background: #f1f0ec; font-size: 18px; font-weight: 700; color: var(--text); }
.te-love .love img { width: 30px; height: 30px; }
.te-love .love.on { background: #fdf0ee; color: #b4382a; }
.te-love .meh { padding: 8px 6px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--text-3); text-decoration: underline; text-underline-offset: 4px; }
.te-love .meh.on { color: var(--text-2); }

/* C3e 마음정돈 설정: 고른 줄 왼쪽 세로 막대 대신 동그라미 → 녹색 체크 */
.cm-radio .cm-opt, .cl .cm-radio .cm-opt { position: relative; padding-left: 40px !important; box-shadow: none !important; }
.cm-radio .cm-opt::before { content: ""; position: absolute; left: 2px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; box-sizing: border-box; border: 2px solid #94928b; }
.cm-radio .cm-opt.on::before { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* 전자책 옅은 글자 진하게(2026-10-24, 종이 4.9:1) */
.eb-seal, .eb-toc .hd, .eb-toc .row .no, .eb-toc .row .ln, .eb-chap .no, .eb-chap .sub, .eb-text .kick, .eb-text .src, .eb-end .st, .eb-back .msg, .eb-cover .sub, .eb-num { color: #726d63; }

/* review-1024 */
/* 전체 화면 검토 반영(2026-10-24). 고르기 상자: 흰 바탕 테두리 → 연한 회색 채움, 고르면 연한 녹색 칸에 녹색 테두리 */
.ja-opts button:not(.on), .jw-ways button:not(.on), .sx-places button:not(.on), .fsize button:not(.on), .sug:not(.on) { background: #f1f0ec; border-color: #f1f0ec; }
.ja-opts button.on, .jw-ways button.on { background: var(--brand-wash); }
.ja-opts button i, .jw-ways button i { background: #ffffff; }
/* 흰 테두리 작은 단추 → 테두리 없는 흰 단추(색 있는 칸 위) */
.ta-save:not(.on), .cy-guide .go { border-color: transparent; }
/* 칩 → 글자 탭(T9 지관 소식, R10 담은 문장) */
.tc-chips { display: flex; gap: 24px; border-bottom: 1px solid var(--line); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tc-chips .chip, .tc-chips .chip.on { height: 48px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 18px; font-weight: 600; color: var(--text-3); box-shadow: inset 0 -3px 0 transparent; }
.tc-chips .chip.on { color: var(--text); font-weight: 800; box-shadow: inset 0 -3px 0 #191919; }
/* 옅은 글자 */
.tc-n { color: #6b6b6b; }
.jd-kws a span { color: inherit; }
.tb-q .k, .tb-ago .k, .rc-today .k, .tc-week > .k, .te-saved .k, .tl-now .k, .rs-card .k, .tc-len { color: #7d5f34; }
.eb-cover .sub, .eb-seal { color: #66615a; }
/* 검색 홈 슬라이드: 소개 글은 책 상세로, 홈에서는 책 속 한 문장까지만 */
.bslide.nb .sum { display: none; }
/* levels-1025 */
.cy-who img, .br-item .by img, .br-meta img, .br-author .lv img { width: 24px; height: 24px; flex: none; margin: -3px 2px -3px 0; vertical-align: middle; object-fit: contain; }
.br-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.br-item .by, .cy-who, .br-author .lv { display: inline-flex; align-items: center; gap: 4px; }
.rc-score .num.badge3 { align-items: flex-end; }
.rc-score .num.badge3 img { width: 52px; height: 52px; margin: -16px 0 2px 0; }

/* values-1025 */
.br-r2 .rl-vals .v { grid-template-columns: 96px minmax(0, 1fr) auto; }
.br-r2 .rl-vals .d { grid-column: 1 / 4; padding-left: 40px; }
.rl-vals .n { display: inline-flex; align-items: center; gap: 8px; }
.rl-vals .n img, .rl-ways .n small img { flex: none; object-fit: contain; }
.rl-vals .n img { width: 32px; height: 32px; margin: -4px 0; }
.rl-ways .n small { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.rl-ways .n small img { width: 22px; height: 22px; }
.br-r2 .rl-log img.vlog { display: block; width: 32px; height: 32px; object-fit: contain; margin-right: 4px; }
.rc-vals { display: flex; gap: 6px; margin-top: 2px; }
.rc-vals img { width: 26px; height: 26px; object-fit: contain; }
.rc-vals img.off { opacity: .3; filter: grayscale(1); }
img.vi { width: 28px; height: 28px; object-fit: contain; flex: none; margin: -4px 6px -4px 0; vertical-align: middle; }
img.vs { width: 22px; height: 22px; object-fit: contain; margin: -3px 3px -3px 0; vertical-align: middle; }