/* 사용자 홈 — 홈 디자인 시안 v19 (고비_홈디자인시안_261027v19, 화면설계서 H 홈 v0.18, 2026-10-28)
 * - 새 홈 템플릿(views/user/home-v19.ejs)만 읽는 파일(stylesheets). 옛 홈(user/home)과 다른 화면은 이 파일을 읽지 않습니다.
 * - 범위: <main class="app-main home19"> 안은 .home19, 머리 · 하단 탭 · 바탕처럼 <main> 밖은 .app:has(.app-main.home19).
 * - 값은 토큰만(public/user-tokens.css — v19 새 토큰은 같은 파일 맨 아래 절). 시안 값과 다르게 정한 것은 "(제안)".
 * - 공통 부품(추천 카드 · 사각 카드 · 사례 카드 · 요일 칸 · 브리핑 띠 · 후기 상자 · 동영상)은 user-home.css · user-app.css 의 모양을 그대로 쓰고
 *   v19 에서 바뀐 크기 · 글꼴만 덮어씁니다(공통 부품 파일은 고치지 않음).
 * - 인라인 style 없음(CSP style-src 'self'). 누르는 영역 48 × 48 이상(2-6). */

/* ---------- 1 · 2 머리 (시안 .hlite .top .gwm · .hbg): GOBI 왼쪽 · 26px 굵게 · 밑줄 없음, 하트 · 종 배지 17px + 바탕색 테두리 ---------- */
.app:has(.app-main.home19) .app-header__bar.app-headbar {
  grid-template-columns: minmax(0, 1fr) auto;
}

.app:has(.app-main.home19) .app-header__bar.app-headbar:has(.app-headbar__start) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.app:has(.app-main.home19) .app-wordmark {
  grid-column: 1;
  justify-self: start;
  justify-content: flex-start;
}

.app:has(.app-main.home19) .app-headbar:has(.app-headbar__start) .app-wordmark {
  grid-column: 2;
}

.app:has(.app-main.home19) .app-headbar .app-header__actions {
  grid-column: -2;
}

.app:has(.app-main.home19) .app-wordmark__text {
  padding-left: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-wordmark-lg);
  font-weight: var(--font-weight-heavy);
  line-height: 1;
  letter-spacing: var(--font-tracking-wordmark-wide);
}

.app:has(.app-main.home19) .app-wordmark__text::after {
  display: none;
}

.app:has(.app-main.home19) .app-badge {
  min-width: var(--layout-badge-size-md);
  height: var(--layout-badge-size-md);
  font-weight: var(--font-weight-heavy);
  box-shadow: 0 0 0 var(--space-0_5) var(--color-bg-page);
}

/* ---------- 21 첫 화면 안내 (시안 .hero): 문구 3줄 + 잉크 안내 상자, 오른쪽 고비 그림(아래쪽 흐리게 사라짐) ---------- */
.home19-hero {
  position: relative;
  min-height: var(--layout-hero-min-height);
  margin: var(--space-1) calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  padding: var(--space-5) var(--space-5) var(--space-4_5);
  overflow: hidden;
}

.home19-hero__text {
  position: relative;
  z-index: 2;
  width: var(--layout-hero-text-width);
}

.home19-hero__copy {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
  letter-spacing: var(--font-tracking-hero);
}

.home19-hero__line {
  display: block;
  line-height: var(--font-leading-hero);
  white-space: nowrap;
}

.home19-hero__l1,
.home19-hero__l3 {
  font-size: var(--font-size-2xl_5);
  font-weight: var(--font-weight-medium);
}

.home19-hero__line b {
  font-weight: var(--font-weight-heavy);
}

.home19-hero__l2 {
  color: var(--color-brand-primary);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-heavy);
}

.home19-hero__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0_75);
  width: 100%;
  min-height: var(--layout-hit-min);
  padding: var(--space-3) var(--space-3_5);
  border-radius: var(--radius-box);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-align: left;
  text-decoration: none;
  box-shadow: var(--elevation-hero-box);
  transition: transform var(--motion-duration-fast) var(--motion-ease-out);
}

.home19-hero__box:active {
  transform: scale(var(--scale-pressed));
}

.home19-hero__box:focus-visible {
  outline-color: var(--focus-ring-color);
}

.home19-hero__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heavy);
  letter-spacing: var(--font-tracking-name);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home19-hero__say {
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text-inverse-subtle);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home19-hero__go {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md_5);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-compact);
}

.home19-hero__go i {
  color: var(--color-brand-primary-on-ink);
  font-size: var(--font-size-lg_5);
  font-style: normal;
}

.home19-hero__fig {
  position: absolute;
  right: var(--layout-hero-figure-offset);
  bottom: 0;
  z-index: 3;
  width: var(--layout-hero-figure-size);
  height: var(--layout-hero-figure-size);
  pointer-events: none;
}

.home19-hero__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 흐림 · 투명은 하반신(그림 높이 86% 아래)만 (시안 .hf-im · .hf-blur) */
.home19-hero__img {
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, rgba(0, 0, 0, 0.5) 93%, transparent 100%);
}

.home19-hero__blur {
  filter: blur(var(--effect-hero-figure-blur));
  opacity: 0.7;
  -webkit-mask-image: linear-gradient(to bottom, transparent 86%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 86%, #000 94%, transparent 100%);
}

/* ---------- 묶음 머리 (시안 .sh): 산세리프 18px 600, 아래 잉크 선 — 글꼴만 범위 토큰으로 바뀜(user-home.css .app--v15 규칙 그대로) ---------- */
.home19 .home-section__title {
  letter-spacing: var(--font-tracking-heading);
}

/* 추천 제목은 안내 바로 아래(시안 .hlite .rec-sh margin-top −7px) */
.home19 .home19-reco-head {
  margin-top: var(--layout-reco-head-pull);
}

/* ---------- 3 · 4 추천 카드 넘기기 (시안 .hlite .cfs · .cfc): 카드 230 × 372, 옆 0.76 · 바깥 0.61 · 기울기 14° · 17°, 흐림 3 · 5px + 흰 막 20% ---------- */
.home19 .home-cf {
  margin-top: var(--space-3);
  margin-bottom: var(--layout-reco-track-pull);
}

.home19 .home-cf__track {
  height: var(--layout-reco-track-height);
}

.home19 .home-cf__slide {
  width: var(--layout-reco-card-width);
  height: var(--layout-reco-card-height);
}

.home19 .home-cf__slide::after {
  background: var(--color-bg-veil);
  box-shadow: none;
}

.home19 .home-cf__slide.is-pos-0 {
  box-shadow: var(--elevation-reco-center);
}

.home19 .home-cf__slide.is-pos-1 {
  filter: blur(var(--effect-blur-near));
}

.home19 .home-cf__slide.is-pos-2 {
  filter: blur(var(--effect-blur-far));
}

.home19 .home-cf__slide.is-pos-1.is-left {
  transform: translateX(-50%) translateX(-36%) scale(var(--layout-reco-scale-near)) rotateY(var(--layout-reco-tilt-near));
}

.home19 .home-cf__slide.is-pos-1.is-right {
  transform: translateX(-50%) translateX(36%) scale(var(--layout-reco-scale-near)) rotateY(calc(-1 * var(--layout-reco-tilt-near)));
}

.home19 .home-cf__slide.is-pos-2.is-left {
  transform: translateX(-50%) translateX(-60%) scale(var(--layout-reco-scale-far)) rotateY(var(--layout-reco-tilt-far));
}

.home19 .home-cf__slide.is-pos-2.is-right {
  transform: translateX(-50%) translateX(60%) scale(var(--layout-reco-scale-far)) rotateY(calc(-1 * var(--layout-reco-tilt-far)));
}

/* 카드 안: 남는 높이는 사진 칸이 채움, 큰 숫자만 줄임(작은 글자 11 · 12px 그대로, 시안 10/27).
 * 이름 위 5px · 잉크 상자 위 11px · 두 칸 위 7px 은 시안 .hlite .cfc 실측 값 그대로(4px 단위 밖 부품 전용 — 토큰으로 올리지 않음) */
.home19 .home-rcard__media {
  flex: 1 1 auto;
  height: auto;
  min-height: var(--layout-reco-photo-min);
}

.home19 .home-rcard__info {
  height: auto;
  padding: var(--space-2) var(--space-card-inset-reco);
}

.home19 .home-rcard__name {
  margin-top: 5px;
  padding-top: var(--space-0_5);
  font-size: var(--font-size-lg_5);
}

.home19 .home-rcard__addr {
  margin: var(--space-1) 0 0;
  padding-top: var(--space-0_5);
}

.home19 .home-rcard__bottom {
  flex: none;
  padding: 0 var(--space-card-inset-reco);
}

.home19 .home-rcard__ink {
  height: auto;
  padding: 11px var(--space-3) var(--space-2_5);
}

.home19 .home-rcard__gain {
  margin: var(--space-2) 0;
  font-size: var(--fit, var(--font-size-display-xs));
}

.home19 .home-rcard__cells {
  height: auto;
  margin-top: 7px;
}

.home19 .home-rcard__cell {
  padding: var(--space-2_5) var(--space-2_5) var(--space-2);
}

.home19 .home-rcard__cell-value {
  height: auto;
  margin-top: var(--space-1);
  font-size: var(--fit, var(--font-size-2xl_5));
  line-height: 1.1;
}

.home19 .home-rcard__foot {
  height: var(--layout-reco-foot-height);
}

/* ---------- 6 종류 골라 보기 (시안 .cats2): 손대지 않으면 천천히 오른쪽으로 흐름(/static/shared/user-home-v19.js), 스크롤 막대 숨김 ---------- */
.home19 .home19-marquee {
  scrollbar-width: none;
}

.home19 .home19-marquee::-webkit-scrollbar {
  display: none;
}

/* ---------- 7 · 8 · 11 · 12 사각 카드 (시안 .card.sc2): 이름 뒤 › (시안 .snm svg) ---------- */
.home19 .home-card__name::after {
  content: "";
  display: inline-block;
  width: var(--space-1_5);
  height: var(--space-1_5);
  margin: 0 0 var(--space-0_5) var(--space-1);
  border-top: var(--space-0_5) solid currentColor;
  border-right: var(--space-0_5) solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

.home19 .home-card--pending .home-card__name::after {
  display: none;
}

.home19 .home-card__name {
  letter-spacing: var(--font-tracking-tight);
}

/* ---------- 13 어제 낙찰 결과 (시안 .ydr): 막대 3개(낙찰 건수) + 도넛(평균 낙찰가율) 두 흰 상자 ---------- */
.home19-yd__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2_5);
}

.home19-yd__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.home19-yd__label {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
}

.home19-yd__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2_5);
  height: var(--layout-donut-size);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.home19-yd__bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  height: 100%;
}

.home19-yd__num {
  margin-bottom: var(--space-0_75);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  font-style: normal;
  line-height: var(--font-leading-compact);
  white-space: nowrap;
}

.home19-yd__num .home-pending {
  font-size: var(--font-size-badge);
}

.home19-yd__svg {
  width: 100%;
  height: var(--layout-chart-height);
  fill: var(--color-chart-bar);
}

.home19-yd__day {
  margin-top: var(--space-1);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-compact);
  white-space: nowrap;
}

.home19-yd__bar.is-on .home19-yd__svg {
  fill: var(--color-bg-inverse);
}

.home19-yd__bar.is-on .home19-yd__num,
.home19-yd__bar.is-on .home19-yd__day {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.home19-yd__donut {
  position: relative;
  width: var(--layout-donut-size);
  height: var(--layout-donut-size);
  margin: var(--space-1_5) auto 0;
}

.home19-yd__ring {
  width: 100%;
  height: 100%;
}

.home19-yd__track,
.home19-yd__arc {
  fill: none;
  stroke-width: 4.5;
}

.home19-yd__track {
  stroke: var(--color-chart-track);
}

.home19-yd__arc {
  stroke: var(--color-brand-primary);
  stroke-linecap: round;
}

.home19-yd__rate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
}

.home19-yd__rate b {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl_5);            /* 19px — 시안 SVG 글자 7 / 36 × 96px */
  font-weight: var(--font-weight-heavy);
  line-height: 1.1;
}

.home19-yd__rate b .home-pending {
  font-size: var(--font-size-xs);
}

.home19-yd__rate small {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-badge);           /* 10px — 시안 SVG 글자 3.6 / 36 × 96px */
  line-height: var(--font-leading-compact);
}

/* ---------- 17 고비 추천받기 (시안 .ask.dk.askrec): 잉크 띠 · 얼굴 32px · 2줄 15px 굵게 · 빨간 보내기 원 42px. 묶음 제목 없음 ---------- */
.home19-ask {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  min-height: var(--layout-hit-min);
  margin-top: var(--space-2_5);
  padding: var(--space-2);
  border: var(--border-width-rule) solid var(--color-border-inverse);
  border-radius: var(--radius-ask);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.home19-ask:focus-visible {
  outline-color: var(--focus-ring-color);
}

.home19-ask__av {
  flex: none;
  width: var(--layout-ask-avatar);
  height: var(--layout-ask-avatar);
  margin-left: var(--space-0_5);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
}

.home19-ask__av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home19-ask__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font-size: var(--font-size-md_5);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
}

.home19-ask__go {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--layout-ask-go);
  height: var(--layout-ask-go);
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.home19-ask__go .app-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* ---------- 23 아래 정보 (시안 .hft): 잉크 바탕이 화면 양끝 · 맨 아래(하단 탭 뒤)까지. 옛 약관 링크 줄(app-legal-footer)은 이 안의 링크로 대신함 ---------- */
.home19 .app-legal-footer {
  display: none;
}

.home19-foot {
  margin: var(--space-7) calc(-1 * var(--app-gutter-end)) calc(-1 * (var(--layout-bottom-safe) + var(--app-safe-bottom))) calc(-1 * var(--app-gutter-start));
  padding: var(--space-7) var(--space-4_5) calc(var(--layout-footer-tail) + var(--app-safe-bottom));
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse-subtle);
}

.home19-foot :focus-visible {
  outline-color: var(--focus-ring-color-on-dark);
}

.home19-foot__brand {
  margin: 0 0 var(--space-4_5);
  color: var(--color-text-inverse);
  font-size: var(--font-size-2xl_5);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-compact);
}

.home19-foot__brand i {
  color: var(--color-brand-primary);
  font-style: normal;
}

.home19-foot__brand span {
  color: var(--color-text-inverse-faint);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.home19-foot__cols {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-3);
}

/* 보이는 링크가 0개면 "고객지원" 칸을 숨기고 소개 칸이 폭 전체 (2026-10-29 푸터 관리) */
.home19-foot__cols--single {
  grid-template-columns: 1fr;
}

.home19-foot__title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
}

.home19-foot__links {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-list);
}

.home19-foot__links a {
  color: var(--color-text-inverse-faint);
  text-decoration: none;
}

.home19-foot__links a:active {
  text-decoration: underline;
}

.home19-foot__text {
  margin: 0;
  color: var(--color-text-inverse-faint);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-note);
}

.home19-foot__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2_5);
  padding: var(--space-1) var(--space-2_5);
  border: var(--border-width-rule) solid var(--color-border-inverse-strong);
  border-radius: var(--radius-footer-btn);
  color: var(--color-text-inverse-soft);
  font-size: var(--font-size-xs);
  text-decoration: none;
}

.home19-foot__btn svg {
  width: var(--space-3);
  height: var(--space-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.home19-foot__ci {
  margin-top: var(--space-5_5);
  padding-top: var(--space-3_5);
  border-top: var(--border-width-rule) solid var(--color-border-inverse-subtle);
  color: var(--color-text-inverse-dim);
  font-size: var(--font-size-2xs);
  line-height: var(--font-leading-legal);
}

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

/* 회사 정보 줄(2026-10-30 사용자 지시 "회사 이름과 대표자 이름이 한줄, 그 다음부터는 한줄에 하나씩"):
 * .home19-foot__rows > .home19-foot__row = 정해진 한 줄(view-model rows). 줄 안 항목만 옆으로 이어 쓰고, 줄은 늘 새 줄(폭과 상관없음).
 * .home19-foot__lines = rows 가 없는 예전 값(한 dl 에 흘려 쓰기). */
.home19-foot__rows {
  margin: 0;
}

.home19-foot__lines,
.home19-foot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin: 0;
}

.home19-foot__lines > div,
.home19-foot__row > div {
  display: flex;
  gap: var(--space-1_5);
}

.home19-foot__lines dt,
.home19-foot__row dt {
  flex: none;
  color: var(--color-text-inverse-faint);
}

.home19-foot__lines dd,
.home19-foot__row dd {
  margin: 0;
}

.home19-foot__lines a,
.home19-foot__row a {
  color: inherit;
}

.home19-foot__copy {
  margin: var(--space-3) 0 0;
}

/* ---------- 18 하단 탭 (시안 .gfb · .gbar · .ggt): 유리 막대(홈 · 탐색 · 커뮤니티 · MY) + 오른쪽 빨간 고비톡 둥근 단추 ----------
 * 마크업은 레이아웃(user-app-foot) 그대로 5칸 — 유리 바탕은 목록의 ::before, 고비톡 칸은 순서를 맨 뒤로 옮겨 둥근 단추로 그림 */
.app:has(.app-main.home19) .app-tabbar {
  width: calc(100% - 2 * var(--layout-glass-inset));
  max-width: calc(var(--layout-max-width) - 2 * var(--layout-glass-inset));
  border-radius: 0;
  background: transparent;
}

.app:has(.app-main.home19) .app-tabbar :focus-visible {
  outline-color: var(--focus-ring-color);
}

.app:has(.app-main.home19) .app-tabbar__list {
  position: relative;
  align-items: center;
  justify-content: flex-start;
  min-height: var(--layout-talk-float);
  padding: 0 0 0 var(--space-1_5);
}

.app:has(.app-main.home19) .app-tabbar__list::before {
  content: "";
  position: absolute;
  top: var(--border-width-rule);
  right: calc(var(--layout-talk-float) + var(--layout-glass-gap));
  bottom: var(--border-width-rule);
  left: 0;
  border: var(--border-width-rule) solid var(--color-border-glass);
  border-radius: var(--radius-glass);
  background: var(--color-bg-glass);
  box-shadow: var(--elevation-glass);
  -webkit-backdrop-filter: var(--effect-glass);
  backdrop-filter: var(--effect-glass);
  pointer-events: none;
}

.app:has(.app-main.home19) .app-tabbar__item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
}

.app:has(.app-main.home19) .app-tabbar__item:has(.app-tab--accent) {
  order: 9;
  flex: 0 0 var(--layout-talk-float);
  margin-left: calc(var(--layout-glass-gap) + var(--space-1_5));
}

.app:has(.app-main.home19) .app-tab {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius-glass-indicator);
  color: var(--color-text-glass-inactive);
  font-weight: var(--font-weight-regular);
}

.app:has(.app-main.home19) .app-tab__icon {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.app:has(.app-main.home19) .app-tab.is-active {
  background: var(--color-bg-glass-indicator);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  box-shadow: var(--elevation-glass-indicator);
}

.app:has(.app-main.home19) .app-tab--accent {
  width: var(--layout-talk-float);
  height: var(--layout-talk-float);
  border: var(--border-width-rule) solid var(--color-border-talk-float);
  border-radius: var(--radius-full);
  background: var(--color-bg-talk-float);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-heavy);
  box-shadow: var(--elevation-talk-float);
}

.app:has(.app-main.home19) .app-tab--accent .app-tab__icon {
  stroke-width: 2.1;
}

@media (prefers-reduced-motion: reduce) {
  .home19-hero__box,
  .home19 .home-cf__slide {
    transition: none;
  }
}