/* 사용자 앱 화면 (홈 1차) — 레이아웃 + 홈 부품
 * - 토큰은 public/user-tokens.css 만 씁니다(먼저 읽혀야 함). 관리자 CSS·user.css 와 섞지 않습니다.
 * - 접두어: 레이아웃 셸 app-*, 홈 부품 home-*. 알림 부분 뷰(partials/user-alerts)의 usr-alert 는 .app 안에서만 다시 꾸밉니다.
 * - 근거: docs/고비_개발계획서.md 2-3(부품) · 2-4(레이아웃) · 2-6(접근성 개발 기준) · 2-7(모션).
 * - 문서(body) 스크롤. 안쪽 스크롤 상자를 만들지 않습니다(WebView 맨 위로 · 당겨서 새로고침 · 위치 복원).
 * - 인라인 style 없이 동작해야 하므로 값이 바뀌는 것은 클래스나 CSSOM(el.style.setProperty)으로 바꿉니다. */

/* ---------- 안전 영역 (WebView가 env()를 0으로 주는 기기는 aos-app이 --app-inset-*을 넣어 줌, 2-4) ---------- */
.app {
  --app-safe-top: max(env(safe-area-inset-top, 0px), var(--app-inset-top, 0px));
  --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-inset-bottom, 0px));
  --app-safe-left: max(env(safe-area-inset-left, 0px), var(--app-inset-left, 0px));
  --app-safe-right: max(env(safe-area-inset-right, 0px), var(--app-inset-right, 0px));
  --app-gutter-start: calc(var(--layout-gutter) + var(--app-safe-left));
  --app-gutter-end: calc(var(--layout-gutter) + var(--app-safe-right));
  /* 상단 바 위 띄움 = max(이 값, 위 안전 영역) — 시안 .sbar height: max(8px, env(safe-area-inset-top)) */
  --app-top-min: var(--space-2);
  /* 하단 탭 바닥 = 브라우저(모바일 웹 · iOS)는 18px + 아래 안전 영역(홈 표시줄 위로 띄움) */
  --app-tabbar-bottom: calc(var(--layout-tabbar-bottom) + var(--app-safe-bottom));
}

/* 앱(aos-app WebView) 안 — 시스템 바(상태 표시줄 · 내비게이션 바) 여백은 한 곳만 맡습니다(2026-10-27 여백 이중 적용 수정).
 * ① 새 APK: WebView를 화면 위아래 끝까지 그리고(edge-to-edge) 실제 여백을 문서 시작 때 <html data-app-insets>와
 *    --app-inset-top/bottom/left/right(px)로 넣어 줍니다 → 웹이 맡음. env()는 기기 · WebView 판마다 0이거나 네이티브와 겹칠 수 있어
 *    앱이 준 값만 씁니다. 하단 탭은 시안 .bot처럼 max(18px, 아래 여백) — 제스처 바가 18px보다 낮으면 시안 그대로 18px.
 * ② 예전 APK(값을 넣지 않음, 서버가 UA GobiApp으로 body에 app--in-shell): 네이티브 SafeAreaView가 이미 위아래를 띄웠으므로
 *    웹 안전 영역은 0, 위 8px 최소도 0(시안 max(8px, 상태 표시줄) = 상태 표시줄 높이). */
.app.app--in-shell {
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
  --app-safe-left: 0px;
  --app-safe-right: 0px;
  --app-top-min: 0px;
}

html[data-app-insets] .app {
  --app-safe-top: var(--app-inset-top, 0px);
  --app-safe-bottom: var(--app-inset-bottom, 0px);
  --app-safe-left: var(--app-inset-left, 0px);
  --app-safe-right: var(--app-inset-right, 0px);
  --app-top-min: var(--space-2);
  --app-tabbar-bottom: max(var(--layout-tabbar-bottom), var(--app-safe-bottom));
}

/* ---------- 기본 ---------- */
html {
  background: var(--color-bg-stage);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.app,
.app *,
.app *::before,
.app *::after {
  box-sizing: border-box;
}

.app {
  margin: 0;
  background: var(--color-bg-stage);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-compact);    /* 시안 body: 줄 높이 지정 없음(normal) */
  font-variant-numeric: var(--font-numeric);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

:where(.app) h1,
:where(.app) h2,
:where(.app) h3,
:where(.app) p,
:where(.app) ul,
:where(.app) ol {
  margin: 0;
}

:where(.app) ul,
:where(.app) ol {
  padding: 0;
}

:where(.app) a {
  color: var(--color-text-link);
}

:where(.app) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

:where(.app) img,
:where(.app) svg {
  display: block;
  max-width: 100%;
}

/* 키보드 초점: 2px 진한 바깥선, 2px 띄움 (outline:none 금지, 2-6). 어두운 바탕 안에서는 흰색 */
.app :focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.app-header--dark :focus-visible,
.app-tabbar :focus-visible {
  outline-color: var(--focus-ring-color-on-dark);
}

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

/* ---------- 건너뛰기 링크 ---------- */
.app-skip {
  position: absolute;
  top: -200px;
  left: var(--app-gutter-start);
  z-index: var(--z-skip);
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  box-shadow: var(--elevation-3);
}

.app-skip:focus {
  top: calc(var(--app-safe-top) + var(--space-2));
}

/* ---------- 화면 틀: 폭 100%, 최대 430px 가운데, 좌우 16px, 아래는 하단 탭에 가리지 않게 ---------- */
.app-shell {
  width: 100%;
  max-width: var(--layout-max-width);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--app-gutter-end) calc(var(--layout-bottom-safe) + var(--app-safe-bottom)) var(--app-gutter-start);
  background: var(--color-bg-page);
}

/* 하단 탭이 없는 하위 화면(화면설계서 C-2: 안내 · 목록 · 사례): 시안 .scr 은 하위 화면도 아래 여백 200px 그대로 */
.app-shell--no-tabbar {
  padding-bottom: calc(var(--layout-bottom-safe) + var(--app-safe-bottom));
}

.app-main {
  display: block;
}

/* ---------- 상단 바 (요소 1 · 2): 본문과 함께 올라감(sticky 아님, 2-4) ---------- */
.app-header {
  margin: 0 calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  padding: max(var(--app-top-min), var(--app-safe-top)) var(--app-gutter-end) 0 var(--app-gutter-start);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}

/* (제안) 어두운 홈 위쪽 배경. 그라데이션은 홈 위쪽 묶음(적중률 제목까지)이 이어서 칠함 */
.app-header--dark {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.app-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--layout-topbar-height);
}

.app-header__actions {
  display: flex;
  align-items: center;
  margin-inline-end: calc(-1 * var(--space-1_5));
}

/* 머리 아이콘 버튼 (관심 · 알림): 아이콘 22px, 누르는 영역 48 × 48 */
.app-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-hit-min);
  height: var(--layout-hit-min);
  margin-block: calc((var(--layout-topbar-height) - var(--layout-hit-min)) / 2);
  border-radius: var(--radius-full);
  color: inherit;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.app-icon-btn:active {
  background: var(--color-bg-muted);
}

.app-header--dark .app-icon-btn:active {
  background: var(--color-bg-inverse-pressed);
}

.app-icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 준비 중(aria-disabled) 링크: 누를 수 없음 표시. 글자 대비를 떨어뜨리는 투명도는 쓰지 않음 */
.app [aria-disabled="true"] {
  cursor: default;
}

/* ---------- 알림 (partials/user-alerts) ---------- */
.app .usr-alert {
  position: relative;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 3px);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.app .usr-alert::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: currentColor;
}

.app .usr-alert--error {
  background: var(--color-verdict-risk-bg);
  color: var(--color-verdict-risk-text);
}

.app .usr-alert--warning {
  background: var(--color-verdict-caution-bg);
  color: var(--color-verdict-caution-text);
}

.app .usr-alert--info {
  background: var(--color-info-bg);
  color: var(--color-text-link);
}

.app .usr-alert--success {
  background: var(--color-verdict-safe-bg);
  color: var(--color-verdict-safe-text);
}

/* ---------- 하단 탭 (요소 18): 화면 위에 떠 있음. 좌우 16px, 바닥 --app-tabbar-bottom(브라우저 18px + 아래 안전 영역, 앱은 위 안전 영역 절 참고) ---------- */
.app-tabbar {
  position: fixed;
  right: 0;
  bottom: var(--app-tabbar-bottom);
  left: 0;
  z-index: var(--z-nav);
  width: calc(100% - 2 * var(--layout-tabbar-inset));
  max-width: calc(var(--layout-max-width) - 2 * var(--layout-tabbar-inset));
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: var(--color-bg-inverse);
}

.app-tabbar__list {
  display: flex;
  justify-content: space-around;
  min-height: var(--layout-tabbar-height);
  padding: 1px 0;                              /* 탭 48px + 1px × 2 = 시안 높이 50px (시안 안쪽 8 / 7px + 탭 35px) */
  list-style: none;
}

.app-tabbar__item {
  display: flex;
}

.app-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-0_5);
  min-width: var(--layout-tabbar-item-width);
  min-height: var(--layout-hit-min);
  padding: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-nav-inactive);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-compact);
  text-decoration: none;
}

.app-tab__icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.app-tab__label {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.app-tab:active .app-tab__icon {
  transform: scale(var(--scale-pressed-icon));
}

/* 현재 탭: 흰 글자 + 굵게 (색만으로 구분하지 않음) + aria-current="page" */
.app-tab.is-active {
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-bold);
}

/* 고비톡: 강조 색 — 잉크 탭 바탕 위 전용 토큰(옛 화면 코랄 5.7 : 1, v15 밝은 빨강 5.7 : 1 — 화면 점검 2026-10-26) */
.app-tab--accent {
  color: var(--color-accent-talk-on-dark);
  font-weight: var(--font-weight-bold);
}

/* ---------- 홈 묶음 머리 `SectionHeader`: 제목 h2 + 남은 폭을 채우는 1px 선 + "더보기 ›" ---------- */
.home-section {
  display: block;
}

.home-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-3);
}

.home-section__head::after {
  content: "";
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  height: 1px;
  background: var(--color-border-strong);
}

/* 360px에서 넘치면 선(가변)이 먼저 줄고, 그래도 넘치면 제목 말줄임 (2-4) */
.home-section__title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-section__title em {
  color: var(--color-brand-primary);
  font-style: normal;
}

/* 시안 v15 섹션 머리(.sh — 공통 부품 .app-sh 와 같은 값): 명조 18px + 아래 잉크 선 1.5px, 위 28 · 아래 12, 오른쪽 가는 선 없음.
 * 마크업(home-section__head)은 그대로 두고 v15 화면(body.app--v15)에서만 모양을 바꿈 — 홈 · 안내(H-04) · 사건 화면이 같은 머리를 씀 */
.app--v15 .home-section__head {
  margin: 28px 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-section) solid var(--color-border-inverse);
}

.app--v15 .home-section__head::after {
  display: none;
}

.app--v15 .home-section__title {
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.3px;
}

.app--v15 .home-section__more {
  margin-left: auto;
}

/* "더보기 ›": 글자 12px, 누르는 영역은 가상 요소로 48 × 48. aria-label에 묶음 이름 포함(2-6 O8) */
.home-section__more {
  position: relative;
  order: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-0_5);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-compact);
  text-decoration: none;
  white-space: nowrap;
}

.home-section__more::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, var(--layout-hit-min));
  height: var(--layout-hit-min);
  transform: translate(-50%, -50%);
}

.home-section__more:active {
  color: var(--color-text-primary);
}

/* ---------- 매매사업자 띠 `PromoBand` (옛 요소 5, 시안 .dlb): 어두운 띠, 두 줄 허용, 높이 고정 없음. 안쪽 11 / 14px, 모서리 14px ----------
 * 시안 v15 에서 홈은 내 조건 추천 띠(.home-band = 공통 부품 .app-band)로 바뀜. 이 규칙은 관리자 띠 미리보기(views/admin/dealer/banner-preview.ejs)만 씀 */
.home-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--layout-hit-min);
  margin-top: var(--space-3_5);
  padding: 11px var(--space-3_5);
  border-radius: var(--radius-tile);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.home-promo:active {
  background: var(--color-bg-inverse-pressed);
}

/* 빛 테두리 변형 (시안 .glow #E24B4A) */
.home-promo--glow {
  border: 1px solid var(--glow-promo-border);
  box-shadow: var(--glow-promo);
}

.home-promo__text {
  min-width: 0;
}

.home-promo__eyebrow {
  display: block;
  color: var(--color-text-promo-eyebrow);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
}

.home-promo__title {
  display: block;
  margin-top: 1px;
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-promo__arrow {
  flex: none;
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xl);
  line-height: var(--font-leading-compact);
  opacity: 0.8;                                /* 시안 .dlb .dla — 장식 화살표(aria-hidden) */
}

/* ---------- 내 조건 추천 띠 (요소 5, 시안 v15 .dlb · H v0.13 5번): 공통 부품 .app-band(잉크 · 모서리 16 · 흰 글자 · ›) + 홈 안 간격 ---------- */
.home-band {
  margin-top: var(--space-4);
}

/* ---------- "준비 중" 자리 카드 (데이터 연결 전 묶음 · 비회원 대체, 2-5) ---------- */
.home-placeholder {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
}

.home-placeholder__title {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-placeholder__desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-compact);
}

/* 값 없음 "준비 중" (2026-10-22 사용자 지시 "준비중은 도형 다 빼고 파란 텍스트로, 레이아웃에 영향이 가지 않도록"):
 * 값 글자만 파랑(--color-text-pending = 링크 파랑)으로 바꾸고 모양(배경 · 테두리 · 안쪽 여백 · 모서리 · 줄 높이)은 없음.
 * 글자 크기 · 굵기 · 줄 높이 · 자간은 놓인 자리(칩 · 상자 · 제목 등 설계 부품)에서 그대로 물려받아 값이 있을 때와 같은 자리를 차지함.
 * 링크 대상 화면이 없는 버튼 · 링크에는 보이는 표시가 없음(aria-disabled + 화면 읽기용 "(준비 중)" 만).
 * .usr-pending = 홈 밖 화면(물건 상세 등)이 함께 쓰는 공용 이름(partials/user-pending) — .home-pending 과 같은 규칙이라 기존 화면 모양은 그대로. */
.home-pending {
  color: var(--color-text-pending);
  white-space: nowrap;
}

.usr-pending {
  color: var(--color-text-pending);
  white-space: nowrap;
}

/* ---------- 가로 목록 `HScroll` (카드 · 유형 · 나중 영상용): 화면 끝까지, 첫 카드만 16px 들여 씀 ----------
 * 마크업: 스크롤 상자 <div class="home-hscroll" role="region" aria-label="… 목록" tabindex="0"> (키보드 초점 → ←/→ 로 넘김, 2-6 O10)
 *         + <ul class="home-hscroll__list" role="list"> + <li> (list-style 없앤 ul 은 일부 화면 읽기가 목록으로 안 읽음)
 * 들여 씀은 목록(ul) 안쪽 여백으로 둠 — 스크롤 상자 끝 여백은 브라우저마다 스크롤 범위에 안 들어가는 경우가 있음.
 * 마우스 끌기 · 관성(2-7)은 /static/shared/user-home.js (손가락은 기본 가로 스크롤 그대로) */
.home-hscroll {
  margin: 0 calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--app-gutter-start) var(--app-gutter-end);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.home-hscroll::-webkit-scrollbar {
  display: none;
}

/* 상자는 화면 끝까지 붙어 있어 바깥선이 화면 밖으로 나감 → 안쪽으로 그림 */
.home-hscroll:focus-visible {
  outline-offset: calc(-1 * var(--focus-ring-width));
}

.home-hscroll__list {
  display: flex;
  gap: var(--space-2_5);
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: var(--space-1_5) var(--app-gutter-end) var(--space-2_5) var(--app-gutter-start);
  list-style: none;
}

.home-hscroll__list > * {
  flex: none;
}

/* 마우스(정밀 포인터)에서만 끌기 손 모양. 끄는 동안 글자 선택 · 사진 끌기 막음 */
@media (hover: hover) and (pointer: fine) {
  .home-hscroll {
    cursor: grab;
  }

  .home-hscroll.is-dragging {
    cursor: grabbing;
    user-select: none;
  }

  .home-hscroll.is-dragging * {
    pointer-events: none;
  }
}

/* ---------- 좁은 화면 (2-4 폭별 점검) ---------- */
/* 360px 미만(320px 기기): 하단 탭 폭을 균등 분할 */
@media (max-width: 359.98px) {
  .app-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .app-tab {
    width: 100%;
    min-width: 0;
  }
}

/* ---------- 움직임 줄이기 (2-6 · 2-7): 크기 변화 없이 색 변화만, 부드러운 스크롤 끔 ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .app *,
  .app *::before,
  .app *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .app-tab:active .app-tab__icon {
    transform: none;
  }
}

/* ---------- 홈 화면 1차 (views/user/home.ejs, 개발계획서 3-3 5번) — 추천 제목 · 자리 카드 버튼 · 경매 배우기 · 고비톡 · 기준 시각 ---------- */
/* 추천 제목 (요소 3, 시안 v15 .hhd h2 · H v0.13 3번): 명조 26px 한 줄 "지금, 나만을 위한 물건", 가운데, 위 18px.
 * 시안 v15 에서 적중률 줄 · (?) 버튼 · H-03 시트는 없앰(옛 .home-hit 규칙 삭제) */
.home-headline {
  margin-top: 18px;
  color: var(--color-text-primary);
  font-family: var(--font-family-title);
  font-size: 1.625rem;                          /* 26px (시안 v15) */
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.5px;
  text-align: center;
  word-break: keep-all;
}

/* 준비 중 카드의 버튼 ("전체 물건 보기" · "다시 시도"): 누르는 영역 48px */
.home-placeholder__action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-1_5);
  min-height: var(--layout-hit-min);
  margin-top: var(--space-1);
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
}

.home-placeholder__action[aria-disabled="true"] {
  color: var(--color-text-secondary);
}

/* 경매 배우기 `TextLink` (요소 15, 시안 .lnk + 회색): 13px / 600, 위 4px, 눌림 밑줄.
 * 보이는 높이는 시안처럼 글자 한 줄(배치 그대로), 누르는 영역 48px 은 ::before 로 겹쳐 넓힘(자리 차지 없음) */
.home-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
}

.home-link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--layout-hit-min);
  transform: translateY(-50%);
}

.home-link__text {
  min-width: 0;
}

.home-link:active .home-link__text {
  text-decoration: underline;
}

/* 고비톡 `AskButton` (요소 17, 시안 .ask.dk): 어두운 둥근 띠(테두리 1.5px, 모서리 26px, 안쪽 8px, 사이 10px) + 오른쪽 빨간 보내기 원 42px.
 * 시안 왼쪽의 고비 얼굴 사진(.av 32px)은 이미지 자료가 없어 그리지 않고, 왼쪽 안쪽 여백만 16px 로 둠 */
.home-ask {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  min-height: var(--layout-hit-min);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-bg-inverse);
  border-radius: var(--radius-ask);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.home-ask:active {
  background: var(--color-bg-inverse-pressed);
}

.home-ask__text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-ask__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

/* 보내기 아이콘 18px · 선 2 (시안 .askgo svg) */
.home-ask__go .app-icon {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* ---------- 이번 주 입찰 조건 줄 (시안 v15 .condl · .lnk, 시안 정합 X-03) ----------
 * 내 조건을 저장한 회원에게만 머리 아래 "내 조건 기준 · 조건 변경". 시안 값: 12px · --t2 · 양끝 정렬 · 아래 8px,
 * 조건 변경(.lnk) 13px / 600 · --link(v15 #1b1b1e — 글자색과 비슷해 밑줄로 구분, 토큰 규칙) */
.home-condl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-compact);
}

.home-condl__link {
  flex: none;
  color: var(--color-text-link);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---------- 이번 주 입찰 `DayCells` (요소 10, 시안 .days · .day): 요일 칸 5개 = 건수(17px / 700) + 오늘·내일·요일(11px) ----------
 * 첫 칸(오늘) 선택(.is-on, aria-pressed="true") — 색 + 굵기 · 밑줄 · 테두리(색만으로 구분 금지, 2-6 P5).
 * 그날 0건 칸은 흐리게(opacity .4, 2-5) · 누를 수 없음(disabled, 2-6 개발 기준). 0건인 첫 칸은 선택 표시를 둔 채 흐리게. 칸 높이 48px 이상(2-6) */
.home-days {
  display: flex;
  gap: var(--space-1_5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 요일 칸 = 그날 목록 링크(시안 정합 G1 A-06) — 목록 칸(li)이 폭을 나눔 */
.home-days__item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.home-days__item > .home-day {
  width: 100%;
}

a.home-day {
  text-decoration: none;
}

.home-day {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: var(--layout-hit-min);
  padding: var(--space-1_5) 0;                 /* + 테두리 2px = 시안 .day 안쪽 8px */
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-compact);
  text-align: center;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.home-day__count {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg_5);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: var(--font-numeric);
  line-height: var(--font-leading-compact);
}

.home-day__label {
  display: block;
}

.home-day.is-on {
  border-color: var(--color-text-primary);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse-muted);
}

.home-day.is-on .home-day__count {
  color: var(--color-text-inverse);
}

/* 선택 칸: 요일 글자 굵게 + 밑줄 (색 말고도 구분되게) */
.home-day.is-on .home-day__label {
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.home-day.is-off,
.home-day:disabled {
  opacity: 0.4;
  cursor: default;
}

/* 고대비(강제 색) 모드: 배경색이 사라져도 선택 칸 테두리는 보임 */
@media (forced-colors: active) {
  .home-day.is-on {
    border-color: Highlight;
  }
}

.home-day:not(.is-on):not(.is-off):active {
  background: var(--color-border-default);
}

/* ---------- 19 관심 물건 소식 (H-02, 시안 v15 .fnw · .fnb · .fnt, 시안 정합 G1 A-04) ----------
 * 세로 카드 목록 간격 8px, 잉크 카드(안쪽 12/14px) + 빨간 테두리(시안 .fnb border · shadow), 흰 상태 알약(11px / 700),
 * 물건명 15px, 아래 줄 12px 흐린 흰 글자. 색은 토큰만 */
.home-news__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-news__card {
  display: block;
  padding: var(--space-3) 14px;
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-card);
  background: var(--color-bg-inverse);
  box-shadow: var(--elevation-fav);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.home-news__pill {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-news__name {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-news__sub {
  display: block;
  margin-top: 2px;
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-compact);
}

.home-news__card:focus-visible {
  outline-offset: 2px;
}

/* 19 레이아웃 미리보기 빈 카드(2026-10-27): 링크 없음, 값 자리 "준비 중"은 어두운 바탕용 파란 글자 */
.home-news__card--pending .home-pending {
  color: var(--color-text-pending-on-dark);
}

/* ---------- H-13 결과 발표 · 후기 요청 배너 (시안 v15 reviewBanner() .rvbn) ----------
 * 머리 바로 아래 · 추천 제목 위. 노란 상자(14px 둥근 모서리, 안쪽 11/12px, 위 10 · 아래 4px), 흰 원 아이콘 36px,
 * 제목 13px 굵게 · 보조 11.5px, 잉크 '후기 쓰기' 버튼(12px / 800), 닫기 ✕. 색은 토큰만 */
.home-rvbn {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  margin: var(--space-2_5) 0 var(--space-1);
  padding: 11px var(--space-3);
  border-radius: var(--radius-tile);
  background: var(--color-bg-notice);
}

.home-rvbn[hidden] {
  display: none;
}

.home-rvbn__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
}

.home-rvbn__icon .app-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-text-notice);
  stroke-width: 2;
}

.home-rvbn__text {
  min-width: 0;
}

.home-rvbn__title {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home-rvbn__sub {
  display: block;
  color: var(--color-text-notice);
  font-size: var(--font-size-2xs_5);
  line-height: var(--font-leading-compact);
}

.home-rvbn__go {
  flex: none;
  margin-left: auto;
  padding: 7px 11px;
  border-radius: 9px;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.home-rvbn__x {
  flex: none;
  margin-left: calc(var(--space-1) * -1);
  padding: var(--space-1);
  border: 0;
  background: transparent;
  color: var(--color-text-notice-muted);
  font-size: var(--font-size-md);
  line-height: 1;
  cursor: pointer;
}

/* H-09 이번 주 입찰 더보기(/home/week): 요일 칸 줄은 설명 아래 · 건수 위 (목록 모양은 /static/shared/user-home-lists.css hl-*) */
.hl-days {
  margin-bottom: var(--space-3);
}

/* ---------- 유형 색 (칩 · 아이콘 칸 · 사진 없는 카드 자리 공통, 2-2 color.category.*) ---------- */
.home-tone--apt { background: var(--color-category-apt-bg); color: var(--color-category-apt-text); }
.home-tone--villa { background: var(--color-category-villa-bg); color: var(--color-category-villa-text); }
.home-tone--officetel { background: var(--color-category-officetel-bg); color: var(--color-category-officetel-text); }
.home-tone--house { background: var(--color-category-house-bg); color: var(--color-category-house-text); }
.home-tone--shop { background: var(--color-category-shop-bg); color: var(--color-category-shop-text); }
.home-tone--building { background: var(--color-category-building-bg); color: var(--color-category-building-text); }
.home-tone--land { background: var(--color-category-land-bg); color: var(--color-category-land-text); }
.home-tone--car { background: var(--color-category-car-bg); color: var(--color-category-car-text); }
.home-tone--gold { background: var(--color-category-gold-bg); color: var(--color-category-gold-text); }
.home-tone--etc { background: var(--color-category-etc-bg); color: var(--color-category-etc-text); }
.home-tone--all { background: var(--color-category-all-bg); color: var(--color-category-all-text); }

/* ---------- 유형 바로가기 `CategoryButton` (요소 6, 시안 .cats2 .cat): 아이콘 칸 46px · 모서리 14px · 아래 5px, 이름 11.5px / 400 · 자간 −.3px · 회색, 최소 폭 56px, 사이 16px ----------
 * 아이콘 + 이름만(설계에 건수 없음). 탐색 화면(S-01)이 없어 모두 aria-disabled(누름은 user-home.js 가 막음), 보이는 "준비 중" 표시 없음(설계 sh() 그대로) */
.home-types__list {
  gap: var(--space-4);
}

.home-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  min-height: var(--layout-hit-min);
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs_5);
  line-height: var(--font-leading-compact);
  letter-spacing: var(--font-tracking-chip);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.home-type__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 5px;
  border: 1px solid var(--color-border-default);   /* 시안 v15 .cats2 .cat span: 흰 바탕 · 회색 테두리 · 잉크 단색(유형별 색 없음) */
  border-radius: var(--radius-tile);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);              /* 아이콘 이름이 없을 때만 보이는 대체 글자 */
  font-weight: var(--font-weight-heavy);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

/* 선 아이콘 (시안 v15 .cat span svg: 24px · 선 1.7 · 둥근 끝, 색은 칸 글자색 잉크) */
.home-type__svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-type:active .home-type__icon {
  transform: scale(0.94);
}

.home-type__label {
  color: inherit;
}

/* ---------- 목록 카드 `ItemCard` (요소 7 · 8 · 11 · 12, 시안 v15 .card.sc2): 폭 176px, 모서리 16px, 흰 바탕 · 테두리 없음, 사진 96px, 본문이 사진 위로 8px 겹침 ----------
 * 시안 카드의 판정 빛 테두리(gl-g · gl-y · gl-r)와 관심 하트(.sfh)는 판정 · 회원 자료가 아직 없어 그리지 않음.
 * 시안 v15: 가격 줄(.spr "최저가 ○ · 내 돈 ○") 삭제 → 아래 두 칸 상자(위 잉크 선 1px)가 금액을 band 표기로 보임 */
.home-cards__item {
  display: flex;
}

.home-card {
  position: relative;                          /* 덮는 상세 링크(.home-card__hit)의 기준 */
  display: flex;
  flex-direction: column;
  width: 176px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
}

/* 사진 자리: 유형 색 + 글자 1자(사진 없음 · 불러오기 실패 때 보임), 사진은 위에 덮음. 높이 고정(화면 밀림 없음, 2-8) */
.home-card__media {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 96px;
}

.home-card__glyph {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-heavy);
  line-height: 1;
}

.home-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-bg-image-placeholder);
}

.home-card__img[hidden] {
  display: none;
}

/* 사진 배지 `ImageBadge` (시안 v15 .sc2 .sbd): 높이 22px, 왼쪽 · 위 8px, 모서리 11px, 11.5px / 800. 잉크, 임박(3일 이하) 빨강 */
.home-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  min-height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-badge);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xs_5);
  font-weight: var(--font-weight-heavy);
  line-height: 22px;
  white-space: nowrap;
}

.home-card__badge.is-urgent {
  background: var(--color-brand-primary);
}

.home-card__body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: calc(-1 * var(--space-2));
  padding: 9px;                                /* 시안 .sc2 .cb */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--color-bg-surface);
  font-size: var(--font-size-xs);
}

/* 칩 줄 (시안 v15 .sbg .cbg): 잉크 테두리 알약(공통 .app-pill 과 같은 값), D-day 임박은 잉크 채움, 줄바꿈 허용(2-8).
 * 시안 칩 앞의 13px 아이콘(망치 · 유형)은 아이콘 자료가 없어 그리지 않음 */
.home-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.home-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 20px;
  padding: 1px 8px;
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
  white-space: nowrap;
}

/* 유형 색 클래스(home-tone--*)가 같이 붙어도 칩은 잉크 단색 (시안 v15 .cbg.ty) */
.home-card__chips .home-chip[class*="home-tone--"] {
  background: transparent;
  color: var(--color-text-primary);
}

.home-chip.is-urgent {
  border-color: var(--color-chip-on-bg);
  background: var(--color-chip-on-bg);
  color: var(--color-chip-on-text);
}

/* 물건명 (시안 v15 .snm): 명조 15px, 위 7px, 한 줄 말줄임(화면 읽기는 전체 이름을 읽음) */
.home-card__name {
  overflow: hidden;
  margin-top: 7px;
  color: var(--color-text-primary);
  font-family: var(--font-family-title);
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 카드 전체를 덮는 물건 상세 링크 (D-01, 링크 하나 — 이름은 카드 제목 aria-labelledby). 모양은 그대로, 초점은 카드 테두리로 보임 */
.home-card__hit,
.home-rcard__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.home-card__hit:focus-visible,
.home-rcard__hit:focus-visible {
  outline-offset: -3px;
}

/* 글자 크기 150% 이상(시스템 글꼴 · WebView 글자 확대, user-home.js 가 .is-text-lg 를 붙임): 물건명은 두 줄까지 (2-4 ② · 2-6 P3 · 2-8) */
.app.is-text-lg .home-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  word-break: keep-all; /* 한글은 낱말(띄어쓰기) 단위로 넘기고, 넘치는 긴 낱말만 아무 데서나 */
  overflow-wrap: anywhere;
}

/* 금액 뒤 "원"은 작은 글씨 (2-8) */
.home-won {
  margin-left: 1px;
  font-size: 0.85em;
  font-weight: var(--font-weight-medium);
}

/* 정보 상자 `InfoBox` (시안 v15 .sbx): 바탕 · 모서리 없음, 위 잉크 선 1px, 안쪽 위 8px. 위 8px 띄움(남는 높이는 상자 아래) */
.home-card__box {
  display: block;
  margin-top: var(--space-2);
  padding: var(--space-2) 0 0;
  border-top: 1px solid var(--color-border-inverse);
  border-radius: 0;
  background: none;
}

.home-card__box-label {
  display: block;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-compact);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* 금액 (시안 v15 .sbx.s2 b): 20px / 800 · 자간 −.03em · 잉크, 단위(.home-card__unit)는 .6em
 * 칸보다 넓으면(data-fit) /static/shared/user-home.js 가 1px 씩 줄여 --fit 으로 넣음(설계 C-8, 최소 12px). 말줄임은 12px 에서도 넘칠 때만 */
.home-card__box-value {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--color-text-primary);
  font-size: var(--fit, var(--font-size-2xl));
  font-variant-numeric: var(--font-numeric);
  font-weight: var(--font-weight-heavy);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card__unit {
  margin-left: 1px;
  font-size: 0.6em;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

/* 예상 수익 · 할인율 (시안 v15 .sbx b.rd): 진한 빨강 #b11b22(money.gain, 흰 바탕 6.9 : 1) */
.home-card__box-value.is-gain,
.home-card__box-value.is-discount {
  color: var(--color-money-gain);
}

/* 값 없음 · "—" (시안 v15 .sbx.s2 b.mt): 13px */
.home-card__box-value.is-muted {
  font-size: var(--font-size-sm);
}

/* 두 칸 상자(시안 v15 .sbx.sp.s2): 왼쪽 | 세로선 1px | 오른쪽, 같은 폭 · 사이 9px */
.home-card__box--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 0 9px;
  align-items: stretch;
}

.home-card__part {
  min-width: 0;
}

.home-card__rule {
  align-self: stretch;
  width: 1px;
  background: var(--color-border-divider);
}

/* 신규형: 확성기 + "○일 전 등록 · 오늘 신규 등록" | "입찰 D-○" — 시안 .nwb · .nwl · .nwr(11px, 자간 −.3px) — 두 칸 상자와 같은 선 · 배치 */
.home-card__box--new {
  align-items: center;
}

.home-card__new {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-compact);
  letter-spacing: var(--font-tracking-chip);
  white-space: nowrap;
}

.home-card__new-icon {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 오른쪽 "입찰 D-○" (시안 .nwr): 11px / 400, D-○ 만 12px 굵게 (.nwr b) */
.home-card__bid {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-compact);
  letter-spacing: var(--font-tracking-chip);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card__bid-dday {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ---------- 목록 카드 빈 카드 (8 소액, D-19): 같은 템플릿 · 같은 부품(사진 칸 · 배지 · 칩 · 상자), 값 글자만 파랑 "준비 중" ----------
 * 사진 칸은 시안 빈 사진 자리(.card .im #E9EAED) 그대로, 가운데에 "준비 중" 글자(사진 칸 글자 크기). 시안 v15: 카드 아래 "준비 금액" 줄 삭제 */
.home-tone--pending {
  background: var(--color-bg-image-placeholder);
}

.home-card__photo-pending {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ---------- 추천 카드 넘기기 `RecommendCarousel` (요소 4, 시안 v15 .cfs · .cfc.gc, 2-3 · 2-7) ----------
 * 넘김 틀: 높이 525px(시안 v15), 좌우 화면 끝까지(−16px), 원근 1000px, 가로 넘침은 자름. 카드: 300 × 485px, 위 14px, 모서리 16px.
 * 위치 클래스(서버가 처음 정하고 /static/shared/user-home.js 가 바꿈): is-pos-0 가운데 · is-pos-1 옆(0.84배 · 28° · 밝기 .62) ·
 * is-pos-2 바깥(0.68배 · 34° · 밝기 .45) · is-pos-h 숨김, is-left · is-right 방향. 시안 v15 hlite 값, 가운데는 묶음 그림자(elevation.reco).
 * 판정 빛 테두리(gl-*) · 뒤 조명(cfspot)은 판정 자료가 없어 쓰지 않음 → 가운데는 중립 그림자.
 * 이전 · 정지 · 다음 버튼(2-6 O1 · O2): 시안에 없는 줄이라 화면 배치를 바꾸지 않음(2026-10-22 사용자 지시) —
 * 평소에는 화면에서 숨김(화면 읽기 · 키보드로는 닿음), 키보드 초점이 버튼에 오면 넘김 틀 아래쪽 위에 겹쳐 떠서 보임(absolute, 자리 차지 없음).
 * 마크업은 틀 맨 앞(포커스 순서). 스크립트가 없으면 hidden. 자동 넘김은 호버 · 초점 · 누름 동안 멈춤(/static/shared/user-home.js). */
.home-cf {
  position: relative;
  margin: var(--space-3) calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
}

.home-cf__track {
  position: relative;
  height: 525px;
  overflow-x: clip;
  overflow-y: visible;
  perspective: 1000px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* 화면에서 숨김(.app-visually-hidden 과 같은 방식) — 초점이 들어오면(:focus-within) 넘김 틀 아래쪽 가운데에 겹쳐 보임 */
.home-cf__controls {
  position: absolute;
  bottom: var(--space-1);
  left: 50%;
  z-index: 5;
  display: flex;
  gap: var(--space-1);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-cf__controls:focus-within {
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-0_5);
  overflow: visible;
  clip-path: none;
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
  box-shadow: var(--elevation-2);
  transform: translateX(-50%);
}

.home-cf__controls[hidden] {
  display: none;
}

.home-cf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--layout-hit-min);
  height: var(--layout-hit-min);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.home-cf__btn:active {
  background: var(--color-bg-muted);
}

.home-cf__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-cf__icon--play {
  display: none;
  fill: currentColor;
  stroke-width: 1.5;
}

.home-cf.is-paused .home-cf__icon--pause {
  display: none;
}

.home-cf.is-paused .home-cf__icon--play {
  display: block;
}

.home-cf__slide {
  position: absolute;
  top: 14px;
  left: 50%;
  width: min(300px, calc(100% - 2 * var(--layout-gutter)));
  height: 485px;
  border-radius: var(--radius-card);
  transform: translateX(-50%);
  transition:
    transform var(--motion-duration-carousel) var(--motion-ease-carousel),
    opacity var(--motion-duration-carousel),
    filter var(--motion-duration-carousel),
    box-shadow var(--motion-duration-carousel);
  will-change: transform;
}

/* 옆 · 바깥 카드의 유리 같은 빛 (시안 .cfc::after) — 꾸밈 */
.home-cf__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 50%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-duration-carousel);
}

.home-cf__slide.is-pos-0 {
  z-index: 5;
  box-shadow: var(--elevation-reco), 0 0 0 1px var(--color-border-default);
  transform: translateX(-50%);
}

.home-cf__slide.is-pos-1 {
  z-index: 4;
  box-shadow: var(--elevation-carousel-side);
  filter: brightness(0.62) saturate(0.7);
}

.home-cf__slide.is-pos-1.is-left {
  transform: translateX(-50%) translateX(-36%) scale(0.84) rotateY(28deg);
}

.home-cf__slide.is-pos-1.is-right {
  transform: translateX(-50%) translateX(36%) scale(0.84) rotateY(-28deg);
}

.home-cf__slide.is-pos-2 {
  z-index: 3;
  box-shadow: var(--elevation-carousel-side);
  filter: brightness(0.45) saturate(0.6);
}

.home-cf__slide.is-pos-2.is-left {
  transform: translateX(-50%) translateX(-60%) scale(0.68) rotateY(34deg);
}

.home-cf__slide.is-pos-2.is-right {
  transform: translateX(-50%) translateX(60%) scale(0.68) rotateY(-34deg);
}

.home-cf__slide.is-pos-1::after,
.home-cf__slide.is-pos-2::after {
  opacity: 1;
}

.home-cf__slide.is-pos-h {
  box-shadow: var(--elevation-carousel-side);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) scale(0.5);
}

/* 가운데 카드 좌우 바깥(옆 · 바깥 카드)을 누르면 이전 · 다음 장, 가운데 카드는 누르면 넘기지 않고 상세로(inert 라 옆 카드 누름은 넘김 틀이 받고, 스크립트가 가운데 카드 상자 기준으로 판정) */
@media (hover: hover) and (pointer: fine) {
  .home-cf__track {
    cursor: grab;
  }
}

/* ---------- 추천 카드 `RecommendCard` (시안 v15 .cfc.gc · H v0.13 4번): 300 × 485 흰 카드 = ① 사진 113 ② 정보 114 ③ 잉크 상자 114 ④ 두 칸 86 ⑤ 바닥 38 ----------
 * 값이 없는 칸은 파란 글자 "준비 중"(D-20). 판정 빛 테두리 · "내 돈 ○으로" · 자본 대비 수익률 · "총 · 대출" 줄 · 이름 옆 › 는 없앰.
 * 큰 금액(.home-rcard__gain · __cell-value)은 칸보다 넓으면 /static/shared/user-home.js 가 1px 씩 줄임(최소 12px) — CSSOM 사용자 정의 속성 --fit 만 씀(style 속성 아님).
 * 낙찰 가능성 게이지: 서버는 data-gauge="N"(0 ~ 100 정수)만, 스크립트가 --gauge: N% 를 넣으면 밝은 회색 층이 아래부터 N% 차오름(clip-path). 스크립트가 없으면 숫자만 */
.home-rcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  text-align: left;
}

/* 가운데로 올 때 빛 스윕 1회 (motion.shine, 시안 .shn) */
.home-rcard__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.home-rcard__shine::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 50%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  opacity: 0;
  transform: skewX(-20deg);
}

.is-pos-0 .home-rcard__shine::before {
  animation: home-cf-shine var(--motion-duration-shine) var(--motion-delay-shine) var(--motion-ease-shine);
}

@keyframes home-cf-shine {
  0% {
    left: -60%;
    opacity: 1;
  }

  100% {
    left: 130%;
    opacity: 1;
  }
}

/* ① 사진 113px (시안 .gph): 사진이 없으면 빈 사진 자리 색 + 가운데 "준비 중" */
.home-rcard__media {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  height: 113px;
  background: var(--color-bg-image-placeholder);
}

.home-rcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-rcard__img[hidden] {
  display: none;
}

.home-rcard__photo-pending {
  display: inline-flex;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* 왼쪽 위 D-day 잉크 알약 (시안 .gdd): 왼쪽 12 · 위 10px, 11px / 700 */
.home-rcard__dday {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
  white-space: nowrap;
}

.home-rcard__dday .home-pending {
  color: var(--color-text-pending-on-dark);
}

/* 왼쪽 아래 "현장 사진" (시안 .gpl): 흰 11px, 그림자. 사진이 있을 때만 */
.home-rcard__photo-label {
  position: absolute;
  bottom: 7px;
  left: 12px;
  z-index: 1;
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 관심 하트 (시안 v15 .gc .cfh): 30px 흰 원, 오른쪽 10 · 위 8px, 아이콘 18px. 누르는 영역 48px */
.home-rcard__fav,
.home-card__fav {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: var(--color-bg-fav);
  box-shadow: var(--elevation-fav);
  color: var(--color-text-primary);
}

.home-rcard__fav::before,
.home-card__fav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--layout-hit-min);
  height: var(--layout-hit-min);
  transform: translate(-50%, -50%);
}

.home-rcard__fav-icon,
.home-card__fav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* 담긴 물건: 채운 빨간 하트 (시안 .cfh.on) */
.home-rcard__fav[aria-pressed="true"],
.home-card__fav[aria-pressed="true"] {
  color: var(--color-brand-primary);
}

.home-rcard__fav[aria-pressed="true"] .home-rcard__fav-icon,
.home-card__fav[aria-pressed="true"] .home-card__fav-icon {
  fill: currentColor;
}

/* 사각 카드 하트(시안 v15 .sfh — 사진 오른쪽 위 7px, 30px 흰 원 · 17px 하트, 시안 정합 G1 A-03). 덮는 상세 링크(z-index 2) 위 */
.home-card__fav {
  top: 7px;
  right: 7px;
  border: 0;
  padding: 0;
}

.home-card__fav-icon {
  width: 17px;
  height: 17px;
}

.home-card__fav[aria-disabled="true"] {
  color: var(--color-text-disabled);
}

/* ② 정보 114px (시안 .gtop): 안쪽 10 / 16px. 알약 줄(유형 · 경매 + 오른쪽 매각 일시) → 이름(명조 22px 두 줄) → 주소 줄 */
.home-rcard__info {
  display: flex;
  flex: none;
  flex-direction: column;
  height: 114px;
  padding: 10px 16px;
}

.home-rcard__tags {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.home-rcard__when {
  margin-left: auto;
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-rcard__name {
  display: -webkit-box;
  margin-top: auto;
  padding-top: 3px;
  overflow: hidden;
  color: var(--color-text-primary);
  font-family: var(--font-family-title);
  font-size: 1.375rem;                          /* 22px (시안 v15 .gnm) */
  font-weight: var(--font-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.14px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.home-rcard__addr {
  margin-block: auto;
  padding-top: 4px;
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs_5);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 아래 묶음 (시안 .gbot): 좌우 16px */
.home-rcard__bottom {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 16px;
}

/* ③ 잉크 상자 114px (시안 .gink): 모서리 12px, 안쪽 위 14 · 좌우 14px. "예상 수익 · 세후" + 빨간 알약 "수익률 N%" + 금액 48px 빨강 그라데이션 */
.home-rcard__ink {
  display: flex;
  flex: none;
  flex-direction: column;
  height: 114px;
  padding: 14px 14px 0;
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.home-rcard__ink-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  letter-spacing: 0.12em;
}

.home-rcard__rate {
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xs);
  letter-spacing: -0.14px;
}

/* 수익률 값이 없을 때(엔진 키 없음 · HOLD-21): 빨간 알약 대신 테두리만 — 값처럼 보이지 않게 "수익률 준비 중" */
.home-rcard__rate--empty {
  padding: 0 7px;
  border: 1px solid var(--color-text-inverse-muted);
  background: transparent;
  color: var(--color-text-inverse-muted);
}

/* 잉크 바탕 위 "준비 중": 기본 파랑(#2f5bb7)은 잉크 바탕 대비 약 2.7 : 1 로 모자라 어두운 바탕용 "준비 중" 색 토큰을 씀 */
.home-rcard__ink .home-pending {
  color: var(--color-text-pending-on-dark);
  letter-spacing: 0;
}

.home-rcard__gain {
  position: relative;
  top: -0.05em;
  margin: auto 0;
  overflow: hidden;
  font-size: var(--fit, var(--font-size-display)); /* 48px (시안 v15 .gam), 넘치면 --fit */
  font-weight: var(--font-weight-heavy);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.home-rcard__gain.is-money {
  background: var(--color-money-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 값 없음 · 보류 글자(시안 .gmt): 18px */
.home-rcard__gain.is-muted {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

/* ④ 두 칸 86px (시안 .gtl): 1.618 : 1, 사이 8px, 위 10px. 칸 모서리 12px, 안쪽 위 16 · 좌우 12px */
.home-rcard__cells {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: var(--space-2);
  height: 86px;
  margin-top: var(--space-2_5);
}

.home-rcard__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 16px 12px 0;
  border-radius: var(--radius-md);
}

.home-rcard__cell-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.home-rcard__cell-value {
  display: flex;
  align-items: flex-end;
  height: 33px;
  margin-top: var(--space-2);
  overflow: hidden;
  font-size: var(--fit, var(--font-size-display-sm)); /* 33px (시안 v15 .gtl b), 넘치면 --fit */
  font-weight: var(--font-weight-heavy);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.home-rcard__cell-value .home-pending {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

/* 준비 금액 칸 (시안 .gnd): 회색 바탕, 금액은 빨강 그라데이션 */
.home-rcard__cell--need {
  background: var(--color-bg-page);
}

.home-rcard__cell--need .home-rcard__cell-value.is-money {
  background: linear-gradient(100deg, var(--color-brand-primary), var(--color-money-gain));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 낙찰 가능성 칸 (시안 .gpw): 회색 바탕(gauge-track) · 가운데 정렬. 밝은 회색 층(.home-rcard__gauge, 시안 .gov — 같은 글자)이
 * 아래부터 --gauge 만큼 차오름. 글자는 두 층 모두 잉크(gauge-text) */
.home-rcard__cell--win {
  align-items: center;
  padding-inline: 8px;
  background: var(--color-gauge-track);
  text-align: center;
}

.home-rcard__cell--win .home-rcard__cell-label {
  color: var(--color-gauge-text);
  padding-left: 0.12em;
}

.home-rcard__cell--win .home-rcard__cell-value {
  color: var(--color-gauge-text);
  justify-content: center;
}

/* 게이지 없는 칸의 "준비 중": 회색 바탕(#cfcfcf) 위 진한 파랑(약 5.46 : 1, 화면 점검 2026-10-26) */
.home-rcard__cell--win .home-rcard__cell-value .home-pending {
  color: var(--color-text-pending-on-muted);
}

.home-rcard__gauge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 0;
  background: var(--color-gauge-level);
  clip-path: inset(calc(100% - var(--gauge, 0%)) 0 0 0);
  pointer-events: none;
}

/* ⑤ 바닥 38px (시안 .gft): 위 잉크 선, "물건 상세 보기" + › */
.home-rcard__foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  margin-top: auto;
  border-top: 1px solid var(--color-border-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.14px;
}

.home-rcard__foot-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 금액 단위(공통 .app-unit)는 그라데이션 글자 안에서도 같은 칠(배경 클립)을 씀 */
.home-rcard .app-unit {
  letter-spacing: 0;
}

/* ---------- 예측 성공 사례 `CaseCard` (요소 9, 시안 .pcc): 폭 250px, 안쪽 12px, 모서리 14px, 테두리 1px ---------- */
.home-case {
  width: 250px;
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-tile);
  background: var(--color-bg-page);
}

.home-case__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1_5);
}

.home-case__name {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-case__date {
  flex: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-compact);
}

.home-case__rows {
  margin: 0;
}

.home-case__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-compact);
}

.home-case__row dt {
  flex: none;
  color: var(--color-text-secondary);
}

.home-case__row dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-bold);
  text-align: right;
}

/* 사례 카드 → 사례 분석(H-11) 덮는 링크 (2026-10-26, 계약 docs/예측성공사례_서비스API.md). 모양은 그대로, 초점은 카드 안쪽 테두리 */
.home-case--link {
  position: relative;
}

.home-case__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.home-case__hit:focus-visible {
  outline-offset: -3px;
}

/* 근거 · 낙찰자 줄은 설명 글(시안 .pcr em: 보조 글자, 굵지 않음), 오차 · 적중은 빨강(시안 .pcr b.gain) */
.home-case__row--note {
  align-items: flex-start;
}

.home-case__row--note dd {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  word-break: keep-all;
}

.home-case__row dd.is-gain {
  color: var(--color-money-gain);
}

/* ---------- 어제 낙찰 결과 `SummaryBox` + `BarButton` (요소 13, 시안 .grey · .bbar.dk) ---------- */
/* 요약 상자 (시안 .grey): 안쪽 12px, 모서리 12px, 13px, 줄 높이 시안 normal(≈1.2).
 * 시안 v15 는 바탕(#F2F2F2)이 페이지와 같아 상자가 사라지므로 (제안) 흰 상자(surface)로 둠. "±3% 적중" 칸은 없앰 */
.home-summary {
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-compact);
}

.home-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--layout-hit-min);
  margin-top: var(--space-2);
  padding: 13px var(--space-3_5);
  border: 1.5px solid var(--color-bg-inverse);
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}

.home-bar:active {
  background: var(--color-bg-inverse-pressed);
}

.home-bar__text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-1_5);
  min-width: 0;
}

.home-bar__icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-bar__arrow {
  flex: none;
  font-size: var(--font-size-lg);
}

/* ---------- 낙찰 인증 · 후기 `PostBox` (요소 14, 시안 .box.pst): 안쪽 10 / 12px(오른쪽 30px), 모서리 12px, 테두리 1px ---------- */
.home-post {
  position: relative;
  padding: var(--space-2_5) 30px var(--space-2_5) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
}

.home-post__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-md);
}

.home-post__meta {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-xs);
}

.home-post__arrow {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-lg);
  transform: translateY(-50%);
}

/* ---------- 동영상 강의 `VideoCard` (요소 16, 시안 .vcd · .vth): 폭 168px, 썸네일 94px · 모서리 12px, 제목 13px, 분류 11.5px ---------- */
.home-video {
  width: 168px;
}

.home-video__thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 94px;
  border-radius: var(--radius-md);
  background: var(--color-bg-video);
}

.home-video__play {
  width: 22px;
  height: 22px;
}

.home-video__play circle {
  fill: var(--color-bg-video-label);
}

.home-video__play path {
  fill: var(--color-text-inverse);
}

.home-video__len {
  position: absolute;
  right: var(--space-1_5);
  bottom: var(--space-1_5);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  background: var(--color-bg-video-label);
  color: var(--color-text-inverse);
  font-size: 0.65625rem;
  line-height: var(--font-leading-compact);
}

/* 재생 시간 "준비 중": 어두운 썸네일(약 #111214) 위 밝은 파랑(약 8.6 : 1, 화면 점검 2026-10-26) */
.home-video__len .home-pending {
  color: var(--color-text-pending-on-dark);
}

.home-video__title {
  margin-top: var(--space-1_5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  word-break: keep-all;
}

.home-video__cat {
  margin-top: 2px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs_5);
  line-height: var(--font-leading-compact);
}

/* ---------- 시안 v15 회색 바탕 위 상자 (body.app--v15, 시안 v15 .box: 테두리 없는 흰 상자) ----------
 * 시안 v15 는 요일 칸(.day) · 자리 카드의 바탕이 페이지와 같은 #F2F2F2 라 경계가 사라짐 → (제안) 흰 바탕(surface)으로 구분 */
.app--v15 .home-day,
.app--v15 .home-placeholder {
  background: var(--color-bg-surface);
}

.app--v15 .home-day.is-on {
  background: var(--color-bg-inverse);
}

.app--v15 .home-case,
.app--v15 .home-post {
  border-color: transparent;
  background: var(--color-bg-surface);
}

/* ---------- 움직임 줄이기 (2-6 · 2-7): 추천 카드 넘김은 기울임 · 크기 · 밝기 · 빛 없이 즉시 바뀜, 옆 카드는 투명도로만 구분 ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-cf__track {
    perspective: none;
  }

  .home-cf__slide.is-pos-1,
  .home-cf__slide.is-pos-2 {
    filter: none;
  }

  .home-cf__slide.is-pos-1 {
    opacity: 0.45;
  }

  .home-cf__slide.is-pos-2 {
    opacity: 0.25;
  }

  .home-cf__slide.is-pos-1.is-left {
    transform: translateX(-50%) translateX(-36%);
  }

  .home-cf__slide.is-pos-1.is-right {
    transform: translateX(-50%) translateX(36%);
  }

  .home-cf__slide.is-pos-2.is-left {
    transform: translateX(-50%) translateX(-60%);
  }

  .home-cf__slide.is-pos-2.is-right {
    transform: translateX(-50%) translateX(60%);
  }

  .home-cf__slide.is-pos-h {
    transform: translateX(-50%);
  }

  .home-cf__slide::after,
  .is-pos-0 .home-rcard__shine::before {
    display: none;
    animation: none;
  }
}

.app-legal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.app-legal-footer a { color: inherit; text-underline-offset: 0.2em; }

/* 예시 값 배지(2026-10-28, partials/user-sample-badge) — 홈 카드 칸 이름 옆. 알림 색 토큰으로 "준비 중"(파란 글자) · 실제 값과 구분.
 * 같은 규칙이 user-item-detail.css · user-item-row.css 에도 있음(그 화면들이 이 파일을 안 읽어도 보이게). */
.usr-sample {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--color-bg-notice);
  color: var(--color-text-notice);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  vertical-align: middle;
  white-space: nowrap;
}
/* 추천 카드 낙찰 가능성 칸은 좁아 칸 이름 옆에 붙이면 넘침 → 이름 아래 줄 가운데(바탕 · 게이지 두 층이 같은 모양이라 겹침 위치가 맞음) */
.home-rcard__cell--win .usr-sample {
  display: block;
  width: max-content;
  margin: 2px auto 0;
  font-size: 10px;
  line-height: 14px;
}