/*
 * fx 문의 롤링 띠(접두사 fx-tick-) - 홈(어두운 면)·맞춤 제작(밝은 면) 공용. 마크업: inc/class-fluxhub-inquiry-ticker.php, 동작: js/fx/ticker.js.
 * 1024px 이상: 본문 띠를 걷고 같은 마크업을 왼쪽 아래 고정 알약(높이 48 · 폭 400 이하 · 한 줄)으로 띄운다. 히어로를 지나면 나타나고 푸터에 닿으면 숨는다(JS 가 .is-in 을 붙인다).
 * 1023px 이하: 기존 자리에 2줄 압축 띠(1줄 아이콘·유형·시간 / 2줄 제목, 오른쪽에 조작·링크를 세로 가운데). 고정하지 않는다.
 * 색은 바깥 구획의 data-fx-surface 가 정한 --fx-* 문맥 토큰만 쓴다(새 색 없음). 라임(--fx-brand)은 「작업 중」 점과 링크에만.
 * 움직임은 opacity·transform 만(교체 8px, 점 깜빡임은 opacity, 알약 등장 12px/0.25s). 가려진 항목은 visibility 로 탭 순서·읽기에서 뺀다.
 * 순서: 구획 -> 띠 뼈대 -> 항목 -> 칩·아이콘 -> 조작 버튼 -> 링크 -> 정적 요약 -> 반응형(640 / 768 / 1024 알약 / 480) -> reduced-motion
 */

/* ===== 구획: 얇은 띠(위아래 선만, 카드 아님) - 1023px 이하 ===== */
.fx-tick-sec{padding:0;border-block:1px solid var(--fx-edge)}
.fx-tick-sec>.fx-wrap{padding-block:8px}

/* ===== 띠 뼈대: 한 줄(롤링 | 조작 | 링크) ===== */
.fx-tick{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"stage ctl cta";align-items:center;column-gap:4px}
.fx-tick__label{display:none;grid-area:label;font-size:14px;font-weight:700;color:var(--fx-fg);white-space:nowrap}
.fx-tick__stage{grid-area:stage;position:relative;min-width:0;height:44px;overflow:hidden}
.fx-tick__ctl{grid-area:ctl;display:flex;align-items:center}
.fx-tick__cta{grid-area:cta;justify-self:end}
.fx-tick__close{display:none}

/* ===== 항목: 쌓아 두고 하나만 보인다. 한 줄: 아이콘 · 유형 · 제목(말줄임) · 경과 시간 ===== */
.fx-tick__item{position:absolute;inset:0;display:grid;grid-template-columns:20px auto minmax(0,1fr);grid-template-areas:"ic type time" "subj subj subj";align-items:center;align-content:center;column-gap:8px;row-gap:2px;padding:0 4px;border-radius:var(--fx-radius-s);color:var(--fx-fg);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.fx-tick__item.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s ease .05s,transform .4s ease .05s,visibility 0s}
.fx-tick__item.is-out{opacity:0;visibility:visible;transform:translateY(-8px);transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
.fx-tick__item:focus-visible{outline:2px solid var(--fx-ring);outline-offset:-2px}
a.fx-tick__item:hover .fx-tick__subj{text-decoration:underline;text-decoration-color:var(--fx-edge-strong);text-underline-offset:.2em}
.fx-tick__ic{grid-area:ic}
.fx-tick__type{grid-area:type;font-size:13px;font-weight:500;line-height:1.4;color:var(--fx-fg-2);white-space:nowrap}
.fx-tick__subj{grid-area:subj;min-width:0;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:-.01em;color:var(--fx-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-tick__chip{grid-area:chip;justify-self:start;display:none}
.fx-tick__time{grid-area:time;justify-self:start;min-width:0;max-width:100%;font-size:13px;line-height:1.4;color:var(--fx-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* ===== 상태 칩 · 아이콘 ===== */
.fx-tick__chip{align-items:center;padding:2px 10px;border-radius:var(--fx-radius-pill);box-shadow:inset 0 0 0 1px var(--fx-edge-strong);font-size:13px;font-weight:600;line-height:1.5;color:var(--fx-fg);white-space:nowrap}
.fx-tick__chip--done{background:var(--fx-fg);color:var(--fx-bg);box-shadow:none}
.fx-tick__ic{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--fx-fg-2)}
.fx-tick__ic-svg{width:16px;height:16px;flex:none}
.fx-tick__ic--done{color:var(--fx-fg)}
.fx-tick__ic--working{color:var(--fx-brand)}
[data-fx-surface="light"] .fx-tick__ic--working{border-radius:50%;background:var(--fx-brand);color:var(--fx-brand-ink)}
.fx-tick__d{animation:fx-tick-dot 1.2s ease-in-out infinite}
.fx-tick__d--2{animation-delay:.2s}
.fx-tick__d--3{animation-delay:.4s}
@keyframes fx-tick-dot{0%,70%,100%{opacity:.25}35%{opacity:1}}

/* ===== 조작 버튼(44px): 일시정지/재생, 수동 이전/다음, 닫기 ===== */
.fx-tick__btn,.fx-tick__close{align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--fx-fg-2);transition:background-color .2s ease,color .2s ease}
.fx-tick__btn{display:inline-flex}
.fx-tick__btn[hidden]{display:none}
.fx-tick__btn:hover,.fx-tick__close:hover{background:var(--fx-tint);color:var(--fx-fg)}
.fx-tick__btn:focus-visible,.fx-tick__close:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px}
.fx-tick__i-play{display:none}
.fx-tick__btn[aria-pressed="true"] .fx-tick__i-play{display:block}
.fx-tick__btn[aria-pressed="true"] .fx-tick__i-pause{display:none}

/* ===== 오른쪽 링크: 어두운 면에서는 라임 글자, 밝은 면에서는 잉크 글자 + 라임 밑줄. 좁은 폭은 화살표만(글자는 스크린리더용) ===== */
.fx-tick__cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;font-size:15px;font-weight:600;color:var(--fx-brand);white-space:nowrap;transition:color .2s ease}
.fx-tick__cta span[aria-hidden]{display:inline-block;transition:transform .2s ease}
.fx-tick__cta .fx-tick__cta-t{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx-tick__cta:hover{color:var(--fx-brand-hover)}
.fx-tick__cta:hover span[aria-hidden]{transform:translateX(3px)}
.fx-tick__cta:focus-visible{outline:2px solid var(--fx-ring);outline-offset:2px;border-radius:var(--fx-radius-s)}
[data-fx-surface="light"] .fx-tick__cta{color:var(--fx-fg)}
[data-fx-surface="light"] .fx-tick__cta:hover{color:var(--fx-fg)}

/* ===== 정적 요약(롤링 대상이 3건 미만) - 알약이 되지 않고 본문 띠로 남는다 ===== */
.fx-tick--static{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;padding:4px 0}
.fx-tick--static .fx-tick__label{display:block}
.fx-tick--static .fx-tick__cta{min-width:0}
.fx-tick--static .fx-tick__cta .fx-tick__cta-t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
[data-fx-surface="light"] .fx-tick--static .fx-tick__cta{text-decoration:underline;text-decoration-color:var(--fx-brand-deep);text-decoration-thickness:.14em;text-underline-offset:.22em}
.fx-tick__steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0}
.fx-tick__steps li{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--fx-fg)}
.fx-tick__steps li+li::before{content:"";width:20px;height:1px;margin:0 12px;background:var(--fx-edge-strong)}
.fx-tick__facts{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px;color:var(--fx-fg-2)}
.fx-tick__facts b{margin-left:4px;font-weight:700;color:var(--fx-fg)}
.fx-tick--static .fx-tick__cta{margin-left:auto}

/* ===== 반응형 ===== */
@media (min-width:768px){
  .fx-tick-sec>.fx-wrap{padding-block:12px}
  .fx-tick__stage{height:48px}
  .fx-tick__subj{font-size:16px}
  .fx-tick__time{font-size:14px}
  .fx-tick__type{font-size:14px}
  .fx-tick__cta{min-width:0;padding-inline:8px}
  .fx-tick__cta .fx-tick__cta-t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  [data-fx-surface="light"] .fx-tick__cta{text-decoration:underline;text-decoration-color:var(--fx-brand-deep);text-decoration-thickness:.14em;text-underline-offset:.22em}
}
@media (max-width:768px){
  /* 정적 요약: 단계를 2열로(이음선 없이) - 한 줄로 못 담아 줄바꿈될 때 이음선이 줄 머리에 남는 것을 막는다 */
  .fx-tick__steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:0 16px}
  .fx-tick__steps li{min-height:36px}
  .fx-tick__steps li+li::before{content:none}
}
@media (max-width:480px){
  .fx-tick--static .fx-tick__cta{margin-left:0}
}

/* ===== 1024px 이상: 왼쪽 아래 고정 알약 (롤링 띠만. 정적 요약은 본문에 남는다) ===== */
@media (min-width:1024px){
  .fx-tick-sec:has([data-fx-tick]),
  .fx-tick-sec:has([data-fx-tick])>.fx-wrap{display:contents}
  .fx-tick[data-fx-tick]{
    position:fixed;left:24px;bottom:24px;z-index:45;
    display:flex;align-items:center;gap:0;
    width:min(400px,calc(100vw - 48px));height:48px;padding:0 4px 0 16px;
    border-radius:var(--fx-radius-pill);background:var(--fx-bg);
    box-shadow:inset 0 0 0 1px var(--fx-edge-strong),var(--fx-shadow-s);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(12px);
    transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s
  }
  /* 알약은 페이지 면과 무관하게 항상 어두운 알약(메인 결정 10-21): 면 토큰을 어두운 값으로 다시 정한다 */
  .fx-tick[data-fx-tick]{--fx-bg:var(--fx-s2);--fx-fg:var(--fx-t1);--fx-fg-2:var(--fx-t2);--fx-edge-strong:var(--fx-edge-ink-strong);--fx-tint:rgba(255,255,255,.035);--fx-ring:var(--fx-brand);color-scheme:dark}
  [data-fx-surface="light"] .fx-tick[data-fx-tick] .fx-tick__ic--working{border-radius:0;background:none;color:var(--fx-brand)}
  .fx-tick[data-fx-tick].is-in{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
  .fx-tick[data-fx-tick] .fx-tick__label,
  .fx-tick[data-fx-tick] .fx-tick__cta,
  .fx-tick[data-fx-tick] .fx-tick__chip{display:none}
  .fx-tick[data-fx-tick] .fx-tick__stage{flex:1 1 0;min-width:0;height:48px;overflow:hidden}
  .fx-tick[data-fx-tick] .fx-tick__item{grid-template-columns:20px auto minmax(0,1fr) auto;grid-template-areas:"ic type subj time";column-gap:8px;row-gap:0;padding:0;border-radius:var(--fx-radius-pill)}
  .fx-tick[data-fx-tick] .fx-tick__type{font-size:13px}
  .fx-tick[data-fx-tick] .fx-tick__subj{font-size:14px}
  .fx-tick[data-fx-tick] .fx-tick__time{font-size:13px;max-width:96px;justify-self:end}
  .fx-tick[data-fx-tick] .fx-tick__ctl{flex:none;margin-left:4px}
  .fx-tick[data-fx-tick] .fx-tick__btn{width:44px;height:44px;border-radius:var(--fx-radius-m)}
  .fx-tick[data-fx-tick] .fx-tick__close{display:inline-flex;flex:none;border-radius:50%}
}

/* ===== 1600px 이상: 본문(1200) 바깥 양쪽 여백의 「박스 없는 기록」 (3차, 대표 10-21 「너무 AI스럽다」) =====
 * 상자(테두리·radius·면)를 걷고 글자와 선만 남긴다. 오른쪽 = 1px 세로선 타임라인(시각 + 문장 + 상태 글자), 왼쪽 = 썸네일 사각형 목록 + 머리 숫자.
 * 폭 = 여백 안에 들어가는 값(176~280), 오른쪽 끝은 본문 글자보다 24px 이상 바깥. 좌우는 같은 폭·같은 높이(--tk-card)·같은 줄 높이(--tk-h)다.
 * 배경 상자가 없으므로 아래 섹션의 밝기에 따라 글자색이 바뀐다: JS 가 단위(머리·항목·링크)마다 뒤 배경을 재서 data-tone="dark|light" 를 붙인다.
 *   dark(기본) = 밝은 글자, light = 어두운 글자, 뒤에 글자·그림이 깔리거나 경계에 걸린 글자 한 줄은 data-veil(그 자리 배경색 가림막).
 * 라임은 최신 1건(오른쪽 점, 왼쪽 썸네일 테두리)에만. 어두운 글자 톤에서는 잉크 테두리를 한 겹 더해 흰 바탕에서도 보인다.
 */
.fx-tick__stat,.fx-rs,.fx-rs__note{display:none}
/* 홈·맞춤 제작 외 화면의 사이드 전용 마크업(푸터 끝, inc/class-fluxhub-inquiry-ticker.php render_side_only): 1600px 미만에서는 아무것도 보이지 않는다 */
.fx-sideonly{display:none}

/* ===== fx 레이어가 꺼진 화면(검색·상품 목록 등 키 없는 화면, 꺼 둔 화면)의 사이드: 토큰·글꼴·최소 리셋을 여기서 자체로 갖는다(전역 CSS 를 끌어오지 않는다) =====
 * 마크업에 data-fx-standalone 이 있을 때만 작동한다. 값은 tokens.css·base.css 와 같다(바꾸지 말고 그쪽이 바뀌면 여기도 맞춘다). 글꼴 파일은 fonts.css 와 같은 것이다. */
@font-face{font-family:'Pretendard Variable';font-weight:45 920;font-style:normal;font-display:swap;src:url('../../fonts/PretendardVariable.woff2') format('woff2-variations')}
.fx-sideonly[data-fx-standalone]{
  --fx-s0:#0a0a0b;--fx-s1:#111113;--fx-s2:#1a1a1e;--fx-paper:#f7f7f5;
  --fx-edge-ink:rgba(255,255,255,.10);--fx-edge-ink-strong:rgba(255,255,255,.22);--fx-edge-paper:#e4e4df;--fx-edge-paper-strong:#cfcfc8;
  --fx-t1:#f7f7f5;--fx-t2:rgba(247,247,245,.72);--fx-t3:rgba(247,247,245,.56);--fx-k1:#111111;--fx-k2:#3a3a37;--fx-k3:#6b6b66;
  --fx-brand:#c8f05a;--fx-brand-hover:#d4f67a;--fx-brand-deep:#a9d23a;--fx-brand-ink:#111111;
  --fx-face:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',sans-serif;
  --fx-radius-s:8px;--fx-radius-m:12px;--fx-radius-pill:999px;--fx-shadow-s:0 12px 40px rgba(0,0,0,.45);
  --fx-bg:var(--fx-s0);--fx-fg:var(--fx-t1);--fx-fg-2:var(--fx-t2);--fx-fg-3:var(--fx-t3);--fx-edge:var(--fx-edge-ink);--fx-edge-strong:var(--fx-edge-ink-strong);--fx-tint:rgba(255,255,255,.035);--fx-ring:var(--fx-brand);
  color:var(--fx-fg);color-scheme:dark;
  font-family:var(--fx-face);font-size:17px;font-weight:400;font-style:normal;line-height:1.7;letter-spacing:normal;text-transform:none;text-align:left;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased
}
.fx-sideonly[data-fx-standalone] *,.fx-sideonly[data-fx-standalone] *::before,.fx-sideonly[data-fx-standalone] *::after{box-sizing:border-box}
.fx-sideonly[data-fx-standalone] :where(p,ul,ol,li,button){margin:0;padding:0}
.fx-sideonly[data-fx-standalone] :where(ul,ol,li){list-style:none}
:where(.fx-sideonly[data-fx-standalone]) :where(img,svg){max-width:100%;display:block}
.fx-sideonly[data-fx-standalone] :where(a){color:inherit;text-decoration:none}
.fx-sideonly[data-fx-standalone] :where(button){font:inherit;color:inherit;background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer}
.fx-sideonly[data-fx-standalone] :focus-visible{outline:2px solid var(--fx-ring);outline-offset:3px;border-radius:4px}
.fx-sideonly[data-fx-standalone] :focus:not(:focus-visible){outline:0}
.fx-sideonly[data-fx-standalone] .fx-tnum{font-variant-numeric:tabular-nums}
.fx-sideonly[data-fx-standalone] .fx-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width:1600px){
  .fx-sideonly{display:contents}
  :is(.fx-tick[data-fx-tick],.fx-rs){
    --tk-w:clamp(160px,calc(50vw - 632px),280px);--tk-h:76px;--tk-n:4;--tk-card:440px;
    --tk-fg:var(--fx-t1);--tk-fg2:var(--fx-t2);--tk-fg3:var(--fx-t3);--tk-line:var(--fx-edge-ink-strong);--tk-tint:color-mix(in srgb,var(--fx-t1) 6%,transparent);--tk-hi:var(--fx-brand);--tk-hi-ring:transparent;--tk-ring:var(--fx-brand);
    top:calc(50% - var(--tk-card) / 2);bottom:auto;left:auto;
    display:grid;grid-template-columns:minmax(0,1fr) 32px 32px;
    grid-template-rows:36px 56px auto auto auto;align-content:start;
    grid-template-areas:"label pause close" "stat stat stat" "stage stage stage" ". prev next" "cta cta cta";
    align-items:center;column-gap:0;row-gap:0;
    width:var(--tk-w);height:auto;padding:0;
    border-radius:0;background:none;box-shadow:none;
    color:var(--tk-fg);
    transform:translateX(20px);
    transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s
  }
  /* 첫 진입 1회: 좌우 20px 이동 + 투명도, 0.45s ease-out, 좌우 동시 시작. 이후(.is-seen)에 이미지 벽·푸터에서 숨었다 나올 때는 투명도만 바뀐다(JS 가 첫 진입이 끝나면 .is-seen 을 붙인다) */
  :is(.fx-tick[data-fx-tick],.fx-rs).is-in{transform:translateY(var(--tk-up,0px));transition:opacity .45s ease-out,transform .45s ease-out,visibility 0s}
  :is(.fx-tick[data-fx-tick],.fx-rs).is-seen{transform:translateY(var(--tk-up,0px));transition:opacity .3s ease,visibility 0s linear .3s}
  :is(.fx-tick[data-fx-tick],.fx-rs).is-seen.is-in{transition:opacity .3s ease,visibility 0s}
  @media (max-height:819px){:is(.fx-tick[data-fx-tick],.fx-rs){--tk-n:3;--tk-card:364px}}
  /* 오른쪽 「최근 문의」는 한 줄 행 40px x 5건(왼쪽 카드와 달리 키가 작아 낮은 화면에서도 5건) */
  .fx-tick[data-fx-tick].fx-tick[data-fx-tick]{--tk-h:40px;--tk-n:5;grid-template-rows:36px auto auto auto auto}
  /* 머리 바로 아래 16px 에서 첫 행 시작(집계 줄이 없으면 빈 56px 칸이 없다). 집계 줄이 있으면 그 아래 16px */
  .fx-tick[data-fx-tick].fx-tick[data-fx-tick] .fx-tick__stage{margin-top:16px}
  .fx-tick[data-fx-tick] .fx-tick__stat{padding-top:0}
  .fx-tick[data-fx-tick] .fx-tick__pre{display:inline}

  /* 글자 톤: 단위(머리·항목·글자 한 줄·링크)마다 뒤 배경에 맞춰 바뀐다(JS 가 data-tone 을 붙인다). 항목은 가운데 기준 dark|light, 글자 한 줄만 경계에 걸리면 mix */
  :is(.fx-tick[data-fx-tick],.fx-rs) [data-tone="light"]{--tk-fg:var(--fx-k1);--tk-fg2:var(--fx-k2);--tk-fg3:var(--fx-k3);--tk-line:var(--fx-edge-paper-strong);--tk-tint:color-mix(in srgb,var(--fx-k1) 6%,transparent);--tk-hi-ring:var(--fx-k1);--tk-ring:var(--fx-k1)}
  /* 가림막 1(카드 전체): 카드 대부분이 큰 장식 그림(제품 모음) 위에 있을 때만. 그 자리 배경색의 옅은 막이고 가장자리가 번져서 상자로 보이지 않는다(JS 가 data-scrim 을 붙인다) */
  :is(.fx-tick[data-fx-tick],.fx-rs)::before{content:"";position:absolute;inset:-20px -24px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s ease;background:color-mix(in srgb,var(--fx-s1) 84%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(to right,transparent,var(--fx-s0) 28px,var(--fx-s0) calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,var(--fx-s0) 28px,var(--fx-s0) calc(100% - 28px),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,var(--fx-s0) 28px,var(--fx-s0) calc(100% - 28px),transparent),linear-gradient(to bottom,transparent,var(--fx-s0) 28px,var(--fx-s0) calc(100% - 28px),transparent);mask-composite:intersect}
  :is(.fx-tick[data-fx-tick],.fx-rs)[data-scrim]::before{opacity:1}
  :is(.fx-tick[data-fx-tick],.fx-rs)[data-scrim="light"]::before{background:color-mix(in srgb,var(--fx-paper) 88%,transparent)}
  /* 가림막 2(글자 한 줄): 글자 뒤에 다른 글자·그림이 깔렸거나(리뷰 흐름·제품 모음 그림) 두 배경의 경계에 걸린 글자 한 줄에만, 그 자리 배경색으로 가장자리가 번지게 깐다.
   * 상자가 아니라 글자 둘레의 번짐이다(JS 가 data-veil 을 붙이고 뗀다). 줄들이 가까이 있으면 이어져 하나의 번짐이 된다. */
  :is(.fx-tick[data-fx-tick],.fx-rs) [data-veil][data-veil]{--tk-veil:var(--fx-s1);border-radius:6px;background:color-mix(in srgb,var(--tk-veil) 88%,transparent);box-shadow:0 0 10px 6px color-mix(in srgb,var(--tk-veil) 88%,transparent)}
  :is(.fx-tick[data-fx-tick],.fx-rs) [data-veil][data-tone="light"]{--tk-veil:var(--fx-paper)}
  :is(.fx-tick[data-fx-tick],.fx-rs) :is(.fx-tick__label,.fx-tick__stat,.fx-rs__note,.fx-tick__item,.fx-tick__btn,.fx-tick__close,.fx-tick__cta){color:var(--tk-fg);transition:color .25s ease,background-color .25s ease}

  /* 머리: 이름 + 일시정지 + 닫기 (점·맥동 없음) */
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__label{display:flex;align-items:center;grid-area:label;margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__ctl{display:contents}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn,
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__close{width:32px;height:32px;border-radius:50%;color:var(--tk-fg2)}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn:hover,
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__close:hover{background:var(--tk-tint);color:var(--tk-fg)}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn--pause{grid-area:pause}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn--prev{grid-area:prev;margin-top:4px}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn--next{grid-area:next;margin-top:4px}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__close{grid-area:close}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn[hidden]{display:none}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__btn:focus-visible,
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__close:focus-visible{outline:2px solid var(--tk-ring);outline-offset:-2px}

  /* 머리 아래 한 줄 맥락(56px 칸 - 좌우 목록이 같은 높이에서 시작한다) */
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__stat{display:flex;flex-wrap:wrap;align-items:flex-start;align-self:start;gap:0 10px;grid-area:stat;margin:0;padding-top:4px;font-size:13px;line-height:1.5;color:var(--tk-fg2)}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__stat span{white-space:nowrap}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__stat b{margin-left:2px;font-weight:700;color:var(--tk-fg)}

  /* 목록 */
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__stage{grid-area:stage;flex:none;position:relative;overflow:hidden;width:100%;margin:0;height:calc(var(--tk-h) * var(--tk-n))}

  /* 오른쪽 「최근 문의」: 세로선 + 시각 + 상태 글자 / 문장 */
  .fx-tick[data-fx-tick] .fx-tick__item{
    inset:0 0 auto 0;height:var(--tk-h);
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--tk-h);
    grid-template-areas:"subj chip";
    align-items:center;align-content:center;column-gap:8px;row-gap:0;padding:0 0 0 28px;border-radius:0;
    opacity:0;visibility:hidden;transform:translateY(-24px);
    transition:transform .45s ease-out,opacity .45s ease-out,visibility 0s linear .45s
  }
  .fx-tick[data-fx-tick] .fx-tick__item::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--tk-line)}
  .fx-tick[data-fx-tick] .fx-tick__item::after{content:"";position:absolute;left:5px;top:calc(var(--tk-h) / 2 - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--tk-fg3)}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="0"]::before{top:calc(var(--tk-h) / 2)}
  .fx-tick[data-fx-tick] .fx-tick__item.is-last::before{bottom:auto;height:calc(var(--tk-h) / 2)}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="0"].is-last::before{height:0}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="0"]::after{left:4px;top:calc(var(--tk-h) / 2 - 4.5px);width:9px;height:9px;background:var(--tk-hi);box-shadow:0 0 0 1px var(--tk-hi-ring)}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot]{opacity:1;visibility:visible;transition:transform .45s ease-out,opacity .45s ease-out,visibility 0s}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="0"]{transform:translateY(0)}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="1"]{transform:translateY(var(--tk-h))}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="2"]{transform:translateY(calc(var(--tk-h) * 2))}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="3"]{transform:translateY(calc(var(--tk-h) * 3))}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="4"]{transform:translateY(calc(var(--tk-h) * 4))}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="exit"]{opacity:0;visibility:hidden;transform:translateY(calc(var(--tk-h) * -1));transition:transform .45s ease-out,opacity .45s ease-out,visibility 0s linear .45s}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="off"]{opacity:0;visibility:hidden;transform:translateY(calc(var(--tk-h) * var(--tk-n)));transition:transform .45s ease-out,opacity .45s ease-out,visibility 0s linear .45s}
  .fx-tick[data-fx-tick].is-flash .fx-tick__item[data-slot="0"]{animation:fx-tick-flash .3s ease-out}
  .fx-tick[data-fx-tick] .fx-tick__ic,
  .fx-tick[data-fx-tick] .fx-tick__type{display:none}
  /* 한 줄 행(2026-10-23): 제목 한 줄 말줄임 + 오른쪽에 작은 상태 배지. 경과 시각은 화면에서 빼고 읽는 도구에만 남긴다 */
  .fx-tick[data-fx-tick] .fx-tick__time{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fx-tick[data-fx-tick] .fx-tick__chip{display:inline-flex;align-items:center;grid-area:chip;justify-self:end;flex:none;height:20px;padding:0 8px;border-radius:999px;background:var(--tk-tint);box-shadow:none;font-size:12px;font-weight:500;line-height:20px;white-space:nowrap;color:var(--tk-fg2)}
  .fx-tick[data-fx-tick] .fx-tick__chip--working{font-weight:600;color:var(--tk-fg)}
  .fx-tick[data-fx-tick] .fx-tick__chip--working::before{content:"";width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--tk-hi)}
  .fx-tick[data-fx-tick] .fx-tick__chip--done{display:none}
  /* 3일(72시간)을 넘긴 문의도 완료 배지만 보인다(시각은 어차피 화면에 없음, 마크업 data-old) */
  .fx-tick[data-fx-tick] .fx-tick__item[data-old] .fx-tick__chip--done{display:inline-flex}
  .fx-tick[data-fx-tick] .fx-tick__subj{grid-area:subj;display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500;line-height:20px;color:var(--tk-fg2)}
  .fx-tick[data-fx-tick] .fx-tick__item[data-slot="0"] .fx-tick__subj{font-weight:600;color:var(--tk-fg)}
  .fx-tick[data-fx-tick] a.fx-tick__item:hover .fx-tick__subj{color:var(--tk-fg);text-decoration:underline;text-decoration-color:var(--tk-line);text-underline-offset:.2em}
  .fx-tick[data-fx-tick] .fx-tick__item:focus-visible{outline:2px solid var(--tk-ring);outline-offset:-2px}

  /* 맨 아래: 밑줄 텍스트 링크(화살표 없음, 터치 40) */
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__cta{display:inline-flex;grid-area:cta;align-self:start;justify-self:start;justify-content:flex-start;min-width:0;min-height:40px;margin:4px 0 0;padding:0;border-radius:0;font-size:14px;font-weight:600;color:var(--tk-fg);text-decoration:underline;text-decoration-color:var(--tk-fg3);text-decoration-thickness:1px;text-underline-offset:.3em}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__cta:hover{background:none;color:var(--tk-fg);text-decoration-color:var(--tk-fg)}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__cta:focus-visible{outline:2px solid var(--tk-ring);outline-offset:2px}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__cta .fx-tick__cta-t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__cta span[aria-hidden]{display:none}

  /* 1600~1799: 카드 폭이 160~190px 라 분류 접두(「예약 · 」)를 화면에서만 빼고(읽는 도구에는 남김) 배지·여백을 줄이며, 폭은 좌우 대칭으로 8px 더 쓴다 */
  @media (max-width:1799px){
    :is(.fx-tick[data-fx-tick],.fx-rs){--tk-w:clamp(160px,calc(50vw - 624px),280px)}
    .fx-tick[data-fx-tick] .fx-tick__item{padding-left:20px;column-gap:6px}
    .fx-tick[data-fx-tick] .fx-tick__pre{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .fx-tick[data-fx-tick] .fx-tick__subj{font-size:13px}
    .fx-tick[data-fx-tick] .fx-tick__chip{padding:0 6px;font-size:11px}
    .fx-tick[data-fx-tick] .fx-tick__chip--working::before{margin-right:4px}
  }

  /* ===== 좌우: 문의 기록은 오른쪽 여백, 「최근 구매·오픈」은 왼쪽 여백(같은 폭·같은 세로 위치·같은 높이) ===== */
  .fx-tick[data-fx-tick]{right:calc(50vw - 600px - var(--tk-w) - 16px)}
  .fx-rs.fx-rs{
    position:fixed;z-index:45;left:calc(50vw - 600px - var(--tk-w) - 16px);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-20px)
  }
  .fx-rs.is-in{opacity:1;visibility:visible;pointer-events:auto}
  .fx-rs.fx-rs .fx-tick__close{display:inline-flex}
  .fx-rs.fx-rs .fx-tick__stage{height:auto;overflow:visible;display:block}
  /* 왼쪽: 썸네일 사각형 + 이름 / 업종·구분·시간 */
  .fx-rs.fx-rs .fx-rs__big{align-items:baseline;gap:0 8px;padding-top:0}
  .fx-rs__big b{font-size:36px;font-weight:700;line-height:40px;letter-spacing:-.02em;color:var(--tk-fg)}
  .fx-rs__big b span{margin-left:2px;font-size:16px;font-weight:600;letter-spacing:0}
  .fx-rs__cap{font-size:13px;line-height:18px;color:var(--tk-fg2)}
  .fx-rs.fx-rs .fx-rs__note{display:block;grid-area:stat;align-self:end;margin:0;font-size:12px;font-weight:600;line-height:16px;color:var(--tk-fg2)}
  .fx-rs.fx-rs .fx-tick__item{position:relative;inset:auto;display:grid;height:var(--tk-h);grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"th subj" "th meta";align-content:center;align-items:center;column-gap:12px;row-gap:2px;padding:0;border-radius:0;opacity:1;visibility:visible;transform:none;transition:none}
  .fx-rs__th{grid-area:th;align-self:center;display:block;width:48px;height:48px;border-radius:calc(var(--fx-radius-s) / 2);background:var(--tk-tint);outline:1px solid var(--tk-line);outline-offset:-1px;object-fit:cover;object-position:top}
  .fx-rs__th--tile{display:grid;place-items:center;background:var(--fx-s2);color:var(--fx-t1);outline:0;font-size:18px;font-weight:700;line-height:1}
  .fx-rs__row.is-latest .fx-rs__th{outline:0;box-shadow:0 0 0 2px var(--tk-hi),0 0 0 3px var(--tk-hi-ring)}
  .fx-rs.fx-rs .fx-tick__subj{grid-area:subj;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:600;line-height:20px;color:var(--tk-fg)}
  .fx-rs__meta{grid-area:meta;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:18px;color:var(--tk-fg2)}
  .fx-rs__kind{font-weight:600;color:var(--tk-fg)}
  .fx-rs.fx-rs a.fx-tick__item:hover .fx-tick__subj{text-decoration:underline;text-decoration-color:var(--tk-line);text-underline-offset:.2em}
  .fx-rs.fx-rs .fx-tick__item:focus-visible{outline:2px solid var(--tk-ring);outline-offset:4px}
  @media (max-height:819px){.fx-rs.fx-rs .fx-tick__item:nth-child(n+4){display:none}}
  /* 작은 카드: 푸터 위 공간이 모자라면 JS 가 data-fit 으로 보이는 항목 수를 줄인다(최소 1항목) */
  .fx-rs.fx-rs[data-fit="1"] .fx-tick__item:nth-child(n+2),.fx-rs.fx-rs[data-fit="2"] .fx-tick__item:nth-child(n+3),.fx-rs.fx-rs[data-fit="3"] .fx-tick__item:nth-child(n+4){display:none}
  @media (max-width:1679px){.fx-rs__ind{display:none}}
}
@keyframes fx-tick-flash{from{opacity:.25}to{opacity:1}}

/* ===== 움직임 줄이기: 교체는 즉시, 점은 고정(자동 교체 정지는 JS 가 한다) ===== */
@media (prefers-reduced-motion:reduce){
  .fx-tick__item,.fx-tick__item.is-on,.fx-tick__item.is-out{transition:none;transform:none}
  .fx-tick__d{animation:none;opacity:1}
  .fx-tick__btn,.fx-tick__close,.fx-tick__cta,.fx-tick__cta span[aria-hidden]{transition:none}
  :is(.fx-tick[data-fx-tick],.fx-rs),:is(.fx-tick[data-fx-tick],.fx-rs).is-in,:is(.fx-tick[data-fx-tick],.fx-rs).is-seen,:is(.fx-tick[data-fx-tick],.fx-rs).is-seen.is-in{transition:none;transform:translateY(var(--tk-up,0px))}
  :is(.fx-tick[data-fx-tick],.fx-rs) .fx-tick__item[data-slot]{transition:none}
  :is(.fx-tick[data-fx-tick],.fx-rs) :is(.fx-tick__label,.fx-tick__stat,.fx-rs__note,.fx-tick__item,.fx-tick__btn,.fx-tick__close,.fx-tick__cta){transition:none}
  :is(.fx-tick[data-fx-tick],.fx-rs).is-flash .fx-tick__item[data-slot="0"]{animation:none}
  :is(.fx-tick[data-fx-tick],.fx-rs)::before{transition:none}
}