/* ==========================================================================
   core.css — help.textory.com 새 판 · 셸 (B0 · DESIGN 2-3 · 2-4 · 3-4 · 3-5 · 3-8 · 4-1~4-6 · 4-11~4-13)
   - 운영판(W1 · 10/19): 위 띠 · 주석 층 · 가짜 런처 · 나라 고르기 칸 CSS 0 · --band-h = 0(tokens.css).
     런처는 진짜 위젯(api.allinda.co.kr/lc/w.js)이 그림.
   - 바탕 규칙은 :where() 로 낮은 우선순위 — 쪽 · 부품 CSS 가 그냥 덮을 수 있음.
   - 머리 tx- = 코어.
   - 공통 부품: .tx-wrap · .tx-lane · .t-*(글자 단계) · .tx-card · .tx-row · .tx-post · .tx-next · .tx-link · .tx-btn · .tx-chip · .sr-only
   ========================================================================== */

/* ── 바탕 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* 판단: 쪽 전체 scroll-behavior:smooth 는 두지 않는다 — QA · 다른 부품의 window.scrollTo 가 중간에 찍히지 않게.
   부드러운 이동은 TX.scrollTo 가 맡고(줄인 움직임이면 즉시 — 5-4), 앵커 누름은 바로 이동. */
body {
  margin: 0;
  padding-top: var(--band-h);
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 450;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4, h5, h6) { text-wrap-style: balance; }     /* 줄임형 text-wrap 은 부모 nowrap 을 덮으므로 긴 이름(longhand)만 */
:where(p, li, dd) { text-wrap-style: pretty; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }
:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(input, select, textarea) { font: inherit; color: inherit; }
:where(img, video) { max-width: 100%; height: auto; }
:where(svg) { flex-shrink: 0; }
:where(kbd) { font-family: var(--font); }
[hidden] { display: none !important; }
::selection { background: rgba(250, 74, 32, .2); }
.tnum { font-variant-numeric: tabular-nums; }

/* 초점 고리 3px(4-2 · P9) — 모든 조작 */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
#main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 건너뛰기(첫 Tab) */
.tx-skip {
  position: fixed; left: 12px; top: calc(var(--band-h) + 8px); z-index: 31;
  padding: 10px 14px; border-radius: 10px;
  background: var(--btn); color: var(--btn-ink); font-size: 15px; font-weight: 700; line-height: 1.3;
  transform: translateY(calc(-100% - var(--band-h) - 16px));
}
.tx-skip:focus, .tx-skip:focus-visible { transform: none; }

/* 다크: 사진 · 포스터 · 운영 그림 밝기 .86(3-1 · E8) — 빼려면 .tx-nodim */
html[data-theme="dark"] img:not(.tx-nodim) { filter: brightness(.86); }

/* 나라 거름(4-12 · H28) — 한국 밖이면 한국 전용 갈래가 접힘 */
/* 판단(10/18 통합 · B2 요청): data-kr="false"(4-10 그림 마크업 꼴)는 「한국 전용 아님」이라 숨기지 않음 */
html:not([data-country="KR"]) [data-kr]:not([data-kr="false"]) { display: none !important; }

/* 줄인 움직임(5-4) — CSS 전환 · 애니메이션 0 */
html.rm *, html.rm *::before, html.rm *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
}

/* ── 틀 · 채팅 길 ───────────────────────────────────────── */
.tx-wrap { width: var(--wrap); margin-inline: auto; }
.tx-lane { max-width: calc(100% - var(--lane-cut)); }          /* ≤1023 오른쪽 84 비움(3-8) */

/* ── 3-4 글자 단계 ──────────────────────────────────────── */
.t-q      { font-size: 68px; font-weight: 800; line-height: 1.06; letter-spacing: -.045em; }
.t-a      { font-size: 26px; font-weight: 700; line-height: 1.45; letter-spacing: -.028em; }
.t-h2big  { font-size: 44px; font-weight: 800; line-height: 1.2;  letter-spacing: -.04em; }
.t-h2     { font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -.035em; }
.t-h3     { font-size: 20px; font-weight: 750; line-height: 1.35; letter-spacing: -.02em; }
.t-body   { font-size: 16px; font-weight: 450; line-height: 1.7; }
.t-article{ font-size: 17px; font-weight: 450; line-height: 1.85; }
.t-small  { font-size: 15px; font-weight: 600; line-height: 1.5; }
.t-meta   { font-size: 13px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.t-ui     { font-size: 13px; font-weight: 500; line-height: 1.4; }       /* 그림 속 11.5~14.5 · 최소 11 */
@media (max-width: 1439px) {
  .t-q { font-size: 52px; } .t-a { font-size: 21px; } .t-h2big { font-size: 40px; } .t-h2 { font-size: 30px; } .t-h3 { font-size: 19px; }
}
@media (max-width: 1023.98px) {
  .t-q { font-size: 48px; } .t-h2big { font-size: 34px; } .t-h2 { font-size: 28px; } .t-h3 { font-size: 18px; }
}
@media (max-width: 600.98px) {
  .t-q { font-size: 36px; } .t-a { font-size: 19px; } .t-h2big { font-size: 30px; } .t-h2 { font-size: 25px; }
  .t-article { font-size: 16px; line-height: 1.8; } .t-small { font-size: 14px; }
}
@media (max-width: 380px) { .t-q { font-size: 32px; } }

/* ── 2-3 · 4-2 머리글 ───────────────────────────────────── */
.tx-header {
  position: sticky; top: var(--band-h); z-index: var(--z-header);
  background: var(--bg);
  transition: box-shadow var(--ui-fast) ease-out;
}
.tx-header.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.tx-header__row { display: flex; align-items: center; gap: 18px; height: var(--head-h); }
.tx-header__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.tx-logo { display: inline-flex; align-items: center; gap: 9px; flex: none; height: 40px; color: var(--ink); border-radius: 10px; }
.tx-logo__sym { width: 28px; height: auto; color: #3E4553; }          /* 오른쪽 획 = 밝은 바탕 슬레이트(Logo.tsx) */
html[data-theme="dark"] .tx-logo__sym { color: #FFFFFF; }             /* 어두운 바탕 = 흰색 */
.tx-logo__word { font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1; }

/* 4-3 제품 전환 — 트랙 --bg-2 · 지금 칸 흰 알약 */
.tx-prod { flex: none; }
.tx-prod__track { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); }
.tx-prod__track a {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; font-weight: 650; line-height: 1; color: var(--ink-2); white-space: nowrap;
  transition: color var(--ui-fast) ease-out, background-color var(--ui-fast) ease-out;
}
.tx-prod__track a:hover { color: var(--ink); }
.tx-prod__track a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }
.tx-prod--bar { display: none; background: var(--bg); }
.tx-prod--bar > .tx-wrap { display: flex; align-items: center; height: var(--prodbar-h); }

/* 주 메뉴 5 */
.tx-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.tx-nav a {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 11px; border-radius: 10px;
  font-size: 15px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
  transition: color var(--ui-fast) ease-out, background-color var(--ui-fast) ease-out;
}
.tx-nav a:hover { color: var(--ink); background: var(--bg-2); }
.tx-nav a[aria-current="page"] { color: var(--ink); font-weight: 750; }
.tx-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent);
}

/* 아이콘 단추(지구 · 테마 · ☰) */
.tx-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px; color: var(--ink-2);
  transition: color var(--ui-fast) ease-out, background-color var(--ui-fast) ease-out;
}
.tx-iconbtn:hover, .tx-iconbtn[aria-expanded="true"] { color: var(--ink); background: var(--bg-2); }
.tx-iconbtn svg { width: 20px; height: 20px; }

/* 검색 알약(≥1440 글자 · ≤1439 아이콘) — 홈은 hidden 으로 시작 → 질문 칸이 머리글 아래로 가면 나타남(6절 S2) */
.tx-hsearch {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 38px; padding: 0 8px 0 12px;
  border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1;
  transition: color var(--ui-fast) ease-out, border-color var(--ui-fast) ease-out;
}
.tx-hsearch:hover { color: var(--ink); border-color: var(--ink-2); }
.tx-hsearch svg { width: 18px; height: 18px; }
.tx-hsearch__kbd, .tx-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 6px; background: var(--bg-2); color: var(--ink-3);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.tx-hsearch.is-ghost-in > * { opacity: 0; }
.tx-hsearch.is-ghost-fade > * { opacity: 1; transition: opacity 120ms ease-out; }
.tx-hghost {
  position: fixed; z-index: var(--z-ghost); pointer-events: none;
  border: 1.5px solid var(--line-strong); background: var(--surface); box-sizing: border-box;
}

/* 테마 3상태 — ≥1440 라디오 3칸 · ≤1439 단추 하나 + 패널(4-4) */
.tx-theme--seg { position: relative; display: inline-flex; align-items: center; flex: none; padding: 3px; border-radius: 12px; background: var(--bg-2); }
.tx-theme--seg [role="radio"] {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px; color: var(--ink-3);
  transition: color var(--ui-fast) ease-out;
}
.tx-theme--seg [role="radio"]:hover { color: var(--ink); }
.tx-theme--seg [role="radio"][aria-checked="true"] { color: var(--ink); }
.tx-theme--seg svg { width: 17px; height: 17px; }
.tx-theme__ind { position: absolute; top: 3px; left: 3px; width: 32px; height: 32px; border-radius: 9px; background: var(--surface); box-shadow: var(--sh-1); }
html[data-theme-pref="dark"] .tx-theme__ind { left: 35px; }
html[data-theme-pref="system"] .tx-theme__ind { left: 67px; }
.tx-themepop { position: relative; display: none; flex: none; }
.tx-themepop__btn .i-light, .tx-themepop__btn .i-dark, .tx-themepop__btn .i-system { display: none; }
html[data-theme-pref="light"] .tx-themepop__btn .i-light,
html[data-theme-pref="dark"] .tx-themepop__btn .i-dark,
html[data-theme-pref="system"] .tx-themepop__btn .i-system,
html:not([data-theme-pref]) .tx-themepop__btn .i-system { display: block; }

/* 주 단추(「Textory 열기 ↗」 · 앱 받기) */
.tx-cta {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 40px; padding: 0 16px; border-radius: var(--r-btn);
  background: var(--btn); color: var(--btn-ink);
  font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: opacity var(--ui-fast) ease-out, transform var(--ui-fast) ease-out;
}
.tx-cta:hover { opacity: .9; }
.tx-cta:active { transform: scale(.98); }
.tx-cta svg { width: 15px; height: 15px; }

.tx-menubtn { display: none; }
.tx-menubtn[aria-expanded="true"] .i-open, .tx-menubtn:not([aria-expanded="true"]) .i-close { display: none; }

/* 펼침 목록(언어 · 테마 패널) */
.tx-lang, .tx-themepop { position: relative; }
.tx-pop {
  position: absolute; z-index: 5; top: calc(100% + 8px); right: 0;
  min-width: 184px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3);
}
.tx-pop--up { top: auto; bottom: calc(100% + 8px); }
.tx-pop a, .tx-pop [role="radio"] {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 12px; border-radius: 9px;
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--ink-2); text-align: left; white-space: nowrap;
}
.tx-pop a:hover, .tx-pop [role="radio"]:hover { background: var(--bg-2); color: var(--ink); }
.tx-pop a[aria-current="true"], .tx-pop [role="radio"][aria-checked="true"] { color: var(--ink); font-weight: 750; }
.tx-pop svg { width: 17px; height: 17px; }
.tx-pop .tx-check { margin-left: auto; color: var(--accent-ink); }
.tx-pop :focus-visible { outline-offset: -3px; }

/* ☰ 메뉴 패널(≤1023 · 주 메뉴 5 · 언어 · 테마 — 줄은 오른쪽 84 비움) */
.tx-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - var(--sticky-top)); max-height: calc(100dvh - var(--sticky-top)); overflow-y: auto;
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--sh-2);
}
.tx-menu__in { padding: 8px 0 24px; }
.tx-menu__nav, .tx-menu__sec { max-width: calc(100% - var(--lane-cut)); }
.tx-menu__nav a {
  display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 12px;
  font-size: 17px; font-weight: 650; color: var(--ink-2);
}
.tx-menu__nav a:hover { background: var(--bg-2); color: var(--ink); }
.tx-menu__nav a[aria-current="page"] { color: var(--ink); font-weight: 750; box-shadow: inset 3px 0 0 var(--accent); }
.tx-menu__sec { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tx-menu__h { padding: 0 12px 6px; font-size: 13px; font-weight: 750; color: var(--ink-3); }
.tx-menu__sec ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tx-menu__sec a, .tx-menu__sec [role="radio"] {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink-2);
}
.tx-menu__sec a:hover, .tx-menu__sec [role="radio"]:hover { background: var(--bg-2); color: var(--ink); }
.tx-menu__sec a[aria-current="true"], .tx-menu__sec [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 750; box-shadow: var(--sh-1); }
.tx-menu__sec [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 4px; }
.tx-menu__sec svg { width: 17px; height: 17px; }

/* 폭별(2-3 표) */
@media (max-width: 1439px) {
  .tx-header__row { gap: 14px; }
  .tx-nav a { padding: 0 10px; }
  .tx-nav a[aria-current="page"]::after { left: 10px; right: 10px; }
  .tx-hsearch { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .tx-hsearch__t, .tx-hsearch__kbd { display: none; }
  .tx-theme--seg { display: none; }
  .tx-themepop { display: block; }
}
@media (max-width: 1279.98px) {
  .tx-prod--head { display: none; }
  .tx-prod--bar { display: block; }
  .tx-nav a { padding: 0 9px; }
  .tx-nav a[aria-current="page"]::after { left: 9px; right: 9px; }
}
@media (max-width: 1023.98px) {
  .tx-nav { display: none; }
  .tx-menubtn { display: inline-flex; }
  .tx-prod--bar .tx-prod__track { display: flex; width: 100%; }
  .tx-prod--bar .tx-prod__track a { flex: 1 1 0; min-width: 0; padding: 0 8px; }
}
@media (min-width: 1024px) { .tx-menu { display: none !important; } }
@media (min-width: 601px) { .tx-menu__sec { display: none; } }      /* 601–1023 은 언어 · 테마가 줄에 있음 — ☰ 안에는 ≤600 만(2-3) */
@media (max-width: 600.98px) {
  .tx-header__row { gap: 10px; }
  .tx-header__tools { gap: 4px; }
  .tx-header__tools .tx-lang, .tx-header__tools .tx-themepop { display: none; }
  .tx-logo { gap: 7px; }
  .tx-logo__sym { width: 25px; }
  .tx-logo__word { font-size: 18px; }
  .tx-iconbtn, .tx-hsearch { width: 38px; height: 38px; }
  .tx-cta { height: 38px; padding: 0 12px; font-size: 14px; gap: 5px; }
  .tx-cta svg { width: 13px; height: 13px; }
}
@media (max-width: 374px) {
  .tx-header__row { gap: 6px; }
  .tx-cta { padding: 0 10px; }
}

/* ── 2-4 · 4-12 바닥글 ──────────────────────────────────── */
.tx-footer {
  margin-top: var(--section-gap);
  background: var(--bg-2); border-top: 1px solid var(--line);
  padding: 56px 0 120px;                                   /* 바닥 여백 120(3-8) */
}
.tx-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.tx-footer__title { margin: 0 0 12px; font-size: 13px; font-weight: 750; line-height: 1.4; color: var(--ink-3); }
.tx-footer__group ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tx-footer__group a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-2);
  text-underline-offset: 3px;
}
.tx-footer__group a:hover { color: var(--ink); text-decoration: underline; }
.tx-footer__bottom {
  display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-3);
}
.tx-footer__copy { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.tx-footer__opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tx-footbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-btn); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.tx-footbtn:hover, .tx-footbtn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-2); }
.tx-footbtn svg { width: 16px; height: 16px; }
.tx-lang--foot .tx-pop { right: auto; left: 0; }
@media (max-width: 1023.98px) {
  .tx-footer { padding-top: 44px; }
  .tx-footer__grid, .tx-footer__bottom { max-width: calc(100% - var(--lane-cut)); }   /* 채팅 길(3-8) */
}
@media (max-width: 767px) { .tx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600.98px) {
  .tx-footer__bottom { flex-direction: column; align-items: flex-start; }   /* 맨 아래 줄 세로로 · 오른쪽 84 비움(4-12) */
  .tx-footer__opts { margin-left: 0; }
}

/* 테마 원형 전환(4-4 · 포인터로 바꿀 때만) — 기본 교차 흐림 끔 */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ── 4-6 ⌘K 팔레트 틀(엔진 · 결과 줄은 B2) ─────────────── */
.tx-palette {
  width: min(640px, calc(100% - 32px)); max-width: none; max-height: none;
  margin: 12vh auto auto; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
}
.tx-palette::backdrop { background: rgba(21, 25, 28, .42); }
html[data-theme="dark"] .tx-palette::backdrop { background: rgba(0, 0, 0, .5); }
.tx-palette__panel {
  display: flex; flex-direction: column;
  max-height: calc(88vh - 100px);                         /* 아래 84px(런처 구역)에 닿지 않게 */
  background: var(--surface); border-radius: 18px; box-shadow: var(--sh-3); overflow: hidden;
}
.tx-palette.is-anim .tx-palette__panel { animation: tx-pal-in 160ms var(--ease-out); }
@keyframes tx-pal-in { from { opacity: 0; filter: blur(6px); transform: scale(.98); } to { opacity: 1; filter: blur(0); transform: none; } }
/* 판단(10/18 통합 · B8 「입력칸 테두리 3:1」 경고 94줄): 칸 바탕 = 판 바탕이라 칸 경계가 안 보였음 → 질문 칸(8-1 #2a)처럼
   1.5px --line-strong 테두리(흰 판 위 4.02 · 다크 판 3.38)로 칸을 그림 · 초점 고리는 테두리 밖 2px */
.tx-palette__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 10px; border-bottom: 1px solid var(--line); }
.tx-palette__close { display: none; flex: none; height: 40px; padding: 0 12px; margin-left: 8px; border-radius: 10px; font-size: 15px; font-weight: 650; color: var(--ink-2); }
.tx-palette__close:hover { background: var(--bg-2); color: var(--ink); }
.tx-palette__field { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; height: 50px; padding: 0 4px 0 14px; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--surface); }
.tx-palette__field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.tx-palette__field > svg { width: 20px; height: 20px; color: var(--ink-3); }
.tx-palette__input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font-size: 17px; font-weight: 550; color: var(--ink); caret-color: var(--accent);
}
.tx-palette__input::placeholder { color: var(--ink-3); opacity: 1; }
.tx-palette__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.tx-palette__input:focus-visible { outline: none; }
.tx-palette__body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 8px 14px; }
.tx-palette__hint { margin: 4px 10px 12px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.tx-palette__group { margin: 10px 10px 4px; font-size: 13px; font-weight: 750; color: var(--ink-3); }
.tx-palette__faq a, .tx-palette__list [role="option"] {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink);
}
.tx-palette__faq a:hover, .tx-palette__list [role="option"]:hover,
.tx-palette__list [role="option"][aria-selected="true"] { background: var(--bg-2); }
.tx-palette__faq svg { width: 16px; height: 16px; color: var(--ink-3); }
@media (max-width: 600.98px) {
  .tx-palette { width: 100%; height: 100vh; height: 100dvh; max-height: none; margin: 0; inset: 0; }
  .tx-palette__panel { height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
  .tx-palette.is-anim .tx-palette__panel { animation: none; }               /* 열 때 움직임 0 */
  .tx-palette__close { display: inline-flex; align-items: center; }      /* 왼쪽 위(런처 구역 밖) */
  .tx-palette__bar { padding: 8px 10px 8px 0; }
  .tx-palette__field { padding-left: 12px; border-radius: 12px; }
  .tx-palette__field > svg { display: none; }
  .tx-palette__input { font-size: 17px; }
  .tx-palette__esc { display: none; }
  .tx-palette__body > * { max-width: calc(100% - 76px); }              /* 결과 줄 오른쪽 84 비움 — 몸 안쪽 여백 8 + 76 = 84(10/18 고침 · 옛 68 은 314 > 306) */
}

/* ── 4-11 카드류 공통(각 쪽 빌더가 자리 · 여백만 덮음) ─── */
.tx-card {
  display: block; padding: 20px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
a.tx-card:hover, .tx-card.is-link:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
a.tx-card:active, .tx-card.is-link:active { transform: scale(.98); }

.tx-row {                                                            /* 글 줄: 제목 · 묶음 · (영상) 길이 · 화살표 */
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 4px;
  border-bottom: 1px solid var(--line); color: var(--ink);
}
.tx-row:hover .tx-row__title, .tx-row:hover :where(b, strong, h3) { text-decoration: underline; text-underline-offset: 3px; }
.tx-row__main { flex: 1; min-width: 0; }
.tx-row__title, .tx-row :where(b, strong) { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.tx-row__group { display: block; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.tx-row__len { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tx-row__arrow { flex: none; width: 18px; height: 18px; color: var(--ink-3); }

.tx-post {                                                           /* 블로그 글자 카드(표지 0) */
  display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
a.tx-post:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.tx-post__cat, .tx-post > :where(span:first-child) { font-size: 13px; font-weight: 650; color: var(--ink-3); }
.tx-post__title, .tx-post :where(b, h3) { font-size: 18px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; }
.tx-post__desc, .tx-post :where(p) {
  font-size: 15px; font-weight: 450; line-height: 1.6; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tx-post__date, .tx-post :where(time) { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.tx-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }   /* 이어지는 가이드 3장 */
.tx-next > a {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: var(--sh-1); color: var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.tx-next > a:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.tx-next :where(b, h3) { font-size: 16px; font-weight: 700; line-height: 1.45; }
.tx-next :where(span, small) { font-size: 13px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 1023.98px) { .tx-next { grid-template-columns: minmax(0, 1fr); max-width: calc(100% - var(--lane-cut)); } }

.tx-link {                                                           /* 「가이드 보기 →」 꼴 */
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 15px; font-weight: 650; color: var(--accent-ink);
  text-underline-offset: 3px;
}
.tx-link:hover { text-decoration: underline; }

.tx-btn {                                                            /* 주 단추(--btn) */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-btn);
  background: var(--btn); color: var(--btn-ink);
  font-size: 15px; font-weight: 700; line-height: 1.2;
  transition: opacity var(--ui-fast) ease-out, transform var(--ui-fast) ease-out;
}
.tx-btn:hover { opacity: .9; }
.tx-btn:active { transform: scale(.98); }
.tx-btn--quiet { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.tx-btn--quiet:hover { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--ink-2); }

.tx-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink);
  transition: border-color var(--ui-fast) ease-out, background-color var(--ui-fast) ease-out;
}
.tx-chip:hover { border-color: var(--line-strong); }
.tx-chip[aria-pressed="true"] { border-color: var(--ink); }