/* PC 층: public/shared/user-item-detail.css 위에 얹는 넓은 화면 배치
 * 첫 화면: 왼쪽 넓은 단(사진 · 기본정보 · 분석 요약 · 고지), 오른쪽 고정 패널(예상 수익 · 준비 금액 · 추천 입찰가 · 관심 담기).
 * 자세한 분석: 위에 붙는 머리 + 왼쪽 2열 값 장부 + 오른쪽 고정 패널(관심 담기). */

.pc-main { --pc-main-width: 1200px; }

/* 공통 CSS 는 --itd-* 를 모바일 틀의 .app-shell 에만 정의합니다. PC 틀에는 .app-shell 이 없어 같은 이름을 토큰으로 잇습니다. */
.itd-main {
  --itd-paper: var(--color-bg-subtle);
  --itd-line: var(--color-border-default);
  --itd-line-soft: var(--color-bg-infobox);
  --itd-line-rule: var(--color-border-divider);
  --itd-muted: var(--color-text-tertiary);
  --itd-muted-2: var(--color-text-secondary);
  --itd-faint: var(--color-text-disabled);
  --itd-serif: var(--font-family-title);
  --itd-pending-on-dark: var(--color-text-pending-on-dark);

  --itd-side-width: 340px;
  --itd-side-gap: 40px;
  --itd-side-top: calc(var(--pc-header-height) + 24px);

  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums;
}

/* ---------- 고정 패널 부품: 위 검은 상자 + 흰 값 줄 + 버튼이 한 덩어리 ---------- */
.itd-pfb,
.itd-row2,
.itd-bot {
  box-sizing: border-box;
  position: sticky;
  z-index: 1;
}

.itd-pfb:focus-visible,
.itd-row2:focus-within,
.itd-bot:focus-within {
  z-index: 2;
}

.itd-pfb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.itd-pfb__amt:not(.itd-pfb__amt--pending) {
  font-size: 2.5rem;
}

.itd-row2 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0;
  background: var(--color-bg-surface);
}

.itd-bx {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  padding: 0 20px;
  border-radius: 0;
}

.itd-bx + .itd-bx {
  border-top: 1px solid var(--color-border-default);
}

/* 위 검은 상자와 맞닿아 바깥 초점선이 묻히므로 줄 안쪽에 그립니다 */
.itd-bx:focus-visible {
  outline-offset: -4px;
}

.itd-bx .itd-lab {
  grid-column: 1;
  font-size: var(--font-size-xs);
}

.itd-bx .itd-amt {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  text-align: right;
}

.itd-bx__s,
.itd-bx__kk {
  grid-column: 1;
  margin-top: 4px;
  white-space: nowrap;
}

.itd-bot {
  left: auto;
  bottom: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 8px;
  width: auto;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--color-border-default);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--color-bg-surface);
  transform: none;
}

.itd-bot > :first-child {
  grid-column: 1 / -1;
}

.itd-bot__cc {
  flex-direction: row;
  gap: 6px;
  height: 44px;
  font-size: var(--font-size-sm);
}

/* ---------- 첫 화면: .itd-home 을 풀어 그 자식과 .itd-bot 을 한 격자에 놓습니다 ---------- */
.itd-main:not(.itd-main--analysis) {
  /* 세 부품이 형제여서 위치를 서로 알 수 없으므로 높이를 정해 쌓습니다. 내용은 한 줄씩이라 이 높이 안에 듭니다. */
  --itd-side-gain: 8.5rem;
  --itd-side-values: 11rem;
  --itd-side-actions: 136px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--itd-side-width);
  grid-template-rows: repeat(12, auto) 1fr;
  column-gap: var(--itd-side-gap);
  align-items: start;
}

.itd-home {
  display: contents;
}

.itd-home > *,
.itd-main > .usr-alert {
  grid-column: 1;
  min-width: 0;
}

/* 겹쳐 놓은 세 부품이 같은 칸을 전부 차지하고, 위아래 여백으로 제자리를 잡습니다. 여백 합이 같아 스크롤 끝에서도 함께 멈춥니다. */
.itd-home > .itd-pfb,
.itd-home > .itd-row2,
.itd-main > .itd-bot {
  grid-column: 2;
  grid-row: 1 / -1;
}

.itd-main:not(.itd-main--analysis) .itd-pfb {
  top: var(--itd-side-top);
  height: var(--itd-side-gain);
  margin: 0 0 calc(var(--itd-side-values) + var(--itd-side-actions));
}

.itd-main:not(.itd-main--analysis) .itd-row2 {
  top: calc(var(--itd-side-top) + var(--itd-side-gain));
  height: var(--itd-side-values);
  margin: var(--itd-side-gain) 0 var(--itd-side-actions);
}

.itd-main:not(.itd-main--analysis) .itd-bot {
  top: calc(var(--itd-side-top) + var(--itd-side-gain) + var(--itd-side-values));
  height: var(--itd-side-actions);
  margin: calc(var(--itd-side-gain) + var(--itd-side-values)) 0 0;
}

.itd-tb--home {
  grid-template-columns: auto 1fr;
  margin: 0;
}

.itd-tb__wm {
  display: none;
}

.itd-row {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 36px;
  margin-top: 28px;
}

.itd-stk {
  aspect-ratio: 4 / 3;
}

.itd-tag {
  padding: 2px 10px;
  font-size: var(--font-size-xs);
}

.itd-nm--one,
.itd-nm--two {
  margin: 16px 0 8px;
  line-height: 1.3;
  white-space: normal;
  -webkit-line-clamp: 3;
}

.itd-nm--one {
  font-size: var(--font-size-4xl);
}

.itd-nm--two {
  font-size: var(--font-size-3xl);
}

.itd-sm {
  font-size: var(--font-size-md);
}

.itd-loc {
  margin-top: 10px;
  font-size: var(--font-size-sm);
}

.itd-ar {
  padding: 10px 0 2px;
  font-size: var(--font-size-sm);
}

.itd-ar__dt {
  font-size: var(--font-size-lg);
}

.itd-sum {
  margin-top: 32px;
}

.itd-lab,
.itd-sum__more {
  font-size: var(--font-size-xs);
}

.itd-ln {
  grid-template-columns: 56px minmax(0, 1fr);
  padding: 12px 0;
  font-size: var(--font-size-md);
}

.itd-ln__k {
  font-size: var(--font-size-sm);
}

.itd-home .itd-end {
  margin-top: 8px;
}

.itd-fnote {
  font-size: var(--font-size-sm);
}

/* ---------- 자세한 분석: 머리는 온 폭, 그 아래 왼쪽 값 장부 + 오른쪽 패널 ----------
 * 머리와 패널이 본문 전체 높이 동안 붙어 있어야 해서, 칸에 갇히는 격자 대신 줄바꿈 flex 를 씁니다. */
.itd-main--analysis {
  --itd-analysis-head: 7rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--itd-side-gap);
}

.itd-main--analysis > .usr-alert {
  flex: 0 0 100%;
}

.itd-hdr {
  top: var(--pc-header-height);
  flex: 0 0 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 0 0;
}

.itd-tb__tt {
  font-size: var(--font-size-2xl);
  text-align: left;
}

.itd-tabs {
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 0;
}

.itd-tabs__tab {
  flex: 0 0 128px;
  font-size: var(--font-size-md);
}

.itd-pane {
  flex: 1 1 0;
  min-width: 0;
}

.itd-main--analysis > .itd-bot {
  top: calc(var(--pc-header-height) + var(--itd-analysis-head) + 16px);
  flex: 0 0 var(--itd-side-width);
  margin-top: 22px;
  padding-top: 20px;
  border-top: 0;
  border-radius: var(--radius-lg);
}

.itd-sh {
  scroll-margin-top: calc(var(--pc-header-height) + var(--itd-analysis-head) + 8px);
}

.itd-sh__t,
.itd-sh__more {
  font-size: var(--font-size-sm);
}

.itd-mhd {
  font-size: var(--font-size-2xl);
}

/* 값 줄은 2열 장부로. 나눔 선은 줄 위쪽에 두어 어느 열에서 끝나도 맨 아래 선이 남지 않습니다. */
.itd-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  padding: 4px 20px;
}

.itd-box > :not(.itd-kv) {
  grid-column: 1 / -1;
}

.itd-box > .itd-kv {
  border-top: 1px solid var(--itd-line-soft);
  border-bottom: 0;
  font-size: var(--font-size-md);
}

.itd-box > .itd-kv:first-child,
.itd-box > .itd-kv:first-child + .itd-kv,
.itd-sub + .itd-kv,
.itd-sub + .itd-kv + .itd-kv {
  border-top: 0;
}

.itd-gb {
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) minmax(10em, auto);
  column-gap: 16px;
  font-size: var(--font-size-md);
}

.itd-gb__svg {
  height: 8px;
}

.itd-st {
  font-size: var(--font-size-md);
}

.itd-st th {
  font-size: var(--font-size-sm);
}

.itd-st th,
.itd-st td {
  padding: 10px 0;
}

.itd-mapl {
  gap: 10px;
}

.itd-mapl__btn {
  font-size: var(--font-size-sm);
}

/* ---------- 시트: 바닥에서 올라오는 판 대신 가운데 대화상자(끌어 닫기 손잡이 없음, ✕ · 바깥 · Esc 로 닫음) ---------- */
.itd-sheet {
  align-items: center;
}

.itd-sheet__panel {
  width: 560px;
  max-height: 80vh;
  padding: 24px 28px 28px;
  border-radius: var(--radius-card);
}

.itd-sheet__grab {
  display: none;
}

/* ---------- 사진 크게 보기: 넓은 화면을 쓰되 양옆 넘김 단추와 겹치지 않게 ---------- */
.itd-viewer__wrap {
  width: calc(100% - 160px);
  max-width: none;
  height: 80%;
}