/* LiveLlike — screens/screens.css
 *
 * 화면별 모양. 색·간격·글자는 tokens.css 에서만 읽는다 (§4). 공용 부품은 common/ui.css 다.
 * 원칙: 그림이 앞에 서고 크롬은 물러난다 · 색은 라일락 하나 · 영문 눈금(.ll-micro)은 섹션의 표지로만.
 */

/* ════════ 공고판 (home) ════════════════════════════════════════════ */
.ll-micro { color: var(--ll-fg-dim); }

/* 이어서 살기 */
.ll-cont { margin: 10px 0 8px; }
.ll-cont__t { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font: var(--ll-t-h3); letter-spacing: var(--ll-track-tight); }
.ll-cont__row {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  padding: 2px var(--ll-sp-4) 6px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ll-sp-4);
  --ll-wide-ok: 1;
}
.ll-cont__row::-webkit-scrollbar { display: none; }
.ll-contcard {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; align-items: center; gap: 12px;
  width: 272px; padding: 12px 14px; border-radius: var(--ll-r-lg);
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  text-align: left; transition: transform var(--ll-d-fast) ease, background var(--ll-d-fast) ease;
}
.ll-contcard:hover { background: var(--ll-surface-2); }
.ll-contcard:active { transform: scale(0.98); }
.ll-contcard__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ll-contcard__t b { font: 660 14.5px/1.35 var(--ll-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-contcard__t small { font: var(--ll-t-meta); color: var(--ll-fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-contcard__n { flex: 0 0 auto; align-self: flex-start; font: 700 11px/1 var(--ll-font); color: var(--ll-key); letter-spacing: 0.04em; }

/* 크게 세운 공고 — 옆으로 넘긴다 */
.ll-feats { margin: 12px 0 30px; }
.ll-feats__rail {
  display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--ll-sp-4) 4px; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ll-sp-4);
  --ll-wide-ok: 1;
}
.ll-feats__rail::-webkit-scrollbar { display: none; }
/* 카드 키는 남은 높이를 넘지 않는다 — 상단바 · 레일 여백 · 하단 탭 바를 뺀 만큼. 가로(640×360)에서 4:5 그대로면
   카드가 525px 이라 제목 · '살아보기' 가 탭 바 밑으로 들어갔다 (S7 Dan-DevQA 10-14 · `npm run tabbar` 가 잰다) */
.ll-feat {
  position: relative; flex: 0 0 84%; max-width: 420px; aspect-ratio: 4 / 5; scroll-snap-align: start;
  max-height: calc(100vh - var(--ll-top-h) - var(--ll-tab-h) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: calc(100dvh - var(--ll-top-h) - var(--ll-tab-h) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 200px;
  border-radius: var(--ll-r-xl); overflow: hidden; cursor: pointer;
  box-shadow: var(--ll-shadow-2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: llRise var(--ll-d-slow) var(--ll-ease) both;
}
.ll-feat > .ll-cover { position: absolute; inset: 0; transition: transform 0.8s var(--ll-ease); }
.ll-feat:hover > .ll-cover { transform: scale(1.03); }
.ll-feat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ll-deep-rgb), 0.35) 0%, rgba(var(--ll-deep-rgb), 0) 26%, rgba(var(--ll-deep-rgb), 0.1) 44%, rgba(var(--ll-deep-rgb), 0.92) 100%); }
.ll-feat__top { position: absolute; top: 16px; left: 18px; right: 18px; }
.ll-feat__top .ll-micro { color: rgba(255, 255, 255, 0.82); }
.ll-feat__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px 18px; display: flex; flex-direction: column; gap: 8px; word-break: keep-all; overflow-wrap: anywhere; }
.ll-feat__co { display: flex; align-items: center; gap: 9px; font: 600 13px/1.3 var(--ll-font); color: rgba(255, 255, 255, 0.86); min-width: 0; }
.ll-co { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-co i { font-style: normal; margin: 0 5px; opacity: 0.5; }
.ll-by { color: var(--ll-fg-dim); font-weight: 500; }
.ll-feat__title { font: 780 26px/1.24 var(--ll-font); letter-spacing: -0.035em; color: #fff; }
.ll-feat__hook { font: 450 14.5px/1.55 var(--ll-font); color: rgba(255, 255, 255, 0.78); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ll-feat__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ll-feat__cast { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 12.5px/1 var(--ll-font); color: rgba(255, 255, 255, 0.75); }
/* '등장인물 4' 는 한 줄이다 — 글꼴 130% 에서 얼굴 넷 · 버튼에 밀려 세 줄로 접혔다(S7 font13). 모자라면 글자 대신
   얼굴이 물러난다: 스택이 줄어들면 넘친 얼굴은 둘째 줄로 넘어가 잘린다(반쯤 잘린 얼굴이 남지 않는다) */
.ll-feat__cast > span:last-child { flex: 0 0 auto; white-space: nowrap; }
.ll-feat__cast .ll-stack { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 4px; height: 30px; padding: 2px; margin: -2px; overflow: hidden; --ll-wide-ok: 1; }
.ll-feat__foot .ll-btn { flex: 0 0 auto; white-space: nowrap; }
.ll-feat__cast .ll-ava { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 2px rgba(var(--ll-deep-rgb), 0.9); }
.ll-feats__ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.ll-feats__dots { display: flex; justify-content: center; gap: 6px; }
.ll-feats__dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); transition: width var(--ll-d) var(--ll-ease), background var(--ll-d) ease; }
.ll-feats__dots i.is-on { width: 18px; background: var(--ll-fg); }

/* 채용 중인 삶 */
.ll-board { margin-top: 6px; }
.ll-board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ll-board__micro { margin-bottom: 6px; }
.ll-board__title { font: var(--ll-t-h1); letter-spacing: var(--ll-track-tight); }
.ll-board__n { font: 600 13px/1 var(--ll-font); color: var(--ll-fg-dim); padding-bottom: 4px; }
.ll-search {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 0 14px; min-height: 48px; border-radius: var(--ll-r-md);
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  color: var(--ll-fg-dim);
  transition: border-color var(--ll-d-fast) ease, background var(--ll-d-fast) ease;
}
.ll-search:focus-within { border-color: var(--ll-key-line); background: var(--ll-surface-2); }
.ll-search input { flex: 1 1 auto; min-width: 0; height: 46px; border: 0; background: transparent; font-size: 16px; color: var(--ll-fg); }
.ll-search input::placeholder { color: var(--ll-fg-faint); }
.ll-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.ll-board .ll-chips { margin-bottom: 18px; }

.ll-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ll-grid__full { grid-column: 1 / -1; }

/* 공고 카드 — 왼쪽 세로 그림 · 오른쪽 공고 */
.ll-post {
  display: flex; gap: 14px; padding: 12px; border-radius: var(--ll-r-lg); min-width: 0;
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  cursor: pointer;
  transition: transform var(--ll-d) var(--ll-ease), background var(--ll-d) ease, border-color var(--ll-d) ease;
  animation: llRise var(--ll-d-slow) var(--ll-ease) both;
}
.ll-post:hover { background: var(--ll-surface-2); border-color: var(--ll-line-strong); }
/* 누름 표시는 transform 이 아니라 scale 로 — 등장 애니메이션(both)이 transform 을 쥐고 있어서 안 보였다 */
.ll-post:active { scale: 0.99; }
.ll-post__art { position: relative; flex: 0 0 96px; width: 96px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; align-self: flex-start; }
.ll-post__art .ll-cover { position: absolute; inset: 0; }
.ll-post__living { position: absolute; left: 6px; bottom: 6px; background: rgba(var(--ll-deep-rgb), 0.72); -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass); }
.ll-post__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ll-post__co { display: flex; align-items: center; gap: 7px; min-width: 0; font: 550 12.5px/1.3 var(--ll-font); color: var(--ll-fg-mid); }
.ll-post__co .ll-logo { border-radius: 6px; }
.ll-post__title { font: 720 16.5px/1.35 var(--ll-font); letter-spacing: -0.025em; }
.ll-post__hook { font: 420 13.5px/1.55 var(--ll-font); color: var(--ll-fg-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ll-post__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.ll-post__cast { display: flex; align-items: center; gap: 7px; min-width: 0; font: 550 12px/1 var(--ll-font); color: var(--ll-fg-dim); }
.ll-post__cast .ll-ava { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 0 2px var(--ll-surface); }
.ll-post__stat { display: inline-flex; align-items: center; gap: 4px; color: var(--ll-fg-mid); }
.ll-post__stat span { margin-right: 6px; }
.ll-post__cta { flex: 0 0 auto; }

.ll-makes { display: grid; gap: 10px; margin-top: 34px; }
.ll-make {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; border-radius: var(--ll-r-lg); text-align: left;
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  transition: background var(--ll-d-fast) ease, border-color var(--ll-d-fast) ease;
}
.ll-make:hover { background: var(--ll-surface-2); border-color: var(--ll-line-strong); }
.ll-make > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ll-make b { font: var(--ll-t-h3); letter-spacing: var(--ll-track-tight); }
.ll-make small { font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-make__i { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ll-key-soft); color: var(--ll-key); }
.ll-make__go { color: var(--ll-fg-dim); flex: 0 0 auto; }

.ll-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 44px 0 16px; text-align: center; font: 12px/1.7 var(--ll-font); color: var(--ll-fg-dim); }
.ll-foot .ll-mark { opacity: 0.7; margin-bottom: 6px; }
.ll-foot__biz { max-width: 34em; font-size: 11px; line-height: 1.6; word-break: keep-all; }
.ll-foot a { color: var(--ll-fg-mid); position: relative; text-decoration: none; }
.ll-foot a::before { content: ""; position: absolute; inset: -14px -2px; }

/* ════════ 공고 상세 (job · card) ═══════════════════════════════════ */
.ll-top--float { position: fixed; left: 0; right: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
/* 떠 있는 머리는 is-solid 전까지 투명하다 — 조금만 굴려도 공용 .is-scrolled 가 히어로 위를 칠했다 */
.ll-top--float.is-scrolled:not(.is-solid) { background: transparent; border-bottom-color: transparent; }
.ll-top--float.is-solid { background: rgba(var(--ll-bg-rgb), 0.95); -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass); border-bottom-color: var(--ll-line); }
.ll-top--float.is-solid .ll-iconbtn--glass { background: transparent; border-color: transparent; }
.ll-top__title--fade { opacity: 0; transform: translateY(4px); transition: opacity var(--ll-d) ease, transform var(--ll-d) var(--ll-ease); }
.ll-top--float.is-solid .ll-top__title--fade { opacity: 1; transform: none; }
.ll-top--float .ll-top__in { justify-content: space-between; }

.ll-hero { position: relative; min-height: 460px; height: 72vh; max-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.ll-hero > .ll-cover { position: absolute; inset: 0; }
.ll-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ll-bg-rgb), 0.5) 0%, rgba(var(--ll-bg-rgb), 0) 22%, rgba(var(--ll-bg-rgb), 0.15) 45%, rgba(var(--ll-bg-rgb), 0.9) 82%, var(--ll-bg) 100%); }
.ll-hero__body { position: relative; padding: 0 var(--ll-sp-4) 10px; display: flex; flex-direction: column; gap: 10px; animation: llRise var(--ll-d-slow) var(--ll-ease) both; }
.ll-hero__micro { color: var(--ll-key); }
.ll-hero__co { display: flex; align-items: center; gap: 11px; }
.ll-hero__co b { display: block; font: 680 15px/1.3 var(--ll-font); color: #fff; }
.ll-hero__co span { font: var(--ll-t-meta); color: rgba(255, 255, 255, 0.66); }
.ll-hero__title { font: 800 32px/1.2 var(--ll-font); letter-spacing: -0.04em; color: #fff; }
.ll-hero__hook { font: 450 16px/1.6 var(--ll-font); color: rgba(255, 255, 255, 0.84); max-width: 30em; }
.ll-hero__stat { display: flex; align-items: center; gap: 4px; font: 600 12.5px/1 var(--ll-font); color: var(--ll-key); }
.ll-hero__stat span { margin-right: 8px; }
.ll-hero__stat[hidden] { display: none; }
.ll-hero__by { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: var(--ll-t-meta); color: rgba(255, 255, 255, 0.7); }
.ll-hero__by b { color: #fff; font-weight: 650; }
.ll-hero__by .ll-ava { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

.ll-jobbody { position: relative; padding: 0 var(--ll-sp-4) calc(120px + env(safe-area-inset-bottom)); }
.ll-sec { margin-top: 34px; animation: llRise var(--ll-d-slow) var(--ll-ease) both; }
.ll-sec--last { margin-bottom: 20px; }
.ll-sec__t { display: block; margin-bottom: 14px; font: var(--ll-t-h2); letter-spacing: var(--ll-track-tight); color: var(--ll-fg); }
.ll-sec__t .ll-micro { display: block; margin-bottom: 6px; color: var(--ll-fg-dim); }
.ll-sec__t small { font: 600 13px/1 var(--ll-font); color: var(--ll-fg-dim); margin-left: 4px; }
.ll-sec__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.ll-sec__row .ll-sec__t { margin: 0; }
.ll-situation { font: var(--ll-t-body); color: var(--ll-fg-mid); white-space: pre-wrap; }
/* 내가 살 사람의 배경(대화 엔진 공고) — 하루 목록 위에 한 문단으로. 2026-10-02 유저 「이런 하루 섹션에서 유저의 백그라운드를 자세하게」 */
.ll-daybg { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--ll-surface-2, rgba(255,255,255,.04)); border: 1px solid var(--ll-line); font: 450 15px/1.75 var(--ll-font); color: var(--ll-fg); white-space: pre-line; }
.ll-daylist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ll-daylist li { display: flex; gap: 16px; align-items: baseline; padding: 15px 2px; border-top: 1px solid var(--ll-line); font: 450 15.5px/1.6 var(--ll-font); color: var(--ll-fg); }
.ll-daylist li:last-child { border-bottom: 1px solid var(--ll-line); }
.ll-daylist__n { flex: 0 0 auto; font: 700 12px/1 var(--ll-font); letter-spacing: 0.08em; color: var(--ll-key); }

/* 옆으로 넘기는 줄의 버튼 — PC(마우스)에서만. 터치는 손가락으로 넘긴다. 카드 위가 아니라 줄 밖에 선다 */
.ll-railbtn { display: none; }
.ll-railnav { display: flex; gap: 8px; }
@media (min-width: 760px) and (hover: hover) {
  .ll-railbtn {
    display: grid; place-items: center; position: relative; flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--ll-line-strong); color: var(--ll-fg);
    transition: opacity var(--ll-d-fast) ease, background var(--ll-d-fast) ease;
  }
  /* 테두리 1px 이 음수 inset 을 먹는다(§4) — 34 + 10 = 44 */
  .ll-railbtn::before { content: ""; position: absolute; inset: -5px; }
  .ll-railbtn:hover { background: rgba(255, 255, 255, 0.11); }
  .ll-railbtn[disabled] { opacity: 0.32; pointer-events: none; }
}

/* 등장인물 — 세로 카드를 옆으로 넘긴다 */
.ll-sec--cast .ll-sec__t { padding-right: var(--ll-sp-4); }
.ll-castrail {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--ll-sp-4)); padding: 2px var(--ll-sp-4) 6px;
  scroll-snap-type: x mandatory; scroll-padding: 0 var(--ll-sp-4);
  --ll-wide-ok: 1;
}
.ll-castrail::-webkit-scrollbar { display: none; }
.ll-castcard {
  flex: 0 0 132px; scroll-snap-align: start; text-align: left;
  display: flex; flex-direction: column; gap: 3px;
  animation: llRise var(--ll-d-slow) var(--ll-ease) both;
  transition: transform var(--ll-d-fast) ease;
}
.ll-castcard:active { scale: 0.97; }
.ll-castcard .ll-portrait { margin-bottom: 8px; }
.ll-castcard__name { font: 680 14.5px/1.3 var(--ll-font); letter-spacing: -0.02em; }
.ll-castcard__role { font: var(--ll-t-meta); color: var(--ll-fg-dim); }

/* 시트 안의 인물 목록 */
.ll-castlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ll-person { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--ll-r-lg); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ll-line); animation: llRise var(--ll-d-slow) var(--ll-ease) both; }
.ll-person__txt { min-width: 0; flex: 1 1 auto; }
.ll-person__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ll-person__name b { font: var(--ll-t-h3); }
.ll-person__role { font: var(--ll-t-meta); color: var(--ll-key); font-weight: 600; }
.ll-person__line { margin-top: 3px; font: 420 14px/1.55 var(--ll-font); color: var(--ll-fg-mid); }
.ll-personsheet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 0 0 8px; }
.ll-personsheet__art { width: 150px; margin-bottom: 14px; }
.ll-personsheet__micro { color: var(--ll-key); }
.ll-personsheet h2 { margin-top: 4px; font: var(--ll-t-h1); letter-spacing: var(--ll-track-tight); }
.ll-personsheet__role { font: 600 14px/1.4 var(--ll-font); color: var(--ll-fg-mid); }
.ll-personsheet__line { margin-top: 10px; max-width: 26em; font: var(--ll-t-body); color: var(--ll-fg-mid); }

/* ════════ 채팅방 (chat) ═══════════════════════════════════════════
   세로 flex 한 칸 — 머리 · 흐름 · 입력. 100dvh 라 키보드가 올라와도 입력창이 따라 올라간다.
   뒤에는 공고의 그림을 흐리게 깔고 어둡게 덮는다 — 이 방의 공기다. */
body[data-route="chat"] { overflow: hidden; }
.ll-room { position: relative; display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 0; background: var(--ll-bg); isolation: isolate; }
/* 흐림이 가장자리에서 빠지지 않게 그림을 40px 씩 크게 깔고 자른다 — 넓은 게 맞는 층이다 (§6) */
.ll-roombg { position: absolute; inset: 0; z-index: -1; overflow: hidden; --ll-wide-ok: 1; }
.ll-roombg .ll-cover { position: absolute; inset: -40px; filter: blur(26px) saturate(1.1); opacity: 0.75; }
.ll-roombg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ll-bg-rgb), 0.55) 0%, rgba(var(--ll-bg-rgb), 0.72) 40%, rgba(var(--ll-bg-rgb), 0.9) 100%); }

.ll-roomhead {
  flex: 0 0 auto; z-index: 5;
  padding-top: env(safe-area-inset-top);
  background: rgba(var(--ll-deep-rgb), 0.55);
  -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass);
  border-bottom: 1px solid var(--ll-line);
}
.ll-roomhead__in { display: flex; align-items: center; gap: 6px; height: 62px; padding: 0 6px 0 4px; }
.ll-roomhead__id { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; text-align: left; }
.ll-roomhead__id:hover { background: rgba(255, 255, 255, 0.05); }
.ll-roomhead__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ll-roomhead__txt b { font: 680 15px/1.25 var(--ll-font); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-roomhead__txt small { display: flex; align-items: center; gap: 7px; font: var(--ll-t-meta); color: var(--ll-fg-dim); white-space: nowrap; overflow: hidden; --ll-wide-ok: 1; }
.ll-roomhead__txt .ll-ava { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1.5px rgba(var(--ll-deep-rgb), 0.9); }
.ll-roomhead .ll-liptonchip { margin-right: 2px; }
/* 머리 시계 — 몇 일차 몇 시. 말이 쌓여도 늘 보인다(2026-10-09 유저 「UI 에 시간 나오게」). 좁은 폰에서도 한 줄 */
.ll-clock { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; margin-right: 6px; border-radius: var(--ll-r-full);
  background: rgba(var(--ll-deep-rgb), 0.55); border: 1px solid rgba(255, 255, 255, 0.1); font: 600 12px/1 var(--ll-font); color: rgba(255, 255, 255, 0.86);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 360px) { .ll-clock { padding: 0 8px; font-size: 11px; } }
/* 시각을 모를 때(엔진이 하루를 아직 안 알림) — 위의 inline-flex 가 [hidden] 을 이겨 빈 검은 알약이 떴다(2026-10-13 점검 M1) */
.ll-clock[hidden] { display: none; }

.ll-stream { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ll-stream__in { padding: 18px var(--ll-sp-4) 22px; display: flex; flex-direction: column; }
.ll-scene-chip {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 16px; padding: 7px 13px; border-radius: var(--ll-r-full);
  background: rgba(var(--ll-deep-rgb), 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass);
  font: 600 12px/1 var(--ll-font); color: rgba(255, 255, 255, 0.8);
}
.ll-preview {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  margin: 0 auto 18px; max-width: 420px; padding: 12px 16px; border-radius: 14px;
  background: rgba(var(--ll-key-rgb), 0.1); border: 1px solid rgba(var(--ll-key-rgb), 0.22);
  font: 500 13px/1.55 var(--ll-font); color: var(--ll-key-hi);
}
.ll-preview .ll-micro { color: var(--ll-key); }

#msgs { display: flex; flex-direction: column; gap: 12px; }
.is-new { animation: llRise 0.34s var(--ll-ease) both; }
/* 지문 — 누구의 말도 아니다. 가운데 · 상자 없음 · 말풍선보다 가볍게 (§3·§4) */
.ll-narr { align-self: center; max-width: 86%; margin: 6px 0; text-align: center; font: var(--ll-t-narr); color: var(--ll-narr-fg); }
/* 대화 엔진의 지문은 길다(첫 지문은 내 배경 한 문단) — 가운데 정렬로는 못 읽는다. 왼쪽 정렬·넉넉한 줄 간격(2026-09-30 유저 「지문 왼쪽 정렬」, 2026-10-02 배경 첫 지문). */
.ll-stream--engine .ll-narr { align-self: stretch; max-width: 100%; margin: 8px 2px; text-align: left; line-height: 1.8; white-space: pre-line; }
.ll-sys {
  align-self: center; max-width: 90%; margin: 6px 0; padding: 8px 14px; border-radius: var(--ll-r-full);
  background: rgba(255, 255, 255, 0.07); font: 500 12.5px/1.45 var(--ll-font); color: var(--ll-fg-mid); text-align: center;
}
.ll-msg { display: flex; gap: 9px; max-width: 100%; }
.ll-msg--me { justify-content: flex-end; }
.ll-msg--them { align-items: flex-start; }
.ll-msg__face { position: relative; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; }
.ll-msg__face::before { content: ""; position: absolute; inset: -3px; }
.ll-msg__face .ll-ava { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.ll-msg__body { min-width: 0; max-width: calc(100% - 92px); display: flex; flex-direction: column; gap: 5px; }
.ll-msg__name { font: 620 12.5px/1.2 var(--ll-font); color: var(--ll-fg-mid); padding-left: 2px; }
.ll-bub {
  display: inline-block; max-width: 100%;
  padding: 11px 15px; border-radius: 18px;
  font: 440 15px/1.58 var(--ll-font); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
.ll-msg--them .ll-bub {
  background: var(--ll-bub-them); color: var(--ll-bub-them-fg); border-top-left-radius: 6px; align-self: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass);
}
.ll-msg--me .ll-bub { background: var(--ll-bub-me); color: var(--ll-bub-me-fg); border-top-right-radius: 6px; max-width: 78%; font-weight: 520; }

.ll-typing { display: flex; gap: 4px; align-self: flex-start; margin: 12px 0 0 47px; padding: 13px 15px; border-radius: 18px; border-top-left-radius: 6px; background: var(--ll-bub-them); border: 1px solid rgba(255, 255, 255, 0.07); }
.ll-typing[hidden] { display: none; }
.ll-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ll-fg-mid); animation: llDot 1.1s ease-in-out infinite; }
.ll-typing i:nth-child(2) { animation-delay: 0.15s; }
.ll-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes llDot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

.ll-composer-wrap {
  flex: 0 0 auto;
  padding: 10px var(--ll-sp-3) calc(10px + env(safe-area-inset-bottom));
  background: rgba(var(--ll-deep-rgb), 0.62);
  -webkit-backdrop-filter: var(--ll-glass); backdrop-filter: var(--ll-glass);
  border-top: 1px solid var(--ll-line);
}
.ll-composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 4px 4px 4px 16px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ll-line-strong);
  transition: border-color var(--ll-d-fast) ease, background var(--ll-d-fast) ease;
}
.ll-composer:focus-within { border-color: var(--ll-key-line); background: rgba(255, 255, 255, 0.08); }
.ll-composer textarea {
  flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 132px; padding: 11px 0; resize: none;
  border: 0; background: transparent; font-size: 16px; line-height: 1.4; color: var(--ll-fg);
}
.ll-composer textarea::placeholder { color: var(--ll-fg-faint); }
.ll-composer__send {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ll-key); color: var(--ll-ink);
  transition: transform var(--ll-d-fast) ease, opacity var(--ll-d) ease, background var(--ll-d) ease, color var(--ll-d) ease;
}
.ll-composer__send:disabled { background: rgba(255, 255, 255, 0.1); color: var(--ll-fg-dim); }
.ll-composer__send:not(:disabled):active { transform: scale(0.92); }
/* 행동(*짓*) 넣기 — 휴대폰 자판에서 별표가 멀어 짓을 못 쓰던 것(2026-10-12). 보내기와 같은 높이, 덜 눈에 띄게. */
.ll-composer:has(.ll-composer__act) { padding-left: 4px; }
.ll-composer__act {
  flex: 0 0 36px; width: 36px; height: 36px; margin: 4px 0; border-radius: 50%;
  display: grid; place-items: center; padding-top: 6px;
  background: rgba(255, 255, 255, 0.08); color: var(--ll-fg-dim);
  font: 700 22px/1 var(--ll-font);
  transition: background var(--ll-d-fast) ease, color var(--ll-d-fast) ease, transform var(--ll-d-fast) ease;
}
.ll-composer__act:hover, .ll-composer__act:focus-visible { background: rgba(255, 255, 255, 0.14); color: var(--ll-fg); }
.ll-composer__act:active { transform: scale(0.92); }

/* ════════ 내 삶 (lives) ═══════════════════════════════════════════ */
.ll-lives__head { display: flex; align-items: flex-end; justify-content: space-between; margin: 14px 0 14px; }
.ll-lives__sum { font: 500 13px/1 var(--ll-font); color: var(--ll-fg-dim); }
.ll-lives__sum b { color: var(--ll-fg); font-weight: 700; }
.ll-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-rows li { animation: llRise var(--ll-d-slow) var(--ll-ease) both; }
.ll-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 13px 14px; border-radius: var(--ll-r-lg); text-align: left;
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  transition: transform var(--ll-d-fast) ease, background var(--ll-d) ease;
}
.ll-row:hover { background: var(--ll-surface-2); }
.ll-row:active { transform: scale(0.99); }
.ll-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ll-row__top { display: flex; align-items: baseline; gap: 8px; }
.ll-row__top b { flex: 1 1 auto; min-width: 0; font: 680 15.5px/1.35 var(--ll-font); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-row__time { flex: 0 0 auto; font: 500 11.5px/1 var(--ll-font); color: var(--ll-fg-dim); }
.ll-row__role { font: 550 12px/1.3 var(--ll-font); color: var(--ll-key); }
.ll-row__last { font: 420 14px/1.45 var(--ll-font); color: var(--ll-fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --ll-wide-ok: 1; }
.ll-lives__more { margin-top: 16px; }

/* ════════ 커뮤니티 ═══════════════════════════════════════════════ */
.ll-commhero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; gap: 12px;
  margin: 12px var(--ll-sp-4) 18px; padding: 22px 20px; border-radius: var(--ll-r-xl);
  background-color: var(--ll-surface);
  background-image:
    radial-gradient(90% 120% at 100% 0%, rgba(var(--ll-key-rgb), 0.34), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(120, 90, 255, 0.22), transparent 60%);
  border: 1px solid var(--ll-line);
}
.ll-commhero > div { flex: 1 1 auto; min-width: 0; }
.ll-commhero > .ll-commhero__acts { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* 공유 코드 (card.js 공유 시트 · community.js 코드로 찾기) — 한 번에 읽고 받아 적게 크게 · 고정폭 숫자 */
.ll-sharecode { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 var(--ll-sp-4); padding: 18px 12px;
  border-radius: var(--ll-r-md); background: var(--ll-surface-3); border: 1px solid var(--ll-key-line); }
.ll-sharecode b { font: 700 26px/1.2 var(--ll-font); letter-spacing: 0.14em; color: var(--ll-fg); font-variant-numeric: tabular-nums; }
.ll-sharebtns { display: grid; gap: 10px; }
.ll-input--code { text-transform: uppercase; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.ll-commhero .ll-micro { color: var(--ll-key); margin-bottom: 8px; }
.ll-commhero h2 { font: var(--ll-t-h1); letter-spacing: var(--ll-track-tight); }
.ll-commhero p:not(.ll-micro) { margin-top: 5px; font: 420 13.5px/1.55 var(--ll-font); color: var(--ll-fg-mid); }
.ll-comm .ll-seg--tabs, .ll-comm #note, .ll-comm #grid { margin-left: var(--ll-sp-4); margin-right: var(--ll-sp-4); }
.ll-seg--tabs { margin-bottom: 14px; }
.ll-seg--tabs .ll-seg__opt { min-height: 44px; font-size: 14px; }
.ll-comm__note { margin-bottom: 12px; align-items: center; }
.ll-comm__note span { flex: 1 1 auto; }
.ll-linkbtn { position: relative; flex: 0 0 auto; font: 700 13px/1 var(--ll-font); color: var(--ll-key); padding: 6px 2px; }
.ll-linkbtn::before { content: ""; position: absolute; inset: -10px -6px; }
.ll-minecard { display: flex; flex-direction: column; animation: llRise var(--ll-d-slow) var(--ll-ease) both; }
.ll-post { position: relative; }
.ll-post__more { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; color: var(--ll-fg-dim); }
.ll-post__more::before { inset: -4px; }
.ll-post--more .ll-post__co { padding-right: 30px; }
.ll-minecard .ll-post { border-bottom-left-radius: 0; border-bottom-right-radius: 0; animation: none; }
.ll-minecard__bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 14px; border: 1px solid var(--ll-line); border-top: 0; border-radius: 0 0 var(--ll-r-lg) var(--ll-r-lg); background: rgba(255, 255, 255, 0.03); }
.ll-minecard__sync { font: 500 12px/1 var(--ll-font); color: var(--ll-fg-dim); }

/* 카드 상세 — 반응 · 소식 · 댓글 */
.ll-reacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ll-react {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 4px 11px; border-radius: var(--ll-r-md);
  background: var(--ll-surface); border: 1px solid var(--ll-line);
  font: 600 12px/1.2 var(--ll-font); color: var(--ll-fg-mid);
  transition: background var(--ll-d-fast) ease, border-color var(--ll-d-fast) ease, color var(--ll-d-fast) ease;
}
.ll-react b { font: 760 14px/1 var(--ll-font); color: var(--ll-fg); }
.ll-react[aria-pressed="true"] { border-color: var(--ll-key-line); background: var(--ll-key-soft); color: var(--ll-key); }
.ll-react[aria-pressed="true"] .ll-i { fill: currentColor; fill-opacity: 0.2; }
.ll-react.is-pop .ll-i { animation: llBump 0.45s var(--ll-ease); }
.ll-posts { display: flex; flex-direction: column; gap: 8px; }
.ll-posts__empty { padding: 18px; border-radius: var(--ll-r-md); background: rgba(255, 255, 255, 0.035); border: 1px dashed var(--ll-line-strong); font: var(--ll-t-meta); color: var(--ll-fg-dim); text-align: center; }
.ll-postitem { padding: 12px 14px 14px; border-radius: var(--ll-r-md); background: var(--ll-surface); border: 1px solid var(--ll-line); animation: llRise var(--ll-d) var(--ll-ease) both; }
.ll-postitem--update { border-left: 2px solid var(--ll-key); }
.ll-postitem__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ll-postitem__head b { font: 660 13.5px/1.2 var(--ll-font); }
.ll-postitem__head time { font: 500 12px/1 var(--ll-font); color: var(--ll-fg-dim); }
.ll-postitem__more { margin-left: auto; width: 32px; height: 32px; color: var(--ll-fg-dim); }
.ll-postitem__more::before { inset: -6px; }
.ll-postitem p { font: 420 14.5px/1.6 var(--ll-font); color: var(--ll-fg-mid); white-space: pre-wrap; }
.ll-cform { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.ll-cform .ll-textarea { min-height: 48px; padding: 12px 14px; resize: none; }
.ll-cform .ll-btn { min-height: 48px; }

/* ════════ 만들기 ═══════════════════════════════════════════════ */
.ll-createhero { padding: 18px 0 8px; }
.ll-createhero .ll-micro { color: var(--ll-key); margin-bottom: 10px; }
.ll-createhero h2 { font: var(--ll-t-display); letter-spacing: -0.035em; }
.ll-createhero p:not(.ll-micro) { margin-top: 10px; font: var(--ll-t-body); color: var(--ll-fg-mid); }
.ll-fsec { margin-top: 16px; padding: 20px 18px 4px; border-radius: var(--ll-r-xl); background: var(--ll-surface); border: 1px solid var(--ll-line); }
.ll-fsec__t { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font: var(--ll-t-h2); letter-spacing: var(--ll-track-tight); }
.ll-fsec__t > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.ll-fsec__n { font: 700 12px/1 var(--ll-font); letter-spacing: 0.08em; color: var(--ll-key); }
.ll-fsec__d { margin: -8px 0 14px; font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-dayin + .ll-dayin { margin-top: 8px; }
.ll-tones { display: flex; gap: 14px; }
.ll-tone {
  position: relative; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(90% 90% at 30% 25%, hsl(var(--h), 70%, 62%), hsl(var(--h), 55%, 34%) 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition: transform var(--ll-d-fast) ease, box-shadow var(--ll-d-fast) ease;
}
.ll-tone::before { content: ""; position: absolute; inset: -4px; }
.ll-tone[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ll-surface), 0 0 0 4px var(--ll-key); transform: scale(1.04); }
.ll-personedit { display: flex; align-items: flex-start; gap: 10px; padding: 12px; margin-bottom: 10px; border-radius: var(--ll-r-md); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--ll-line); }
.ll-personedit.is-new { animation: llPop var(--ll-d) var(--ll-ease) both; }
.ll-personedit__face { flex: 0 0 44px; }
.ll-personedit__fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ll-personedit__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px; }
.ll-personedit__row--rel { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); }
.ll-personedit select.ll-input { appearance: none; -webkit-appearance: none; padding-right: 8px; color: var(--ll-fg); }
.ll-personedit .ll-input { min-height: 46px; padding: 11px 12px; }
.ll-personedit .ll-iconbtn { width: 36px; height: 36px; color: var(--ll-fg-dim); }
.ll-personedit .ll-iconbtn::before { inset: -4px; }
[data-f="cast"].is-error .ll-field__err { display: block; margin-bottom: 10px; }
.ll-addperson { margin-bottom: 18px; }
.ll-createbar { margin: 24px 0 8px; }
.ll-seg__opt .ll-i { vertical-align: -3px; }
@media (max-width: 420px) { .ll-personedit__face { display: none; } }

/* ════════ MY ═══════════════════════════════════════════════════ */
.ll-me__in { padding-top: 12px; }
.ll-mecard { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--ll-r-xl); background: var(--ll-surface); border: 1px solid var(--ll-line); }
.ll-mecard__txt { flex: 1 1 auto; min-width: 0; }
.ll-mecard__txt .ll-micro { color: var(--ll-key); margin-bottom: 8px; }
.ll-mecard__txt h2 { font: var(--ll-t-h2); letter-spacing: var(--ll-track-tight); }
.ll-mecard__txt p:not(.ll-micro) { margin-top: 3px; font: var(--ll-t-meta); color: var(--ll-fg-mid); }
.ll-mecard__txt small { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font: 500 12px/1 var(--ll-font); color: var(--ll-fg-dim); }
.ll-mecard--guest { background-image: radial-gradient(80% 120% at 100% 0%, rgba(var(--ll-key-rgb), 0.18), transparent 60%); }
.ll-wallet {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 20px 18px; border-radius: var(--ll-r-xl);
  background-color: var(--ll-surface);
  background-image: radial-gradient(70% 140% at 100% 0%, rgba(var(--ll-key-rgb), 0.24), transparent 62%);
  border: 1px solid rgba(var(--ll-key-rgb), 0.2);
}
.ll-wallet__l { flex: 1 1 auto; min-width: 0; }
.ll-wallet__l .ll-micro { color: var(--ll-key); }
.ll-wallet__l b { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; font: 780 32px/1 var(--ll-font); letter-spacing: -0.03em; }
.ll-wallet__l b small { font: 600 15px/1 var(--ll-font); color: var(--ll-fg-mid); }
.ll-wallet__l p { font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-mestats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ll-mestats button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: var(--ll-r-lg); background: var(--ll-surface); border: 1px solid var(--ll-line); transition: background var(--ll-d-fast) ease; }
.ll-mestats button:hover { background: var(--ll-surface-2); }
.ll-mestats b { font: 760 20px/1 var(--ll-font); }
.ll-mestats span { font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-me__menu { margin: 14px 0 0; padding: 6px; border-radius: var(--ll-r-xl); background: var(--ll-surface); border: 1px solid var(--ll-line); }
/* 내가 만든 삶에서 쌓인 것 — 누를 것이 없는 숫자라 버튼이 아니라 판이다 */
.ll-creator { margin-top: 16px; }
.ll-creator__h { margin: 0 0 4px; font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-mestats--flat { margin-top: 4px; }
.ll-mestats--flat > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: var(--ll-r-lg); background: var(--ll-surface); border: 1px solid var(--ll-line); text-align: center; }
.ll-creator__fine { margin: 8px 2px 0; font: 12px/1.6 var(--ll-font); color: var(--ll-fg-dim); }
.ll-me__fine { margin: 24px 0; text-align: center; font: 12px/1.6 var(--ll-font); color: var(--ll-fg-dim); }

/* ════════ 립톤 시트 ═══════════════════════════════════════════════ */
.ll-store__bal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -4px 0 16px; font: 500 14px/1 var(--ll-font); color: var(--ll-fg-mid); }
.ll-store__bal b { font: 780 22px/1 var(--ll-font); color: var(--ll-fg); }
.ll-store__bal small { flex: 1 0 100%; margin-top: 8px; font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-store__notice { margin-bottom: 12px; }
.ll-plans { display: flex; flex-direction: column; gap: 8px; }
.ll-plan {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 16px; border-radius: var(--ll-r-lg); text-align: left;
  background: var(--ll-surface-2); border: 1px solid var(--ll-line-strong);
  transition: border-color var(--ll-d-fast) ease, transform var(--ll-d-fast) ease, background var(--ll-d-fast) ease;
}
.ll-plan:hover { border-color: var(--ll-key-line); }
.ll-plan:active { transform: scale(0.99); }
.ll-plan.is-rec { border-color: var(--ll-key-line); background-image: radial-gradient(90% 140% at 100% 0%, rgba(var(--ll-key-rgb), 0.14), transparent 60%); }
.ll-plan__l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ll-plan__l > span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ll-plan__l b { font: 760 16px/1.2 var(--ll-font); }
.ll-plan__l em { position: absolute; top: -10px; right: 14px; font-style: normal; background: var(--ll-key); color: var(--ll-ink); }
.ll-plan__l small { font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-plan__p { flex: 0 0 auto; font: 760 16px/1 var(--ll-font); }
.ll-plan.is-busy .ll-plan__p { opacity: 0; }

/* ════════ 넓은 화면 ═══════════════════════════════════════════════ */
@media (min-width: 760px) {
  .ll-feats { margin-top: 20px; }
  .ll-feat { flex-basis: 360px; }
  .ll-board { padding-left: var(--ll-sp-6); padding-right: var(--ll-sp-6); }
  .ll-board .ll-search { max-width: 460px; }
  .ll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ll-makes { grid-template-columns: 1fr 1fr; padding-left: var(--ll-sp-6); padding-right: var(--ll-sp-6); }
  .ll-cont__row, .ll-feats__rail { padding-left: var(--ll-sp-6); padding-right: var(--ll-sp-6); scroll-padding: 0 var(--ll-sp-6); }
  .ll-cont__t { padding-left: var(--ll-sp-6); }
  .ll-hero { max-height: 560px; }
  .ll-hero__title { font-size: 40px; }
  .ll-jobbody { padding-bottom: 140px; }
  .ll-cta { padding-bottom: 26px; }
  .ll-cta__in { max-width: 520px; }
  .ll-commhero { margin-left: var(--ll-sp-6); margin-right: var(--ll-sp-6); padding: 28px; }
  .ll-comm .ll-seg--tabs { max-width: 420px; }
  .ll-comm .ll-seg--tabs, .ll-comm #note, .ll-comm #grid { margin-left: var(--ll-sp-6); margin-right: var(--ll-sp-6); }
}
@media (min-width: 1040px) {
  .ll-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 가로로 눕힌 폰(높이 500 이하) — 카드가 남은 높이에 맞춰 낮아지는 만큼 안을 줄인다.
   눈금(NOW HIRING · 분야)은 조건 칩이 같은 말을 하므로 빼고, 한 줄 소개는 한 줄로 */
@media (orientation: landscape) and (max-height: 500px) {
  .ll-feats { margin-bottom: 18px; }
  .ll-feat { aspect-ratio: auto; flex-basis: min(440px, 72%); max-width: 440px; height: calc(100vh - var(--ll-top-h) - var(--ll-tab-h) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); height: calc(100dvh - var(--ll-top-h) - var(--ll-tab-h) - 36px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .ll-feat__top { display: none; }
  .ll-feat__body { padding: 14px 16px; gap: 6px; }
  .ll-feat__title { font-size: 22px; }
  .ll-feat__hook { -webkit-line-clamp: 1; }
  .ll-feat .ll-terms { margin-top: 0; }
  .ll-feat__foot { margin-top: 2px; }
}

/* 대화 엔진(common/engine-chat.js) — 2026-10-02 유저 「상황에 맞게 골라서 반투명 이미지 형태로 배경에」.
   자리 사진은 덜 흐리게 비쳐 보이게, 뜬금없는 곳의 네모 그림은 조금 흐리게. 위 덮개(::after)가 글을 읽히게 한다. */
.ll-roombg .ll-cover--scene { inset: -8px; filter: blur(2px) saturate(1); opacity: 0.62; }
.ll-roombg .ll-cover--nemo { filter: blur(3px) saturate(0.9); opacity: 0.55; }
.ll-roombg .ll-cover--scene img { width: 100%; height: 100%; object-fit: cover; }
/* 인물의 짓은 그 사람 말풍선 안에 옅은 기울임으로(「행동은 말풍선 안」). */
/* 짓 · 지문은 옅게만 — 한글에 기울임을 쓰지 않는다(CLAUDE.md §3: 기운 한글은 획이 뭉개진다) */
.ll-bub .ll-act { font-style: normal; opacity: 0.62; }

/* ── R958 구인구직 카드 · 연차 고르기 · 첫 마디 (2026-10-16 Dan) ─────────────────────────── */
/* 채용 조건 한 줄 — 공고판이 채용 사이트처럼 읽힌다. 첫 칸(연차)만 라일락으로 — 고를 수 있다는 표시다 */
.ll-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ll-term { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: var(--ll-r-full); border: 1px solid var(--ll-line-strong); color: var(--ll-fg-mid); font: var(--ll-t-tag); white-space: nowrap; }
.ll-term--key { border-color: var(--ll-key-line); color: var(--ll-key); background: var(--ll-key-soft); }
.ll-feat .ll-term { border-color: rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.86); background: rgba(0, 0, 0, 0.28); }
.ll-feat .ll-term--key { border-color: var(--ll-key-line); color: var(--ll-key-hi); }
/* 연차 고르기 — 칸마다 연차와 그 자리(공고 기준 · 더 낮은/높은 자리). 고르면 배경 글이 그 연차로 바뀐다 */
.ll-tenure__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 8px; }
.ll-tenure__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 8px 6px; border-radius: var(--ll-r-md);
  border: 1px solid var(--ll-line-strong); background: var(--ll-surface); color: var(--ll-fg); font: 700 15px/1.2 var(--ll-font); cursor: pointer;
  transition: background-color var(--ll-d) ease, border-color var(--ll-d) ease, transform var(--ll-d) ease; }
.ll-tenure__opt small { font: var(--ll-t-tag); color: var(--ll-fg-dim); font-weight: 520; }
.ll-tenure__opt[aria-checked="true"] { background-color: var(--ll-key); border-color: var(--ll-key); color: var(--ll-ink); transform: translateY(-1px); }
.ll-tenure__opt[aria-checked="true"] small { color: var(--ll-ink); }
.ll-tenure__opt:active { transform: scale(0.97); }
.ll-tenure__note, .ll-tenure__now { margin: 10px 0 0; font: var(--ll-t-meta); color: var(--ll-fg-dim); }
.ll-tenure__now b { color: var(--ll-fg); }
.ll-daybg.is-swap { animation: ll-swap var(--ll-d) ease both; }
@keyframes ll-swap { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 첫 마디 고르기 — 입력창 위에 셋. 첫 턴 전에만 */
.ll-starters { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--ll-sp-4) 8px; scrollbar-width: none; --ll-wide-ok: 1; }
.ll-starters::-webkit-scrollbar { display: none; }
.ll-starters[hidden] { display: none; }
.ll-starter { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: var(--ll-r-full); border: 1px solid var(--ll-key-line); background: var(--ll-key-soft); color: var(--ll-fg); font: 560 14px/1.3 var(--ll-font); cursor: pointer;
  position: relative; animation: ll-rise var(--ll-d) ease both; transition: background-color var(--ll-d) ease; }
.ll-starter::before { content: ""; position: absolute; inset: -4px 0; }
.ll-starter:nth-child(2) { animation-delay: 60ms; } .ll-starter:nth-child(3) { animation-delay: 120ms; }
.ll-starter:active { background-color: var(--ll-key); color: var(--ll-ink); }
@keyframes ll-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ll-starter, .ll-daybg.is-swap { animation: none; } .ll-tenure__opt { transition: none; } }
/* 만드는 길 둘 — 빈 칸에서 · 공고에서 시작 */
.ll-createfrom { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: var(--ll-sp-4); }
.ll-createfrom__opt { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; text-align: left; border-radius: var(--ll-r-md); border: 1px solid var(--ll-line-strong); background: var(--ll-surface); color: var(--ll-fg); cursor: pointer;
  transition: background-color var(--ll-d) ease, border-color var(--ll-d) ease; }
.ll-createfrom__opt b { display: block; font: 700 14px/1.3 var(--ll-font); }
.ll-createfrom__opt small { display: block; font: var(--ll-t-tag); color: var(--ll-fg-dim); font-weight: 500; }
.ll-createfrom__opt[aria-pressed="true"] { border-color: var(--ll-key-line); background: var(--ll-key-soft); }
.ll-pick__co { color: var(--ll-fg-dim); font: var(--ll-t-meta); }