/* 물건 상세 (화면설계서 D v0.2 — 1단계: 첫 화면 D-01 · 사진 크게 보기 D-01C · 기본정보 D-04 · 서류 D-11 · 시트 D-04A ~ C, 나머지 탭은 레이아웃 + 준비 중)
 * - 값은 시안 고비_물건상세_시안_2025타경5451_261022v3 "매거진 스타일(261021)" · "첫 화면 v5" 실측값(시안 1rem = 10px 기준을 px 로 옮김).
 * - 시안 v15(2026-10-26 사용자 결정 "새 시안대로 반영", 계획서 4-4, 설계서 C-50): v15 안 상세 템플릿(d5451html)의 둘째 :root 블록 값.
 *   종이색 계열 → 회색 계열(바탕 #F2F2F2 · 선 #E4E4E4 · 보조 글자 #5F5F5F · #444444 · 흐린 #B4B4B4 · 종이 상자 #F2F2F2 · 요약 줄 선 #D4D4D4),
 *   화면 바깥 #DDDDDD 는 user-tokens.css 의 .app--v15 범위(--color-bg-stage). 큰 금액 글자는 --color-money-gradient(홈 카드와 같은 값).
 *   제목(상단 바 제목 · 물건 이름 · 요약 문장 · 시트 제목)은 명조 --font-family-title(앱이 직접 서빙, CSP font-src 'self').
 *   흰 상자 · 버튼은 --color-bg-surface(v15 에서 --color-bg-page 는 회색이 되므로 쓰지 않음). '준비 중' 파란 글자는 그대로(C-46).
 *   이 --itd-* 값은 user-tokens.css 에 없어 이 파일에만 둠(다른 화면에 쓰지 않음). 그 밖은 토큰.
 * - 접두어 itd-*. 레이아웃 셸(app-*)은 public/user-home.css. "준비 중"은 공용 .usr-pending(파란 글자, 도형 없음 — D-20).
 * - 인라인 style 없이 동작(CSP). 움직이는 값(시트를 끈 거리)은 스크립트가 CSSOM 사용자 정의 속성(--itd-sheet-dy)으로만 바꿈.
 * - 문서(body) 스크롤. 하단 고정 줄(C-44)만 position: fixed. */

.app-shell:has(.itd-main) {
  --itd-paper: #f2f2f2;            /* 시안 v15 .phone 바탕 */
  --itd-line: #e4e4e4;
  --itd-line-soft: #f2f2f2;        /* 행 나눔 선 · 종이 상자 (시안 v15 .kv border · --link-bg · .nt1) */
  --itd-line-rule: #d4d4d4;        /* 요약 줄 나눔 선 (시안 v15 .sumb .chk1) */
  --itd-muted: #5f5f5f;            /* 보조 글자 (흰 바탕 6.4 : 1, #f2f2f2 위 5.7 : 1) */
  --itd-muted-2: #444444;
  --itd-faint: #b4b4b4;            /* 꾸밈 전용(글자 아님) — 화살표 › · 사진 빈 판 · 도움말 동그라미 테두리 */
  --itd-serif: var(--font-family-title);
  --itd-pending-on-dark: #9fbcf5;  /* 어두운 상자 위 "준비 중"(파란 계열, #1b1b1e 위 8.6 : 1) */
  background: var(--itd-paper);
  padding-bottom: calc(96px + var(--app-safe-bottom));   /* 시안 .scr padding-bottom 9.6rem — 하단 고정 줄 높이 + 여백 */
}

.itd-main {
  font-size: var(--font-size-sm);
  letter-spacing: -0.01em;
  word-break: keep-all;
}

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

.itd-icon--fill {
  fill: currentColor;
  stroke: none;
}

/* ---------- 상단 바 (C-1, 시안 .tb · .home .tb): 뒤로 · 가운데 GOBI(빨간 밑줄) · 주소 복사 · 더 보기, 아래 잉크 선 ----------
 * 자세한 분석 바(시안 v15 .tb): 40 · 1fr · 40 → 누르는 영역 44 유지. 첫 화면 바(시안 v15 .home .tb): 7.2rem · 1fr · 7.2rem(좌우 같은 폭). */
.itd-tb {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--color-text-primary);
}

.itd-tb--home {
  grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr);
  margin: 0 -2px;
}

.itd-tb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-primary);
  text-decoration: none;
}

.itd-tb__btn:first-child {
  justify-content: flex-start;
}

.itd-tb__btn--end,
.itd-tb__end .itd-tb__btn:last-child {
  justify-content: flex-end;
}

.itd-tb__end {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 가운데 GOBI: 공통 부품 .app-wordmark · .app-wordmark__text(public/user-app.css — 명조 · 자간 .32em · 빨간 밑줄 22 × 2)를 그대로 씀.
 * 상세 바는 누르는 링크가 아니라 글자(시안 .wm) — 줄 높이만 바 높이(44)에 맞춤.
 * (제안) 시안 72px 칸에는 48px 버튼 두 개(주소 복사 · 더 보기)가 들어가지 않아 양옆 칸을 같은 비율(최소 72px)로 두고 GOBI 를 정가운데에 둠(로고 줄과 같은 방식). */
.itd-tb__wm {
  margin-block: -2px;              /* 누르는 영역 48 상자를 바 높이 44 안에 */
}

.itd-tb__tt {
  overflow: hidden;
  text-align: center;
  font-family: var(--itd-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- 첫 화면 (D-01, 시안 .home) ---------- */
.itd-home {
  padding-top: 14px;
}

.itd-row {
  display: grid;
  grid-template-columns: 241fr 149fr;
  gap: 12px;
  margin-top: 16px;
}

/* 시안 .flat 은 aspect-ratio 241/149(= 오른쪽 사진 정사각형과 같은 높이). 좁은 화면 · 글자 확대에서 글이 잘리지 않게
 * 고정 비율 대신 줄 높이(사진 정사각형)를 따라 늘어나고, 글이 더 길면 줄이 늘어남(사진은 위에 붙은 정사각형 그대로) */
.itd-flat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 2px 2px 0;
}

.itd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.itd-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-2xs);
  line-height: 1.5;
  white-space: nowrap;
}

.itd-tag__icon {
  width: 11px;
  height: 11px;
}

.itd-nm {
  overflow: hidden;
  font-family: var(--itd-serif);
  font-weight: var(--font-weight-semibold);
}

.itd-nm--one {
  margin: 9px 0 5px;
  font-size: 1.375rem;             /* 22px (시안 2.244rem) */
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.itd-nm--two {
  display: -webkit-box;
  margin: 7px 0 5px;
  font-size: 1.0625rem;            /* 17px (시안 1.734rem) */
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.itd-sm {
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.itd-loc {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 5px;
  border-bottom: 1px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  font-size: var(--font-size-2xs);
  line-height: 1.4;
  text-decoration: none;
}

.itd-loc__icon {
  width: 11px;
  height: 11px;
}

.itd-ar {
  display: flex;
  flex-wrap: wrap;                 /* 좁은 화면(360px)에서 입찰 일시를 다음 줄 오른쪽으로 — 잘리지 않게 */
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 6px;
  padding: 7px 0 3px;
  border-top: 1px solid var(--color-text-primary);
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
  white-space: nowrap;
}

.itd-ar__dt {
  margin-left: auto;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
}

.itd-ar__dt b {
  margin-right: 4px;
  font-weight: var(--font-weight-bold);
}

.itd-ar__dt b.is-urgent {
  color: var(--color-verdict-risk-text);
}

/* 현장 사진 묶음 (6번, 시안 .stk): 3장을 비스듬히 겹침, 맨 앞 장에 '현장 사진 1/N' */
.itd-stk {
  position: relative;
  display: block;
  align-self: start;
  aspect-ratio: 1 / 1;
  color: var(--color-text-inverse);
  text-decoration: none;
}

.itd-stk__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--itd-faint);
}

.itd-stk__layer:nth-last-child(3) {
  opacity: 0.55;
  transform: rotate(-6deg) translate(-4px, 2px);
}

.itd-stk__layer:nth-last-child(2) {
  opacity: 0.8;
  transform: rotate(3deg) translate(3px, -2px);
}

.itd-stk__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.itd-stk__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  font-size: var(--font-size-2xs);
}

.itd-stk__cap b {
  color: #ff6b6b;                  /* 시안 .cap b */
}

.itd-stk--empty .itd-stk__layer {
  background: var(--color-bg-image-placeholder);
}

/* 예상 수익 · 세후 (8번, 시안 .pfb): 검은 상자 */
.itd-pfb {
  display: block;
  margin-top: 14px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.itd-pfb__tp {
  display: flex;
  align-items: center;
  gap: 8px;
}

.itd-pfb__k {
  color: var(--itd-faint);         /* 어두운 바탕 위 #b4b2a9 (8.7 : 1) */
  font-size: var(--font-size-2xs);
  letter-spacing: 0.14em;
}

.itd-pfb__bd {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
}

.itd-pfb__amt {
  display: block;
  width: fit-content;
  margin-top: 10px;
  background: var(--color-money-gradient);   /* (v15) 시안 .home .pfb .amt 그라데이션 글자 */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;                 /* 48px (시안 4.896rem) */
  font-weight: var(--font-weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.itd-pfb__amt small {
  margin-left: 3px;
  font-size: 1.1875rem;
  letter-spacing: 0;
}

/* 값이 없을 때: 시안 계산 보류 글자 크기(.amt.hold 3.06rem)로 "준비 중" — 큰 숫자 자리 높이를 지나치게 키우지 않음 */
.itd-pfb__amt--pending {
  margin-top: 12px;
  background: none;
  color: var(--color-text-inverse);
  font-size: 1.875rem;             /* 30px (시안 .amt.hold 3.06rem — 그라데이션 없음) */
}

.itd-pfb .usr-pending,
.itd-pfb__amt--pending .usr-pending {
  color: var(--itd-pending-on-dark);
}

/* 준비 금액 · 추천 입찰가 (9 · 10번, 시안 .row2 · .bx) */
.itd-row2 {
  display: grid;
  grid-template-columns: 149fr 241fr;
  gap: 12px;
  margin-top: 12px;
}

.itd-bx {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius-card);   /* 시안 v15 .home .bx 1.6rem */
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  text-decoration: none;
}

.itd-lab {
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
}

.itd-amt {
  margin: 8px 0 6px;
  font-size: 1.625rem;             /* 26px (시안 2.652rem) */
  font-weight: var(--font-weight-heavy);
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.itd-amt .usr-pending {
  font-size: 1.25rem;              /* 20px — 상자 폭(149fr) 안에 한 줄 */
  letter-spacing: 0;
}

.itd-amt small {
  margin-left: 3px;
  font-size: var(--font-size-xs);
}

.itd-bx__s,
.itd-bx__kk {
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
}

.itd-bx__kk b {
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
}

/* 분석 요약 (11 ~ 15번, 시안 .sum) */
.itd-sum {
  margin-top: 18px;
  padding: 0 2px;
}

.itd-sum__tp {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.itd-sum__more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-brand-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-decoration: none;
}

.itd-sum__chev {
  width: 12px;
  height: 12px;
}

.itd-rule {
  height: 1.5px;
  margin: 6px 0 0;
  background: var(--color-text-primary);
}

.itd-sum__hd {
  margin: 8px 0 6px;
  color: var(--color-text-primary);
  font-family: var(--itd-serif);
  font-size: 1.3125rem;            /* 21px (시안 2.142rem) */
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

/* 권리 · 물건 · 시세 줄: 판정 아이콘 자리(시안 1.6rem 칸)는 값이 있을 때만 — 준비 중이면 이름 + 파란 글자만(D-20 도형 없음) */
.itd-ln {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 6px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px solid var(--itd-line-rule);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-decoration: none;
}

.itd-ln:first-of-type {
  border-top: 0;
}

.itd-ln__k {
  padding-top: 1px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
}

/* ---------- 고지 (C-48, 시안 .end · .fnote) ---------- */
.itd-end {
  height: 1.5px;
  margin: 22px 0 10px;
  background: var(--color-text-primary);
}

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

.itd-fnote {
  margin: 0 2px;
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
  line-height: 1.6;
}

.itd-fnote__report {
  border-bottom: 1px solid var(--color-brand-primary);
  color: var(--color-brand-primary);
  text-decoration: none;
  white-space: nowrap;
}

.itd-fnote--asof {
  margin-top: 4px;
  font-size: var(--font-size-2xs);
}

/* ---------- 하단 고정 줄 (C-44, 시안 .bot) ---------- */
.itd-bot {
  position: fixed;
  left: 50%;
  bottom: max(12px, var(--app-safe-bottom));
  z-index: var(--z-nav);
  display: grid;
  grid-template-columns: 241fr 69fr 69fr;
  gap: 10px;
  width: min(100% - var(--app-gutter-start) - var(--app-gutter-end), var(--layout-max-width) - 2 * var(--layout-gutter));
  transform: translateX(-50%);
}

.itd-bot__fav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 50px;
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: 0.9375rem;            /* 15px (시안 1.53rem) */
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.itd-bot__favorite-form { margin: 0; min-width: 0; }
.itd-bot__favorite-form .itd-bot__fav { width: 100%; border: 0; cursor: pointer; }

/* 관심 담김 (C-29 · D-01D, 시안 v15 .bot .fav.on): 흰 바탕 · 빨간 테두리 1.5px · 빨간 글자 · 채운 하트, 글자 '관심 물건에 담았어요' */
.itd-bot__fav[aria-pressed="true"] {
  background: var(--color-bg-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-brand-primary);
  color: var(--color-brand-primary);
}

.itd-bot__fav[aria-pressed="true"] .itd-bot__icon {
  fill: currentColor;
}
/* (시안 정합 G5 · M-10) 따로 있던 제보 링크 .itd-report-link 는 뷰에서 뺌 — 고지 줄 '제보'가 제보하기 시트(D-01E)를 엶 */

.itd-bot__cc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 50px;
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);   /* 흰 둥근 버튼 (시안 v15 .bot .cc) */
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  text-decoration: none;
}

.itd-bot__icon {
  width: 17px;
  height: 17px;
}

/* ---------- 자세한 분석 머리 (C-1, 시안 v15 .hdr · .tb · .tabs): 명조 제목 + 잉크 선 + 탭 줄 알약, 위에 붙어 있음 ----------
 * 탭 알약 모양은 공통 부품 .app-pill-tabs · .app-pill-tab(public/user-app.css — 잉크 테두리, 고른 탭 잉크 채움). 여기서는 줄 여백만. */
.itd-hdr {
  position: sticky;
  top: 0;
  z-index: 10;
  margin: 0 calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  padding: var(--app-safe-top) var(--app-gutter-end) 0 var(--app-gutter-start);
  background: var(--itd-paper);
}

.itd-tabs {
  padding: 12px 0 4px;
}

/* 섹션 머리 (C-43, 시안 v15 .sh): 작은 회색 글자 + 아래 잉크 선 1.5px */
.itd-sh {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--color-text-primary);
  scroll-margin-top: 112px;        /* 위에 붙은 머리(상단 바 + 탭 줄)에 가리지 않게(C-40 앵커) */
}

.itd-sh__t {
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.12em;
}

.itd-sh__hq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: -2px;
  border: 1.3px solid var(--itd-faint);   /* 시안 v15 .sh .hq #B4B4B4 */
  border-radius: 50%;
  color: var(--itd-muted);                /* (제안) 시안 #8A8F96 은 흰 바탕 3.3 : 1 이라 보조 글자색 */
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-decoration: none;
  position: relative;
}

/* 누르는 영역 48px (2-6): 보이는 동그라미는 17px 그대로 */
.itd-sh__hq::after {
  content: "";
  position: absolute;
  inset: -15px;
}

.itd-sh__more {
  margin-left: auto;
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
}

.itd-mhd {
  margin: 2px 0 6px;
  font-family: var(--itd-serif);
  font-size: 1.1875rem;            /* 19px (시안 1.938rem) */
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

/* 값 상자 · 값 행 (C-41, 시안 v15 .box · .kv): 테두리 없는 흰 상자, 모서리 14 */
.itd-box {
  padding: 4px 14px;
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.itd-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--itd-line-soft);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  text-decoration: none;
}

.itd-box > .itd-kv:last-child,
.itd-box > .itd-mapl:last-child {
  border-bottom: 0;
}

.itd-kv__k {
  flex: none;
}

.itd-kv__v {
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.itd-kv--tap .itd-kv__v::after {
  content: "›";
  margin-left: 6px;
  color: var(--itd-faint);
  font-weight: var(--font-weight-regular);
}

/* 매각 기일 표 (D-04 6번, 시안 .d7st): 회차 · 기일 / 최저가 / 결과, 진행 회차는 빨간 '진행' */
.itd-st {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.itd-st th,
.itd-st td {
  padding: 7px 0;
  border-bottom: 1px solid var(--itd-line);
  text-align: right;
  font-weight: var(--font-weight-regular);
}

.itd-st th {
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
}

.itd-st th:first-child,
.itd-st td:first-child {
  text-align: left;
}

.itd-st td:nth-child(3) {
  width: 22%;
  color: var(--itd-muted-2);
}

.itd-st td:nth-child(2) {
  width: 32%;
}

.itd-st td.is-on {
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-bold);
}

.itd-st tr.is-tap {
  position: relative;
}

.itd-st__link {
  color: inherit;
  text-decoration: none;
}

/* 표 줄 전체를 누르는 영역으로(링크 하나 — 대화형 중첩 없음) */
.itd-st__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* 이용권 안내 상자(이용권 필요일 때만): (v15) 테두리 없는 흰 상자 · 잉크 글자 · 링크는 잉크 + 밑줄.
   분석 상태 상자(이유 목록 · 분석 시각)는 화면설계서 D에 없어 삭제(사용자 지시 2026-10-27) */
.itd-analysis-status {
  margin: 20px 0;
  padding: 16px;
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
  color: var(--itd-muted-2);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}
.itd-analysis-status__title { margin: 0 0 8px; color: var(--color-text-primary); font-family: var(--itd-serif); font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); }
.itd-analysis-status p { margin: 8px 0; }
.itd-analysis-status__link { display: inline-block; margin-top: 6px; color: var(--color-text-primary); font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: 3px; }

.itd-empty {
  padding: 12px 0;
  color: var(--itd-muted);
  font-size: var(--font-size-sm);
}

.itd-empty--pane {
  margin-top: 22px;
}

/* 외부 지도 링크 (D-04 11번 · D-07, 시안 .mapl · .dkl): 새 창(C-49) */
.itd-mapl {
  display: flex;
  gap: 6px;
  padding: 8px 0 10px;
}

.itd-mapl__btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 0;
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius-full);
  background: var(--itd-line-soft);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* ---------- 시트 (C-4, 시안 .ov · .sheet · .grab · .dvh · .paper) ---------- */
.itd-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.itd-sheet[hidden] {
  display: none;
}

html:has(.itd-sheet:not([hidden])),
html:has(.itd-viewer:not([hidden])) {
  overflow: hidden;
}

.itd-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: opacity var(--motion-duration-sheet-close) var(--motion-ease-in);
}

.itd-sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--layout-max-width);
  max-height: 88%;
  padding: 10px var(--app-gutter-end) calc(28px + var(--app-safe-bottom)) var(--app-gutter-start);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-card) var(--radius-card) 0 0;   /* 시안 v15 .sheet 1.6rem */
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  animation: itd-sheet-up var(--motion-duration-sheet) var(--motion-ease-out);
  transition: transform var(--motion-duration-sheet-close) var(--motion-ease-out);
}

@keyframes itd-sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0.4;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.itd-sheet__panel.is-dragging {
  transform: translateY(var(--itd-sheet-dy, 0px));
  transition: none;
}

.itd-sheet.is-closing .itd-sheet__scrim {
  opacity: 0;
}

.itd-sheet.is-closing .itd-sheet__panel {
  transform: translateY(100%);
  transition-timing-function: var(--motion-ease-in);
}

.itd-sheet__grab {
  position: relative;
  height: 24px;
  margin: -10px calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  touch-action: none;
  cursor: grab;
}

.itd-sheet__grab::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: #d5d8dd;             /* 시안 .grab (홈 시트와 같음) */
}

.itd-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

/* 시트 제목: (v15) 명조(계획서 4-4 D-04B · D-04C '명조 제목 · 잉크 버튼') */
.itd-sheet__title {
  font-family: var(--itd-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
}

.itd-sheet__x {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -10px 0 0;
  color: var(--color-text-primary);
}

.itd-sheet__x .itd-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.itd-sheet__sub {
  margin: 2px 0 12px;
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
}

.itd-sheet__help {
  margin: 6px 0 14px;
  font-size: var(--font-size-md);
  line-height: 1.6;
}

/* 설명 상자 (D-04B 17번, 시안 .nt1) */
.itd-note {
  margin: 6px 0 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--itd-line-soft);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.itd-note[hidden] {
  display: none;
}

.itd-btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--color-text-primary);   /* 잉크 테두리 알약 (시안 v15 .btn2) */
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.itd-btn2:active {
  background: var(--itd-line-soft);
}

/* 근거 서류 (D-04A 15번, 시안 .paper): 1단계는 칸 표, 누른 칸 노란 강조(시안 u.hl) */
.itd-paper {
  padding: 14px 10px 12px;
  border: 1px solid #bfc3c9;
  background: var(--color-bg-surface);
  box-shadow: 0 1px 0 var(--color-border-default);
  font-family: var(--itd-serif);
}

.itd-paper__title {
  margin: 2px 0 10px;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heavy);
  letter-spacing: 0.4em;
}

.itd-paper__meta {
  margin: -6px 0 10px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-2xs);
  text-align: center;
}

.itd-paper__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.itd-paper__table th,
.itd-paper__table td {
  padding: 6px 7px;
  border: 1px solid #9aa0a6;
  vertical-align: middle;
}

.itd-paper__table th {
  width: 36%;
  background: #f4f5f7;
  font-weight: var(--font-weight-bold);
  text-align: center;
  word-break: keep-all;
}

.itd-paper__table td {
  word-break: break-all;
}

.itd-paper__table tr.is-hl .itd-paper__v {
  padding: 0 2px;
  background: #fff3b8;             /* 시안 .paper u.hl */
  font-weight: var(--font-weight-bold);
}

.itd-sheet__web {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.itd-web {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: var(--itd-line-soft);
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

/* ---------- 사진 크게 보기 (D-01C, 시안 .viewer) ---------- */
.itd-viewer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) + 1);
  background: #000;
  touch-action: pan-y;
}

.itd-viewer[hidden] {
  display: none;
}

.itd-viewer__wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: var(--layout-max-width);
  height: 62%;
  transform: translate(-50%, -50%);
}

.itd-viewer__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.itd-viewer__x,
.itd-viewer__nav {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-text-inverse);
  text-decoration: none;
}

.itd-viewer__x {
  top: max(14px, var(--app-safe-top));
  right: 14px;
  width: 44px;
  height: 44px;
}

.itd-viewer__x .itd-icon {
  width: 20px;
  height: 20px;
}

.itd-viewer__nav {
  top: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.375rem;
  transform: translateY(-50%);
}

.itd-viewer__nav--prev {
  left: 10px;
}

.itd-viewer__nav--next {
  right: 10px;
}

.itd-viewer__count {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, var(--app-safe-bottom));
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  text-align: center;
}

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

/* ---------- 토스트 (C-5) ---------- */
.itd-toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--app-safe-bottom));
  z-index: var(--z-toast);
  max-width: calc(100% - 32px);
  padding: 9px 16px;
  border-radius: 20px;
  background: rgba(27, 27, 30, 0.92);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  transform: translateX(-50%);
}

.itd-toast[hidden] {
  display: none;
}

/* 서버가 글자를 넣어 그린 토스트(관심 담기 · 빼기 뒤 돌아온 화면, D-01D): 스크립트가 없어도 4초 뒤 사라짐.
 * 스크립트가 있으면 is-auto 를 떼고 같은 4초 타이머로 숨김(/static/shared/user-item-detail.js). */
.itd-toast.is-auto {
  animation: itd-toast-out 0s linear var(--motion-toast-duration, 4s) forwards;
}

@keyframes itd-toast-out {
  to {
    visibility: hidden;
  }
}

/* 좁은 화면(360px 안팎): 첫 화면 큰 숫자 · 이름을 한 단계 줄여 상자 밖으로 넘치지 않게 */
@media (max-width: 380px) {
  .itd-nm--one {
    font-size: 1.25rem;
  }

  /* 사진 묶음의 비스듬한 뒷장이 왼쪽 구분선(.itd-ar 윗선) 끝에 닿지 않게 칸 사이를 넓힘 */
  .itd-row {
    column-gap: var(--space-4);
  }

  /* 면적 옆에 들어가지 않는 입찰 일시는 오른쪽 끝으로 밀지 않고 다음 줄 왼쪽부터 */
  .itd-ar__dt {
    flex-basis: 100%;
    margin-left: 0;
  }

  .itd-pfb__amt {
    font-size: 2.5rem;
  }

  .itd-pfb__amt--pending {
    font-size: 1.875rem;           /* "준비 중"은 넓은 화면과 같은 크기(위 규칙이 덮지 않게) */
  }

  .itd-tabs__tab {
    font-size: var(--font-size-2xs);
  }
}

/* 자세한 분석 섹션 안 작은 제목 (화면설계서 D v0.2 D-05 6 '등기 목록' · 8 '임차인 표' — ANALYSIS_LAYOUT { sub }) */
.itd-sub {
  margin: 0;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--itd-line-soft);
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* 제보하기 시트 몸통 (D-01E 20 · 21 — 시안 v15 .dvs · .rpt). 시트 틀 · 버튼 모양은 공통 .app-sheet*, 여기는 배치와 입력칸만 */
.itd-report__sub {
  margin: -4px 0 12px;
  color: var(--itd-muted);
  font-size: var(--font-size-xs);
}
.itd-report__sub:empty {
  display: none;
}
.itd-report__err {
  margin: 0 0 10px;
  color: var(--color-brand-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.itd-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.itd-report__label {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}
.itd-report__select,
.itd-report__body {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-sm);
}
.itd-report__body {
  min-height: 120px;
  resize: vertical;
}
.itd-report__hint,
.itd-report__note {
  margin: 0;
  color: var(--itd-muted);
  font-size: var(--font-size-2xs);
}
.itd-report__send {
  margin-top: 4px;
}

/* ---- 설계서 대비 점검(2026-10-27) ---- */

/* D-02 3 가격 한눈에 (시안 .bars): 이름 · 막대(값 ÷ 감정가, SVG 속성) · 값('원' 없이). 추천 입찰가(잉크) · 예상 매도가(빨강)는 굵은 테두리 줄 */
.itd-gb {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: 36px;
  padding: 6px 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.3;
  text-decoration: none;
}

.itd-gb__k {
  color: var(--itd-muted-2);
}

.itd-gb__bar {
  display: block;
  min-width: 0;
}

.itd-gb__svg {
  display: block;
  width: 100%;
  height: 6px;
}

.itd-gb__track {
  fill: var(--itd-line);
}

.itd-gb__fill {
  fill: var(--itd-faint);
}

.itd-gb__v {
  font-weight: var(--font-weight-bold);
  text-align: right;
  white-space: nowrap;
}

.itd-gb--ink,
.itd-gb--red {
  margin: 4px -10px;
  padding: 8px 10px;
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-md);
}

.itd-gb--ink .itd-gb__k,
.itd-gb--red .itd-gb__k {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.itd-gb--ink .itd-gb__fill {
  fill: var(--color-text-primary);
}

.itd-gb--red .itd-gb__fill {
  fill: var(--color-brand-primary);
}

.itd-gb--red .itd-gb__v {
  color: var(--color-brand-primary);
}

/* D-05 8 임차인 표 (시안 6칸): 칸 안 줄바꿈 없이 화면 폭에 맞춤(360px 에서 6칸이 들어감 — 값이 길면 칸 안에서 줄바꿈) */
.itd-st--tenant {
  table-layout: auto;
}

.itd-st--tenant th,
.itd-st--tenant td {
  overflow-wrap: anywhere;
}

.itd-st--tenant th,
.itd-st--tenant td {
  padding-left: 8px;
}

.itd-st--tenant th:first-child,
.itd-st--tenant td:first-child {
  padding-left: 0;
}

.itd-st--tenant td:nth-child(2),
.itd-st--tenant td:nth-child(3) {
  width: auto;
  color: inherit;
}

.itd-st--tenant .is-risk {
  color: var(--color-verdict-risk-text);
  font-weight: var(--font-weight-bold);
}

/* 예시 값 배지(2026-10-28, partials/user-sample-badge) — 데이터가 없는 칸에 넣은 예시 값임을 알림.
 * 알림 색 토큰(--color-bg-notice · --color-text-notice)으로 "준비 중"(파란 글자)과 실제 값(잉크)과 구분. 놓인 글자 줄에 맞춰 작게. */
.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;
}