/* ─────────────────────────────────────────────────────────────────────────────
   53-session-history.css — 「세션 이력」 앱(#4553): 가로탭 셋(대화 찾기 · 작업 일지 · 세션 목록) + 대화록.
   화면: web/sessions-app.ts · sessions-find.ts · sessions-journal.ts · sessions-list.ts · sessions-kit.ts · sessions.ts

   디자인(원준 2026-10-05 «프로젝트 본문 창 참고해서 그 디자인 언어로»): 프로젝트 허브(37-projects-hub.css)의 문법을 그대로 쓴다.
    · 카드 16 · 테두리 line 하나 · 아이콘 타일(중립 · blue · mint · amber) · 이름 800 · 부제 12.5 muted-2
    · 26~28px 알약 칩 · 잉크 세그 · 30px 단추(잉크 / ghost) · 고른 줄 = bg-sel + 왼쪽 파란 2px
    · 줄 사이 선은 line-row 하나 · 빈 자리는 tint 상자 · 그림자는 떠 있는 것(창 · 서랍 · 켜진 탭)에만
    · 읽기 = 본문 창의 결(14.5/25 · 폭 760) + 옆 칸(왼쪽 선 line-row)
   앱은 창 바닥까지 채우고(--shx-h, sessions-kit fitHeight) 문서를 스크롤하지 않는다 — 칸마다 제 안에서 스크롤한다.
   폭 판정은 칸의 폭으로 한다(container query) — 셸 액자는 창보다 좁다. 색은 전부 토큰이다(다크 테마를 따라간다).
   감추기는 hidden 속성으로 한다 — 01-base 의 `[hidden] { display: none !important }` 가 display 를 준 요소에서도 이긴다(여기 따로 적지 않는다).
   ───────────────────────────────────────────────────────────────────────────── */
body[data-route="sessions"] main { max-width: none; padding-top: 16px; padding-bottom: 0; }

.shx { display: flex; flex-direction: column; gap: 14px; max-width: 1720px; margin: 0 auto; height: var(--shx-h, auto); min-height: 0; color: var(--ink); }
.shx-ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: var(--ic-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* ── 머리 — 타일 · 이름 · 가로탭(트랙 위의 알약) ── */
.shx-head { flex: none; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.shx-brand { display: inline-flex; align-items: center; gap: 10px; }
.shx-brand h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--ink); }
.shx-brand .shx-tile { width: 34px; height: 34px; border-radius: 10px; }
.shx-brand .shx-tile .shx-ic { width: 18px; height: 18px; }
/* 셸 액자 안에서는 액자 머리가 이미 앱 이름을 말한다 — 이름을 두 번 세우지 않고 탭부터 선다. */
.shx.embedded .shx-brand { display: none; }
/* 빵부스러기(셸 액자 안) — 사이드바에서 고른 범위를 말한다. 부품은 셸 「세션 목록」 화면의 .v2-sa-top(47-v2-rail.css) 그대로다.
   그쪽은 화면 가장자리에서 재고(56px 띠 · 좌우 24px), 여기는 앱이 이미 여백을 쥐고 있어 띠의 높이와 좌우만 앱에 맞춘다. */
.shx > .v2-sa-top { height: 32px; padding: 0 2px; }
.shx-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-tint-2); }
.shx-tab { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.shx-tab:hover { color: var(--ink); }
.shx-tab.on { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--shadow-ink), .10), 0 0 0 1px var(--line); }
.shx-tab.on .shx-ic { color: var(--blue); }
.shx-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ── 틀 — 탭 칸 · 카드 · 두 칸 ── */
.shx-body { flex: 1; min-height: 0; display: flex; }
.shx-tabpanel { flex: 1; min-width: 0; min-height: 0; display: flex; }
.shx-tabpanel > * { flex: 1; min-width: 0; min-height: 0; }
.shx-card { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.shx-split { display: grid; grid-template-columns: clamp(360px, 37%, 460px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 14px; }
.shx-jwrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: minmax(0, 1fr); gap: 14px; }
/* 옆 칸이 걷힌 동안(받는 중 · 빈 기간 · 실패)에는 그 자리를 비워 두지 않는다. */
.shx-jwrap.norail { grid-template-columns: minmax(0, 1fr); }
:is(.shx-results, .shx-tscroll, .shx-journal, .shx-jrail, .shx-infowrap, .sess-main, .sess-side, .sess-tools-d) { scrollbar-width: thin; scrollbar-color: var(--line-net) transparent; }

/* ── 한 벌 — 타일 · 단추 · 칩 · 세그 · 고르개 · 찾기 칸 ── */
.shx-tile { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--bg-tint-2); color: var(--ink-sub); }
.shx-tile.blue { background: var(--bg-punch); color: var(--blue); }
.shx-tile.mint { background: var(--bg-success); color: var(--mint-deep); }
.shx-tile.amber { background: var(--warn-bg); color: var(--warn-deep); }
.shx-tile .shx-ic { width: 16px; height: 16px; }

.shx-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; background: var(--ink); color: var(--bg); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.shx-btn:hover { opacity: .88; }
.shx-btn:disabled { opacity: .5; cursor: default; }
.shx-btn:focus-visible, .shx-ibtn:focus-visible, .shx-seg-b:focus-visible, .shx-fchip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.shx-btn .shx-ic { width: 13px; height: 13px; }
.shx-btn.ghost { background: var(--bg); color: var(--ink-sub); border-color: var(--line); }
.shx-btn.ghost:hover { background: var(--bg-tint); color: var(--ink); opacity: 1; }
.shx-ibtn { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.shx-ibtn:hover { background: var(--bg-tint-2); color: var(--ink); }
.shx-ibtn:disabled { opacity: .4; cursor: default; background: none; }
.shx-ibtn.spin .shx-ic { animation: shx-spin .8s linear infinite; }

.shx-bar, .shx-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shx-grow { flex: 1; }
.shx-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); overflow: hidden; }
.shx-seg-b { height: 28px; padding: 0 11px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.shx-seg-b + .shx-seg-b { border-left: 1px solid var(--line); }
.shx-seg-b:hover { background: var(--bg-tint); color: var(--ink); }
.shx-seg-b.on { background: var(--ink); color: var(--bg); }
/* 칩 넷은 한 줄에 선다 — 셸 액자처럼 좁은 칸에서는 줄을 바꾸지 않고 옆으로 민다(막대는 감춘다). */
.shx-fchips { display: flex; gap: 5px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.shx-fchips::-webkit-scrollbar { display: none; }
.shx-fchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; }
.shx-fchip:hover { background: var(--bg-tint); }
.shx-fchip-n { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.shx-fchip-n:empty { display: none; }
.shx-fchip.on { background: var(--bg-punch); border-color: var(--line-net); color: var(--blue); }
.shx-fchip.on .shx-fchip-n { color: var(--blue); }
/* 알약 고르개 — select 는 크롬을 걷고 알약 안에 든다. 첫 항목(«전부»)이 아니면 켜진 색. */
.shx-pick { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 8px 0 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.shx-pick:hover { background: var(--bg-tint); }
.shx-pick:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.shx-pick .shx-ic { width: 13px; height: 13px; color: var(--muted-3); pointer-events: none; }
.shx-pick.on { background: var(--bg-punch); border-color: var(--line-net); color: var(--blue); }
.shx-pick.on .shx-ic { color: var(--blue); }
.shx-pick .shx-select, .shx-pick .shx-select:focus { min-width: 0; max-width: 168px; width: auto; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; font: inherit; color: inherit; text-overflow: ellipsis; appearance: none; -webkit-appearance: none; field-sizing: content; cursor: pointer; }
.shx-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border: 1px solid var(--line-net); border-radius: 10px; background: var(--bg-tint); color: var(--muted-2); cursor: text; }
.shx-search:focus-within { border-color: var(--blue); background: var(--bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent); }
/* 전역 input 모양(테두리 · 바탕 · 초점 고리)을 걷는다 — 찾기 칸의 테두리가 그 일을 한다. */
.shx-search .shx-input, .shx-search .shx-input:focus { flex: 1; min-width: 0; width: auto; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none; font: inherit; font-size: 14px; color: var(--ink); }
.shx-search .shx-input::placeholder { color: var(--muted-2); }
.shx-search-x { width: 24px; height: 24px; }
.shx-search-x .shx-ic { width: 13px; height: 13px; }
.shx-count { display: flex; flex-direction: column; gap: 2px; min-height: 18px; font-size: 12.5px; line-height: 18px; color: var(--muted-2); }
.shx-count-m b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.shx-count-note { display: flex; align-items: flex-start; gap: 5px; font-size: 12px; color: var(--muted-3); }
.shx-count-note .shx-ic { width: 12px; height: 12px; margin-top: 3px; }
.shx-srow { display: flex; align-items: center; gap: 6px; }
.shx-srow > .shx-search { flex: 1; min-width: 0; }
.shx-range { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shx-more { margin: 10px 8px 4px; }
.shx-link { font-weight: 600; color: var(--blue); text-decoration: none; }
.shx-link:hover { text-decoration: underline; }

/* 상태 — 점 · 알약 */
.shx-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-3-line); }
.shx-dot.busy { background: var(--blue); animation: shx-busy 1.1s ease-in-out infinite; }
.shx-dot.wait { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
.shx-dot.done { background: var(--mint); }
.shx-dot.quiet, .shx-dot.log { background: none; box-shadow: inset 0 0 0 1.5px var(--muted-3-line); }
.shx-state { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--bg-tint-2); font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.shx-state.busy { background: var(--bg-punch); color: var(--blue); }
.shx-state.wait { background: var(--warn-bg); color: var(--warn-deep); }
.shx-state.done { background: var(--bg-success); color: var(--mint-deep); }
.shx-state.idle { color: var(--ink-sub); }
.shx-state.log { background: none; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted-2); }
/* 기록 종류 · 말한 쪽 */
.shx-type, .shx-role { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--bg-tint-2); font-size: 11px; font-weight: 700; color: var(--ink-sub); white-space: nowrap; }
.shx-type.blue, .shx-role.ai { background: var(--bg-punch); color: var(--blue); }
.shx-type.mint { background: var(--bg-success); color: var(--mint-deep); }
.shx-type.amber { background: var(--warn-bg); color: var(--warn-deep); }
.shx-proj { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--muted-2); }
.shx-proj > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-proj .shx-ic { width: 12px; height: 12px; color: var(--muted-3); }
.shx-proj.none { color: var(--muted-3); }

/* 빈 자리 · 실패 · 받는 중 */
.shx-note { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--bg-tint); font-size: 12.5px; line-height: 1.55; color: var(--ink-sub); }
.shx-empty { display: flex; align-items: center; gap: 12px; margin: 12px 4px; padding: 14px 16px; border-radius: 12px; background: var(--bg-tint); }
.shx-empty > .shx-tile { background: var(--bg); }
.shx-empty-b { min-width: 0; }
.shx-empty-t { font-size: 13.5px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.shx-empty-s { margin-top: 2px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.shx-empty.big { flex: 1; flex-direction: column; justify-content: center; gap: 12px; min-height: 260px; margin: 0; padding: 40px 24px; background: none; text-align: center; }
.shx-empty.big > .shx-tile { width: 48px; height: 48px; border-radius: 14px; background: var(--bg-tint-2); }
.shx-empty.big > .shx-tile .shx-ic { width: 22px; height: 22px; }
.shx-empty.big .shx-empty-t { font-size: 15px; font-weight: 800; letter-spacing: -.2px; }
.shx-empty.big .shx-empty-s { max-width: 320px; margin: 4px auto 0; font-size: 13px; }
.shx-err { display: flex; align-items: flex-start; gap: 8px; margin: 12px 4px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--coral) 10%, var(--bg)); font-size: 13px; line-height: 1.55; color: var(--coral-text); }
.shx-err .shx-ic { margin-top: 3px; }
.shx-skel { display: grid; gap: 14px; padding: 14px 10px; }
.shx-skel-r { display: grid; gap: 7px; }
.shx-skel-r i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--bg-tint-2) 25%, var(--bg-tint) 37%, var(--bg-tint-2) 63%); background-size: 400% 100%; animation: shx-shimmer 1.3s ease infinite; }
.shx-skel-r i:first-child { width: 44%; }
.shx-skel-r i:last-child { width: 82%; height: 10px; opacity: .7; }
.shx-skel.tight { padding: 2px 0; }
.shx-skel.cards .shx-skel-r { padding: 16px; border: 1px solid var(--line-row); border-radius: 12px; }
.shx-skel.read { gap: 24px; padding: 0; }
.shx-skel.read .shx-skel-r i:first-child { width: 100%; height: 46px; border-radius: 12px; }

/* ── 왼쪽 카드(찾기 · 세션 목록) — 머리 · 결과(제 안에서 스크롤) ── */
.shx-mhead { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 10px; }
.shx-results { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 12px; border-top: 1px solid var(--line-row); transition: opacity .15s; }
.shx-results.busy { opacity: .5; }
.shx-grp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 8px 8px 4px; background: var(--bg); font-size: 12.5px; font-weight: 800; letter-spacing: -.1px; color: var(--ink); }
.shx-grp .shx-ic { width: 13px; height: 13px; color: var(--muted-3); }
.shx-grp-n { font-weight: 600; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.shx-row { display: block; margin-top: 1px; padding: 10px 10px 10px 12px; border-radius: 10px; color: inherit; text-decoration: none; cursor: pointer; }
.shx-row:hover { background: var(--bg-tint); }
.shx-row.sel { background: var(--bg-sel); box-shadow: inset 2px 0 0 var(--blue); }
.shx-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.shx-row-h { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shx-row-t { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-row-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 18px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-row-when { flex: none; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shx-row-f { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 4px; }
/* 맞은 말 — 앞 말 · 맞은 말 · 뒤 말이 한 가닥. 맞은 말만 가닥 위에 파랗게 선다. */
.shx-thread { display: grid; gap: 3px; margin: 8px 0 2px 2px; padding-left: 12px; border-left: 2px solid var(--line-row); }
.shx-ctx { font-size: 12.5px; line-height: 18px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-ctx b { margin-right: 6px; font-weight: 700; color: var(--muted); }
.shx-hit { margin-left: -14px; padding-left: 12px; border-left: 2px solid var(--blue); font-size: 13.5px; line-height: 21px; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sess-hl { padding: 0 1px; border-radius: 3px; background: var(--md-mark-bg); color: inherit; }

/* ── 칸 머리(대화록 · 세션 상세) — 타일 · 이름 · 부제 · 도구 · 문 ── */
.shx-ph { flex: none; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 16px 16px 12px 20px; }
.shx-ph-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sess-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-ph-sub { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 12.5px; font-weight: 500; color: var(--muted-2); white-space: nowrap; overflow: hidden; }
.shx-ph-sub:empty { display: none; }
.shx-ph-sub > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shx-ph-tools, .shx-ph-acts { flex: none; display: inline-flex; align-items: center; gap: 2px; }
.shx-ph-acts { gap: 6px; }
.shx-ph-tools:empty, .shx-ph-acts:empty { display: none; }
.sess-close { margin-left: 2px; }
.shx-ptabs { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px 12px; }
.shx-detail-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── 대화록 — 본문 창의 결: 읽기 칸(폭 760) + 옆 칸(남긴 것 · 질문 목차) ── */
.sess-wrap { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sess-page { max-width: 1240px; margin: 0 auto; height: var(--shx-h, auto); }
.sess-find { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 16px 12px 20px; padding: 0 5px 0 12px; border-radius: 10px; background: var(--bg-tint); font-size: 12.5px; color: var(--ink-sub); }
.sess-find > .shx-ic { color: var(--muted-2); }
.sess-find-q { flex: none; max-width: 40%; padding: 1px 6px; border-radius: 5px; background: var(--md-mark-bg); font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-find-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-find-nav { flex: none; display: inline-flex; gap: 2px; }
.sess-find-nav .shx-ibtn { width: 26px; height: 26px; }
.sess-find-nav .shx-ibtn:hover { background: var(--bg); }
.sess-layout { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 272px; grid-template-rows: minmax(0, 1fr); border-top: 1px solid var(--line-row); }
.sess-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 28px 56px 36px; }
.sess-main > * { max-width: 760px; }
.sess-side { min-width: 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 18px 14px 28px 18px; border-left: 1px solid var(--line-row); background: var(--bg); }
/* 질문 한 턴 — 번호 · 때 / 지시(tint 상자) / 답(읽기 글) / 도구 줄 */
.sess-turn { margin: 0 0 28px; scroll-margin-top: 14px; }
.sess-turn-h { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px 2px; font-size: 12px; line-height: 18px; color: var(--muted-2); }
.sess-turn-n { font-weight: 800; letter-spacing: -.1px; color: var(--ink-sub); }
.sess-turn-at { font-variant-numeric: tabular-nums; }
.sess-bubble { position: relative; }
.sess-user { padding: 12px 14px; border-radius: 12px; background: var(--bg-tint); }
.sess-user .sess-body { font-size: 14.5px; line-height: 24px; color: var(--ink); }
.sess-ai { margin-top: 14px; padding: 0 2px; }
.sess-ai .sess-body { font-size: 14.5px; line-height: 25px; color: var(--ink-sub); word-break: keep-all; overflow-wrap: anywhere; }
.sess-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.sess-body.clamp { max-height: 250px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
/* 답의 마크다운 — 본문 창 읽기(.pjh-read)와 같은 결: 머리말 800 · 인용은 tint 상자 · 문단 사이 10 */
.sess-body .md-p, .sess-body .md-list, .sess-body .md-table, .sess-body .md-pre { margin: 0 0 10px; }
.sess-body .md-h { margin: 16px 0 6px; font-weight: 800; letter-spacing: -.2px; line-height: 1.4; color: var(--ink); }
.sess-body .md-h1 { font-size: 18px; }
.sess-body .md-h2 { font-size: 16px; }
.sess-body .md-h3, .sess-body .md-h4, .sess-body .md-h5, .sess-body .md-h6 { font-size: 14.5px; }
.sess-body .sess-line:first-child .md-h { margin-top: 0; }
.sess-body strong { font-weight: 800; color: var(--ink); }
.sess-body ol.md-list, .sess-body ul.md-list { padding-left: 22px; }
.sess-body li { margin: 2px 0; }
.sess-body .md-quote { margin: 0 0 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--bg-tint); font-size: 13.5px; line-height: 22px; color: var(--ink-sub); }
.sess-body .md-code { font-size: 12.5px; }
.sess-body .md-table { font-size: 13px; line-height: 20px; }
.sess-body .sess-line:last-child > :last-child { margin-bottom: 0; }
.sess-line { position: relative; }
.sess-line-copy { position: absolute; left: -25px; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted-3); opacity: 0; cursor: pointer; }
.sess-line-copy .shx-ic { width: 12px; height: 12px; }
.sess-line:hover > .sess-line-copy, .sess-line-copy:focus-visible { opacity: 1; }
.sess-line-copy:hover { background: var(--bg-tint-2); color: var(--blue); }
.sess-flash { border-radius: 6px; animation: shx-flash 2.5s ease-out; }
.sess-more { display: inline-flex; align-items: center; gap: 3px; height: 26px; margin: 4px 0 0 -8px; padding: 0 6px 0 8px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--blue); cursor: pointer; }
.sess-more:hover { background: var(--bg-punch); }
.sess-more .shx-ic { width: 13px; height: 13px; transition: transform .15s; }
.sess-more.on .shx-ic { transform: rotate(180deg); }
/* 도구 호출 · 서브에이전트 — 접힌 한 줄. 이름이 길어도 왼쪽부터 읽히고 끝에서 줄인다. */
.sess-toolbox, .sess-subs { margin-top: 10px; }
.sess-tools { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 7px 0 9px; border: 1px solid var(--line-row); border-radius: 8px; background: var(--bg); font: inherit; font-size: 12px; color: var(--muted); text-align: left; cursor: pointer; }
.sess-tools:hover { border-color: var(--line); background: var(--bg-tint); }
.sess-tools b { flex: none; font-weight: 700; color: var(--ink-sub); }
.sess-tools .shx-ic { width: 13px; height: 13px; color: var(--muted-3); }
.sess-tools-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--muted-2); }
.sess-tools-c { transition: transform .15s; }
.sess-tools[aria-expanded="true"] .sess-tools-c { transform: rotate(90deg); }
.sess-tools-d { display: grid; gap: 3px; max-height: 320px; margin-top: 6px; padding: 9px 12px; border-radius: 10px; background: var(--bg-tint); overflow-y: auto; }
.sess-tool { display: flex; gap: 8px; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; line-height: 18px; color: var(--muted); }
.sess-tool b { flex: none; font-weight: 700; color: var(--ink-sub); }
.sess-tool span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-subs-d { display: grid; gap: 2px; margin-top: 6px; }
.sess-sub { display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 8px; border-radius: 8px; font-size: 13px; color: var(--ink-sub); text-decoration: none; }
.sess-sub:hover { background: var(--bg-tint); color: var(--ink); }
.sess-sub .shx-ic { width: 14px; height: 14px; color: var(--muted-3); }
.sess-sub-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-sub-m { flex: none; margin-left: auto; font-size: 12px; color: var(--muted-3); }
/* 옆 칸 — 「이 세션이 남긴 것」 · 질문 목차 */
.shx-rail-h { display: flex; align-items: center; gap: 5px; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--muted-2); }
.shx-rail-h b { color: var(--ink); font-variant-numeric: tabular-nums; }
.shx-left { flex: none; display: flex; flex-direction: column; min-width: 0; }
.shx-left-b { min-width: 0; }
/* 옆 칸은 좁다 — 긴 기록은 세 줄까지만(전체는 올리면 보인다). */
.sess-side .shx-act-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sess-side .shx-act-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sess-toc { flex: none; display: flex; flex-direction: column; min-width: 0; }
.sess-side-row { display: flex; align-items: center; gap: 2px; margin: 0 -8px; border-radius: 8px; }
.sess-side-row:hover { background: var(--bg-tint); }
.sess-side-row:has(.sess-side-item.on) { background: var(--bg-sel); box-shadow: inset 2px 0 0 var(--blue); }
.sess-side-item { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; min-height: 30px; padding: 5px 4px 5px 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; line-height: 20px; color: var(--ink-sub); text-align: left; cursor: pointer; }
.sess-side-item:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.sess-side-no { flex: none; min-width: 16px; font-size: 11.5px; font-weight: 700; color: var(--muted-3); font-variant-numeric: tabular-nums; text-align: right; }
.sess-side-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-side-item.on { font-weight: 700; color: var(--ink); }
.sess-side-item.on .sess-side-no { color: var(--blue); }
.sess-side-copy { width: 24px; height: 24px; margin-right: 3px; opacity: 0; }
.sess-side-copy .shx-ic { width: 12px; height: 12px; }
.sess-side-row:hover .sess-side-copy, .sess-side-copy:focus-visible { opacity: 1; }
/* 좁은 칸(.narrow — 대화록의 폭을 sessions.ts 가 잰다: 셸 액자 안의 칸은 창보다 훨씬 좁다) — 질문 목차는 서랍이 되고
   (머리의 [목차]로 여닫는다), 「남긴 것」은 읽기 칸 맨 위의 카드로 선다(서랍에 감추지 않는다). */
.sess-wrap.narrow .sess-layout { grid-template-columns: minmax(0, 1fr); }
.sess-wrap.narrow .sess-side { display: none; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: min(300px, 88%); box-shadow: -16px 0 40px rgba(var(--shadow-ink), .14); }
.sess-wrap.narrow.rail-open .sess-side { display: flex; }
.sess-wrap.narrow .sess-main { padding: 18px 20px 48px 32px; }
.sess-rail-btn { height: 28px; padding: 0 10px; }
.sess-rail-btn[aria-expanded="true"] { background: var(--bg-punch); border-color: var(--line-net); color: var(--blue); }
.sess-main > .shx-left { margin: 0 0 24px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sess-main > .shx-left .shx-left-b { max-height: 188px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-net) transparent; }
.sess-main > .shx-left .shx-act-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sess-main > .shx-left .shx-act-sum { display: none; }

/* ── 남긴 것 — 한 일(작업 기록) · 칩(지식 · 태스크 · 커밋 · 고친 파일) ── */
.shx-act { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; }
.shx-act + .shx-act { border-top: 1px solid var(--line-row); }
.shx-act-body { min-width: 0; }
.shx-act-title { font-size: 13.5px; font-weight: 600; line-height: 21px; color: var(--ink); overflow-wrap: anywhere; }
.shx-act-sum { margin-top: 1px; font-size: 12.5px; line-height: 19px; color: var(--muted); overflow-wrap: anywhere; }
.shx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.shx-chips:empty { display: none; }
.shx-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--bg-tint-2); font-size: 12px; font-weight: 600; color: var(--ink-sub); text-decoration: none; white-space: nowrap; }
.shx-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shx-chip .shx-ic { width: 12px; height: 12px; }
.shx-chip.k { background: var(--bg-success); color: var(--mint-deep); }
.shx-chip.t { background: var(--bg-punch); color: var(--blue); }
.shx-chip.t.done { background: var(--bg-tint-2); color: var(--ink-sub); }
.shx-chip.t.done .shx-ic { color: var(--mint-deep); }
a.shx-chip:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }

/* ── 작업 일지 — 도구 줄 · 합계 띠 · 시간 가닥(때 – 점 – 세션 카드) · 옆 칸(기간 요약) ── */
.shx-jmain { container: shxj / inline-size; }
.shx-jmain > .shx-bar { flex: none; padding: 16px 18px 12px; }
.shx-stats { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 18px 6px; border: 1px solid var(--line-row); border-radius: 12px; }
.shx-stats:empty { display: none; }
.shx-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; }
.shx-stat + .shx-stat { border-left: 1px solid var(--line-row); }
.shx-stat-b { display: flex; flex-direction: column; min-width: 0; }
.shx-stat-n { font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.shx-stat-k { font-size: 12px; font-weight: 600; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container shxj (max-width: 680px) {
  .shx-stat { gap: 0; padding: 10px 12px; }
  .shx-stat > .shx-tile { display: none; }
}
.shx-journal { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 28px; }
.shx-journal > .shx-skel, .shx-journal > .shx-note { margin-top: 12px; }
.shx-jgroup { margin-top: 6px; border-radius: 12px; }
.shx-jgroup.flash { animation: shx-flash 1.6s ease-out; }
.shx-jgroup > .shx-grp { min-height: 38px; padding: 10px 2px 8px; font-size: 13px; }
.shx-jlist { position: relative; display: flex; flex-direction: column; gap: 8px; }
.shx-jlist::before { content: ''; position: absolute; left: 58px; top: 8px; bottom: 8px; border-left: 1px solid var(--line-row); }
.shx-jrow { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 26px; align-items: start; }
.shx-jrow::before { content: ''; position: absolute; left: 54px; top: 19px; box-sizing: border-box; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 50%; background: var(--bg); }
.shx-jrow.quiet::before { border-color: var(--muted-3-line); }
.shx-jtime { padding-top: 14px; font-size: 12px; font-weight: 600; line-height: 18px; color: var(--muted-2); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.shx-jcard { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.shx-jrow:hover .shx-jcard, .shx-jrow.open .shx-jcard { border-color: var(--line-net-2); }
.shx-jhead { position: relative; display: block; width: 100%; padding: 0 26px 0 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.shx-jhead:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.shx-jhead > .shx-row-t { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: visible; white-space: normal; }
.shx-jname { min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 21px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-jhead .shx-proj { flex: 0 1 auto; max-width: 42%; }
.shx-jasks { flex: none; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted-2); white-space: nowrap; }
.shx-jline { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin-top: 5px; }
.shx-jsum { min-width: 0; font-size: 13.5px; line-height: 21px; color: var(--ink-sub); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shx-jrow.open .shx-jsum { display: block; }
.shx-jsum.none { font-size: 12.5px; line-height: 20px; color: var(--muted-2); -webkit-line-clamp: 1; }
.shx-jchev { position: absolute; top: 1px; right: 0; display: grid; place-items: center; width: 20px; height: 20px; color: var(--muted-3); transition: transform .15s; }
.shx-jrow.open .shx-jchev { transform: rotate(180deg); }
.shx-jmore { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--line-row); }
.shx-jmore > .shx-note { margin-top: 8px; }
.shx-first { display: flex; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg-tint); font-size: 13px; line-height: 20px; color: var(--ink-sub); }
.shx-first-k { flex: none; font-size: 12px; font-weight: 700; color: var(--muted-2); }
.shx-first-t { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.shx-jacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.shx-jmeta { margin-left: auto; font-size: 12px; color: var(--muted-3); white-space: nowrap; }
/* 옆 칸 — 하루하루 막대 · 프로젝트 · 만든 지식 · 태스크 */
.shx-jrail { gap: 22px; padding: 18px 16px 24px; overflow-y: auto; }
.shx-rail-sec { flex: none; display: flex; flex-direction: column; min-width: 0; }
.shx-rail-list { display: flex; flex-direction: column; }
.shx-rail-r { position: relative; box-sizing: content-box; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0 -8px; padding: 0 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink-sub); text-align: left; text-decoration: none; cursor: pointer; }
.shx-rail-r:hover { background: var(--bg-tint); color: var(--ink); }
.shx-rail-r:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.shx-rail-k { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; }
.shx-rail-k .shx-ic { width: 14px; height: 14px; color: var(--muted-3); }
.shx-rail-tn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-rail-r b { flex: none; font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.shx-rail-r.done .shx-ic { color: var(--mint-deep); }
.shx-rail-r.proj { min-height: 36px; padding-bottom: 4px; }
.shx-rail-bar { position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--line-row); overflow: hidden; }
.shx-rail-bar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--v, 0%); border-radius: 2px; background: color-mix(in srgb, var(--blue) 45%, var(--bg)); }
.shx-rail-more { align-self: flex-start; height: 28px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted-2); cursor: pointer; }
.shx-rail-more:hover { color: var(--blue); }
.shx-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; height: 108px; }
.shx-day { display: grid; grid-template-rows: 14px minmax(0, 1fr) 16px; gap: 3px; justify-items: center; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: var(--muted-2); cursor: pointer; }
.shx-day:disabled { cursor: default; }
.shx-day-n { font-size: 11px; font-weight: 700; line-height: 14px; color: var(--ink-sub); font-variant-numeric: tabular-nums; }
.shx-day-bar { align-self: end; width: 100%; max-width: 28px; height: var(--v, 0%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: color-mix(in srgb, var(--blue) 30%, var(--bg)); }
.shx-day:hover:not(:disabled) .shx-day-bar, .shx-day.today .shx-day-bar { background: var(--blue); }
.shx-day.zero .shx-day-bar { background: var(--line-row); }
.shx-day-l { font-size: 11px; font-weight: 600; line-height: 16px; }
.shx-day.today .shx-day-l { font-weight: 800; color: var(--blue); }
.shx-days.many { gap: 2px; height: 72px; }
.shx-days.many .shx-day { grid-template-rows: minmax(0, 1fr); }
.shx-days.many .shx-day-n, .shx-days.many .shx-day-l { display: none; }
.shx-days.many .shx-day-bar { border-radius: 2px; }

/* ── 세션 목록 — 열 머리(정렬) · 두 줄짜리 줄 · 상세의 정보 ── */
.shx-table { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-row); }
.shx-thead { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) 72px 92px; align-items: center; column-gap: 2px; padding: 4px 16px 4px 28px; border-bottom: 1px solid var(--line-row); }
.shx-thc.state, .shx-thc.last { justify-self: end; }
.shx-th { display: inline-flex; align-items: center; gap: 2px; height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted-2); white-space: nowrap; cursor: pointer; }
.shx-th:hover { background: var(--bg-tint); color: var(--ink); }
.shx-th:focus-visible { outline: 2px solid var(--blue); outline-offset: -1px; }
.shx-th.on { color: var(--ink); }
.shx-th .shx-ic { width: 12px; height: 12px; }
.shx-th.asc .shx-ic { transform: rotate(180deg); }
.shx-tscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 8px 12px; }
.shx-tr { display: grid; grid-template-columns: minmax(0, 1fr) 72px 92px; grid-template-areas: "name state last" "proj state last"; column-gap: 2px; row-gap: 1px; align-items: center; margin-top: 1px; padding: 9px 8px 9px 12px; border-radius: 10px; cursor: pointer; }
.shx-tr:hover { background: var(--bg-tint); }
.shx-tr.sel { background: var(--bg-sel); box-shadow: inset 2px 0 0 var(--blue); }
.shx-tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.shx-td-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; }
.shx-tname { min-width: 0; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-td-proj { grid-area: proj; min-width: 0; margin-left: 16px; font-size: 12.5px; line-height: 18px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shx-td-proj.none::before { content: '기타 (미분류)'; color: var(--muted-3); }
.shx-td-state { grid-area: state; justify-self: end; }
.shx-td-last { grid-area: last; justify-self: end; padding-right: 6px; font-size: 12.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.shx-trnote, .shx-tmore { display: block; }
.shx-infowrap { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 24px; padding: 2px 22px 28px; border-top: 1px solid var(--line-row); }
.shx-infowrap > * { width: 100%; max-width: 760px; }
.shx-info { margin: 0; }
.shx-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-row); }
.shx-kv dt { font-size: 12.5px; font-weight: 600; line-height: 21px; color: var(--muted-2); }
.shx-kv dd { margin: 0; font-size: 13.5px; line-height: 21px; color: var(--ink); overflow-wrap: anywhere; }

/* ── 대화록 창(작업 일지의 [대화록 열기]) — 본문 창과 같은 크기 · 그림자 ── */
.shx-mback { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 4vh 24px; background: rgba(var(--shadow-ink), .5); }
.shx-win { display: flex; flex-direction: column; width: min(1240px, 96vw); height: min(90vh, 960px); border: 1px solid var(--line-net); border-radius: 16px; background: var(--bg); box-shadow: 0 24px 70px rgba(var(--shadow-ink), .30); overflow: hidden; outline: none; }

/* ── 좁은 화면(한 칸) — 문서 스크롤로 돌아간다 ── */
@media (max-width: 1100px) {
  .shx-jwrap:not(.norail) { grid-template-columns: minmax(0, 1fr) 264px; }
}
@media (max-width: 900px) {
  .shx { height: auto; }
  .shx-split, .shx-jwrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .shx-master { max-height: 64vh; }
  .shx-pane { height: 86vh; }
  .shx-jmain { max-height: 86vh; }
  .sess-page { height: 88vh; }
  .shx-mback { padding: 0; }
  .shx-win { width: 100vw; height: 100vh; height: 100dvh; border: 0; border-radius: 0; }
}

@keyframes shx-busy { 50% { opacity: .35; } }
@keyframes shx-spin { to { transform: rotate(360deg); } }
@keyframes shx-flash { 0% { background: color-mix(in srgb, var(--blue) 22%, transparent); } 100% { background: transparent; } }
@keyframes shx-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) {
  .shx-dot.busy, .shx-skel-r i, .shx-ibtn.spin .shx-ic { animation: none; }
  .sess-more .shx-ic, .sess-tools-c, .shx-jchev, .shx-results { transition: none; }
}