/* 저장고 방(rooms.js·desk.js) — recent.design 식 구성: 왼쪽 사이드바 + 큰 제목·한 줄 설명 + 알약 필터 + 카드 그리드.
   밤 도시에 맞춘 어두운 바탕, 노을빛 포인트, 제목은 Instrument Serif. */
#lsRoom {
  --bg: #0b0a0d; --panel: #121115; --card: #17161b; --card-h: #1d1c22; --line: #ffffff12; --line-h: #ffffff26;
  --ink: #f2eee8; --dim: #8e8892; --c: #ffb08a; --c2: #ff7d6b;
  overflow: hidden auto; overscroll-behavior: contain; color: var(--ink); color-scheme: dark;
  font: 15px/1.55 Inter, "Pretendard Variable", Pretendard, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 520px at 85% -10%, #ff8a5c1f, transparent 60%), radial-gradient(900px 600px at -10% 110%, #6b4bff14, transparent 60%), var(--bg);
}
.rm-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100dvh / var(--z, 1)); zoom: var(--z, 1); animation: rm-in .5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rm-in { from { opacity: 0; scale: .985; filter: blur(4px); } }

/* 사이드바 */
.rm-side { position: sticky; top: 0; height: calc(100dvh / var(--z, 1)); box-sizing: border-box; display: flex; flex-direction: column; gap: 26px; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); border-right: 1px solid var(--line); }
.rm-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.rm-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 700 13px/1 Inter, sans-serif; letter-spacing: -.02em; }
.rm-nav { display: flex; flex-direction: column; gap: 2px; }
.rm-nav h2 { margin: 0 0 6px; font: 500 12px/1 Inter, sans-serif; color: #6d6872; }
.rm-nav a { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--dim); text-decoration: none; font-size: 15px; transition: color .2s, translate .25s; }
.rm-nav a:hover { color: var(--ink); translate: 3px 0; }
.rm-nav a[aria-current="page"] { color: var(--ink); }
.rm-nav a[aria-current="page"]::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.rm-lock { display: inline-flex; margin-left: auto; opacity: .55; }
.rm-lock svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.rm-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.rm-side-foot p { display: flex; align-items: center; gap: 8px; margin: 0; }
.rm-dot { width: 7px; height: 7px; border-radius: 50%; background: #6d6872; }
.rm-dot.on { background: #7be3a5; box-shadow: 0 0 10px #7be3a5aa; }
.rm-side-foot a { color: var(--ink); text-decoration: none; }
.rm-side-foot a:hover { color: var(--c); }

/* 본문 */
.rm-main { box-sizing: border-box; min-width: 0; padding: 20px clamp(18px, 3vw, 40px) calc(64px + env(safe-area-inset-bottom)); }
.rm-main.enter .rm-head, .rm-main.enter .rm-bar { animation: rm-up .55s cubic-bezier(.2, .7, .2, 1) both; }
.rm-main.enter .rm-bar { animation-delay: .06s; }
@keyframes rm-up { from { opacity: 0; translate: 0 14px; } }
.rm-head { margin-bottom: 22px; }
.rm-crumb { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: 13px; color: var(--dim); }
.rm-crumb button { padding: 6px 0; border: 0; background: none; color: var(--dim); font: inherit; cursor: pointer; }
.rm-crumb button:hover { color: var(--ink); }
.rm-close { display: grid; place-items: center; width: 38px; height: 38px; padding: 0 !important; border-radius: 50% !important; border: 1px solid var(--line) !important; font-size: 20px !important; line-height: 1; transition: background .2s, color .2s, rotate .3s; }
.rm-close:hover { background: var(--ink) !important; color: var(--bg) !important; rotate: 90deg; }
.rm-title { display: inline; margin: 0; font: 400 clamp(40px, 5.4vw, 68px)/1.02 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; overflow-wrap: anywhere; outline: none; }
.rm-sub { display: inline; margin: 0 0 0 14px; color: var(--dim); font-size: 15px; vertical-align: .55em; }
.rm-meta { margin: 0 0 18px; font: 12px/1.4 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .04em; color: var(--dim); }
.rm-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: #ffb08a14; color: var(--c); font-size: 14px; }

/* 알약 필터 + 행동 버튼 */
.rm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px; }
.rm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-pills button { padding: 8px 15px; border: 0; border-radius: 999px; background: #ffffff0d; color: var(--dim); font: 500 14px/1 inherit; cursor: pointer; transition: background .2s, color .2s; }
.rm-pills button:hover { background: #ffffff1a; color: var(--ink); }
.rm-pills button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.rm-pills.soft button[aria-pressed="true"] { background: #ffb08a26; color: var(--c); }
.rm-bar .rm-tools { margin: 0 0 0 auto; }
.rm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.rm-btn { padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 600 14px/1 inherit; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s; }
.rm-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px #ffb08a26; }
.rm-btn.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-h); }
.rm-btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.rm-btn.danger { color: var(--c2); box-shadow: inset 0 0 0 1px #ff7d6b55; }
.rm-btn.sm { padding: 8px 13px; font-size: 13px; }
.rm-btn:disabled { opacity: .45; cursor: wait; transform: none; }
.rm-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* 카드 그리드(달로 묶음) — 높이가 제각각인 메이슨리 */
.rm-group-h { display: flex; align-items: baseline; gap: 10px; margin: 34px 0 14px; font: 400 28px/1.1 "Instrument Serif", Georgia, serif; }
.rm-body > .rm-bar + .rm-group-h, .rm-body > .rm-group-h:first-child { margin-top: 6px; }
.rm-group-h small { font: 12px Inter, sans-serif; color: var(--dim); }
.rm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: start; } /* 왼→오른쪽 순서(날짜 순서가 섞이지 않게) */
.rm-card { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer; overflow: hidden;
  animation: rm-card .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(min(var(--i, 0), 14) * 35ms); transition: background .25s, border-color .25s, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
@keyframes rm-card { from { opacity: 0; translate: 0 18px; } }
.rm-card:hover { background: var(--card-h); border-color: var(--line-h); transform: translateY(-3px); box-shadow: 0 18px 40px #0008; }
.rm-card.static { cursor: default; }
.rm-card.static:hover { transform: none; box-shadow: none; }
.rm-card-img { display: block; width: calc(100% + 32px); max-width: none; margin: -16px -16px 0; aspect-ratio: 16 / 10; object-fit: cover; background: #222; transition: scale .6s cubic-bezier(.2, .7, .2, 1); }
.rm-card:hover .rm-card-img { scale: 1.03; }
.rm-card-big { font: 400 76px/.9 "Instrument Serif", Georgia, serif; letter-spacing: -.02em; color: var(--ink); }
.rm-card.date { background: linear-gradient(160deg, #1d1a1f, #17161b 60%); }
.rm-card-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rm-card-main b { font-weight: 600; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.rm-card-main small { color: var(--dim); font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rm-card-foot { display: flex; justify-content: space-between; align-items: center; min-height: 30px; }
.rm-card-foot time { font: 12px ui-monospace, Consolas, monospace; color: var(--dim); }
.rm-card-foot time.new { padding: 4px 9px; border-radius: 999px; background: var(--c); color: #1a0f0a; font: 600 11px Inter, sans-serif; letter-spacing: .04em; }
.rm-arrow { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffffff14; transition: background .25s, rotate .35s; }
.rm-arrow svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.rm-card:hover .rm-arrow { background: var(--ink); rotate: 45deg; }
.rm-card:hover .rm-arrow svg { stroke: var(--bg); }
.rm-card.skel { height: 160px; cursor: default; background: linear-gradient(100deg, #17161b 30%, #1f1e24 50%, #17161b 70%) 0 0 / 300% 100%; animation: rm-card .6s both, rm-shim 1.4s linear infinite; }
.rm-card.skel:nth-child(3n+2) { height: 230px; } .rm-card.skel:nth-child(3n) { height: 120px; }
@keyframes rm-shim { to { background-position: -300% 0; } }
.rm-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-h); background: none; cursor: pointer; }
.rm-check[aria-pressed="true"] { background: var(--c) radial-gradient(circle, var(--bg) 0 3px, transparent 3.5px); border-color: var(--c); }

/* 빈 화면·오류 */
.rm-state { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 70px 0; text-align: center; color: var(--dim); }
.rm-state p { margin: 0; max-width: 320px; }
.rm-orb { width: 86px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd2b8, #ff8a5c 45%, #6b3bff00 72%); filter: blur(.5px); opacity: .75; animation: rm-float 5s ease-in-out infinite; }
.rm-orb.bad { background: radial-gradient(circle at 35% 30%, #ffc0b5, #ff5d4d 45%, transparent 72%); }
@keyframes rm-float { 50% { translate: 0 -8px; } }

/* 읽기 화면 */
.rm-read { max-width: 760px; }
.rm-text { margin: 0 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.8; color: #e6e1da; }
.rm-img { display: block; max-width: 100% !important; margin: 0 0 18px; border-radius: 14px; background: #fff; }
.rm-file { display: block; padding: 14px 16px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; transition: border-color .2s; }
.rm-file:hover { border-color: var(--c); }
.rm-frame { display: block; width: 100%; height: 70vh; margin: 0 0 18px; border: 0; border-radius: 16px; background: #fff; }
.rm-sec { margin: 30px 0 12px; font: 400 22px "Instrument Serif", serif; color: var(--c); }
.rm-story { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.rm-story a, .rm-story b { color: var(--ink); font-weight: 600; text-decoration: none; }
.rm-story p { margin: 6px 0; color: #c8c2ba; font-size: 14px; }
.rm-story small { color: var(--dim); font-size: 12px; }
.rm-video { position: relative; aspect-ratio: 16 / 9; width: min(94%, 1500px); margin: 0 0 18px; border-radius: 16px; overflow: hidden; background: #000; }
.rm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rm-main.wide .rm-read { max-width: none; }
.rm-tool { display: block; width: 100%; height: calc(100dvh / var(--z, 1) - 220px); min-height: 480px; border: 0; border-radius: 16px; background: transparent; }

/* 폼 */
.rm-form { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.rm-form label { display: flex; flex-direction: column; gap: 8px; }
.rm-form label span { font-size: 13px; color: var(--dim); }
.rm-form input, .rm-form textarea, .rm-inline input, .rm-guest-form input, .rm-guest-form textarea, .rm-move select {
  box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font: inherit; outline: none; resize: vertical; transition: border-color .2s, background .2s; }
.rm-form textarea { line-height: 1.7; }
.rm-form input:focus, .rm-form textarea:focus, .rm-inline input:focus, .rm-guest-form input:focus, .rm-guest-form textarea:focus { border-color: var(--c); background: #16151a; }
.rm-extra { display: flex; flex-direction: column; gap: 12px; }
.rm-extra .rm-tools { margin: 0; }
.rm-inline { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.rm-inline input { flex: 1 1 160px; width: auto; }
.rm-atts:empty { display: none; }
.rm-att { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.rm-att.new span { color: var(--c); }
.rm-att button, .rm-x { flex-shrink: 0; padding: 6px 12px; border: 1px solid #ff7d6b44; border-radius: 999px; background: none; color: var(--c2); font: 12px/1 inherit; cursor: pointer; }
.rm-pad { display: flex; flex-direction: column; gap: 10px; }
.rm-pad[hidden] { display: none; }
.rm-padbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #ffffff22; background: var(--sw); cursor: pointer; }
.rm-sw[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px #ffb08a55; }
.rm-size { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
.rm-size input { width: 90px; accent-color: var(--c); }
#lsRoom[aria-busy] .rm-canvas { pointer-events: none; opacity: .7; }
.rm-hint { margin: 0; padding: 8px 0; font-size: 13px; color: var(--dim); list-style: none; }
.rm-canvas { width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; background: #fff; touch-action: none; cursor: crosshair; }
.rm-move { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 13px; color: var(--dim); }
.rm-move select { width: auto; border-radius: 999px; }
.rm-list { list-style: none; margin: 0; padding: 0; }
.rm-list li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.rm-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 13px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; border-radius: 10px; transition: background .15s; }
.rm-row:hover { background: #ffffff08; }
.rm-row.static { cursor: default; background: none; }
.rm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-row-main b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-row-main small { font-size: 13px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-thumb { width: 88px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #222; }
.rm-yt .rm-row-main b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* 설정: 코드 */
.rm-code-box:empty { display: none; }
.rm-code-box .rm-meta { margin: 8px 0 0; }
.rm-code { margin: 6px 0 4px; font: 400 clamp(40px, 9vw, 64px)/1.1 "Instrument Serif", serif; letter-spacing: .1em; color: var(--ink); text-shadow: 0 0 30px #ffb08a55; }
.rm-codes { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font: 500 17px/1.6 ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.rm-steps { margin: 0 0 20px; padding-left: 20px; color: #e0dad3; line-height: 1.9; }

/* 방명록 */
.rm-guest-form { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 0 30px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(160deg, #1c1820, #141317); }
.rm-guest-row { display: flex; gap: 8px; }
.rm-guest-row input { flex: 1; }
.rm-grid.notes { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.rm-card.note { cursor: default; gap: 14px; }
.rm-card.note:hover { transform: none; box-shadow: none; }
.rm-card-quote { margin: 0; font: 400 22px/1.35 "Instrument Serif", Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-card.note footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--dim); }
.rm-card.note footer b { color: var(--ink); font-weight: 500; }
.rm-card.note .rm-x { position: absolute; top: 10px; right: 10px; padding: 4px 9px; }

/* 서재 책상(desk.js)을 같은 톤으로 */
#lsRoom .dk-switch { border-color: var(--line); }
#lsRoom .dk-switch a[aria-current="page"], #lsRoom .dk-day.sel, #lsRoom .dk-cell.sel, #lsRoom .dk-put { background: var(--ink); color: var(--bg); }
#lsRoom .dk-bar { border-color: var(--line-h); background: #141317f2; box-shadow: 0 16px 40px #000a; }
#lsRoom .dk-bar.glow { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 30px #ffb08a44; }
#lsRoom .dk-dock { background: linear-gradient(transparent, var(--bg) 40%); margin-left: calc(-1 * clamp(18px, 3vw, 40px)); margin-right: calc(-1 * clamp(18px, 3vw, 40px)); padding-left: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px); }
#lsRoom .dk-line, #lsRoom .dk-offer { border-color: var(--line-h); background: var(--panel); }
#lsRoom .dk-monthbtn { font: 400 30px/1 "Instrument Serif", serif; color: var(--ink); }
#lsRoom .dk-day b { font: 400 22px/1 "Instrument Serif", serif; }
#lsRoom .dk-todo-text { color: var(--ink); }
#lsRoom .dk-note .rm-btn:not(.ghost) { background: #1a1612; color: #fff; }
#lsRoom .dk-toast { background: var(--ink); color: var(--bg); }
#lsRoom .dk-toast button { background: var(--bg); color: var(--ink); }
#lsRoom button:focus-visible, #lsRoom a:focus-visible { outline: 1px solid var(--c); outline-offset: 3px; }

/* 칸 사이를 옮길 때(View Transitions) — 부드럽게 겹쳐 바뀜 */
::view-transition-old(root) { animation: rm-vt-out .28s ease both; }
::view-transition-new(root) { animation: rm-vt-in .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rm-vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes rm-vt-in { from { opacity: 0; translate: 0 10px; } }

/* 좁은 화면: 사이드바 → 위쪽 가로 줄 */
@media (max-width: 860px) {
  .rm-shell { grid-template-columns: 1fr; }
  .rm-side { position: sticky; z-index: 3; height: auto; flex-direction: row; align-items: center; gap: 16px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; border: 0; border-bottom: 1px solid var(--line); background: #0b0a0df0; backdrop-filter: blur(12px); overflow-x: auto; scrollbar-width: none; }
  .rm-side::-webkit-scrollbar { display: none; }
  .rm-brand span:last-child, .rm-nav h2, .rm-side-foot { display: none; }
  .rm-nav { flex-direction: row; gap: 4px; }
  .rm-nav a { flex-shrink: 0; padding: 7px 12px; border-radius: 999px; background: #ffffff0b; font-size: 14px; white-space: nowrap; }
  .rm-nav a:hover { translate: none; }
  .rm-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
  .rm-nav a[aria-current="page"]::after { display: none; }
  .rm-title { display: block; }
  .rm-sub { display: block; margin: 8px 0 0; vertical-align: 0; }
  .rm-bar .rm-tools { margin-left: 0; }
  .rm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .rm-card { padding: 14px; border-radius: 16px; }
  .rm-card-img { width: calc(100% + 28px); margin: -14px -14px 0; }
  .rm-card-big { font-size: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .rm-shell, .rm-card, .rm-main.enter .rm-head, .rm-main.enter .rm-bar, .rm-orb { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
.rm-pills + .rm-pills.soft { flex-basis: 100%; order: 3; } /* 탭(브리프·방명록) 아래 줄에 달 칩 */
.rm-pills.soft button { padding: 6px 12px; font-size: 13px; }

/* 모닝 브리프 읽기: 섹션은 가로줄(왼쪽 번호·이름, 오른쪽 카드 그리드) — 21:9에서 옆으로 넓게 읽힘 */
.bf-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -6px 0 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--dim); font: 12px/1.4 ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.bf-top .rm-readbar { margin: 0; }
.bf { display: grid; gap: 34px; }
.bf-sec { display: grid; grid-template-columns: minmax(170px, 15%) 1fr; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid var(--line); animation: rm-up .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * .07s) both; }
.bf-sec:last-child { border-bottom: 0; }
.bf-sec > header { position: sticky; top: 20px; align-self: start; }
.bf-sec > header span { display: block; color: var(--c); font: 12px ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .1em; }
.bf-sec > header h3 { margin: 6px 0 4px; color: var(--ink); font: 400 28px/1.15 "Instrument Serif", "Noto Serif KR", serif; word-break: keep-all; }
.bf-sec > header small { color: var(--dim); font-size: 12px; }
.bf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.bf-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; transition: background .25s, border-color .25s, transform .25s; word-break: keep-all; }
a.bf-card:hover, a.bf-card:focus-visible { background: var(--card-h); border-color: var(--line-h); transform: translateY(-2px); outline: none; }
.bf-card small { color: var(--dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.bf-card h4 { margin: 0; font: 600 16px/1.45 Inter, "Pretendard", "Malgun Gothic", sans-serif; }
.bf-card p { margin: 0; color: #bdb6ad; font-size: 13.5px; line-height: 1.65; }
.bf-card.lead { grid-column: span 2; background: linear-gradient(140deg, #2a1d1a, var(--card) 60%); border-color: #ffb08a33; }
.bf-card.lead h4 { font-size: 23px; line-height: 1.35; }
.bf-card.lead p { font-size: 15px; }
.bf-card.tone { border-left: 3px solid var(--t); }
.bf-card.tone h4::before { content: var(--m); margin-right: 8px; color: var(--t); font-size: 12px; vertical-align: 2px; }
.bf-card.up { --t: #5fd49a; --m: "▲"; } .bf-card.down { --t: #ff7d6b; --m: "▼"; } .bf-card.flat { --t: #ffc56b; --m: "●"; }
.bf-card.note { color: var(--dim); font-size: 13px; border-style: dashed; background: none; }
@media (max-width: 860px) {
  .bf-sec { grid-template-columns: 1fr; gap: 14px; }
  .bf-sec > header { position: static; }
  .bf-card.lead { grid-column: auto; }
  .bf-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bf-sec { animation: none; } }

/* 배율을 키운 큰 화면에서 사이드바가 화면보다 길면 스크롤(맨 아래 'Back to the city'가 잘리지 않게) */
.rm-side { overflow-y: auto; scrollbar-width: none; }
@media (max-height: 1000px) and (min-width: 1500px) { .rm-side { gap: 16px; } }

/* 연습 도구(iframe)를 열면 머리를 줄여 도구가 화면 높이를 거의 다 씀(스크롤 없이 보이게) */
.rm-main:has(.rm-tool) { padding-bottom: 14px; }
.rm-main:has(.rm-tool) .rm-head { margin-bottom: 10px; }
.rm-main:has(.rm-tool) .rm-crumb { min-height: 30px; }
.rm-main:has(.rm-tool) .rm-title { font-size: clamp(32px, 3.4vw, 46px); }
.rm-main:has(.rm-tool) .rm-tool { height: calc(100dvh / var(--z, 1) - 132px); min-height: 360px; }
.rm-player { margin: 0 0 18px; }
.rm-player .rm-video { margin-bottom: 10px; }
.rm-ytlink { display: inline-flex; text-decoration: none; }
.rm-main[data-room="briefing"] { zoom: .9; } /* 모닝 브리프는 글이 많아 한 단계 작게 */