/* ===========================================================================
   console-pages.css — 콘솔 화면별 조각

   console.css 가 껍데기(사이드바·상단바·카드·표)라면, 여기는 화면 안에서만
   쓰이는 것들이다. 두 화면 이상이 쓰기 시작하면 console.css 로 올린다.
   =========================================================================== */

/* ── 공통 소품 ────────────────────────────────────────────────────────── */
.dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-mint);
  display: inline-block;
  margin-right: 6px;
}

.dot--blue { background: var(--c-blue); }
.dot--orange { background: var(--c-orange); }

.minihead {
  margin: 20px 0 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-navy-deep);
}

.btnrow { display: flex; gap: 8px; margin-top: 18px; }
.btnrow .cbtn { flex: 1; }

.seemore { margin-top: 10px; text-align: right; font-size: 11px; color: var(--c-muted); }

.rows--flush { margin: 0 -18px; }
/* 여백 없는 몸통(--flush) 안에서는 뺄 여백이 없다 — 빼면 그 줄이 패널 밖으로 18px 나간다(2026-10-12 설계 화면 높이 안내) */
.panel__body--flush > .rows--flush { margin: 0; }

.nextbar {
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 20px;
}

.nextbar__title { font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy-deep); }
.nextbar__desc { margin-top: 4px; font-size: 11px; color: var(--c-subtle); }
.nextbar .cbtn { margin-left: auto; flex: none; }

/* ── 회계 · A/S (finance) ─────────────────────────────────────────────── */
.kpi--row { display: flex; align-items: center; gap: 14px; }
.kpi--row .stockcard__ico { margin-bottom: 0; }

.payline { display: flex; gap: 12px; }

.payline__step {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: center;
}

.payline__step.is-done { border-color: var(--c-mint); background: var(--c-mint-wash); }

.payline__num {
  width: 26px; height: 26px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--c-console-bg);
  color: var(--c-subtle);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.payline__step.is-done .payline__num { background: var(--c-mint); color: #fff; }
.payline__label { font-size: 11px; color: var(--c-muted); }
.payline__amt { margin: 4px 0 8px; font-size: var(--fs-base); font-weight: 700; color: var(--c-navy-deep); }

.warranty2 p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: var(--fs-xs);
}

.warranty2 p + p { margin-top: 8px; }
.warranty2 b { color: var(--c-navy-deep); }
.warranty2 span { margin-left: auto; color: var(--c-subtle); font-size: 11px; }

.minikpi {
  padding: 12px 8px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: center;
}

.minikpi span { display: block; font-size: 10px; color: var(--c-muted); }
.minikpi b { display: block; margin-top: 4px; font-size: var(--fs-base); color: var(--c-navy-deep); }
.minikpi--blue { background: var(--c-sky-pale); border-color: var(--c-sky-line); }
.minikpi--blue b { color: var(--c-blue); }
.minikpi--green { background: var(--c-mint-pale); border-color: var(--c-mint-line); }
.minikpi--green b { color: var(--c-mint); }

/* ── 시공 현장 (site) ─────────────────────────────────────────────────── */
.weather { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 20px; font-weight: 700; color: var(--c-navy-deep); }
.weather svg { width: 20px; height: 20px; color: var(--c-orange); }

.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }

.photo { position: relative; border-radius: 8px; overflow: hidden; }

.photo span {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: linear-gradient(150deg, var(--c-g500), var(--c-g700));
  color: rgb(255 255 255 / 75%);
  font-size: 10px;
}

.photo figcaption {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 9px;
}

.people { display: flex; flex-wrap: wrap; gap: 10px; }
.person { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: var(--c-navy-deep); }

.person i {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-sky-pale);
  color: var(--c-blue);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
}

.person em { font-style: normal; font-size: 9px; color: var(--c-muted); }

/* 달력 */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal__dow { font-size: 10px; color: var(--c-muted); padding: 4px 0; }
.cal__d { padding: 5px 0; font-size: 10px; color: var(--c-navy-deep); border-radius: 5px; }
.cal__d--out { color: var(--c-line); }
.cal__d--now { background: var(--c-blue); color: #fff; font-weight: 700; }

.calbars { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }

.calbar {
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--c-console-bg);
  color: var(--c-subtle);
  font-size: 10px;
}

.calbar--done { background: var(--c-mint-pale); color: var(--c-mint-ink); }
.calbar--on { background: var(--c-sky-pale); color: var(--c-navy); font-weight: 700; }

.logico {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
}

.logico svg { width: 14px; height: 14px; }
.logico--blue { background: var(--c-sky-pale); color: var(--c-blue); }
.logico--green { background: var(--c-mint-pale); color: var(--c-mint); }
.logico--orange { background: var(--c-cream); color: var(--c-orange); }

.logform { display: flex; gap: 8px; }
.logform .cinput { flex: 1; }

/* ── 구매 · 재고 (purchase) ───────────────────────────────────────────── */
.stockcard { padding: 16px; border: 1px solid var(--c-line); border-radius: 10px; }

.stockcard__ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.stockcard__ico svg { width: 19px; height: 19px; }
.stockcard__ico--blue { background: var(--c-sky-pale); color: var(--c-blue); }
.stockcard__ico--green { background: var(--c-mint-pale); color: var(--c-mint); }
.stockcard__ico--purple { background: var(--c-violet-pale); color: var(--c-violet); }
.stockcard__ico--orange { background: var(--c-cream); color: var(--c-orange); }

.stockcard__label { font-size: 11px; color: var(--c-muted); }
.stockcard__value { margin-top: 2px; font-size: 22px; font-weight: 700; color: var(--c-navy-deep); }
.stockcard__value small { font-size: var(--fs-xs); font-weight: 500; color: var(--c-subtle); }
.stockcard__meta { margin: 8px 0 10px; font-size: 10px; color: var(--c-muted); line-height: 1.6; }
.stockcard__rate { margin-top: 6px; font-size: 10px; color: var(--c-subtle); }

.alertchips { display: flex; flex-wrap: wrap; gap: 8px; }

.alertchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 16px;
  background: var(--c-coral-pale);
  font-size: 11px;
  color: var(--c-coral-ink);
}

.alertchip i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-coral); flex: none; }

.panel__head--tabs { padding-bottom: 0; border-bottom: 1px solid var(--c-line); }
.panel__head--tabs .ftab { border-radius: 8px 8px 0 0; border-bottom: 0; }

.filterrow { display: flex; gap: 8px; flex-wrap: wrap; }

.qty {
  display: inline-block;
  min-width: 54px;
  padding: 4px 8px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background: #fff;
  text-align: right;
}

.acts { display: flex; gap: 2px; }
.acts .iconbtn { width: 28px; height: 28px; }
.acts .iconbtn svg { width: 15px; height: 15px; }

/* ── 계약 (contract) ──────────────────────────────────────────────────── */
.signbox { padding: 14px; border: 1px solid var(--c-line); border-radius: 8px; }
.signbox__who { font-size: 10px; color: var(--c-muted); }
.signbox__name { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy-deep); }
.signbox .sign { text-align: center; margin-top: 12px; }

.approve { display: flex; align-items: center; gap: 10px; }

.approve__step {
  flex: 1;
  min-width: 0;
  padding: 14px 10px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  text-align: center;
}

.approve__avatar {
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--c-sky-pale);
  color: var(--c-blue);
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  font-weight: 700;
}

.approve__role { font-size: 10px; color: var(--c-muted); }
.approve__name { margin: 3px 0 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy-deep); }
.approve__time { margin-top: 6px; font-size: 10px; color: var(--c-muted); }
.approve__arrow { width: 16px; height: 16px; color: var(--c-muted); flex: none; }

/* ── 인허가 (permit) ──────────────────────────────────────────────────── */
.projhead { display: flex; gap: 20px; align-items: flex-start; }

.projhead__thumb {
  width: 130px; height: 96px;
  border-radius: 8px;
  flex: none;
  background: linear-gradient(150deg, var(--c-blue), var(--c-blue));
}

.projhead__main { flex: 1; min-width: 0; }
.projhead__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 700; color: var(--c-navy-deep); }
.projhead__side { width: 170px; flex: none; }

.projhead__date { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-base); font-weight: 700; color: var(--c-navy-deep); }
.projhead__date svg { width: 15px; height: 15px; color: var(--c-muted); }
.dday { margin-top: 4px; font-size: 18px; font-weight: 800; color: var(--c-blue); }

.doclist { display: flex; flex-direction: column; gap: 8px; }

.docitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: var(--fs-xs);
}

.docitem__ico { width: 16px; height: 16px; color: var(--c-mint); flex: none; }
.docitem b { font-weight: 500; color: var(--c-navy-deep); }
.docitem__date { font-size: 10px; color: var(--c-muted); flex: none; }

.kakao { background: #b2c7d9; border-radius: 10px; padding: 12px; }
.kakao__head { font-size: 10px; color: #3c1e1e; margin-bottom: 6px; }

.kakao__bubble {
  background: #fef01b;
  border-radius: 8px;
  padding: 12px;
  font-size: 11px;
  line-height: 1.7;
  color: #2b2b2b;
}

.kakao__bubble ul { margin: 8px 0; padding-left: 12px; }
.kakao__bubble li { list-style: disc; margin-left: 6px; }
.kakao__time { margin-top: 6px; font-size: 10px; color: #3c1e1e; text-align: right; }

/* ── 구조검토 · 날인 (structure) ──────────────────────────────────────── */
.statecard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 10px;
}

.statecard--on { border-color: var(--c-mint); background: var(--c-mint-wash); }

.statecard__ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--c-console-bg);
  color: var(--c-subtle);
  display: grid;
  place-items: center;
  flex: none;
}

.statecard__ico svg { width: 19px; height: 19px; }
.statecard__ico--green { background: var(--c-mint-pale); color: var(--c-mint); }
.statecard__title { font-size: var(--fs-xs); font-weight: 700; color: var(--c-navy-deep); }
.statecard__meta { margin-top: 4px; font-size: 10px; line-height: 1.6; color: var(--c-muted); }
.statecard__result { margin-top: 4px; font-size: var(--fs-base); font-weight: 700; color: var(--c-mint); }

.signline {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: 11px;
  color: var(--c-subtle);
}

.signline__right { margin-left: auto; text-align: right; }

.sign {
  display: block;
  margin-top: 6px;
  font-size: 18px;
  font-weight: 400;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  color: var(--c-navy-deep);
}

/* 문서 미리보기 */
.docview { border: 1px solid var(--c-line); border-radius: 8px; overflow: hidden; }

.docview__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--c-console-bg);
  border-bottom: 1px solid var(--c-line);
  font-size: 11px;
  color: var(--c-subtle);
}

.docview__zoom { margin-left: auto; }
.docview__acts svg { width: 15px; height: 15px; }

.docpaper { padding: 28px 32px; background: #fff; }

.docpaper__title {
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--c-navy-deep);
  margin-bottom: 20px;
}

.ctable--doc th {
  width: 110px;
  background: var(--c-g50);
  color: var(--c-navy-deep);
  font-weight: 500;
  text-align: center;
}

.ctable--doc td { white-space: normal; }
.ctable--doc th, .ctable--doc td { border: 1px solid var(--c-line); font-size: 11px; padding: 9px 12px; }

.docpaper__body { margin-top: 22px; font-size: 11px; text-align: center; color: var(--c-navy-deep); }
.docpaper__date { margin-top: 16px; font-size: 11px; text-align: center; color: var(--c-navy-deep); }

.docpaper__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
  font-size: 11px;
  color: var(--c-navy-deep);
  line-height: 1.9;
}

.stamp {
  width: 74px; height: 74px;
  border: 2px solid var(--c-coral-ink);
  border-radius: 50%;
  color: var(--c-coral-ink);
  display: grid;
  place-content: center;
  text-align: center;
  rotate: -8deg;
  flex: none;
}

.stamp i { font-style: normal; font-size: 7px; letter-spacing: -.02em; }
.stamp b { font-size: 13px; }

/* ── 도면 자동 생성 (cad) ─────────────────────────────────────────────── */
.cadgrid { grid-template-columns: 300px 1fr 320px; align-items: start; }

.cadlead { font-size: 20px; font-weight: 700; line-height: 1.5; color: var(--c-navy-deep); }
.cadlead b { color: var(--c-blue); }

.flowmini { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

.flowmini__box {
  flex: 1;
  padding: 14px 10px;
  border-radius: 8px;
  border: 1px solid var(--c-line);
  text-align: center;
  font-size: 11px;
  color: var(--c-subtle);
}

.flowmini__box svg { width: 22px; height: 22px; color: var(--c-muted); }
.flowmini__box b { display: block; margin-top: 6px; }
.flowmini__box--on { background: var(--c-mint-pale); border-color: var(--c-mint); color: var(--c-mint); }
.flowmini__box--on svg { color: var(--c-mint); }
.flowmini__arrow { width: 18px; height: 18px; color: var(--c-muted); flex: none; }

.dwgico { width: 30px; height: 30px; color: var(--c-muted); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.kpi__ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 5px; color: var(--c-blue); }

/* ── 태양광 설계 (design) ─────────────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cinput--sm { height: 32px; font-size: 11px; width: auto; }

.factbar--2 { grid-template-columns: 1fr 1fr; }

.bignum { font-size: 28px; font-weight: 700; color: var(--c-navy-deep); letter-spacing: -.02em; }
.bignum small { font-size: var(--fs-xs); font-weight: 500; color: var(--c-subtle); }

/* 위성 이미지 자리 — 지도 제공사 연동 전까지 격자와 모듈 배치로 흉내 낸다 */
.satmap {
  position: relative;
  height: 420px;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  background: linear-gradient(160deg, #6f7f6a, #55634f 45%, #47523f);
}

.satmap__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size: 48px 48px;
}

.satmap__panels {
  position: absolute;
  left: 30%; top: 26%;
  width: 42%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  transform: perspective(700px) rotateX(48deg) rotateZ(-12deg);
}

.satmap__panels span {
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  background: linear-gradient(150deg, var(--c-blue), var(--c-navy));
  box-shadow: 0 2px 6px rgb(0 0 0 / 35%);
}

.satmap__tools { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; }
.satmap__tools--right { left: auto; right: 14px; }

.satmap__zoom { position: absolute; left: 14px; top: 60px; display: flex; flex-direction: column; gap: 4px; }

.zoombtn {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: var(--fs-base);
  color: var(--c-navy-deep);
}

.satmap__info {
  position: absolute;
  left: 14px; bottom: 14px;
  width: 220px;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgb(255 255 255 / 94%);
}

.satmap__infotitle { font-size: 11px; font-weight: 700; color: var(--c-navy-deep); margin-bottom: 8px; }
.satmap__info .dl { grid-template-columns: 88px 1fr; row-gap: 6px; font-size: 11px; }

.satmap__3d {
  position: absolute;
  right: 14px; bottom: 14px;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-navy-deep);
}

.satmap__note {
  position: absolute;
  left: 50%; top: 14px;
  translate: -50% 0;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgb(0 0 0 / 45%);
  color: rgb(255 255 255 / 85%);
  font-size: 10px;
  white-space: nowrap;
}

/* 월별 막대 */
.barchart { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-top: 16px; }

.barchart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--c-sky-line);
  position: relative;
}

.barchart span:nth-child(4),
.barchart span:nth-child(5) { background: var(--c-blue); }

.barchart i {
  position: absolute;
  top: -14px; left: 50%;
  translate: -50% 0;
  font-size: 9px;
  font-style: normal;
  color: var(--c-muted);
}

.barchart__x { margin-top: 8px; font-size: 10px; color: var(--c-muted); text-align: center; }

.filerow { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--c-line); border-radius: 8px; }

.filerow__ico {
  width: 34px; height: 34px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  flex: none;
}

.filerow__ico--pdf { background: var(--c-coral-pale); color: var(--c-coral); }
.filerow__ico--dwg { background: var(--c-sky-pale); color: var(--c-blue); }

.ticks { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-xs); color: var(--c-navy-deep); }
.ticks li { display: flex; align-items: center; gap: 7px; }
.ticks svg { width: 15px; height: 15px; color: var(--c-mint); }

.unitbox { position: relative; display: block; }
.unitbox i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 11px; color: var(--c-muted); }
.unitbox .cinput { padding-right: 38px; }

.segbtns { display: flex; gap: 6px; }

.segbtn {
  flex: 1;
  height: 34px;
  border-radius: 7px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: 11px;
  color: var(--c-subtle);
}

.segbtn.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-weight: 700; }

.specline { margin-top: 6px; padding-left: 104px; font-size: 10px; color: var(--c-muted); }

.checkline { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-xs); color: var(--c-navy-deep); }
.checkline input { width: 16px; height: 16px; accent-color: var(--c-blue); }

.azimuth { display: flex; align-items: center; gap: 14px; }
.azimuth .cinput { flex: 1; }

.compass {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  flex: none;
}

.compass i { position: absolute; font-style: normal; font-size: 9px; color: var(--c-muted); }
.compass__n { top: 3px; left: 50%; translate: -50% 0; }
.compass__s { bottom: 3px; left: 50%; translate: -50% 0; color: var(--c-orange) !important; font-weight: 700; }
.compass__e { right: 4px; top: 50%; translate: 0 -50%; }
.compass__w { left: 4px; top: 50%; translate: 0 -50%; }

.compass__needle {
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 24px;
  translate: -50% 0;
  border-radius: 2px;
  background: var(--c-orange);
}

/* ── 고객 CRM (crm) ───────────────────────────────────────────────────── */
.crmgrid { grid-template-columns: 380px 1fr; align-items: start; }
.crmdetail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.ftabs { display: flex; gap: 6px; margin: 12px 0 4px; flex-wrap: wrap; }

.ftab {
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: 11px;
  color: var(--c-subtle);
}

.ftab b { margin-left: 4px; font-weight: 700; }
.ftab.is-on { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }

.pagerow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px;
  border-top: 1px solid var(--c-line);
}

.pagebtn {
  min-width: 28px; height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--c-subtle);
}

.pagebtn.is-on { background: var(--c-navy); color: #fff; font-weight: 700; }
.pagerow__dots { color: var(--c-muted); font-size: 11px; }

.cprofile { display: flex; gap: 14px; align-items: flex-start; }

.cprofile__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-sky-pale);
  color: var(--c-blue);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  flex: none;
}

.cprofile__name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-base); font-weight: 700; color: var(--c-navy-deep); }
.cprofile__meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--c-subtle); }
.cprofile__meta svg { width: 13px; height: 13px; }

.factbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.factbar span { display: block; font-size: 11px; color: var(--c-muted); }
.factbar b { display: block; margin-top: 4px; font-size: var(--fs-xs); color: var(--c-navy-deep); }

.todo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  font-size: var(--fs-xs);
  cursor: pointer;
}

.todo + .todo { margin-top: 8px; }
.todo input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--c-navy); flex: none; }
.todo b { display: block; color: var(--c-navy-deep); }
.todo__meta { display: block; margin-top: 3px; font-size: 11px; color: var(--c-muted); }
.todo .tag { margin-left: auto; flex: none; }

.memo {
  padding: 12px;
  border-radius: 8px;
  background: var(--c-console-bg);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-subtle);
}

.aibadge {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--g-cta);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}

.predict { display: flex; flex-direction: column; gap: 12px; }

.predict__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-xs); }

.predict__ico {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--c-console-bg);
  color: var(--c-subtle);
  display: grid;
  place-items: center;
  flex: none;
}

.predict__ico svg { width: 16px; height: 16px; }
.predict__name { width: 108px; flex: none; color: var(--c-navy-deep); font-weight: 500; }
.predict__row .bar { flex: 1; }
.predict__pct { width: 40px; text-align: right; color: var(--c-navy-deep); }

/* ── 문의 접수 (intake) ───────────────────────────────────────────────── */
.chtabs { display: flex; gap: 6px; margin-bottom: 16px; }

.chtab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: 11px;
  color: var(--c-subtle);
}

.chtab.is-on { background: var(--c-blue); border-color: var(--c-blue); color: #fff; font-weight: 700; }
.chtab svg { width: 14px; height: 14px; }

.callcard {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: var(--c-g50);
  text-align: center;
}

.callcard__state { display: flex; align-items: center; font-size: 11px; color: var(--c-mint); font-weight: 700; }
.callcard__time { margin-left: auto; color: var(--c-muted); font-weight: 500; }
.callcard__num { margin: 12px 0; font-size: 20px; font-weight: 700; color: var(--c-navy-deep); }

/* 통화 파형 — 실제 음성이 아니라 상태를 보여주는 장식이다 */
.wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; }

.wave span {
  width: 3px;
  border-radius: 2px;
  background: var(--c-blue);
  animation: wave 1.1s ease-in-out infinite;
}

.wave span:nth-child(3n) { animation-delay: .15s; background: var(--c-blue-soft); }
.wave span:nth-child(3n+1) { animation-delay: .3s; }
.wave span:nth-child(4n) { animation-delay: .45s; }

@keyframes wave {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .wave span { animation: none; height: 18px; }
}

.callcard__keys { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }

.keybtn { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; color: var(--c-subtle); }

.keybtn span {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
}

.keybtn svg { width: 18px; height: 18px; }
.keybtn--end span { background: var(--c-coral); border-color: var(--c-coral); color: #fff; }

.chico {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 11px;
  font-weight: 700;
}

.chico svg { width: 15px; height: 15px; }
.chico--call { background: var(--c-sky-pale); color: var(--c-blue); }
.chico--kakao { background: #fee500; color: #3c1e1e; }
.chico--sms { background: var(--c-mint-pale); color: var(--c-mint); }

/* AI 요약 목록 */
.aisum { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }

.aisum > div {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--c-g50);
  border: 1px solid var(--c-line);
}

.aisum dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
}

.aisum dt svg { width: 14px; height: 14px; }
.aisum dd { margin-top: 6px; font-size: var(--fs-xs); color: var(--c-navy-deep); line-height: 1.6; }

/* ── 범위 밖 표시 ────────────────────────────────────────────────────
   외부 CRM 이 담당하는 화면(①문의접수 ②고객CRM)에 붙인다.
   데모에서 흐름은 이어 보여주되 "우리가 만드는 것"과 섞이지 않게 한다.
   2026-08-13 범위 확정 — docs/spec-epc-saas.md 부록 참고. */
.scopeban{
  display:flex; gap:12px; align-items:flex-start;
  margin:0 0 18px; padding:13px 16px;
  border:1px solid var(--c-amber-line); border-left:4px solid var(--c-amber);
  border-radius:8px; background:var(--c-amber-pale);
}
.scopeban__ico{ flex:0 0 auto; font-size:16px; line-height:1.45 }
.scopeban__b{ display:block; margin-bottom:3px; font-weight:700; color:var(--c-amber-ink); font-size:13.5px }
.scopeban__t{ margin:0; font-size:12.5px; line-height:1.65; color:var(--c-amber-ink) }
.scopeban__t code{ background:var(--c-amber-line); padding:1px 5px; border-radius:4px; font-size:11.5px }

/* ── 구조검토 · 날인 잠금 ────────────────────────────── */
.stlock{ margin:0 0 16px; padding:16px 18px; border-radius:10px; border:1px solid }
.stlock.is-ok{ background:var(--c-mint-pale); border-color:var(--c-mint-line) }
.stlock.is-locked{ background:var(--c-coral-pale); border-color:var(--c-coral-line) }
.stlock__head{ display:flex; gap:12px; align-items:flex-start }
.stlock__ico{ font-size:22px; line-height:1.2 }
.stlock__title{ margin:0 0 3px; font-size:15px; font-weight:800; color:var(--c-g900) }
.stlock__sub{ margin:0; font-size:12px; color:var(--c-g700) }
.stlock__diff{ margin:12px 0 0; padding:0; list-style:none }
.stlock__diff li{ display:flex; align-items:center; gap:8px; padding:5px 0; font-size:12.5px }
.stlock__diff b{ min-width:110px; color:var(--c-g900) }
.stlock__was{ color:var(--c-g500); text-decoration:line-through }
.stlock__arrow{ color:var(--c-coral-ink) }
.stlock__now{ font-weight:700; color:var(--c-coral-ink) }
.stlock__note{ margin:12px 0 0; font-size:12px; line-height:1.7; color:var(--c-g700) }
.stlock__note i{ color:var(--c-g900) }

.stnote{ margin:0 0 10px; font-size:12px; line-height:1.75; color:var(--c-g700) }
.stnote i{ color:var(--c-g900) }
.sthash{ margin:0; padding:9px 11px; border-radius:6px; background:var(--c-g100);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px;
  line-height:1.7; color:var(--c-g600); white-space:pre-wrap; word-break:break-all }
.ctable tr.is-diff{ background:var(--c-coral-wash) }

.stlist{ list-style:none; margin:0; padding:0 }
.stlist li{ display:flex; align-items:center; gap:9px; padding:8px 0;
  border-bottom:1px solid var(--c-g100); font-size:12.5px }
.stlist li:last-child{ border-bottom:0 }
.stlist li::before{ flex:0 0 auto; width:20px; text-align:center }
.stlist li.is-auto::before{ content:"✅" }
.stlist li.is-ask::before{ content:"👤" }
.stlist b{ flex:1; font-weight:600; color:var(--c-g900) }
.stlist span{ font-size:11px; color:var(--c-g500) }

.stdemo{ display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 16px; padding:11px 14px; border:1px dashed var(--c-g250);
  border-radius:9px; background:var(--c-g75) }
.stdemo__t{ margin-right:6px; font-size:12px; font-weight:700; color:var(--c-g700) }
.cbtn[disabled]{ opacity:.45; cursor:not-allowed }

/* ── 인허가 판정 ────────────────────────────────────── */
.pmtabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.pmtab{ padding:8px 13px; border:1px solid var(--c-g200); border-radius:8px;
  background:#fff; cursor:pointer; text-align:left; line-height:1.35 }
.pmtab:hover{ border-color:var(--c-blue-soft) }
.pmtab b{ display:block; font-size:12px; font-weight:700; color:var(--c-g900) }
.pmtab span{ font-size:11px; color:var(--c-g500) }
.pmtab.is-on{ background:var(--c-navy); border-color:var(--c-navy) }
.pmtab.is-on b{ color:#fff } .pmtab.is-on span{ color:var(--c-sky-line) }

.pmwhys{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px; margin-bottom:14px }
.pmwhy{ padding:11px 13px; border-radius:8px; background:var(--c-sky-pale);
  border-left:3px solid var(--c-blue) }
.pmwhy.is-na{ background:var(--c-g100); border-left-color:var(--c-g300) }
.pmwhy.is-ask{ background:var(--c-amber-pale); border-left-color:var(--c-amber) }
.pmwhy__t{ margin:0 0 3px; font-size:11px; font-weight:700; color:var(--c-g700) }
.pmwhy__v{ margin:0; font-size:12px; line-height:1.6; color:var(--c-g900) }

.pmsum{ display:flex; gap:20px; flex-wrap:wrap; padding:11px 14px;
  border-radius:8px; background:var(--c-g75); font-size:12px; color:var(--c-g700) }
.pmsum b{ font-size:15px; color:var(--c-navy) }

.pmscope{ margin-top:12px; padding:11px 14px; border-radius:8px;
  background:var(--c-amber-pale); font-size:11.5px; line-height:1.7; color:var(--c-g700) }
.pmscope p{ margin:0 0 4px } .pmscope p:last-child{ margin:0 }
.pmscope b{ color:var(--c-g900) }

.pmsteps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px; margin-bottom:16px }
.pmstep{ padding:14px 16px; border:1px solid var(--c-g200);
  border-radius:10px; background:#fff }
.pmstep__head{ display:flex; gap:11px; align-items:flex-start; margin-bottom:9px }
.pmstep__no{ flex:0 0 auto; width:26px; height:26px; border-radius:7px;
  background:var(--c-navy); color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center }
.pmstep__name{ margin:0 0 4px; font-size:13px; font-weight:700; color:var(--c-g900); line-height:1.4 }
.pmstep__meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  margin:0; font-size:11px; color:var(--c-g500) }
.pmstep__note{ margin:0 0 9px; padding:8px 10px; border-radius:6px;
  background:var(--c-amber-pale); font-size:11px; line-height:1.6; color:var(--c-amber-ink) }
.pmdocs{ list-style:none; margin:0; padding:0 }
.pmdocs li{ display:flex; gap:8px; align-items:baseline; padding:5px 0;
  border-bottom:1px solid var(--c-g100); font-size:12px; color:var(--c-g800) }
.pmdocs li:last-child{ border-bottom:0 }
.pmdocs li.is-opt{ color:var(--c-g400) }
.pmdocs__c{ flex:0 0 34px; font-family:ui-monospace,Menlo,monospace;
  font-size:10.5px; color:var(--c-g500) }
/* ⚠️ 10px 이라 색이 조용하면 **안 읽힌다**(2.47:1 이었다). 「선택」은 조용해야 하지만
   안 보이면 안 된다 — 면은 그대로 두고 글자만 내린다. */
.pmdocs__opt{ padding:1px 5px; border-radius:4px; background:var(--c-g100);
              color:var(--c-g600); font-size:10px }

/* ─────────────────────────────────────────────────────────────
   화면 ③ 설계 — 엔진에 붙은 화면
   ⚠️ 여기 있는 것은 전부 실제 계산 결과를 담는 자리다.
      시안용 더미(.satmap 등)와 섞지 않는다.
   ───────────────────────────────────────────────────────────── */

.dengine{font-size:12px;padding:5px 10px;border-radius:14px;background:var(--c-g100);color:var(--c-g700)}
.dengine.is-on{background:var(--c-mint-pale);color:var(--c-mint-ink)}
.dengine.is-off2{background:var(--c-coral-pale);color:var(--c-coral-ink)}

.dcanvas{height:460px;background:#fff}
.dcanvas canvas{width:100%;height:100%;display:block}

.dlegend{display:flex;gap:16px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--c-line);margin:0}
.dlg{font-size:12px;color:var(--c-g700);display:inline-flex;align-items:center;gap:6px}
.dlg::before{content:'';width:12px;height:12px;border-radius:2px;border:1px solid}
.dlg--site::before{background:var(--c-g75);border-color:var(--c-g400)}
.dlg--use::before{background:rgb(15 157 118 / 10%);border-color:var(--c-mint)}
.dlg--mod::before{background:var(--c-navy);border-color:var(--c-navy)}
.dlg--obs::before{background:rgb(220 79 54 / 12%);border-color:var(--c-coral)}

.dmode{font-size:12px;padding:4px 10px;border-radius:12px}
.dmode.is-precise{background:var(--c-mint-pale);color:var(--c-mint-ink)}
.dmode.is-preview{background:var(--c-amber-pale);color:var(--c-amber-ink)}

.dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:16px 18px}
.dcard__t{margin:0;font-size:12px;color:var(--c-g600)}
.dcard__v{margin:6px 0 4px;font-size:24px;font-weight:700;letter-spacing:-.02em}
.dcard__s{margin:0;font-size:12px;color:var(--c-g500)}

.dwarns{display:grid;gap:8px}
.dwarn{background:var(--c-amber-pale);border:1px solid var(--c-amber-line);border-radius:8px;
       padding:10px 14px;font-size:13px;color:var(--c-amber-ink);word-break:keep-all}
.dwarn::before{content:'⚠️ ';}
.dwarn--bad{background:var(--c-coral-pale);border-color:var(--c-coral-line);color:var(--c-coral-ink)}
.dwarnfold{margin-top:8px;border:1px solid var(--c-amber-line);border-radius:8px;background:var(--c-amber-pale)}
.dwarnfold>summary{cursor:pointer;padding:9px 14px;font-size:13px;font-weight:600;color:var(--c-amber-ink);list-style-position:inside}
.dwarnfold>summary span{font-weight:400;color:var(--c-g500)}
.dwarnfold[open]>summary{border-bottom:1px solid var(--c-amber-line)}
.dwarnfold>.dwarns{padding:10px}
.dwarnfold .dwarn{background:var(--c-bg)}
.dwarn--stop::before{content:none}
.dstage{margin:0;font-size:12px;color:var(--c-g600);min-height:16px}

.dstr{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dstr li{display:flex;justify-content:space-between;align-items:baseline;
         padding:8px 12px;background:var(--c-g75);border-radius:6px;font-size:13px}
.dstr span{color:var(--c-g600);font-size:12px}

.dperm__n{margin:0 0 10px;font-size:13px}
.dperm__why{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dperm__why li{font-size:12px;color:var(--c-g700);word-break:keep-all}
.dperm__why span{display:inline-block;min-width:88px;color:var(--c-g500)}

.dsite{font-size:13px}
.dsite + .dsite{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-line)}
.dsite__t{margin:0;font-weight:600}
.dsite__s{margin:4px 0 0;font-size:12px;color:var(--c-g600)}
.dsite__n{margin:6px 0 0;font-size:12px;color:var(--c-amber-ink);word-break:keep-all}
.dsite__n::before{content:'⚠️ ';}

.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th,.dtable td{padding:8px 14px;border-bottom:1px solid var(--c-line);text-align:left}
.dtable th{background:var(--c-g75);font-weight:600;font-size:12px;color:var(--c-g700)}
.dtable .n{text-align:right;font-variant-numeric:tabular-nums}
.dtable tr.is-tbd td{color:var(--c-amber-ink);background:var(--c-amber-wash)}

.crange{width:100%;accent-color:var(--c-navy)}
.cfield--2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dcadnote{margin:14px 0 0;font-size:12px;color:var(--c-amber-ink)}

@media (max-width:1000px){
  .dcards{grid-template-columns:1fr 1fr}
  .dcanvas{height:340px}
}
@media (max-width:720px){
  .dcards{grid-template-columns:1fr}
}

/* ── 화면 ④ 도면 자동 생성 ─────────────────────────────── */

.dcanvas--paper{background:var(--c-g50);height:420px}
.dlg--modl::before{background:var(--c-sky-line);border-color:var(--c-blue)}
.dlg--post::before{background:var(--c-coral-ink);border-color:var(--c-coral-ink);border-radius:50%}

.dcards--3{grid-template-columns:repeat(4,1fr)}

.csrc{font-size:12px;padding:4px 10px;border-radius:12px}
.csrc.is-handoff{background:var(--c-mint-pale);color:var(--c-mint-ink)}
.csrc.is-sample{background:var(--c-g100);color:var(--c-g700)}
/* 상단바가 가리키는 부지와 폼이 다를 때 — 조용히 두면 화면이 모순된다 */
.csrc.is-warn{background:var(--c-amber-pale);color:var(--c-amber-ink)}

.cfile{display:flex;align-items:center;gap:14px;padding:12px 0}
.cfile + .cfile{border-top:1px solid var(--c-line)}
.cfile__ico{flex:none;width:44px;height:44px;border-radius:8px;background:var(--c-navy);color:#fff;
            display:grid;place-items:center;font-size:11px;font-weight:700;letter-spacing:.04em}
.cfile__main{flex:1;min-width:0}
.cfile__name{display:block;font-weight:600;font-size:14px;
              overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfile__meta{display:block;font-size:12px;color:var(--c-g600);margin-top:2px}

.ctb{border:1px solid var(--c-line);border-radius:8px;overflow:hidden}
.ctb__row{display:flex;gap:10px;padding:8px 12px;font-size:12px;align-items:baseline}
.ctb__row + .ctb__row{border-top:1px solid var(--c-line)}
.ctb__row span{flex:none;width:74px;color:var(--c-g500)}
.ctb__row b{font-weight:600;word-break:keep-all;min-width:0}

/* ⚠️ 날인 경계는 다른 색으로 — 다른 주의와 섞이면 안 된다 */
.dwarn--seal{background:var(--c-coral-pale);border-color:var(--c-coral-line);color:var(--c-coral-ink);font-weight:500}

@media (max-width:1000px){ .dcards--3{grid-template-columns:1fr} .dcanvas--paper{height:320px} }

/* 시세 — ⚠️ REC 는 원/REC 와 원/kWh 가 1,000배 차이다. 둘 다 보이되
   입력에 들어가는 것은 원/kWh 뿐이라는 걸 화면이 말한다. */
.dquote{margin:12px 0 0;display:grid;gap:8px}
.dq{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;align-items:baseline;
    padding:8px 12px;background:var(--c-g75);border-radius:6px;font-size:12px}
.dq span{color:var(--c-g500)}
.dq b{font-size:14px;font-variant-numeric:tabular-nums}
.dq i{grid-column:1/-1;font-style:normal;color:var(--c-g500);font-size:11px}
.dq__use{grid-row:1;border:1px solid var(--c-line);background:#fff;border-radius:5px;
         padding:3px 10px;font-size:11px;cursor:pointer}
.dq__use:hover{background:var(--c-g100)}
.dq__warn{margin:0;font-size:11px;color:var(--c-amber-ink)}

/* 관측 일사량 — ⚠️ 관측(수평면·무손실)과 입력값(경사면·손실 반영)은 뜻이 다르다.
   화면이 그 차이를 말하지 않으면 사용자가 그냥 바꿔 넣는다. */
.dobs{margin:8px 0 0;display:grid;gap:6px}
.dobs__row{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;
           padding:7px 12px;background:var(--c-g75);border-radius:6px;font-size:12px}
.dobs__row span{color:var(--c-g500)}
.dobs__row b{font-variant-numeric:tabular-nums}
.dobs__row i{grid-column:1/-1;font-style:normal;color:var(--c-g500);font-size:11px}
.dobs__warn{margin:0;padding:8px 12px;background:var(--c-amber-pale);border:1px solid var(--c-amber-line);
            border-radius:6px;font-size:11px;color:var(--c-amber-ink);word-break:keep-all}
.dobs__conv{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;
            padding:8px 12px;background:var(--c-mint-pale);border-radius:6px;font-size:12px;color:var(--c-mint-ink)}
.dobs__conv i{grid-column:1/-1;font-style:normal;font-size:11px;color:var(--c-mint-ink)}
.dobs__wait,.dobs__err{margin:0;font-size:11px;color:var(--c-g500)}
.dobs__err{color:var(--c-coral-ink)}

/* ─────────────────────────────────────────────────────────────
   화면 ⑥ 인허가 — 엔진 연결
   ⚠️ 판정(근거)·검토사항(⑩)·서식 값(⑨)이 성격이 달라 색을 나눈다.
      섞이면 "무엇이 확정이고 무엇이 확인 필요인지" 가 안 보인다.
   ───────────────────────────────────────────────────────────── */

.pmcaveat{margin:12px 0 0;font-size:12px;color:var(--c-amber-ink);word-break:keep-all}
.pmoff{margin:0;font-size:12px;color:var(--c-g500);word-break:keep-all}

/* ⑩ 검토사항 */
.pmrp{padding:12px 14px;border-left:3px solid var(--c-mint);background:var(--c-mint-wash);border-radius:0 6px 6px 0}
.pmrp + .pmrp{margin-top:10px}
.pmrp.is-warn{border-left-color:var(--c-amber);background:var(--c-amber-wash)}
.pmrp__t{margin:0;font-weight:600;font-size:13px}
.pmrp__f{margin:4px 0 0;font-size:12px;color:var(--c-g700);word-break:keep-all}
.pmrp__a{margin:6px 0 0;font-size:12px;color:var(--c-mint-ink);word-break:keep-all}
.pmrp.is-warn .pmrp__a{color:var(--c-amber-ink);font-weight:500}

/* 서류에 붙는 '서식' 표시 — 값을 만들 수 있는 것 */
.pmdocs__form{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:9px;
              background:var(--c-sky-pale);color:var(--c-navy);font-size:10px;vertical-align:1px}

/* ⑨ 서식 값 */
.pmfsum{display:flex;gap:18px;flex-wrap:wrap;padding-bottom:12px;
        border-bottom:1px solid var(--c-line);font-size:13px;color:var(--c-g700)}
.pmfsum b{color:#111;font-size:15px}
.pmmiss{margin:12px 0 0;padding:10px 12px;background:var(--c-amber-pale);border:1px solid var(--c-amber-line);
        border-radius:6px;font-size:12px;color:var(--c-amber-ink);word-break:keep-all}
.pmforms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:12px}
.pmform{padding:10px 12px;border:1px solid var(--c-line);border-radius:8px}
.pmform.is-ready{border-color:var(--c-mint-line);background:var(--c-mint-wash)}
.pmform__n{margin:0;font-size:12px;font-weight:600;word-break:keep-all}
.pmform__s{margin:2px 0 8px;font-size:11px;color:var(--c-g500)}
.pmform__m{margin:6px 0 0;font-size:11px;color:var(--c-g600)}

/* 조건 */
.pmpresets{display:grid;gap:6px}
.pmpreset{text-align:left;padding:8px 12px;border:1px solid var(--c-line);background:#fff;
          border-radius:6px;font-size:12px;cursor:pointer}
.pmpreset:hover{background:var(--c-g100);border-color:var(--c-g250)}

.pmclaims__n{margin:0;font-size:13px}
.pmclaims__l{margin:8px 0 0;padding-left:18px;font-size:12px;color:var(--c-g700)}
.pmclaims__s{margin:6px 0 0;font-size:11px;color:var(--c-g500)}

/* 아직 없는 것 — 흐리게 두되 이유를 말한다 */
.panel--mock{background:var(--c-g50);border-style:dashed}
.pmmock{margin:0;font-size:13px;color:var(--c-g700);word-break:keep-all}
.pmmock + .pmmock{margin-top:8px}
.pmmock--warn{color:var(--c-amber-ink)}

/* 저장된 설계 — 날인된 것은 자물쇠로 구별한다 */
.dsaved{display:grid;gap:6px}
.dsave{padding:8px 12px;background:var(--c-g75);border-radius:6px;font-size:12px}
.dsave.is-sealed{background:var(--c-mint-wash);border:1px solid var(--c-mint-line)}
.dsave__n{display:block;font-weight:600}
.dsave__m{display:block;color:var(--c-g600);font-size:11px;margin-top:2px}

/* 화면 ⑤ — 서버 날인.
   ⚠️ 날인 유효/무효는 색으로 즉시 구별돼야 한다. 법적 책임 경계라
      "어딘가에 적혀 있다" 로는 부족하다. */
.stpicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-bottom:14px}
.stpick{text-align:left;padding:10px 12px;border:1px solid var(--c-line);background:#fff;
        border-radius:8px;cursor:pointer;font-size:12px}
.stpick:hover{background:var(--c-g100)}
.stpick.is-sealed{border-color:var(--c-mint-line);background:var(--c-mint-wash)}
.stpick b{display:block;font-size:13px}
.stpick span{display:block;color:var(--c-g600);margin-top:2px}

.sthists{display:grid;gap:8px}
.sthist{padding:10px 12px;border:1px solid var(--c-mint-line);border-radius:8px;background:var(--c-mint-wash)}
.sthist.is-revoked{border-color:var(--c-line);background:var(--c-g75);opacity:.75}
.sthist__t{margin:0;font-size:13px;font-weight:600}
.sthist__m{margin:3px 0 0;font-size:11px;color:var(--c-g600)}
.sthist__h{margin:4px 0 0;font-size:10px;color:var(--c-g500);font-family:ui-monospace,monospace;word-break:break-all}
.sthist__r{margin:5px 0 0;font-size:11px;color:var(--c-amber-ink)}

.dobs__best{margin:0;padding:7px 12px;background:var(--c-g75);border-radius:6px;
            font-size:11px;color:var(--c-g700);word-break:keep-all}
.dobs__conv span{font-variant-numeric:tabular-nums}


/* ── 반응형 — 이 파일에 정의된 고정 폭 격자들 ──────────────────────
   ⚠️ console.css 의 미디어 쿼리로는 못 덮는다. 이 파일이 **뒤에 로드**되므로
      같은 특이도(0,1,0)면 여기가 이긴다. 미디어 쿼리는 특이도를 안 올린다.
      — `.crmgrid` 를 console.css 에서 고치려다 안 먹어서 알았다. */
@media (max-width: 1000px) {
  /* 다른 격자(.grid--sidebar 등)와 같은 중단점에 맞춘다.
     ⚠️ 720 으로 뒀다가 768px 에서 넘쳤다 — 380px 고정 열 + 상세 열의
        최소폭이 좁은 화면에 안 들어간다. */
  .crmgrid { grid-template-columns: 1fr; }
}

/* 사업성 — 숫자가 곧 신뢰인 자리라 크게 보여준다 */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.fcard{padding:12px 14px;background:var(--c-g75);border-radius:8px}
.fcard__v{margin:5px 0 3px;font-size:20px;font-weight:700;letter-spacing:-.02em;
          font-variant-numeric:tabular-nums}
.cfield--3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:1000px){ .fcards{grid-template-columns:1fr 1fr} }

/* ── 화면 ⓪ 입지검토 ───────────────────────────────────────────── */
.stpresets { display:flex; flex-wrap:wrap; gap:6px; }
.stpreset { font-size:12px; padding:6px 10px; }

.stcanvas {
  width:100%; height:auto; display:block;
  border:1px solid var(--c-line); border-radius:10px; background:#fff;
}

/* 검토 한 줄의 부연 — .row__meta 보다 한 단 낮게 */
.stnote {
  display:block; margin-top:4px; font-size:12px; line-height:1.55;
  color:var(--c-muted);
}

.stbar { display:flex; align-items:center; gap:10px; }
.stbar + .stbar { margin-top:8px; }
.stbar__label { flex:0 0 78px; font-size:12px; color:var(--c-muted); }
/* ⚠️ .bar 는 span 이라 flex 아이템으로만 늘어난다 — 폭을 여기서 준다 */
.stbar .bar { flex:1 1 auto; }
.stbar__n { flex:0 0 46px; text-align:right; font-size:13px; }

/* 판정 배지 옆에 무엇이 걸렸는지 — 개수만 적으면 스크롤해야 안다 */
.stwhy { font-size: 12px; color: var(--c-muted); }

/* ── 화면 ④ 전기 — 단선결선도 ──────────────────────────────────── */
.elline { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.elnode {
  display: block; border: 1px solid var(--c-line); border-radius: 8px;
  padding: 10px 14px; background: #fff;
}
.elnode b { display: block; font-size: 13px; color: var(--c-navy-deep); }
.elnode span { display: block; margin-top: 3px; font-size: 11px; color: var(--c-muted); }
.elnode--grid { background: var(--c-g75); border-style: dashed; }
.elarrow { display: block; text-align: center; color: var(--c-muted); font-size: 13px; line-height: 1.6; }

.elbasis { margin: 0; padding-left: 18px; }
.elbasis li { font-size: 12px; color: var(--c-muted); line-height: 1.7; }
.elform { display: grid; gap: 8px; }
.elform .cfield__label { margin-top: 4px; }
.elrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 누적 현금흐름 — 외부 차트 라이브러리 없이 SVG 로 그린다 */
.fchart { width: 100%; height: auto; display: block; margin-bottom: 6px; }

/* ── ⑦~⑩ 사업 진행 ────────────────────────────────────────────── */
.pstep__no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  background: var(--c-line); color: var(--c-muted);
}
.pstep__no.is-done { background: var(--c-mint); color: #fff; }

.pbuild { margin: 0; padding-left: 20px; }
.pbuild li { font-size: 13.5px; line-height: 1.9; color: var(--c-navy-deep); }
.pbuild li::marker { color: var(--c-muted); font-size: 12px; }

/* ── ★ 부지 검토서 (1차 데모) ─────────────────────────────────── */
.rq__body { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rq__addr { flex: 1 1 320px; min-width: 0; font-size: 15px; }
.rq__mount { flex: 0 0 100px; }
.rq__go { flex: none; }
.rq__presets { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 0; }
.rq__presets .cbtn { font-size: 12px; padding: 5px 10px; }

/* 판정 — 이 한 장의 첫 문장 */
.rv { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rv__mark {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.rv__mark.is-ok   { background: var(--c-mint-pale); color: var(--c-mint); }
.rv__mark.is-warn { background: var(--c-amber-pale); color: var(--c-amber); }
.rv__mark.is-bad  { background: var(--c-coral-pale); color: var(--c-coral-ink); }
.rv__t { font-size: 18px; font-weight: 700; color: var(--c-navy-deep); margin: 0; }
.rv__s { font-size: 13px; color: var(--c-muted); margin: 3px 0 0; }

/* 큰 숫자 — 사장님이 먼저 보는 넷 */
.rbig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-line); }
.rbig > div { background: #fff; padding: 18px 20px; }
.rbig__k { display: block; font-size: 11px; color: var(--c-muted); }
.rbig__v { display: block; margin-top: 6px; font-size: 26px; font-weight: 700;
           color: var(--c-navy-deep); letter-spacing: -.5px; }
.rbig__s { display: block; margin-top: 4px; font-size: 11px; color: var(--c-muted); }
@media (max-width: 900px) { .rbig { grid-template-columns: repeat(2, 1fr); } }

.rcanvas { width: 100%; height: auto; display: block;
           border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }

@media print {
  .side, .topbar, .phead__actions, .rq, .side__foot { display: none !important; }
  .shell__body { padding: 0 !important; }
  .panel { break-inside: avoid; }
}

/* 배경지도 — 위성사진 위에 경계·배치를 겹친다 */
.rmap { position: relative; }
.rmap__bar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px; flex-wrap: wrap;
}
.rmap__b { font-size: 12px; padding: 5px 10px; }
.rmap__b.is-on { background: var(--c-navy-deep); color: #fff; border-color: var(--c-navy-deep); }
.rmap__cite { margin-left: auto; font-size: 11px; color: var(--c-muted); }

/* 영역 그리기 · DXF 가져오기 */
.rq__alt { flex: 0 0 130px; }
.rmap__sep { width: 1px; height: 18px; background: var(--c-line); margin: 0 2px; }
.rmap__b.is-on { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.rmap__edit {
  margin-top: 8px; padding: 10px 12px;
  border: 1px solid var(--c-orange); border-radius: 8px; background: var(--c-amber-wash);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.7; color: var(--c-navy-deep);
}
.rmap__edit > span:first-child { flex: 1 1 260px; min-width: 0; }
/* ★ 조작 안내 — 확대·이동은 화면에 적어 두지 않으면 아무도 모른다 */
.rmap__hint {
  flex: 0 0 auto;
  padding: 3px 8px; border-radius: 5px;
  background: #fff; border: 1px solid var(--c-line);
  font-size: 11px; color: var(--c-muted); white-space: nowrap;
}
.rmap__hint b { color: var(--c-navy-deep); }
/* 확대·축소는 정사각으로 — 옆 텍스트 버튼과 폭이 같으면 눌러야 할 것으로 안 보인다 */
#r-zin, #r-zout { min-width: 30px; font-size: 14px; line-height: 1; padding: 5px 8px; }
.rmap__edit .cbtn { font-size: 12px; padding: 5px 10px; }
.rdxf { flex: 1 1 100%; }
.rdxf__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.rdxf__list .cbtn { font-size: 12px; padding: 6px 10px; }

/* ★ ③ 건축물대장 알림 — 자동 전환이 아니라 물어보는 자리다 */
.rhint {
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--c-blue); border-radius: 8px; background: var(--c-sky-wash);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; line-height: 1.7; color: var(--c-navy-deep);
}
.rhint > span { flex: 1 1 260px; min-width: 0; }
.rhint .cbtn { font-size: 12px; padding: 5px 10px; }

/* ★ 그리기 목표치 — 위성에 지붕이 안 보여도 크기를 맞출 수 있게 */
.rtgt { padding: 1px 6px; border-radius: 4px; font-weight: 700; }
.rtgt.is-ok { background: var(--c-mint-pale); color: var(--c-mint-ink); }
.rtgt.is-off { background: var(--c-coral-pale); color: var(--c-coral-ink); }
/* 위성사진이 왜 건물을 안 보여주는지 — 그리기를 시작할 때만 뜬다 */
.rwhy {
  margin-top: 6px; padding: 8px 12px;
  border: 1px dashed var(--c-line); border-radius: 8px; background: var(--c-g50);
  font-size: 12px; line-height: 1.7; color: var(--c-subtle);
}
.rwhy b { color: var(--c-navy-deep); }

/* ★ 주소가 여러 곳일 때 — 조용히 하나를 고르지 않는다 */
.rhint--warn { border-color: var(--c-orange); background: var(--c-amber-wash); }
.rhint__acts { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }

/* ★ 지붕 동 선택 — 동이 여럿일 때만 뜬다 */
.rhint--roof { border-color: var(--c-orange); background: var(--c-amber-wash); }
.rroofs { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.rroofs .cbtn { font-size: 12px; padding: 5px 10px; }
.rroofs .cbtn.is-on { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }

/* ★ 지붕 방향·형태 — 지붕형에서만 뜬다 */
.rroof {
  margin-bottom: 12px; padding: 8px 12px;
  border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-g50);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--c-subtle);
}
.rroof b { color: var(--c-navy-deep); }
.rroof label { display: inline-flex; align-items: center; gap: 6px; }
.rroof__sel { width: auto; min-width: 150px; padding: 4px 8px; font-size: 12px; }
.rroof__note { color: var(--c-orange); font-weight: 700; }

/* ★★ 절차 일정·기관 안내 — 접어 둔다(늘 보일 필요는 없다) */
.pplan { margin-top: 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-g50); }
.pplan > summary { padding: 9px 12px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--c-navy-deep); }
.pplan > summary::marker { color: var(--c-muted); }
.pplan__n { font-weight: 400; color: var(--c-subtle); margin-left: 6px; }
.pplan > *:not(summary) { margin: 0 12px 12px; }

/* ★★ 입지 표 — 조문 옆에 **쉬운 한 문장** (2026-08-29)
   ⚠️ span 에 margin-top 을 주려면 display:block 이 있어야 한다(이 파일의 옛 사고) */
.ftip, .fnote { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.6; }
.ftip { color: var(--c-navy-deep); font-weight: 400; }
.fnote { color: var(--c-muted); }
/* ★ 2026-09-18 상한 — **아직 안 왔지만 곧 온다.** 경고(빨강)도 안내(회색)도
   아니라서 색을 따로 준다. 지금 규칙표를 채우는 사람이 그 자리에서 봐야 한다. */
.fnote--soon { color: var(--c-violet); }

/* 꺾인 지붕 — 날개마다 따로 (체크박스는 셀렉트와 높이를 맞춘다) */
.rroof label > input[type="checkbox"] { margin: 0 4px 0 0; vertical-align: -1px; }

/* ★★ 설비 바 — 인버터·직렬수는 규칙이 아니라 사람이 고르는 값이다 (2026-08-29) */
.rgear .unitbox { display: inline-block; }
.rgear__n { width: 78px; padding: 4px 30px 4px 8px; font-size: 12px; text-align: right; }
.rgear .unitbox i { right: 8px; }
.rgear .rroof__note { color: var(--c-subtle); font-weight: 400; margin-left: auto; }

/* ★ 지도를 화면 가로 가득 (2026-08-26) — 숫자는 아래 한 줄로 */
.rwide { display: block; }
.ctb--wide {
  margin-top: 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 22px;
}
/* 조건만 바꾼 재계산 — 화면을 지우지 않고 흐리게만 둔다(스크롤이 튀지 않게) */
#r-out.is-busy { opacity: .5; pointer-events: none; transition: opacity .12s; }

/* ★ 지도 범례 — 필지 · 설치가능 · 모듈 (선이 셋이라 표기가 필요하다) */
.rlegend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11px; color: var(--c-muted); }
.rlg { display: inline-flex; align-items: center; gap: 6px; }
.rlg::before { content: ''; width: 16px; height: 0; border-top-width: 2px; border-top-style: solid; }
.rlg--parcel::before { border-top-style: dashed; border-top-color: var(--c-g400); }
.rlg--site::before { border-top-style: dotted; border-top-color: #38bdf8; }
.rlg--use::before { border-top-color: #38bdf8; }
.rlg--mod::before { border-top-width: 8px; border-top-color: rgb(15 23 42 / 88%); }
/* 자리는 되나 스트링이 안 맞는 모듈 — 지도에서 점선 윤곽이다 */
.rlg--spare::before { border-top-width: 2px; border-top-style: dashed;
  border-top-color: rgb(100 116 139 / 90%); }
/* ★★ 빠진 동의 **자리 후보** — 대장에는 있고 공간자료에 없는 동이다.
   ⚠️ 계산에 안 들어간 선이라 **계산 경계(하늘)와 다른 색**이어야 한다.
      호박색은 「확인할 것」이라는 뜻으로 이 저장소가 이미 쓰는 색이다. */
.rlg--guess::before { border-top-width: 3px; border-top-style: dashed;
  border-top-color: var(--c-amber-ink, #b45309); }
.lnk { background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
       color: var(--c-orange); text-decoration: underline; cursor: pointer; }

/* ★★ 검토 중인 부지 — 상단바에 늘 보인다 (2026-08-30)
   ⚠️ 주소가 조용히 이어지면 남의 땅을 계산하고도 모른다. 무엇을 보고 있는지 밝힌다. */
/* ⚠️⚠️ **콘솔 10화면 공통** — 320px 에서 39px 넘쳤고, 375px 에서도 알약 테두리
   밖으로 글자가 삐져나왔다(내용 176px > 상자 164px). 상자는 `max-width` 로 줄지만
   **안의 셋이 `flex:0 0 auto` 라 안 줄어** 밖으로 흘러나온 것이다.
   ★ `site-context.js` 가 모든 콘솔에 붙이므로 여기 한 곳이면 10화면이 함께 낫는다.
   ⚠️ flex 아이템의 `min-width: auto` 가 범인이다 — CLAUDE.md 가 적어 둔 그 자리다. */
.scbar {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 14px;
  padding: 5px 10px; border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-sky-wash); font-size: 12px; color: var(--c-subtle);
  max-width: 46vw; min-width: 0; overflow: hidden;
}
.scbar > * { min-width: 0; }
.scbar b { color: var(--c-navy-deep); font-weight: 700;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scbar__k { color: var(--c-muted); flex: 0 0 auto; }
.scbar__m { padding: 1px 7px; border-radius: 999px; background: #fff;
            border: 1px solid var(--c-line); flex: 0 0 auto; }
.scbar__x { border: 0; background: none; color: var(--c-muted); cursor: pointer;
            font-size: 11px; padding: 2px 4px; flex: 0 0 auto; }
.scbar__x:hover { color: var(--c-orange); text-decoration: underline; }

/* ── 지자체 조례 (2026-08-31) ─────────────────────────────────
   ⚠️ 판정이 아니라 **원문**이다 — 접어 두고 눌러서 편다. */
.rord{margin:14px 0 0;padding:12px 14px;border:1px solid var(--c-line);
  border-radius:8px;background:var(--c-g50)}
.rord__h{margin:0 0 8px;font-size:var(--fs-sm)}
.rord__c{margin:0 0 6px;font-size:var(--fs-sm)}
.rord__c summary{cursor:pointer;color:var(--c-blue)}
.rord__c p{margin:6px 0 0;line-height:1.7;color:var(--c-muted);
  word-break:keep-all;white-space:pre-wrap}
.rord__n{margin:8px 0 0;font-size:var(--fs-xs);color:var(--c-amber-ink);line-height:1.6}
.rhint--ord{background:var(--c-amber-wash);border-color:var(--c-amber-line)}
.rord--v{background:#fff}
.rord__ok{margin-left:8px;font-size:var(--fs-xs);color:var(--c-mint-ink)}
/* ⚠️ 규칙표를 사람이 확인하지 않았으면 눈에 띄게 적는다 */
.rord__warn{margin-left:8px;font-size:var(--fs-xs);color:var(--c-amber-ink);font-weight:600}

/* ── 조례 규칙표 화면 (2026-08-31) ────────────────────────────
   ★ 조문 원문을 **늘 왼쪽에 둔다** — 원문 없이 숫자만 넣으면 틀린다. */
.odlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:8px;margin-top:12px}
.odrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid var(--c-line);border-radius:8px;background:#fff;
  text-align:left;cursor:pointer;font:inherit}
.odrow:hover{border-color:var(--c-blue);background:var(--c-g50)}
.odrow__n{flex:1 1 100%;font-size:var(--fs-xs);color:var(--c-muted);
  word-break:keep-all}
.odrow__m{font-size:var(--fs-xs);color:var(--c-muted)}
.odrow__ok{font-size:var(--fs-xs);color:var(--c-mint-ink)}

.odsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px}
@media (max-width:1100px){.odsplit{grid-template-columns:1fr}}
.odsrc{min-width:0;padding:12px;border:1px solid var(--c-line);border-radius:8px;
  background:var(--c-g50);max-height:640px;overflow:auto}
.odform{min-width:0}
.odmiss { margin-bottom: 12px; }   /* 조례를 찾을 수 없음 — 판정에서 뺀 규칙표 */
/* ⚠️ 열이 11개라 좁으면 넘친다 — 표만 가로로 스크롤한다(문서는 안 넘친다) */
/* ⚠️ `.odtab`(규칙 표)는 2026-09-01 에 **카드**로 바뀌어 더 안 쓴다 —
   칸이 11개라 가로로 넘쳐 경고문이 잘렸다. 아래 `.odrule` 을 본다. */
.odtab .cinput{min-width:78px;padding:4px 6px;font-size:var(--fs-xs)}
.odex{width:100%;font:inherit;padding:8px;border:1px solid var(--c-line);
  border-radius:6px;line-height:1.6}
.odbtns{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.odmsg{font-size:var(--fs-xs);line-height:1.6}
.odmsg.is-ok{color:var(--c-mint-ink)}
.odmsg.is-bad{color:var(--c-coral-ink);font-weight:600}
.odmsg.is-warn{color:var(--c-amber-ink);line-height:1.6}
/* 기계가 뽑은 규칙이 왜 틀릴 수 있나 — 줄 아래에 편다 */


/* ★★ 초안 대조 — 정규식과 LLM 이 **갈리는 줄만** 보게 한다.
   ⚠️ 둘 다 낸 줄까지 강조하면 어디를 볼지 다시 모르게 된다. */
.odcmp { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--c-line);
  border-radius: 8px; background: var(--c-g50); }
.odcmp__h { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; }
.odcmp__r { margin: 6px 0 0; font-size: var(--fs-sm); line-height: 1.9; }
.odcmp__r b { display: inline-block; min-width: 62px; color: var(--c-muted);
  font-size: var(--fs-xs); }
.odcmp__n { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.odchip { display: inline-block; margin: 0 4px 4px 0; padding: 1px 8px;
  border-radius: 10px; font-size: var(--fs-xs); border: 1px solid transparent; }
.odchip.is-both { background: var(--c-mint-pale); color: var(--c-mint-ink); }
.odchip.is-llm  { background: var(--c-violet-pale); color: var(--c-violet-ink); border-color: var(--c-violet-line); }
.odchip.is-rx   { background: var(--c-amber-pale); color: var(--c-amber-ink); border-color: var(--c-amber-line); }

/* ★★ 별표 표 — **행 대응이 곧 뜻이다.** 평평한 글자로 읽으면 행이 어긋난다. */
.odbyl { font-size: var(--fs-xs); }
/* ⚠️⚠️ `word-break: keep-all` 이 여기서는 **글자를 겹치게 만든다** —
   `「건축법 시행령」별표1 제17호 공장(…)` 처럼 띄어쓰기 없는 긴 법령 문구가
   칸을 넘쳐 옆 칸 글자와 포개졌다. 조판보다 **읽히는 것**이 먼저다. */
/* ⚠️⚠️ **표가 칸보다 넓어 글자가 옆 칸으로 흘러나와 겹쳤다**(사용자 신고).
   `table-layout: fixed` 로 칸 폭을 못 박아 안에서 접히게 한다 —
   그래도 넓으면 `.tablewrap` 이 가로로 스크롤한다. */
.odbyl { table-layout: fixed; min-width: 460px; }
/* ⚠️⚠️⚠️ **겹침의 진짜 원인은 `.ctable th,td { white-space: nowrap }` 이었다.**
   콘솔 공용 표 스타일이라 줄바꿈이 아예 막혀 있어, 66px 칸에 든 긴 법령 문구가
   접히지 못하고 옆 칸 글자 위로 그대로 흘러나왔다.
   ★ 공용 스타일은 안 건드린다(다른 화면 표가 다 흐트러진다) — **여기서만 푼다.**
   ⚠️ 폭·`table-layout` 만 고쳐서는 안 낫는다 — 두 번 헛짚었다. */
.odbyl th, .odbyl td { padding: 4px 6px; vertical-align: top;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.odbyl th { background: var(--c-g75); font-weight: 600; }
.odraw > summary { cursor: pointer; color: var(--c-muted);
  font-size: var(--fs-xs); margin-top: 6px; }

/* ★★ 이 판정의 법적 근거 — 대법원 판례·행정심판 실측 */
.rauth__i { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--c-sky-line);
  background: var(--c-g50); }
.rauth__c { margin: 0; font-size: var(--fs-sm); }
.rauth__t { margin: 2px 0 6px; font-size: var(--fs-xs); color: var(--c-muted); }
.rauth__m { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--c-blue); }

/* ══════════════════════════════════════════════════════════════
   ★★ 조례 규칙표 팝업 (2026-09-01 사용자 요청)
   ⚠️ 본문 안에 두었더니 좁아서 조문 표 글자가 겹치고 경고문이 오른쪽으로
      잘렸다 — **조문과 규칙을 나란히 봐야 채울 수 있는 화면**이라 폭이 곧 쓸모다.
   ══════════════════════════════════════════════════════════════ */
.odmodal { position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 18px; }
.odmodal[hidden] { display: none; }          /* ⚠️ flex 가 hidden 을 이긴다 */
.odmodal__back { position: absolute; inset: 0; background: rgba(17, 24, 39, .45); }
.odmodal__box { position: relative; display: flex; flex-direction: column;
  width: min(1512px, 86vw); height: min(94vh, 1100px);
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(17, 24, 39, .28); }
.odmodal__head { display: flex; align-items: baseline; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--c-line); background: var(--c-g50); }
.odmodal__title { margin: 0; font-size: 17px; font-weight: 700; }
.odmodal__sub { flex: 1; min-width: 0; font-size: var(--fs-sm);
  color: var(--c-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.odmodal__x { flex: none; width: 30px; height: 30px; border: 1px solid var(--c-line);
  border-radius: 8px; background: #fff; cursor: pointer; font-size: 14px;
  line-height: 1; color: var(--c-muted); }
.odmodal__x:hover { background: var(--c-g100); color: #111; }
/* ★ 몸통만 스크롤한다 — 머리는 늘 보인다 */
.odmodal__body { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 24px; }

/* 팝업 안에서는 패널 껍데기를 벗긴다 — 테두리가 이중이 된다 */
.odmodal__body > .panel { border: 0; box-shadow: none; margin: 0; }
.odmodal__body > .panel > .panel__head { display: none; }
.odmodal__body > .panel > .panel__body { padding: 0; }

/* ★ 넓어진 만큼 두 쪽에 제 폭을 준다. 조문이 표를 품어 더 넓어야 한다 */
@media (min-width: 1200px) {
  /* ★ 조문 4 : 규칙 6 (2026-09-01 사용자 지정) — 규칙 칸이 11개라 더 넓어야 한다 */
  .odmodal .odsplit { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 22px; align-items: start; }
  /* ⚠️ 조문은 길다 — 따로 스크롤해 규칙표가 화면 밖으로 밀리지 않게 한다 */
  .odmodal .odsrc { position: sticky; top: 0; max-height: calc(94vh - 150px);
    overflow: auto; }
}

/* ★★ 규칙 한 줄 = **카드** (2026-09-01)
   ⚠️⚠️ 표로 두었더니 칸이 11개라 가로로 넘쳐 **경고문 오른쪽이 잘렸다** —
      경고문은 이 화면에서 가장 중요한 글인데 잘리면 없느니만 못하다.
   ★ 카드는 칸이 알아서 접히고 경고문이 폭을 다 쓴다. 가로 스크롤이 없다. */
.odrule { margin: 0 0 12px; padding: 10px 12px 4px;
  border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.odrule__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.odrule__n { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; background: var(--c-sky-pale);
  font-size: 11px; color: var(--c-muted); }
.odrule__t { flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odrule__g { display: grid; gap: 6px 10px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.odfld { display: block; min-width: 0; }
.odfld__l { display: block; margin-bottom: 2px; font-size: 11px;
  color: var(--c-muted); }
.odfld .cinput { width: 100%; }
/* ⚠️ 근거·비고는 길다 — 두 칸을 쓴다 */
.odfld[title*="별표"], .odfld[title=""] { grid-column: span 2; }

/* ⚠️ 경고문은 **폭을 다 쓴다.** 잘리면 무엇을 확인할지 모른다 */
.odwhy, .odsoon { margin: 8px -12px 0; padding: 8px 12px;
  font-size: 11.5px; line-height: 1.7; }
.odwhy { background: var(--c-amber-wash); color: var(--c-amber-ink); }
.odwhy span { display: block; word-break: keep-all; }
.odsoon { background: var(--c-violet-wash); color: var(--c-violet); word-break: keep-all; }

@media (max-width: 900px) {
  .odmodal { padding: 0; }
  .odmodal__box { width: 100vw; height: 100vh; border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════
   ★★★ "뭘 찾아서 어떻게 채우나" — 2026-09-01 사용자 요청
   ⚠️⚠️ 칸 이름만 있는 화면은 **만든 사람만** 쓸 수 있다.
      찾을 문장 모양을 보여주고, 채워진 실물 한 줄을 예시로 붙인다.
   ══════════════════════════════════════════════════════════════ */
.odhow { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--c-sky-line);
  border-radius: 10px; background: var(--c-g50); }
.odhow > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-blue); }
.odhow__s { margin: 10px 0 0; padding-left: 20px; font-size: var(--fs-sm);
  line-height: 1.8; }
.odhow__s li { margin-bottom: 8px; word-break: keep-all; }
.odhow__q { display: block; margin: 3px 0; padding: 6px 9px; border-radius: 6px;
  background: #fff; border: 1px solid var(--c-line); color: var(--c-navy-deep); }
.odhow__e { margin: 8px 0 2px; padding: 8px 10px; border-radius: 8px;
  background: #fff; border: 1px dashed var(--c-sky-line); font-size: var(--fs-sm);
  line-height: 1.8; word-break: keep-all; }
.odhow__e code { padding: 1px 5px; border-radius: 4px; background: var(--c-sky-pale);
  font-size: 11.5px; }

/* ★ 조문 안의 숫자 — 눌러서 칸에 넣는다 */
.odpick { padding: 0 3px; border: 0; border-bottom: 1px dashed var(--c-blue);
  border-radius: 3px; background: var(--c-sky-pale); color: var(--c-blue); cursor: pointer;
  font: inherit; }
.odpick:hover { background: var(--c-blue); color: #fff; }
.odpick--demo { cursor: default; }

/* ★ 지금 고른 칸 — 숫자를 누르면 여기로 들어간다 */
.odin.is-pick { outline: 2px solid var(--c-blue); outline-offset: 1px;
  background: var(--c-g50); }

/* ★ 칸 밑 한 줄 — **조문에서 찾을 말**을 적는다 */
.odfld__h { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.5;
  color: var(--c-muted); word-break: keep-all; }
/* ⚠️ 드문 칸은 접어 둔다 — 11칸을 한꺼번에 보이면 어디부터 채울지 모른다 */
.odgrp { margin-top: 8px; }
.odgrp > summary { cursor: pointer; font-size: 11.5px; color: var(--c-muted);
  padding: 2px 0; }
.odgrp[open] > summary { margin-bottom: 6px; }

/* ★★ 화면 ⑤ 설계하중 — Sg·V0 두 칸 + KDS 표 계수 (2026-09-01) */
.stfields { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.stfields .unitbox { flex: 1 1 190px; min-width: 0; }  /* ⚠️ min-width:0 이 없으면 가로로 넘친다 */
/* ⚠️ 셀렉트는 오른쪽 단위 라벨과 겹치기 쉽다 — 여백을 넉넉히 주고 말줄임 처리 */
.stfields select.cinput { padding-right: 74px; text-overflow: ellipsis; }
.stfields .unitbox:has(select) i { max-width: 68px; text-align: right; }
.stload { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 10px; margin-top: 14px; }
.stload__c { border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 14px;
             background: var(--c-bg); }
.stload__k { display: block; font-size: 11px; color: var(--c-muted); margin-bottom: 4px; }
.stload__v { display: block; font-size: 19px; font-weight: 700;
             font-variant-numeric: tabular-nums; }
.stload__u { font-size: 12px; font-weight: 500; color: var(--c-muted); margin-left: 3px; }
.stload__n { display: block; margin-top: 5px; font-size: 11px; color: var(--c-muted);
             line-height: 1.5; word-break: keep-all; }
.stwhy { margin-top: 12px; font-size: 12px; color: var(--c-muted); line-height: 1.7;
         word-break: keep-all; }
.stwhy b { color: var(--c-text); }
.stwhy li { margin-top: 4px; }
.stmapbtn { flex: 0 0 auto; align-self: center; }
/* ★★ KDS 등치선 지도 — 우리가 읽지 않는다. 사람이 읽으라고 띄운다 */
.stfig { margin: 14px 0; border: 1px solid var(--c-line); border-radius: 10px;
         padding: 14px; background: var(--c-bg); }
.stfig__h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
            margin-bottom: 8px; }
.stfig__h b { font-size: 14px; }
.stfig__h span { font-size: 12px; color: var(--c-muted); }
.stfig__img { max-width: 100%; height: auto; display: block; margin: 0 auto;
              /* ⚠️ 등치선 도면이라 어두운 배경에서 안 보인다 — 흰 바탕을 깐다 */
              background: #fff; border-radius: 6px; }
.stfig__n { margin-top: 10px; font-size: 12px; color: var(--c-muted);
            line-height: 1.7; word-break: keep-all; }

/* ★★ 매출 단가 — 가정과 오늘 시세를 나란히 (2026-09-01) */
.rprice { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--c-line);
          border-radius: 10px; background: var(--c-bg); }
.rprice__h { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rprice__h b { font-size: 15px; font-variant-numeric: tabular-nums; }
.rprice__h span { font-size: 12px; color: var(--c-muted); }
.rprice__h .tag { white-space: normal; }   /* 긴 출처(「기본값 — 2026년도 제1차 …」)가 휴대폰 폭을 넘쳤다 */
.rprice__m { margin-top: 6px; font-size: 12.5px; color: var(--c-text);
             word-break: keep-all; line-height: 1.7; }
.rprice__m b { font-variant-numeric: tabular-nums; }
.rprice__n { margin-top: 6px; font-size: 11.5px; color: var(--c-muted);
             word-break: keep-all; line-height: 1.7; }

/* ⚠️⚠️ 시안(가짜 문서)을 접어 둔다 — 실제 기능과 나란히 두면 경계가 흐려진다 */
.mockfold { margin: 18px 0; border: 1px dashed var(--c-line); border-radius: 10px;
            background: repeating-linear-gradient(45deg, transparent, transparent 8px,
                        rgba(0,0,0,.02) 8px, rgba(0,0,0,.02) 16px); }
.mockfold__s { cursor: pointer; padding: 12px 16px; font-size: 12.5px;
               color: var(--c-muted); line-height: 1.7; word-break: keep-all; }
.mockfold__s b { color: var(--c-text); }
.mockfold__x { display: inline-block; margin-left: 6px; padding: 1px 8px;
               border: 1px solid var(--c-line); border-radius: 999px; font-size: 11px; }
.mockfold[open] .mockfold__x::after { content: ' (접기)'; }


/* ⚠️ 좁으면 「검토 중인 부지」 라벨을 접는다 — 주소가 더 중요하다 */
@media (max-width: 720px) {
  .scbar { max-width: 60vw; margin-left: 8px; }
  .scbar__k { display: none; }
}
/* ⚠️ `minmax(320px, …)` 는 320px 화면에서 그 자체로 넘친다 */
.pmsteps, .odlist { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* ★★ 설계가 실패해도 **왜인지**는 보여준다 (2026-09-01) */
.rnotes { margin: 12px 0 0; padding: 0; list-style: none; }
.rnotes__i { position: relative; padding: 7px 12px 7px 26px; margin-top: 6px;
             border-radius: 8px; background: var(--c-g50); border: 1px solid var(--c-line);
             font-size: 12.5px; line-height: 1.7; color: var(--c-text);
             word-break: keep-all; }
.rnotes__i::before { content: '·'; position: absolute; left: 12px; color: var(--c-muted); }
.rnotes__i.is-bad { background: var(--c-coral-wash); border-color: var(--c-coral-line); }
.rnotes__i.is-bad::before { content: '⚠️'; left: 8px; font-size: 11px; }

/* ★★ 인허가 서식 원본 링크 (2026-09-01) */
.pmform__src { margin-top: 8px; font-size: 11.5px; line-height: 1.6;
               word-break: keep-all; }
.pmform__src span { color: var(--c-muted); }
.pmform__src.is-none { color: var(--c-muted); }

/* ★★★ 구조검토서 초안 — 기술사가 검토·서명만 하면 되게 (2026-09-02) */
.stdocbar { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.stdoc__h { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 6px;
            font-size: 14px; font-weight: 700; }
.stdoc__h span { font-size: 11.5px; font-weight: 500; color: var(--c-muted); }
.stdoc__n { margin: 0 0 8px; font-size: 11.5px; color: var(--c-muted);
            line-height: 1.7; word-break: keep-all; }
.stdoc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.stdoc th, .stdoc td { border: 1px solid var(--c-line); padding: 6px 9px;
                       text-align: left; vertical-align: top; word-break: keep-all; }
.stdoc th { width: 30%; background: var(--c-g50); font-weight: 600; }
.stdoc td b { font-variant-numeric: tabular-nums; }
.stdoc .is-blank td { background: var(--c-amber-wash); }
.stdoc .is-blank .stdoc__why { color: var(--c-coral-ink); font-size: 11.5px; }
.stdoc__src { display: block; margin-top: 3px; font-size: 11px; color: var(--c-muted); }
.stdoc__need { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--c-coral-line);
               border-radius: 10px; background: var(--c-coral-wash); font-size: 12.5px;
               line-height: 1.8; word-break: keep-all; }
.stdoc__need b { display: block; margin-bottom: 4px; }
.stdoc__need li { margin-left: 18px; }
.stdoc__sign { margin-top: 14px; padding: 14px; border: 1px dashed var(--c-line);
               border-radius: 10px; font-size: 12.5px; color: var(--c-muted);
               text-align: center; line-height: 2; }

/* ⚠️ 인쇄하면 **초안 배너가 반드시 함께 나가야 한다** — 화면에서만 경고하고
   종이에서 사라지면 그게 더 나쁘다. */
@media print {
  /* ⚠️⚠️⚠️ **`body:has(.printroot)` 로 묶어야 한다** (2026-09-11 사용자 신고 —
     *"pdf 인쇄기능이 동작하지를 않아"*).
     예전엔 `body > *:not(.printroot)` 가 **전역**이었다. `.printroot` 는
     **구조검토서(`js/structure.js`) 하나만** 쓰는데, 이 규칙이 콘솔 전체에 걸려
     **제안서·검토서를 인쇄하면 본문이 통째로 사라졌다.**

     ★ 왜 `proposal.css` 의 되돌림이 안 먹혔나 — **특이도다:**
         body > *:not(.printroot)   (0,1,1) !important   ← 이긴다
         .shell (proposal.css)      (0,1,0) !important   ← 진다
       둘 다 `!important` 라 특이도가 갈랐다. `!important` 를 붙였으니 이겼다고
       여긴 것이 함정이었다.

     ⚠️ 페이지 목록으로 묶지 않는다(`[data-cpage="structure"]`) — 화면이 늘면
        또 빠뜨린다. **`.printroot` 가 있을 때만** 이 규칙이 산다.

  ⚠️⚠️ 그리고 **자기 목적에도 안 맞았다.** `.printroot`(`js/structure.js` 의
     `.stdoc printroot`)는 `.shell` **안**에 있다 — `body > *` 를 `display:none`
     하면 그 조상이 사라져 **`.printroot` 도 같이 사라진다.**
     `visibility: visible` 은 조상의 `display:none` 을 되돌리지 못한다.
     → **`visibility` 로 가린다**(「이 요소만 인쇄」의 표준 패턴) — `display` 를
       건드리지 않으니 레이아웃이 살아 있고 `.printroot` 가 보인다.
     ⚠️ 구조검토서 인쇄는 **우리가 눈으로 확인하지 못했다**(그 화면은 설계·날인이
        있어야 문서가 나온다) — 패턴은 맞지만 확인 전이라고 적어 둔다. */
  body:has(.printroot) * { visibility: hidden !important; }
  body:has(.printroot) .printroot,
  body:has(.printroot) .printroot * { visibility: visible !important; }
  body:has(.printroot) .printroot { position: absolute; inset: 0; padding: 0; }
  .side, .topbar, .stdocbar { display: none !important; }
}

/* ★★ 사람이 그린 전기실·장애물 — 지도 범례 (2026-09-02) */
.rlg--obs::before { background: rgb(220 79 54 / 18%); border-color: var(--c-coral); }

/* ★ 구조해석 모델(.mgt) — 확인 못 한 것을 파일 옆에 적는다 (2026-09-02) */
.cfile__note { display: block; margin-top: 6px; font-size: 11px; color: var(--c-muted);
               line-height: 1.7; word-break: keep-all; }

/* ═══ 담당 건 — 영업사원의 첫 화면 (2026-09-03) ═══════════════════ */
.dlpipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(104px,100%), 1fr));
          gap: 8px; margin-bottom: 16px; }
.dlstage { text-align: left; padding: 10px 12px; border: 1px solid var(--c-line);
           border-radius: 10px; background: #fff; cursor: pointer; }
.dlstage:hover { border-color: var(--c-navy-deep); }
.dlstage b { display: block; margin-top: 2px; font-size: 22px; font-variant-numeric: tabular-nums; }
.dlstage span { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); }
.dlstage i { display: block; margin-top: 4px; font-size: 11px; font-style: normal;
             color: var(--c-muted); line-height: 1.5; word-break: keep-all; }

.dlbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.dlbar .unitbox { flex: 1 1 220px; min-width: 0; }
.dlsub { font-size: 11.5px; color: var(--c-muted); }
.dlest { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.dlnone { padding: 22px 4px; color: var(--c-muted); font-size: 13px; }

/* 새 건 — 팝업 */
.dlfields { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.dlfields .unitbox { flex: 1 1 200px; min-width: 0; }

/* ★★ 검토서에 붙는 「건」 바 (2026-09-03) */
.rdeal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
         margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
         background: var(--c-sky-wash); border: 1px solid var(--c-sky-line); font-size: 13px; }
.rdeal.is-bad { background: var(--c-coral-wash); border-color: var(--c-coral-line); }
.rdeal__k { font-size: 11px; color: var(--c-muted); }
.rdeal b { font-size: 14px; }
.rdeal__a { color: var(--c-muted); font-size: 12px; }
.rdeal__w { color: var(--c-coral-ink); font-size: 12px; }
.rdeal .cbtn { margin-left: auto; }
.rdeal .cbtn + .cbtn { margin-left: 0; }

/* ── 입찰 (2026-09-03) ─────────────────────────────────────────────────── */

.bdpick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bdpick .cinput { flex: 1 1 420px; min-width: 0; }
.bdpick__note { font-size: 12.5px; color: var(--c-muted); }

.bdours { font-size: 22px; font-weight: 800; letter-spacing: -.02em;
          font-variant-numeric: tabular-nums; }
.bdours span { font-size: 13px; font-weight: 500; color: var(--c-muted); }

/* 순위 — ⚠️ 서버가 견줄 수 있다고 할 때만 나온다 */
.bdrank { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bdrank li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
             padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; }
.bdrank li:first-child { border-color: var(--c-mint-line); background: var(--c-mint-wash); }
.bdrank__n { display: inline-flex; align-items: center; justify-content: center;
             width: 24px; height: 24px; border-radius: 50%;
             background: var(--c-navy); color: #fff; font-size: 12px; font-weight: 700; }
.bdrank__kw { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.bdrank__t { font-size: 12.5px; color: var(--c-muted);
             font-variant-numeric: tabular-nums; }

.bddiff { margin-top: 16px; padding: 14px; border-radius: 10px; background: var(--c-amber-wash);
          border: 1px solid var(--c-amber-line); }
.bddiff__h { font-size: 13px; font-weight: 700; color: var(--c-amber-ink); }
.bddiff__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
               margin-top: 8px; font-size: 13px; }
.bddiff__row b { min-width: 200px; }

/* ⚠️ `.is-chosen` 은 색만으로 알리지 않는다 — 상태 칸에 「선정」 태그가 함께 있다 */
/* 선정된 시공사 줄 — ⚠️ 「선정됨」이므로 회색이 아니라 **민트**다.
   채도가 낮아(C=6) 자동 분류가 회색으로 보냈다 — 옅어도 뜻은 초록이다. */
.ctable tr.is-chosen { background: var(--c-mint-wash); }
.bdacts { white-space: nowrap; }
.bdscope { font-variant-numeric: tabular-nums; cursor: help;
           border-bottom: 1px dotted var(--c-line); }

.bdform { display: grid; gap: 12px;
          grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); }
/* ⚠️ label 은 inline 이라 그리드 아이템에서 세로 배치가 안 된다 — block 으로 */
.bdform label { display: block; font-size: 12px; color: var(--c-muted); }
.bdform label .cinput { display: block; width: 100%; margin-top: 5px; }
.bdform__wide { grid-column: 1 / -1; }
.bdform__h { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.bdscopes { display: grid; gap: 8px;
            grid-template-columns: repeat(auto-fit, minmax(min(190px,100%), 1fr)); }
.bdchk { display: flex; align-items: center; gap: 7px; font-size: 13px;
         color: var(--c-text); cursor: pointer; }

.bdco__form { display: grid; gap: 8px; margin: 12px 0 16px;
              grid-template-columns: repeat(auto-fit, minmax(min(150px,100%), 1fr)); }

/* ★ 전화 걸기 — KT 연동 없이 되는 자리(소프트폰·휴대폰이 `tel:` 을 받는다) */
.dltel { color: var(--c-blue); text-decoration: none; white-space: nowrap; }
.dltel:hover { text-decoration: underline; }

/* ⚠️ 큰 숫자 중 「믿기 전에 확인할 것이 있는」 것 (2026-09-04 점검)
   ⚠️ 숫자를 지우지 않는다 — 영업사원 화면이라 봐야 한다. 표만 단다. */
.rbig .is-unsure { border-color: var(--c-amber-line); background: var(--c-amber-wash); }
.rbig__warn { display: block; margin-top: 6px; font-size: 11px; line-height: 1.6;
              color: var(--c-amber-ink); word-break: keep-all; }

/* ── 응대 (2026-09-04) — 전화 한 통이 이 화면에서 끝난다 ───────────────── */

.tkfind { display: flex; gap: 8px; }
.tkfind__in { flex: 1 1 auto; min-width: 0; height: 46px; font-size: 17px;
              font-variant-numeric: tabular-nums; }
.tkfind .cbtn { height: 46px; padding: 0 22px; }

.tknew, .tksite { display: grid; gap: 10px; }
.tknew { grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); }
/* ⚠️ label 은 inline 이라 그리드에서 세로 배치가 안 된다 */
.tknew label, .tkloan label { display: block; font-size: 12px; color: var(--c-muted); }
.tknew label .cinput { display: block; width: 100%; margin-top: 5px; }
.tknew__go { grid-column: 1 / -1; }

.tksite { grid-template-columns: 1fr auto auto; align-items: center; }
.tksite .cinput { min-width: 0; }
@media (max-width: 720px) { .tksite { grid-template-columns: 1fr; } }

/* ★★ 이 번호의 건 고르기 (2026-09-13) — **버튼 행이 아니라 셀렉트다.**
   ⚠️ 버튼 행은 「고르세요」로, 셀렉트는 「지금 이것이고 바꿀 수 있다」로 읽힌다.
      통화 중에 필요한 것은 뒤쪽이다(앞의 버튼 행은 그래서 지웠다). */
.tkpick { margin: 0 0 12px; display: grid; gap: 6px; }
.tkpick label { font-size: 11.5px; color: var(--c-muted); }
.tkpick .cinput { margin-top: 4px; width: 100%; max-width: 420px; }
/* ⚠️ 중복 경고는 **앰버**다 — 고장이 아니라 확인할 것이다(코랄을 쓰면 진짜 막힘이 묻힌다) */
.tkdup {
  display: block; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  border-left: 3px solid var(--c-amber); background: var(--c-amber-wash);
  border-radius: 0 6px 6px 0; color: var(--c-text); max-width: 420px;
}
.tkdup b { color: var(--c-amber-ink); }

/* ⚠️ 옛 `.tkpick`(주소 버튼 행)은 지웠다 (2026-09-13) — 그 UI 를 없앴다.
   ★ **쓰는 곳이 없어진 CSS 는 같이 지운다** — 남기면 다음 사람이 살아 있는
     부품으로 읽고, 같은 UI 를 되살릴 근거로 쓴다.
   ⚠️ `.tkwho` 도 2026-09-18 에 함께 지웠다(고객 카드가 없어졌다). */

/* ★ 통화 카드 — **위에서 아래로 읽는다** */
.tkcard { border-color: var(--c-blue); }
.tksay { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tksay li { display: grid; grid-template-columns: 116px 1fr; align-items: baseline;
            gap: 4px 14px; padding: 11px 0; border-bottom: 1px solid var(--c-line); }
.tksay li:last-child { border-bottom: 0; }
.tksay__k { font-size: 12.5px; color: var(--c-muted); }
/* ⚠️ 19px 이었다 — 한 화면에 19px 이상이 7~9개, 15px 이상이 스물 넘어 **다 크면
   아무것도 안 크다.** 굵기 800 과 `tabular-nums` 가 이미 「값」임을 말한다.
   ★ 이 화면의 최상위는 둘로 못 박는다 — 고객 이름(`.tkbar__n` 19px)과 단계 이름. */
.tksay__v { font-size: 17px; font-weight: 800; letter-spacing: -.02em;
            font-variant-numeric: tabular-nums; }
/* ⚠️⚠️ **조건 문장을 회색 각주로 두지 않는다** (2026-09-18) — 합의안이
   *「숫자는 조건이 붙은 문장째로」* 라고 못 박은 바로 그 문장이(「최대로 깔았을 때 ·
   한전 연계비 포함 · 부가세 별도」) 화면에서는 muted 12px 각주로 보였다.
   신입이 숫자만 읽고 조건을 안 읽는 구조다. 회색은 **지금 말하지 않는 것**에만 쓴다
   (`.tkstep__basis`·`.tkgap`·지도 출처). */
.tksay__s { grid-column: 2; font-size: 12.5px; color: var(--c-text);
            line-height: 1.6; word-break: keep-all; }
@media (max-width: 620px) { .tksay li { grid-template-columns: 1fr; }
                            .tksay__s { grid-column: 1; } }

.tkloan { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
          margin-top: 14px; padding: 12px 14px; border-radius: 10px;
          background: var(--c-console-bg, var(--c-g100)); }
.tkloan > span { font-size: 12px; font-weight: 700; color: var(--c-muted);
                 align-self: center; }
.tkloan label { position: relative; }
.tkloan .cinput { width: 82px; margin-top: 4px; padding-right: 26px; }
.tkloan i { position: absolute; right: 9px; bottom: 9px; font-style: normal;
            font-size: 11px; color: var(--c-muted); }

/* ★ 보조금·입찰 안내 — **참고색(바이올렛)**. 경고가 아니라 「이런 길도 있다」다 */
.tkpolicy { margin-top: 14px; padding: 10px 14px; border-radius: 10px;
            background: var(--c-violet-wash); border: 1px solid var(--c-violet-line);
            font-size: 12.5px; line-height: 1.7; word-break: keep-all; }
.tkpolicy > summary { cursor: pointer; font-weight: 700; color: var(--c-violet-ink); }
.tkpolicy > summary .dlsub { font-weight: 400; margin-left: 6px; }
.tkpolicy ul { margin: 8px 0 0; padding-left: 18px; list-style: disc; display: grid; gap: 8px; }

.tkcaveat { margin-top: 14px; padding: 11px 14px; border-radius: 10px;
            background: var(--c-coral-wash); border: 1px solid var(--c-coral-line);
            font-size: 12.5px; line-height: 1.75; color: var(--c-coral-ink); word-break: keep-all; }
.tkcard__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* 「링크 만들기」가 메모 독으로 옮겨진 뒤 그 자리를 가리키는 한 줄 (2026-09-18) */
.tkcard__s { font-size: 11.5px; color: var(--c-muted); align-self: center; }

.tkdraft { padding: 14px; border: 1px solid var(--c-line); border-radius: 10px; }
.tkdraft + .tkdraft { margin-top: 10px; }
.tkdraft__h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.tkdraft__h b { font-size: 13.5px; }
.tkdraft__h span { font-size: 11.5px; color: var(--c-muted); }
/* ⚠️ 위 규칙(0,1,1)이 태그 색(0,1,0)을 이긴다 — 「광고」가 회색이 된다 */
.tkdraft__h .tag--orange { color: var(--c-orange-ink); }
.tkdraft__t { display: block; width: 100%; margin-top: 8px; padding: 10px 12px;
              height: auto; line-height: 1.7; font-family: inherit; resize: vertical; }
/* ★★ **채울 곳을 박스로 강조한다** (2026-09-19 사장님 요청).
   ⚠️ 예전 `.tkdraft__blank` 는 「⚠️ 채워야 할 곳 2군데 — [금액] · [기한]」 한 줄이라
      **읽고 나서 그 자리를 손으로 찾아야** 했다. 지금은 카드에 테두리를 두르고
      칩을 누르면 그 자리를 골라 준다(textarea 는 안쪽 글자를 칠할 수 없다). */
.tkdraft.is-blank { border-color: var(--c-amber-line); background: var(--c-amber-wash); }
.tkdraft__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
                  margin-top: 8px; }
.tkdraft__cl { font-size: 11.5px; font-weight: 700; color: var(--c-amber-ink); }
.tkdraft__ok { font-size: 11.5px; color: var(--c-muted); }
.tkblank { padding: 3px 9px; border: 1px solid var(--c-amber-line); border-radius: 999px;
           background: #fff; font-size: 12px; font-weight: 700; color: var(--c-amber-ink);
           cursor: pointer; font-family: inherit; }
.tkblank:hover { background: var(--c-amber-pale); }
/* ⚠️ 빈칸이 남은 채 보내려는 버튼 — **막지 않고** 색으로 알린다(두 번째 누름에 나간다) */
.cbtn--warn { border-color: var(--c-amber-line); background: var(--c-amber-wash);
              color: var(--c-amber-ink); }
.tkdraft__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.tklog { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tklog li { display: grid; grid-template-columns: 78px 1fr; gap: 4px 12px;
            font-size: 12.5px; }
.tklog__t { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tklog__n { grid-column: 2; color: var(--c-muted); white-space: pre-wrap;
            line-height: 1.65; }

/* 응대 — 탭 (2026-09-04). 한 화면이되 통화 흐름대로 가른다 */
.tktabs { display: flex; gap: 2px; padding: 0 18px; border-bottom: 1px solid var(--c-line);
          overflow-x: auto; }
.tktab { flex: 0 0 auto; padding: 11px 16px 10px; border: 0; border-bottom: 2px solid transparent;
         background: none; cursor: pointer; text-align: left; font-family: inherit; }
.tktab b { display: block; font-size: 13.5px; color: var(--c-muted); }
.tktab span { display: block; margin-top: 2px; font-size: 11px; color: var(--c-muted); }
.tktab:hover b { color: var(--c-text); }
.tktab.is-on { border-bottom-color: var(--c-blue); }
.tktab.is-on b { color: var(--c-blue); font-weight: 700; }

.tkgear { display: grid; gap: 10px; margin-top: 14px; padding: 14px;
          border-radius: 10px; background: var(--c-console-bg, var(--c-g100));
          grid-template-columns: repeat(auto-fit, minmax(min(180px,100%), 1fr)); }
.tkgear label { display: block; font-size: 12px; color: var(--c-muted); }
.tkgear label .cinput { display: block; width: 100%; margin-top: 5px; }
.tkgear__go { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tkgear .note { grid-column: 1 / -1; margin: 0; }

.tkmap { display: block; width: 100%; height: auto; margin-top: 14px;
         border-radius: 10px; background: var(--c-sky-pale); }

/* 자재 — 업체 단가 (2026-09-04) */
.stform { display: grid; gap: 10px;
          grid-template-columns: repeat(auto-fit, minmax(min(150px,100%), 1fr)); }
.stform label { display: block; font-size: 12px; color: var(--c-muted); }
.stform label .cinput, .stform label .unitbox { display: block; width: 100%; margin-top: 5px; }
.stform__go { grid-column: 1 / -1; }
.stform__go .dlsub { margin-left: 8px; }

/* ★★ 고치기 · 복제 (2026-09-14).
   ⚠️ 고치는 칸은 누른 줄 **바로 아래**에 편다 — 칸이 여덟이라 모달·prompt 로는
      물을 수 없고, 모달은 확인도 안 된다(이 저장소 규칙). */
.stedit > td { background: var(--c-surface-soft); }
.stedit .stform { margin: 2px 0; }
.stact { white-space: nowrap; }
.stact .cbtn { margin-right: 4px; }
/* 감춘 줄 — ⚠️ 지운 게 아니라 감춘 것이다(되살릴 수 있다) */
.stgone { opacity: 0.55; }
.stoff { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; }
/* ⚠️⚠️ 복제는 **아직 저장 안 됐다** — 앰버로 적는다(고장이 아니라 확인할 것이다).
   ⚠️ `.note` 에는 테두리가 없다 — `border-color` 만 주면 아무 일도 안 한다. */
.stdup { margin-bottom: 12px; align-items: center; justify-content: space-between;
         background: var(--c-amber-wash); border: 1px solid var(--c-amber-line);
         color: var(--c-amber-ink); }
.stdup .cbtn { flex: none; }

/* ★ 시공사 확인 서류 (2026-09-17) — 누른 시공사 바로 아래에 편다 */
.bddocs > td { background: var(--c-surface-soft); }
.bddocs__grid { display: grid; gap: 8px 12px; margin-top: 8px;
                grid-template-columns: repeat(auto-fit, minmax(min(200px,100%), 1fr)); }
.bddocs__grid label { display: block; font-size: 12px; color: var(--c-muted); }
.bddocs__grid .cinput { display: block; width: 100%; margin-top: 4px; }

/* ★★ 데이터시트 제원 (2026-09-17) — 칸이 40개 가까이라 **접어 둔다.**
   ⚠️ 한 줄을 통째로 쓴다(`grid-column: 1 / -1`) — 안 그러면 좁은 칸에 접힌 목록이 끼어 흐트러진다 */
.stform__wide { grid-column: 1 / -1; }
.stspec { border: 1px solid var(--c-line); border-radius: 10px; padding: 8px 12px;
          background: var(--c-surface-soft); }
.stspec > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.stspec > summary .dlsub { font-weight: 400; margin-left: 6px; }
.stspec[open] > .stform { margin-top: 10px; }
.stfind { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 18px 0 14px; }
.stadd__toggle { margin-left: auto; }
.stfind .cinput { flex: 1 1 280px; max-width: 520px; }

/* ★★ 보기 편하게 (2026-09-17) — 탭 · 제조사 묶음 · 줄은 고르는 숫자만 · 나머지는 눌러서 편다.
   ⚠️ 줄 하나가 화면 1/4 이던 것은 **조사 메모가 줄 안에 펼쳐져서**였다 — 지운 게 아니라 접었다 */
.stfilter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; flex-basis: 100%; }
.stfilter .ftabs { margin: 0; }
.stfilter .cinput { flex: 0 1 240px; width: auto; }
.stchk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-subtle);
         cursor: pointer; }
.sttable td { padding: 10px 10px; vertical-align: middle; }
.sttable th { padding: 9px 10px; }
/* ⚠️ `.ctable td.num` 만 오른쪽 정렬이라 머리글이 왼쪽에 남아 숫자와 어긋났다 */
.sttable th.num { text-align: right; }
/* 제조사 머리 줄 — 이름이 줄마다 되풀이되지 않게 묶는다 */
.sttable .stmk > td { background: var(--c-g100); font-weight: 700; font-size: 12.5px;
                      color: var(--c-text); padding: 7px 12px; }
.sttable .stmk:hover { background: none; }
.strow { cursor: pointer; }
.strow.is-open > td { background: var(--c-sky-pale); }
.ctable td.stname { min-width: 150px; max-width: 240px; }
.ctable td.stcell { min-width: 90px; max-width: 150px; font-size: 12.5px; color: var(--c-subtle); word-break: keep-all; }
/* 모델 이름이 곧 펴기 단추다 — ⚠️ 줄 클릭만 두면 키보드로 못 편다 */
.sttog { display: inline-flex; align-items: baseline; gap: 7px; padding: 0; border: 0;
         background: none; font: inherit; font-weight: 600; color: var(--c-text); text-align: left;
         cursor: pointer; }
.sttog:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; border-radius: 4px; }
.stcaret { flex: none; width: 0; height: 0; border-left: 5px solid var(--c-muted);
           border-top: 4px solid transparent; border-bottom: 4px solid transparent;
           transition: transform .15s; }
.strow.is-open .stcaret { transform: rotate(90deg); border-left-color: var(--c-blue); }
@media (prefers-reduced-motion: reduce) { .stcaret { transition: none; } }
/* 모르는 값 — ⚠️ 태그로 안 칠한다(수십 줄이 같은 회색 알약이면 아무도 안 읽는다) */
.stunk { color: var(--c-muted); font-weight: 400; }
.sttable .stact { text-align: right; }

/* 편 칸 */
.sttable .stdetail > td { background: var(--c-surface-soft); padding: 16px 20px 18px;
                          white-space: normal; cursor: default; }
.sttable .stdetail:hover { background: none; }
.stfacts { display: grid; gap: 14px 28px;
           grid-template-columns: repeat(auto-fit, minmax(min(230px,100%), 1fr)); }
.stfacts__g h4 { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; color: var(--c-muted);
                 letter-spacing: .02em; }
.stfacts dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 12.5px; }
.stfacts dt { color: var(--c-subtle); white-space: nowrap; }
.stfacts dd { margin: 0; color: var(--c-text); font-variant-numeric: tabular-nums; }
.stunknote { margin: 10px 0 0; }
.stsupport, .stsrc { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; word-break: keep-all; }
.stsupport > b, .stsrc > b, .stnote > b { color: var(--c-subtle); font-weight: 700; margin-right: 6px; }
.stnote { margin-top: 10px; font-size: 12.5px; }
.stnote p { margin: 4px 0 0; max-width: 78ch; line-height: 1.7; color: var(--c-text);
            word-break: keep-all; overflow-wrap: anywhere; }
.stdetail__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* ⚠️ 옛 여정 레일(`.tkjour`·`.tkrail`, 30줄)을 지웠다 (2026-09-18) —
   레일이 사이드바로 올라간 뒤(2026-09-04) **JS·마크업 어디서도 안 쓰는 CSS** 로
   남아 있었다. 남기면 다음 사람이 살아 있는 부품으로 읽고 같은 레일을 되살린다.
   ★ 그런데 그 30줄이 알려 준 것이 하나 있다 — `.tkrail { position: sticky }` 가
     **이 자리에서 실제로 붙었다.** 새 고정 기둥이 sticky 로 되는 근거다. */

/* ★★★ 영업 5단계 탭 (2026-09-14 사용자 요청 — *"같은 구성이 반복되니까 조잡해 보인다"*).
   ⚠️ 6단계 이후는 사이드바 레일이 맡는다(여기 18개를 담으면 또 조잡해진다). */
.stpnav { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap;
          margin-bottom: 12px; padding: 4px; border-radius: 12px;
          background: #fff; border: 1px solid var(--c-line); }
.stpnav__b { flex: 1 1 118px; min-width: 0; display: grid;
             grid-template-columns: 22px 1fr; grid-template-rows: auto auto;
             gap: 0 8px; align-items: center; padding: 8px 10px; text-align: left;
             border: 0; border-radius: 9px; background: transparent; cursor: pointer; }
.stpnav__b:hover { background: var(--c-surface-soft); }
.stpnav__b i { grid-row: span 2; display: grid; place-items: center;
               width: 22px; height: 22px; border-radius: 999px; font-style: normal;
               font-size: 11.5px; font-weight: 700;
               background: var(--c-g100); color: var(--c-muted); }
.stpnav__b b { font-size: 12.5px; color: var(--c-text); line-height: 1.35;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 지금 단계 표시 — ⚠️ **「보고 있는 단계」와 다른 것이다**(그걸 섞으면 고객에게
   엉뚱한 단계를 말한다). 점은 늘 지금 단계에 찍힌다. */
.stpnav__b b em { font-style: normal; color: var(--c-blue); font-size: 10px; }
.stpnav__b span { font-size: 10.5px; color: var(--c-muted); line-height: 1.3;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stpnav__b.is-done i { background: var(--c-mint-pale); color: var(--c-mint-ink); }
.stpnav__b.is-on { background: var(--c-sky-pale); }
.stpnav__b.is-on i { background: var(--c-blue); color: #fff; }
.stpnav__b.is-on b { color: var(--c-navy-deep); font-weight: 700; }
/* ⚠️ `.stpnav__rest`(6단계 이후 각주)를 지웠다 (2026-09-18) — 화면에서 뺐다.
   ★ **쓰는 곳이 없어진 CSS 는 같이 지운다**(이 저장소 규칙). */

.tkstep { margin-bottom: 14px; padding: 14px 16px; border-radius: 12px;
          background: #fff; border: 1px solid var(--c-line); }
/* 단계에서 할 것 — 문안 팝업 · 계약 문서 */
.tkstep__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
                margin-top: 12px; }
.tkstep__acts .dlsub { flex: 1 1 200px; }

/* 접는 것 둘 — ⚠️ **숨기는 게 아니라 접는 것이다**(개수를 summary 에 적는다) */
.tkgap > summary, .tkmore > summary { cursor: pointer; }
.tkgap > summary::-webkit-details-marker { display: none; }
.tkgap > summary { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */
.tkgap > summary::before { content: '▸ '; font-weight: 400; }
.tkgap[open] > summary::before { content: '▾ '; }
.tkmore { margin-top: 8px; }
.tkmore > summary { font-size: 11.5px; color: var(--c-muted); padding: 4px 0; }
.tkmore > summary:hover { color: var(--c-blue); }
.tkstep__h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tkstep__h b { font-size: 15px; }
.tkstep__away { flex: none; }  /* 완료·예정·지난 단계 태그 — 색은 tag 가 정한다(2026-10-22) */
.tkstep__todo { margin-top: 7px; font-size: 13px; line-height: 1.75;
                word-break: keep-all; }
.tkstep__basis { margin-top: 6px; font-size: 11.5px; color: var(--c-muted); }
.tkstep__go { margin-top: 10px; }
/* ★★ 「다음」은 **머리글 오른쪽 끝**에 앉는다 (2026-09-21).
   ⚠️ `.tkstep__go`(「이 단계 화면으로」)와 **다른 이름**이다 — 겹치면 한쪽
      스타일이 조용히 다른 쪽에 먹는다. */
/* ⚠️⚠️ **문턱을 짐작으로 정하지 않는다.** 처음에 `max-width: 1320px` 에서 아래
   줄로 내렸더니 1,280 창에서 **버튼이 왼쪽에 붙었다**(실측: 오른쪽 끝에서 367px).
   `margin-left: auto` 는 줄이 바뀌어도 그 줄의 오른쪽에 붙으므로 분기가 필요 없다. */
/* ★★ ⓘ — 단계 설명을 **팝업으로** 연다 (2026-09-21).
   ⚠️ 제목 옆에 앉지만 **제목을 밀지 않는다**(`flex: none`).
   ⚠️ 색을 죽여 둔다 — 늘 있는 것이라 눈에 걸리면 안 된다. 누를 때만 진해진다. */
.tkinfo { flex: none; display: grid; place-items: center;
          width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%;
          background: transparent; color: var(--c-subtle); cursor: pointer; }
.tkinfo:hover, .tkinfo:focus-visible { background: var(--c-blue-soft);
                                       color: var(--c-blue); }
/* ⚠️ 전역 `svg { width: 1em }` 이 있으니 크기를 여기서 못 박는다 */
.tkinfo svg { width: 16px; height: 16px; }

/* 팝업 안의 한 줄 — 「누가 · 기간」 */
.tkhelp__l { margin: 0 0 6px; display: flex; gap: 8px; font-size: 12.5px;
             line-height: 1.6; }
.tkhelp__l b { flex: none; width: 34px; color: var(--c-muted); font-size: 11.5px; }
.tkhelp__b { margin: 8px 0 10px; font-size: 13px; line-height: 1.65;
             color: var(--c-text); word-break: keep-all; }

.tkstep__next { margin-left: auto; flex: none; }

/* ★★ 「1. 문의 접수로 돌아가기」 — ⚠️ `.note` 는 flex 라 버튼이 글 옆에 붙는다.
   좁으면 아래로 내려오게 두고, 넓으면 오른쪽 끝에 앉힌다. */
.tkstep .note .cbtn { flex: none; margin-left: auto; align-self: center; }
.tkstep__rem { margin-top: 10px; padding: 10px 12px; border-radius: 9px;
               background: var(--c-console-bg, var(--c-g100)); font-size: 12.5px; }
.tkstep__rem b { font-size: 15px; }
.tkstep__rem span { display: block; margin-top: 3px; font-size: 11px;
                    color: var(--c-muted); line-height: 1.6; word-break: keep-all; }
/* ★★ 이 단계에서 아직 안 되는 것 (2026-09-09 전수 점검).
   ⚠️ **경고가 아니라 남은 일이다** — 앰버로 둔다. 코랄(경고)로 칠하면 일정 모순 같은
      진짜 경고와 섞여 둘 다 안 읽힌다. */
.tkgap { margin-top: 12px; padding: 12px 14px; border-radius: 9px;
         background: var(--c-amber-wash); border: 1px solid var(--c-amber-line); }
.tkgap__h { font-size: 12.5px; font-weight: 700; color: var(--c-amber-ink); }
.tkgap__h b { font-size: 14px; }
.tkgap__h span { margin-left: 6px; font-size: 11px; font-weight: 500;
                 color: var(--c-muted); }
.tkgap ul { margin-top: 8px; display: grid; gap: 8px; list-style: none; }
/* ⚠️ `<li>` 안에 `<b>`·`<span>`·`<em>` 셋이 나란히 들어간다 — grid 로 두지 않으면
      꼬리표가 문장 앞에 붙어 한 덩어리로 읽힌다(`.note` 에서 겪은 자리다) */
.tkgap li { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px;
            align-items: start; }
.tkgap li b { grid-row: span 2; padding: 2px 7px; border-radius: 999px;
              font-size: 10.5px; font-weight: 700; white-space: nowrap;
              background: var(--c-amber-pale); color: var(--c-amber-ink); }
/* ⚠️ 사장님께 물어야 답이 나오는 것은 **색이 다르다** — 우리가 못 정한다 */
.tkgap li.is-ask b { background: var(--c-violet-pale); color: var(--c-violet-ink); }
.tkgap li span { font-size: 12px; line-height: 1.65; color: var(--c-text);
                 word-break: keep-all; }
.tkgap li em { font-size: 10.5px; font-style: normal; color: var(--c-muted);
               word-break: break-all; }
.tkgap__f { margin-top: 9px; font-size: 10.5px; color: var(--c-muted); }


/* ★★★ 응대 골격 — **가로로 가른다** (2026-09-18 사장님 요청)
 *
 *   .tkbar    신원 한 줄      sticky top:64          늘 같다(높이 고정)
 *   .tkgrid   두 기둥         420 + 1fr
 *     .tkfix  고정 기둥       안쪽 자식이 sticky      주소·지도·마지막 대화
 *     .tkflow 단계 기둥       페이지 스크롤           단계마다 갈리는 것 + 결과
 *   .tkdock   메모 독         sticky bottom:0        통화 내내 손이 올라가 있다
 *
 * ⚠️⚠️ **열에 `overflow-y:auto` 를 주지 않는다** — 본문을 통째로 다시 그리므로
 *    그 안의 스크롤 값이 교체와 함께 사라진다(탭 한 번에 맨 위로 돌아간다).
 * ⚠️⚠️ `sticky` 는 그리드 아이템이 아니라 **안쪽 자식**에 건다 — 아이템 자신에
 *    걸면서 `align-self: start` 를 주면 포함 블록이 제 높이로 줄어 **조용히 안 붙는다.**
 * ⚠️ `top` 은 상단바(`--h-topbar` 64) 아래다 — 0 으로 두면 머리 뒤로 숨는다.
 * ⚠️ `z-index` 는 팝업(`.cmodal` 60)보다 **낮게** 둔다.
 */
.tkbar {
  position: sticky; top: var(--h-topbar, 64px); z-index: 30;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  height: 52px; padding: 0 14px; margin: -6px 0 14px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 1px 0 rgb(15 23 42 / 4%);
}
/* ⚠️ 이름은 이 화면의 **최상위 글자**다(값들보다 커야 「누구와 통화 중인지」가 먼저 읽힌다) */
.tkbar__n { flex: none; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
/* ⚠️ 주소는 길다 — 줄바꿈이 아니라 **한 줄 안에서 줄인다**(줄 높이가 늘면 본문이 튄다) */
.tkbar__a { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--c-text);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tkbar__e { flex: none; font-size: 12.5px; color: var(--c-muted);
            font-variant-numeric: tabular-nums; }
/* ⚠️ 신원 줄이 flex 라 **줄어들지 않게** 못 박는다 — 좁은 화면에서 버튼 글자가
   두 줄로 접히면 줄 높이가 달라져 본문이 위아래로 튄다.
   ★ 「부재중」(2026-09-22)은 색을 주지 않는다 — 기록하는 버튼이지 경고가 아니다. */
.tkbar__x, .tkbar__m, .tkbar__b { flex: none; }
/* ★ 통화 중 표시(2026-09-24) — 켜져 있을 때만 코랄 점. ⚠️ 경고가 아니라 상태라 글자색만 */
.tklog__by { font-size: 12px; color: var(--c-muted); font-weight: 400; }
.tkbar__b.is-on { color: var(--c-coral-ink); font-weight: 700; }
/* ★ 통화하기 — **초록 테두리**(2026-09-28 사장님 — *"통화의 기본 색상이 초록색"* ·
   *"테마를 너무 해치지 않도록 테두리정도만"*). 채운 버튼은 테마 위에서 튄다.
   ⚠️ 글자는 `--c-mint-ink` — 민짜 `--c-mint` 는 흰 바탕 글자로 대비가 3점대다.
   ⚠️ `cbtn--quiet` 를 안 붙인다 — 그 hover 가 글자색·테두리를 덮는다. */
.tkbar__call { color: var(--c-mint-ink); background: var(--c-bg); border: 1.5px solid var(--c-mint); font-weight: 700; }
.tkbar__call:hover { color: var(--c-mint-ink); background: var(--c-mint-pale); border-color: var(--c-mint-ink); }

/* ★★ 다시 걸 것 — 통화 중에 걸려 온 전화. ⚠️ 약속이라 눈에 걸려야 한다(앰버) */
.tkcb { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--c-amber-line);
        background: var(--c-amber-wash); border-radius: 10px; }
.tkcb__h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tkcb__h b { color: var(--c-amber-ink); }
.tkcb__h span { font-size: 12.5px; color: var(--c-muted); margin-right: auto; }
.tkcb__l { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.tkcb__l li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tkcb__no, .tkcb__t, .tkcb__n { font-size: 13px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.tkcb__t { margin-right: auto; }
.tkcb__memo { font-size: 12.5px; color: var(--c-text); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkbar .dltel { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }

.tkgrid { display: grid; gap: 18px; grid-template-columns: 420px minmax(0, 1fr);
          align-items: stretch; }
/* ★ 「크게 보기」 — **한 열로 쌓고** 지도를 본문 폭 전체로 쓴다.
   ⚠️ 처음엔 기둥만 760px 로 넓혔는데 1,280 화면에서 **단계 기둥이 214px** 로
      쪼그라들어 결과 표가 뭉개졌다(실측). 지도를 크게 보는 동안은 단계 기둥이
      아래로 내려가는 것이 맞다 — 그 순간 하는 일은 *"여기 이렇게 놓입니다"* 다.
   ⚠️ 그 동안은 기둥을 붙여 두지 않는다(sticky 를 풀어야 지도가 다 보인다). */
.tkgrid.is-big { grid-template-columns: minmax(0, 1fr); }
.tkgrid.is-big .tkfix__in { position: static; }
.tkfix, .tkflow { min-width: 0; }
.tkfix__in {
  position: sticky; top: calc(var(--h-topbar, 64px) + 66px); z-index: 20;
  padding: 14px 16px 12px; background: #fff;
  border: 1px solid var(--c-line); border-radius: 12px;
}
/* ⚠️ 단계 기둥 아래에 **독 높이만큼** 자리를 둔다 — 독이 마지막 줄을 덮는다 */
.tkflow { padding-bottom: 64px; }

/* ★ 마지막 대화 — **두 건만.** 전체는 단계 기둥의 「지난 응대」에 있다 */
.tklast { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line); }
.tklast__h { display: flex; align-items: baseline; gap: 8px;
             font-size: 12px; font-weight: 700; color: var(--c-muted); margin-bottom: 6px; }
.tklast__h span { font-size: 10.5px; font-weight: 400; }
.tklast__l { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tklast__l li { font-size: 12.5px; line-height: 1.6; word-break: keep-all; }
.tklast__l span { display: inline-block; margin-right: 6px; font-size: 11px;
                  color: var(--c-muted); font-variant-numeric: tabular-nums; }

/* ★★★ 메모 독 — 한 줄로 앉아 있다가 **쓰기 시작하면 세 줄로** 펴진다.
   ⚠️ 상시로 먹는 세로를 56px 로 눌러 둔 것이다(800px 노트북에서 7%). */
.tkdock {
  position: sticky; bottom: 0; z-index: 40;
  margin: 14px -24px -24px; padding: 10px 24px 12px;
  background: #fff; border-top: 1px solid var(--c-line);
  box-shadow: 0 -2px 12px rgb(15 23 42 / 6%);
}
.tkdock__in { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tkdock__t { flex: 1 1 320px; min-width: 0; height: 38px; padding: 9px 12px;
             line-height: 1.6; font-family: inherit; resize: none;
             transition: height .12s ease; }
.tkdock__t:focus, .tkdock.is-open .tkdock__t { height: 84px; }
.tkdock__acts { flex: none; display: flex; gap: 6px; flex-wrap: wrap; }
/* 2 사업성 검토 — 접힌 독: 버튼 옆에 한 줄로 설명을 붙인다(세로를 안 먹는다) */
.tkdock.is-folded .tkdock__in { align-items: center; }

/* ★★ **끊은 뒤에 쓰는 줄** (2026-09-21) — 통화 중에 쓰는 것과 줄로 가른다.
   ⚠️ 버튼 셋을 한 줄에 두었더니 셋 다 안 읽혔다. 줄이 곧 「언제 쓰나」를 말한다.
   ⚠️ 점선으로 가른다 — 실선이면 독이 두 덩어리로 보여 무거워진다. */
.tkdock__after { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center;
                 gap: 8px; margin-top: 8px; padding-top: 8px;
                 border-top: 1px dashed var(--c-line); }
.tkdock__after > b { font-size: 11px; font-weight: 700; color: var(--c-subtle); }

/* ★★ **세로가 짧은 기기**(노트북 800~880px)에서는 고정 기둥을 눌러 담는다.
 *  실측 — 1,280×800 에서 기둥 605px 이 독에 **47px 가려졌다**(쓸 수 있는 높이 558px).
 *  ⚠️ 자체 스크롤로 풀지 않는다(탭 한 번에 맨 위로 돌아간다) — **높이로** 푼다:
 *     지도 바 한 줄(−34) · 출처 두 줄(−20) · 대화 한 줄씩(−28) = 약 −82px.
 */
@media (max-height: 880px) {
  .tkfix .tkmapcite { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                      overflow: hidden; }
  .tkfix .tklast__l li { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
                         overflow: hidden; }

  /* ★★★ **독이 두 줄이 되며 기둥이 다시 가려졌다** (2026-09-21 실측 — 800px 창에서
     **57px**). 끊은 뒤 줄이 53px 를 새로 먹은 만큼을 여기서 돌려받는다.
     ⚠️⚠️ **자체 스크롤로 풀지 않는다**(교체와 함께 스크롤이 사라진다) — 높이로 푼다.
     ⚠️ 잃는 것이 없는 순서로 줄인다:
        ① 지난 대화는 **한 건만** — 나머지는 오른쪽 「지난 응대」에 그대로 있고
           기둥 제목이 그렇게 적는다(「전체는 오른쪽 …」)
        ② 지도 출처는 한 줄 — 참고 표기지 법적 고지가 아니다
        ③ 끊은 뒤 줄은 **작게**(눌리는 데 지장이 없다) */
  .tkfix .tklast__l li:not(:first-child) { display: none; }
  .tkfix .tkmapcite { -webkit-line-clamp: 1; }
  .tkdock__after { margin-top: 6px; padding-top: 6px; }
  .tkdock__after .cbtn { padding: 5px 10px; font-size: 11.5px; }

  /* ★ 규모 줄이 생긴 만큼(≈40px) 돌려받는다 — **줄은 남기고 여백을 줄인다.**
     ⚠️ 이 줄을 감추면 안 된다(그러려고 만든 자리다). */
  .tkfix .tkmapsum { margin-top: 6px; padding: 4px 9px; }
  .tkfix .tkmapsum b { font-size: 17px; }
  .tkfix .tkmapcite { margin-top: 5px; }
  .tkfix .tkmapbox { margin-top: 10px; }
}

/* ⚠️⚠️ 좁은 화면에서는 **두 기둥을 포기하고 쌓는다.** 420px 기둥이 들어갈 자리가
   없고, `.side` 가 900px 아래에서 가로 스크롤 띠로 바뀌어 그 안의 sticky 가 무효가 된다
   (옛 `.tkrail` 도 1,100px 아래에서 `static` 으로 풀던 자리다). */
@media (max-width: 1180px) {
  .tkgrid, .tkgrid.is-big { grid-template-columns: 1fr; }
  .tkfix__in { position: static; }
}
@media (max-width: 900px) {
  .tkbar { position: static; height: auto; flex-wrap: wrap; padding: 12px 14px; }
  .tkbar__a { flex: 1 1 100%; white-space: normal; }
  .tkdock { position: static; margin: 14px 0 0; padding: 12px 0 0; box-shadow: none; }
  .tkflow { padding-bottom: 0; }
}

/* ⚠️ 옛 고객 카드(`.tkcust*`)와 칸 배치(`.tkwho`)를 지웠다 (2026-09-18) —
   신원은 `.tkbar` 한 줄, 마지막 대화는 `.tklast` 로 갈랐다. 카드 높이(254px)를
   정하던 것은 신원이 아니라 **메모 5건**이었고 그 5건은 「지난 응대」와 같은 기록이었다. */
/* 응대 — 지도 (2026-09-04). 확대해서 「여기 이렇게 놓입니다」를 설명하는 자리 */
.tkmapbox { margin-top: 14px; }
.tkmapbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
            margin-bottom: 8px; }
.tkmapbar .cbtn { min-width: 34px; padding: 0 10px; }
.tkmapbar__g { margin-left: auto; display: flex; gap: 2px; padding: 2px;
               border-radius: 8px; background: var(--c-console-bg, var(--c-g100)); }
.tkmapbar__b { padding: 4px 10px; border: 0; border-radius: 6px; background: none;
               font-size: 11.5px; color: var(--c-muted); cursor: pointer;
               font-family: inherit; }
a.tkmapbar__b, a.rmap__b { text-decoration: none; display: inline-flex; align-items: center; }
a.tkmapbar__b:hover { color: var(--c-navy-deep); }
.svbadge { display: inline-flex; align-items: center; justify-content: center;
           width: 15px; height: 15px; margin-right: 4px; border-radius: 4px;
           font: 800 10px/1 system-ui, sans-serif; font-style: normal; }
/* ⚠️ 두 서비스의 알려진 색이다 — 테마를 안 탄다(바뀌면 어느 서비스인지 못 알아본다) */
.svbadge--kakao { background: #fee500; color: #191919; }
.svbadge--naver { background: #03c75a; color: #fff; }
.tkmapbar__b.is-on { background: #fff; color: var(--c-navy-deep); font-weight: 700;
                     box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.tkmap { display: block; width: 100%; height: auto; border-radius: 10px;
         background: var(--c-sky-pale); cursor: grab; }
.tkmap:active { cursor: grabbing; }
/* ★★★ 지도 아래 **규모 한 줄** (2026-09-21 사장님 요청: *"계산을 눌렀다면,
   지도 하단에 설치가능 용량등을 쉽게 볼 수 있게 표기를 해줘."*)

   ⚠️ 지도를 보며 설명하는 동안 눈이 여기 있다 — 용량은 크게, 나머지는 작게.
   ⚠️ **한 줄을 지킨다**(`nowrap`) — 높이가 빠듯한 기둥이라 두 줄이 되면 독에 닿는다. */
.tkmapsum { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap;
            overflow: hidden; margin-top: 8px; padding: 7px 10px;
            border-radius: 8px; background: var(--c-sky-pale);
            border: 1px solid var(--c-sky-line); }
.tkmapsum b { font-size: 19px; font-weight: 800; color: var(--c-navy);
              letter-spacing: -.01em; white-space: nowrap; }
.tkmapsum span { font-size: 12.5px; color: var(--c-text); white-space: nowrap; }
.tkmapsum em { font-style: normal; font-size: 10.5px; color: var(--c-muted);
               padding: 1px 6px; border-radius: 999px; background: #fff;
               border: 1px solid var(--c-line); white-space: nowrap; cursor: help; }
/* ⚠️⚠️ **계통 여유가 우리 용량보다 작으면 그것이 실제 상한이다** — 용량만 크게
   적어 두면 영업사원이 그 숫자를 그대로 말한다. 꼬리를 오른쪽에 붙여 짚는다.
   ⚠️ **막힘(코랄)이 아니라 확인(앰버)이다** — 실제 가부는 한전 사전협의가 정한다. */
/* ⚠️⚠️ **경고 꼬리는 절대 줄어들지 않는다**(`flex: none`) — 규격·연 발전량이
   붙은 줄에서 꼬리가 먼저 잘려 **경고가 사라졌다**(2026-09-21 실측).
   그래도 안 들어가는 극단(희망이 네 자리)에서는 **연 발전량이 잘리는 쪽**이 낫다. */
.tkmapsum i { font-style: normal; margin-left: auto; flex: none;
              font-size: 11px; font-weight: 700;
              color: var(--c-amber-ink); white-space: nowrap; cursor: help; }
/* 줄어들 수 있는 것은 연 발전량뿐이다 — 용량·장수·규격·배지는 그대로 둔다 */
.tkmapsum span:last-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tkmapsum.is-tight { background: var(--c-amber-pale); border-color: var(--c-amber-line); }

.tkmapcite { margin-top: 7px; font-size: 11px; color: var(--c-muted); line-height: 1.6;
             word-break: keep-all; }

/* 응대 — 단계 일정 (2026-09-07) */
/* ★★★ 2단계 검토 목록 (2026-09-22) — 상대별로 묶는다.
   ⚠️ 급한 것(`__hot`·`__ask`)은 펴 두고 기관 확인은 `<details>` 로 접는다 —
      지붕 부지에서 11건이 나와 다 펴면 아무도 안 읽는다. */
.tkrev { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--c-surface-soft); border: 1px solid var(--c-line); }
.tkrev__h { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 700; margin-bottom: 9px; }
.tkrev__h span { font-size: 11.5px; font-weight: 600; color: var(--c-muted); }
/* ⚠️ 앰버다 — 코랄(막힘)로 칠하면 「설치 불가」로 읽힌다 */
.tkrev__hot, .tkrev__ask { margin-bottom: 8px; padding: 9px 11px; border-radius: 8px;
  background: var(--c-amber-wash); border: 1px solid var(--c-amber-line);
  font-size: 12px; line-height: 1.55; word-break: keep-all; }
.tkrev__hot b, .tkrev__ask b { color: var(--c-amber-ink); }
.tkrev__ask span { display: block; margin-top: 5px; font-size: 11.5px;
  color: var(--c-muted); }
.tkrev__ask .cbtn { margin-top: 7px; }
.tkrev__g { margin-bottom: 6px; border: 1px solid var(--c-line);
  border-radius: 8px; background: #fff; }
.tkrev__g summary { display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  font-size: 12px; cursor: pointer; }
.tkrev__g summary span { font-size: 11.5px; color: var(--c-muted); }
.tkrev__l { margin: 0; padding: 0 11px 9px; list-style: none; }
/* ★ 협력사(2026-09-29) — 그 묶음을 누구에게 맡기나. 목록 위에 한 덩어리로 */
.tkrev__p { margin: 0 11px 6px; padding: 7px 9px; border-radius: 6px;
  background: var(--c-surface-soft); font-size: 11.5px; line-height: 1.55; }
.tkrev__p > b { display: block; font-size: 11px; color: var(--c-muted); font-weight: 600; }
.tkrev__p span { display: block; }
.tkrev__i { padding: 7px 0; border-top: 1px solid var(--c-line); font-size: 12px; }
.tkrev__i b { display: block; font-weight: 700; }
.tkrev__v, .tkrev__n, .tkrev__t, .tkrev__b { display: block; line-height: 1.5;
  word-break: keep-all; }
.tkrev__v { margin-top: 2px; }
.tkrev__n { margin-top: 3px; color: var(--c-amber-ink); }
.tkrev__t { margin-top: 3px; font-size: 11.5px; color: var(--c-muted); }
.tkrev__b { margin-top: 2px; font-size: 11px; color: var(--c-muted); }
.tksched { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
           background: var(--c-console-bg, var(--c-g100)); }
.tksched__h { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
/* 무엇의 예정·완료인가 — 칸 이름 앞에 굵게(2026-09-29) */
.tksched__what { font-weight: 700; color: var(--c-navy); }
.tksched__bad { margin-bottom: 8px; padding: 8px 11px; border-radius: 8px;
                background: var(--c-coral-wash); border: 1px solid var(--c-coral-line);
                font-size: 12px; color: var(--c-coral-ink); line-height: 1.6;
                word-break: keep-all; }
.tksched__f { display: grid; gap: 9px;
              grid-template-columns: repeat(auto-fit, minmax(min(150px,100%), 1fr)); }
.tksched__f label { display: block; font-size: 11.5px; color: var(--c-muted); }
.tksched__f .cinput { display: block; width: 100%; margin-top: 4px; }
.tksched__w { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.tksched .note { margin-top: 10px; }
/* ★ 예정일 빠른 버튼 (2026-09-21) — ⚠️ `label` 안에 있어 `display:block` 이 필요하다
   (`.tksched__f label` 아래의 인라인 흐름을 그대로 타면 칸에 붙어 버린다). */
/* ⚠️⚠️ 예정일은 **줄을 통째로** 쓴다 — 한 열(156px)에 버튼 다섯(244px)이 안 들어가
   두 줄로 감싸며 카드가 세로로 커졌다(실측). 칸은 좁게 두고 버튼을 옆에 세운다.
   ⚠️ `.tksched__f .cinput` 의 `width:100%`·`display:block` 을 이겨야 하므로
      선택자를 한 단 더 붙인다(**순서에 기대지 않는다** — 같은 특이도면 순서가 정한다). */
.tksched__pl { grid-column: 1 / -1; }
.tksched__plr { display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin-top: 4px; }
.tksched__f label.tksched__pl .cinput { display: inline-block; width: 150px; margin-top: 0; }
.tkday { display: flex; flex-wrap: wrap; gap: 4px; }
/* ★★★ 날짜 칸 하나 — 예정일을 고정해 보여 주고 그 자리에 완료 처리 (2026-10-10) */
.tksched__fix, .tksched__done { grid-column: 1 / -1; margin: 0; font-size: 13px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tksched__done { color: var(--c-mint-ink); }
.tksched__done b, .tksched__fix b { font-weight: 700; color: var(--c-text); }
.tksched__doneby { align-items: center; }
.tklink { border: 0; background: none; padding: 0; color: var(--c-blue); font-size: 12px;
  text-decoration: underline; cursor: pointer; }
.tkday__b { height: 24px; padding: 0 8px; border: 1px solid var(--c-line);
  border-radius: 6px; background: #fff; color: var(--c-text);
  font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tkday__b:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* ═══ 로그인 화면 (2026-09-11) ═══════════════════════════════════════
   ⚠️ 콘솔 껍데기(사이드바·상단바)를 쓰지 않는다 — 로그인 전이라 보여줄 메뉴가 없다. */
.lgbody { background: var(--g-wash), var(--c-g75, #f6f7fc);
          min-height: 100vh; margin: 0; }
.lg { min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: 24px; box-sizing: border-box; }
.lg__card {
  width: min(380px, 100%); background: #fff; border: 1px solid var(--c-line);
  border-radius: 14px; padding: 30px 28px 24px;
  box-shadow: 0 10px 34px rgb(13 20 48 / 10%);
  display: flex; flex-direction: column; gap: 14px;
}
.lg__brand { text-align: center; margin-bottom: 4px; }
.lg__logo { height: 34px; width: auto; }
.lg__sub { margin: 8px 0 0; font-size: 12px; color: var(--c-muted); }
.lg__f { display: flex; flex-direction: column; gap: 6px;
         font-size: 13px; font-weight: 600; color: var(--c-text); }
/* ⚠️ 입력칸이 작으면 폰에서 브라우저가 화면을 확대한다(16px 미만일 때) */
.lg__f .cinput { font-size: 16px; padding: 10px 12px; }
.lg__go { width: 100%; justify-content: center; padding: 11px 0; font-size: 15px; }
.lg__err {
  margin: 0; font-size: 13px; line-height: 1.6; word-break: keep-all;
  color: var(--c-coral-ink, #a3382a); background: var(--c-coral-pale, #ffece7);
  border: 1px solid var(--c-coral-line, #f6c8bc);
  border-radius: 8px; padding: 8px 10px;
}
.lg__note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.7;
            color: var(--c-muted); word-break: keep-all; text-align: center; }

/* 상단바의 사용자 — ⚠️ 로그인 전·후가 달라야 「누구로 들어왔는지」가 보인다 */
.ctop__logout { margin-left: 8px; }

/* ★★ 지도 바로 아래 — 위성사진이 밀려 보인다는 안내 (2026-09-12)
   ⚠️ 경고색(코랄)을 쓰지 않는다 — **고장이 아니라 사진의 한계**다.
      코랄로 칠하면 진짜 막힘(하천구역·계통 0)이 안 보인다. */
.rmap__warn {
  margin: 8px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--c-amber);
  background: var(--c-amber-wash);
  color: var(--c-text);
  font-size: 13px;
  line-height: 1.55;
  border-radius: 0 6px 6px 0;
}
.rmap__warn b { color: var(--c-amber-ink); }

/* ★★ 내 정보 (2026-09-13) — 라벨 + 칸을 나란히.
   ⚠️ `label` 을 **블록**으로 둔다 — 기본 `inline` 이면 안의 `small`·`input` 이
      한 줄로 눌려 붙는다(이 저장소가 `span`·`.bar` 에서 데인 것과 같은 자리). */
.acgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.acgrid label {
  display: block;
  font-size: 12px;
  color: var(--c-muted);
}
.acgrid label small {
  margin-left: 4px;
  font-size: 11px;
  color: var(--c-muted);
}
.acgrid .cinput { margin-top: 5px; width: 100%; }
/* ⚠️ 읽기 전용 칸은 **눌린 것처럼** 보여야 한다 — 안 그러면 왜 안 고쳐지나 한다 */
.acgrid .cinput[readonly] {
  background: var(--c-g50);
  color: var(--c-muted);
  cursor: not-allowed;
}
.tkact { margin: 14px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* ★★ 「혹시 이 분인가요?」 (2026-09-13) — 번호를 잘못 읽었을 때의 후보.
   ⚠️ **버튼이 맞다** — 여기서는 정말 「고르는」 것이다(건 바꾸기 셀렉트와 다르다). */
.tkmaybe { display: grid; gap: 8px; }
.tkmaybe .cbtn {
  display: block; text-align: left; padding: 10px 12px; line-height: 1.45;
  white-space: normal;          /* ⚠️ 주소가 길다 — 한 줄로 눌리면 잘린다 */
  /* ⚠️⚠️ **`.cbtn` 에 `height: 36px` 이 박혀 있다** — 두 줄 버튼이면 아랫줄이
     버튼 **밖으로 삐져나온다**(실측: 버튼 36px 안에서 부제가 33.3px 부터 시작).
     ★ 「span 에 margin-top 을 주는 CSS 를 보면 display 부터 본다」와 같은 자리 —
       **고정 높이 버튼에 여러 줄을 넣으면 넘친다.** */
  height: auto;
}
.tkmaybe .cbtn span {
  display: block;               /* ⚠️ `span` 기본 inline 이라 안 두면 같은 줄에 붙는다 */
  margin-top: 2px; font-size: 11.5px; color: var(--c-muted);
}

/* ★★ 사용자 관리 (2026-09-14) — 관리자만 보는 화면.
   ⚠️ **지우기 버튼이 없다** — 담당 건이 계정에 붙어 있어 지우면 그 사람이 쫓던
      건이 조용히 미배당이 된다. 잠그기만 한다. */
.usoff { opacity: 0.55; }                /* 잠근 계정 — 지운 게 아니라 잠긴 것이다 */
.usact { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 비밀번호 정하는 칸 — 누른 계정 바로 아래 */
.uspw > td { background: var(--c-surface-soft); }
.uspw .cinput { width: 170px; display: inline-block; }
/* ⚠️ **왜 못 누르는지 적는다** — 버튼만 빼면 「기능이 없나」로 읽힌다 */
.usno { font-size: 11px; color: var(--c-muted); line-height: 1.4; max-width: 150px; }

/* ★ 「물으시면」 — 걸리는 항목마다 엔진의 쉬운 말 한 줄 (2026-09-16) */
.tksay li.tktips { align-items: start; }
/* ★ 희망 규모가 배치보다 많이 큰 줄 (2026-09-21 사장님 지시).
   ⚠️ 코랄(막힘)이 아니라 **앰버(확인할 것)** 다 — 「설치 불가」로 읽히면 안 된다.
   ⚠️ 문장이 길어 `tksay__v` 가 두 줄이 될 수 있으므로 위 정렬로 둔다. */
.tksay li.is-warn { align-items: start; background: var(--c-amber-wash);
                    border-radius: 8px; padding: 6px 8px; margin: 2px -8px; }
.tksay li.is-warn .tksay__v { color: var(--c-amber-ink); font-size: 15px; }
.tktips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tktips ul li { display: block; border: 0; padding: 0; font-size: 13px; line-height: 1.55;
                color: var(--c-text); word-break: keep-all; }
.tktips ul li b { display: block; font-size: 12px; font-weight: 700; color: var(--c-muted); }

/* ═══════════════════════════════════════════════════════════════════
   ★★★ 기초 정보 · 용량에 따른 제약사항 (2026-09-18 사장님 요청)

   *"우리가 첫 고객과 나눠야할 가장 기초적인 정보를 챙겨야해 … 용량에 따른
     제약사항 … 간단히 정리해서 보여줌"*

   ⚠️ 단계 기둥 안에 들어간다(1,280 화면에서 폭 554px) — 두 칸 격자가 한계다.
   ═══════════════════════════════════════════════════════════════════ */

/* ★ **받아 적는 카드**는 읽는 카드와 구별돼야 한다 — 통화 중에 손이 갈 곳이다.
   ⚠️ 색을 새로 만들지 않는다(브랜드 토큰만 쓴다). 왼쪽 띠 하나로 가른다. */
.tkbasics { border-left: 3px solid var(--c-blue); }
/* 제약사항은 **읽는 카드**다 — 띠를 주지 않고 목록 여백만 잡는다 */
.tkduty .panel__body { padding-top: 12px; }

/* 받아 적는 칸 — ⚠️ 라벨이 위, 칸이 아래다(통화 중에 눈이 아래로만 간다) */
.tkbg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 12px; }
.tkbg > label { display: grid; gap: 4px; font-size: 12px; font-weight: 700;
                color: var(--c-muted); min-width: 0; }
.tkbg > label.tkbg__wide { grid-column: 1 / -1; }
/* ⚠️ `min-width: 0` 이 없으면 number 입력의 기본 폭이 격자를 밀어 가로로 넘친다 */
.tkbg .cinput { min-width: 0; }
/* ★★ 라벨이 곧 **질문**이다 (2026-09-20) — 번호는 그리는 순서에서 나오고,
   아직 못 받은 질문은 번호가 앰버다. ⚠️ 경고색(코랄)을 쓰지 않는다 — 고장이
   아니라 **아직 안 물어본 것**이다. */
.tkask__q { display: flex; align-items: center; gap: 6px;
            min-width: 0; word-break: keep-all; line-height: 1.4; }
.tkask__q i { flex: none; width: 17px; height: 17px; border-radius: 50%;
              display: grid; place-items: center;
              font-size: 10px; font-style: normal; font-weight: 800;
              background: var(--c-blue-pale); color: var(--c-navy); }
/* ★★ 아직 안 받은 질문은 **빨강**이다 (2026-09-21 사장님 지시) — 통화 중에
   훑으면서 「어디가 비었나」를 한눈에 찾는 자리라 앰버로는 눈에 안 들어왔다.
   ⚠️ 이 저장소는 코랄을 「막힘」에 쓰지만 **여기서는 「아직 안 물어봤다」**다 —
      질문 카드 안에서만 쓰고 판정 태그(`tag--red`)와 섞지 않는다. */
.tkask__q.is-todo i { background: var(--c-coral-pale); color: var(--c-coral-ink);
                      box-shadow: inset 0 0 0 1px var(--c-coral-line); }
/* 번호 없는 딸림 칸(예정 비용·대출 비율)은 번호 폭만큼 들여쓴다 */
.tkask__q.is-sub { padding-left: 23px; }

/* ⚠️⚠️ 주소·설치할 곳은 **여기서 안 받는다**(고정 기둥에 칸이 있다) — 받았는지와
   무엇으로 보고 있는지만 적는다. 칸을 둘 두면 서로 다른 값을 가리킨다. */
.tkask__ro { grid-column: 1 / -1; margin: 0; display: grid; gap: 4px;
             font-size: 12px; font-weight: 700; color: var(--c-muted); }
.tkask__ro b { font-size: 13px; font-weight: 700; color: var(--c-text);
               word-break: keep-all; line-height: 1.45; }
.tkask__ro.is-todo b { color: var(--c-coral-ink); }

/* ★★ **빈 칸은 빨갛게 비워 둔다** — 칸 자체가 말을 해야 한다.
   ⚠️ 질문 카드 안에서만 건다(`.tkbg`) — 다른 화면의 빈 칸까지 빨개지면
      「고장」으로 읽힌다. ⚠️ 채우면 저절로 풀린다(다시 그릴 때 클래스가 빠진다). */
.tkbg .cinput.is-empty { border-color: var(--c-coral-line);
                         background: var(--c-coral-wash); }
.tkbg .cinput.is-empty:focus { border-color: var(--c-coral); background: #fff; }
/* 셀렉트는 화살표가 배경 그림이라 배경색을 따로 준다(이미지가 지워지지 않게) */
.tkbg select.cinput.is-empty { background-color: var(--c-coral-wash); }
.tkask__ro em { font-style: normal; font-size: 11px; font-weight: 600;
                color: var(--c-subtle); }

/* 단위를 칸 안쪽 오른쪽에 붙인다 — 「kW」를 라벨에 넣으면 라벨이 두 줄이 된다 */
.tkbg__u { position: relative; display: block; }
.tkbg__u .cinput { width: 100%; padding-right: 44px; }
.tkbg__u i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
             font-size: 11px; font-style: normal; font-weight: 700;
             color: var(--c-subtle); pointer-events: none; }

/* ★★★ **단계를 옮기는 자리** — ⚠️ 지금 단계에서만 나온다.
   ⚠️ 경고색을 쓰지 않는다 — 이 단계를 마치고 **누를 자리**이지 문제가 아니다.

   ★★ 2026-09-21 — **「다음」이 여기서 빠져 머리 오른쪽으로 갔다.** 남은 것은
   되돌리기·종료라 **상자를 없애고 가는 선 한 줄**로 내렸다. 색 상자로 두면
   가끔 쓰는 것이 단계 설명보다 무거워 보인다(사장님이 짚은 그 자리다). */
.tkmove { margin-top: 12px; padding-top: 10px;
          border-top: 1px solid var(--c-line); }
/* 종료된 건만 상자다 — **지금 이 건의 상태**라 눈에 걸려야 한다 */
.tkmove--end { margin-top: 10px; padding: 10px 12px; border-top: 0;
               border: 1px solid var(--c-line); border-radius: 10px;
               background: var(--c-surface-soft); }
.tkmove__h { margin: 0 0 8px; display: flex; flex-wrap: wrap;
             align-items: baseline; gap: 8px; }
.tkmove__h b { font-size: 13px; color: var(--c-navy); }
.tkmove__h span { font-size: 11px; font-weight: 600; color: var(--c-muted); }
.tkmove__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tkmove__n { font-size: 12px; color: var(--c-muted); word-break: keep-all;
             line-height: 1.5; }
/* 되돌아가는 것은 **정상 흐름**이다 — 서버(여정)가 그 문장을 갖는다 */
.tkmove__why { margin: 8px 0 0; font-size: 12px; line-height: 1.55;
               color: var(--c-muted); word-break: keep-all; }

/* 종료 사유 칩 — 고르고 고쳐 쓴다 */
.tkchips { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════
   ★★★ **개발 메모 포스트잇** (2026-09-21) — ⚠️⚠️ **실제 서비스에서 제거된다.**

   ⚠️⚠️ **색을 토큰에서 안 가져온다.** 일부러 **브랜드 밖 노랑**이라야
      「제품 화면이 아니라 우리가 붙여 둔 쪽지」로 읽힌다 — 브랜드 색으로
      칠하면 디자인의 일부가 되어 지울 이유가 안 보인다.
   ⚠️ 기울기는 **0.4°** 다. 더 기울이면 글이 안 읽히고, 안 기울이면 그냥 상자다.
   ⚠️ 인쇄에는 안 나간다(콘솔은 인쇄 대상이 아니지만 실수로 섞이지 않게).
   ═══════════════════════════════════════════════════════════════════ */
.devnote { position: relative; margin: 14px 0 2px;
           padding: 9px 24px 11px 12px;
           background: #fff59d; color: #5b4a06;
           border-radius: 1px; transform: rotate(-.4deg);
           font-size: 12px; line-height: 1.55; word-break: keep-all;
           box-shadow: 0 1px 2px rgb(0 0 0 / .16), 0 9px 18px -11px rgb(0 0 0 / .45); }
/* 위쪽 테이프 — ⭐ 「붙여 둔 것」을 가장 빨리 읽히게 하는 한 조각이다 */
.devnote::before { content: ''; position: absolute; left: 50%; top: -7px;
                   width: 56px; height: 14px; margin-left: -28px;
                   background: rgb(255 255 255 / .58);
                   box-shadow: 0 1px 2px rgb(0 0 0 / .14);
                   transform: rotate(-1.8deg); }
/* 접힌 오른쪽 아래 모서리.
   ⚠️ **그림자가 없으면 흰 배경에 묻혀 안 보인다** — 화면에서 그랬다. */
.devnote::after { content: ''; position: absolute; right: 0; bottom: 0;
                  border: 10px solid transparent;
                  border-right-color: #fff; border-bottom-color: #fff;
                  filter: drop-shadow(-1px -1px 1px rgb(0 0 0 / .2)); }
.devnote__h { display: block; margin-bottom: 5px;
              font-size: 11px; font-weight: 800; color: #8a6d00;
              text-transform: none; letter-spacing: -.01em; }
.devnote__b > :first-child { margin-top: 0; }
.devnote__b > :last-child { margin-bottom: 0; }
/* 안에 든 조각은 쪽지 글씨를 물려받는다 — 본문 색이 남으면 쪽지가 아니라 카드다 */
.devnote .tkstep__basis { margin: 0; font-size: 12px; color: inherit; }
.devnote .tkgap { margin-top: 8px; padding: 0; border: 0;
                  background: transparent; border-radius: 0; }
.devnote .tkgap__h, .devnote .tkgap__h span, .devnote .tkgap__f { color: inherit; }
.devnote .tkgap li b { background: rgb(0 0 0 / .08); color: #5b4a06; }
.devnote .tkgap li em, .devnote .tkgap li span { color: inherit; opacity: .82; }
@media print { .devnote { display: none; } }

/* 제약사항 목록 — 알약 + 본문 + 근거 */
.tkduty__l { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tkduty__l li { display: grid; grid-template-columns: 62px minmax(0, 1fr);
                gap: 10px; align-items: start;
                padding: 8px 10px; border: 1px solid var(--c-line);
                border-radius: 8px; background: var(--c-surface-soft); }
.tkduty__l li > div { min-width: 0; font-size: 13px; line-height: 1.55;
                      color: var(--c-text); word-break: keep-all; }
.tkduty__l li b { display: block; font-size: 12px; color: var(--c-navy); }
/* 근거 조문 — ⚠️ 작게 두되 **지우지 않는다**(나중에 검증하는 자리다) */
.tkduty__l li i { display: block; margin-top: 3px; font-size: 11px;
                  font-style: normal; color: var(--c-subtle); }
.tkduty__u { margin-top: 10px; font-size: 12px; color: var(--c-muted); }
.tkduty__u summary { cursor: pointer; font-weight: 700; }
.tkduty__u ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px;
                line-height: 1.55; word-break: keep-all; }

/* 좁은 화면에서는 한 칸으로 — ⚠️ number 입력 둘이 나란히 서면 6자도 안 보인다 */
@media (max-width: 1180px) {
  .tkbg { grid-template-columns: minmax(0, 1fr); }
}

/* ★★★ 응대 지도 도구 (2026-09-25) — 「크게 보기 · 편집」에서만 뜬다.
   ⚠️ 검토서의 `rmap__b`·`rmap__edit`·`rdxf`·`rlegend` 를 그대로 쓴다 — 두 벌이면 한쪽만 고쳐진다 */
.tkmapbar--edit { margin-top: 8px; padding: 6px; border-radius: 8px; background: var(--c-surface-soft); }
.tkmapbox .rmap__edit, .tkmapbox .rhint { margin-top: 8px; }
.tkmapbox .rlegend { margin-top: 6px; }

/* ── 회사 정보 (2026-09-27) ───────────────────────────────────────── */
.colo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.colo__img { height: 40px; max-width: 200px; object-fit: contain; border: 1px solid var(--c-line);
  border-radius: 6px; padding: 4px; background: #fff; }
.colo__none { font-size: var(--fs-xs); color: var(--c-muted); }
.coas { display: grid; gap: 6px; font-size: var(--fs-sm); }
.coact { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.coform { padding: 12px 4px; }
.cotok { font-size: 12px; background: var(--c-g50, #f5f6f9); padding: 3px 6px; border-radius: 4px;
  word-break: break-all; }

/* ── 2 사업성 검토: 문의 내용(읽기만) + 검토에 쓰는 값 (2026-09-27) ──────── */
.tkreview { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--c-line);
  border-radius: 8px; background: var(--c-g50); display: grid; gap: 6px; font-size: 13px; }
.tkreview p { margin: 0; }
.tkreview__acts { display: flex; gap: 6px; flex-wrap: wrap; }
.tkreview__note { font-size: 12px; color: var(--c-muted); margin: 6px 0 0; }
/* 읽기만 하는 문의 내용은 두 칸씩 — 한 줄에 하나면 카드가 두 배로 길어진다 */
.tkbg--ro .tkask__ro { grid-column: auto; }

/* ★ 검토 목록 → 「통화 중에 답할 것」 카드로 내려가는 버튼 (2026-09-28)
   ⚠️ 신원 줄이 sticky 라 그만큼 띄워 멈춘다 — 안 띄우면 카드 머리가 그 밑에 숨는다 */
#tk-call { scroll-margin-top: 72px; }
.tkrev__jump { flex-wrap: wrap; align-items: center; }
.tkrev__jump .cbtn { flex: none; }

/* ★ 비용 표 — 항목별 범위 + 합계(2026-09-29). 합계 줄은 위에 선을 긋는다 */
.tkcost tfoot th, .tkcost tfoot td { border-top: 2px solid var(--c-line); padding-top: 9px; }
.tkcost tfoot th { text-align: left; }
.tkcost td.num { white-space: nowrap; }
.tkcost th.num { text-align: right; }
.tkcost__n { margin: 6px 0 0; line-height: 1.5; }
.tkcost__src { font-size: 11px; }
.tkcost__src.is-quote { color: var(--c-mint-ink); }

/* 문의 접수 — 빈 칸일 때 무엇으로 계산하는지(2026-09-29) */
.tkask__hint { display: block; margin-top: 4px; font-size: 11px; color: var(--c-muted); }

/* ★★ 응대 3단계 — 보낸 브라이튼 고객용 제안서(v 번호) 목록 (2026-09-30) */
.tkweb { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tkweb__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.tkweb__row > b { font-variant-numeric: tabular-nums; }

/* ★★ 3단계 「고객용 제안서 만들기」 — 주 동작이라 크게 (2026-09-30 사장님 「너무 안보인다」) */
.tkwebhero {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--c-amber-wash); border: 1.5px solid var(--c-amber-line);
}
.tkwebhero__t { flex: 1 1 240px; font-size: 13px; line-height: 1.6; color: var(--c-text); }
.tkwebcta {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--g-cta); color: #fff; font-size: 17px; font-weight: 800;
  letter-spacing: -0.01em; white-space: nowrap;
  box-shadow: 0 6px 16px rgb(255 95 61 / 32%);
}
.tkwebcta:hover { filter: brightness(1.05); }
.tkwebcta:focus-visible { outline: 3px solid var(--c-blue-pale); outline-offset: 2px; }
.tkwebcta:disabled { background: var(--c-g300, #c9ced8); box-shadow: none; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .tkwebcta { transition: filter .15s, transform .15s; }
  .tkwebcta:not(:disabled):hover { transform: translateY(-1px); }
}

/* ★★ 2단계 「한전 계통 · 연계 변전소」 (2026-10-01) — 확인해 적는 칸 */
.tkcon { margin: 10px 0; padding: 12px 14px; border: 1px solid var(--c-line);
  border-radius: 10px; background: #fff; }
.tkcon__h { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.tkcon__api { margin: 0 0 8px; font-size: 13px; }
.tkcon__api span { display: block; margin-top: 4px; font-size: 12px; color: var(--c-orange-ink); }
.tkcon__f { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.tkcon__f label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--c-muted); }
.tkcon__f .cinput { width: 170px; }
.tkcon__n { margin: 8px 0 0; font-size: 11.5px; color: var(--c-muted); }

/* ★★★ 단계 관문 — 필수 항목이 비면 다음 단계로 못 넘어간다(2026-10-01). 코랄은 「막힘」이다 */
.tkgate { margin: 8px 0 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--c-coral-wash, #fff4f2); border: 1px solid var(--c-coral-line, #f6c3b8);
  font-size: 12.5px; line-height: 1.55; word-break: keep-all; }
.tkgate p { margin: 0 0 4px; }
.tkgate b { color: var(--c-coral-ink, #b42318); }
.tkgate ul { margin: 0; padding-left: 18px; list-style: disc; }
.tkgate li { margin: 3px 0; }
.tkgate .cbtn { margin-left: 6px; height: 26px; padding: 0 9px; font-size: 11.5px; }

/* ★ 텔레그램 연결 순서(내 정보) — base.css 리셋이 번호를 지운다 */
.actg { list-style: decimal; padding-left: 20px; margin: 8px 0 4px; font-size: var(--fs-xs); line-height: 1.8; }

/* ★★ 인허가 서식 작성표 인쇄 (2026-10-03) — js/permit.js printForms. 화면에는 안 보인다.
   ⚠️ `.printroot` 규칙(위 @media print)이 나머지를 가린다 — 누를 때만 붙였다 뗀다. */
.pmprint { display: none; }
.pmfill { margin: 8px 0; }
@media print {
  .pmprint { display: block; }
  .pmsheet { page-break-after: always; break-after: page; padding: 14mm 12mm; font-size: 11pt; color: #000; }
  .pmsheet:last-child { page-break-after: auto; break-after: auto; }
  .pmsheet h1 { font-size: 16pt; margin: 0 0 4mm; }
  .pmsheet__s { margin: 0 0 6mm; font-size: 10pt; }
  .pmsheet__t { width: 100%; border-collapse: collapse; }
  .pmsheet__t th, .pmsheet__t td { border: 1px solid #555; padding: 3mm 3mm; text-align: left; vertical-align: top; }
  .pmsheet__t th { width: 38%; background: #f2f2f2; font-weight: 600; }
  .pmsheet__blank { display: inline-block; min-width: 60mm; border-bottom: 1px solid #777; height: 1em; }
  .pmsheet__n { margin: 4mm 0 0; font-size: 9pt; color: #333; }
  /* ⚠️ @page 를 여기 두지 않는다 — 이 파일은 콘솔 전체가 부른다(제안서 가로·계약서 세로를 덮는다) */
}

/* ═══ 5. 시공사 선정 — 연락 · 가린 의뢰 문안 (2026-10-03) ═══════════ */
.bdbrief { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px;
           margin-bottom: 16px; }
@media (max-width: 900px) { .bdbrief { grid-template-columns: 1fr; } }
.bdbrief__txt { width: 100%; font-family: inherit; line-height: 1.6; resize: vertical; }
.bdbrief__acts { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.bdbrief__why { font-size: 12.5px; line-height: 1.7; color: var(--c-text); word-break: keep-all; }
.bdbrief__why ul { margin: 0 0 10px; padding-left: 18px; list-style: disc; }
.bdres { min-width: 180px; }
.bdres .cbtn { margin: 0 4px 4px 0; }
.bdres .cbtn.is-on { background: var(--c-sky-pale); border-color: var(--c-blue); color: var(--c-blue); }
.bdmemo { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bdmemo select { flex: 0 1 200px; }
.bdmemo input { flex: 1 1 260px; min-width: 0; }
.bdhist { margin: 8px 0; font-size: 12.5px; }
.bdhist summary { cursor: pointer; color: var(--c-muted); }
.bdhist ul { margin: 6px 0 0; padding-left: 0; list-style: none; line-height: 1.8; }
/* 의뢰서 — 화면에는 안 보이고 인쇄에서만 나온다 */
.bdprint { display: none; }
@media print {
  .bdprint { display: block; }
  .bdprint__page { padding: 18mm 16mm; font-size: 11pt; line-height: 1.7; color: #000; }
  .bdprint__page h1 { font-size: 18pt; margin: 0 0 6mm; }
  .bdprint__to { margin: 0 0 6mm; }
  .bdprint__body { white-space: pre-wrap; font-family: inherit; font-size: 11pt; margin: 0 0 6mm;
                   padding: 4mm; border: 1px solid #999; }
  .bdprint__foot { font-size: 10pt; margin: 0 0 3mm; }
}

/* ═══ 인허가 서식 채우기 — 건 모드 (2026-10-04) ═══════════════════ */
.pmf__sum { display: grid; grid-template-columns: repeat(3, minmax(90px, 140px)) minmax(0, 1fr);
            gap: 10px; align-items: stretch; margin-bottom: 12px; }
@media (max-width: 760px) { .pmf__sum { grid-template-columns: repeat(3, 1fr); } .pmf__bar { grid-column: 1 / -1; } }
.pmf__sum > div { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; }
.pmf__sum b { display: block; font-size: 22px; line-height: 1.2; color: var(--c-navy-deep); font-variant-numeric: tabular-nums; }
.pmf__sum span { display: block; font-size: 11.5px; color: var(--c-muted); }
.pmf__sum .is-bad { border-color: var(--c-coral); background: var(--c-coral-pale); }
.pmf__sum .is-bad b { color: var(--c-coral); }
.pmf__sum .is-warn { border-color: var(--c-orange-ink); background: var(--c-cream); }
.pmf__sum .is-good b { color: var(--c-mint); }
.pmf__bar { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.pmf__need { margin: 0 0 12px; font-size: 13px; line-height: 2; }
.pmf__need.is-done { color: var(--c-mint); font-weight: 700; }
.pmf__chip { margin: 0 4px 0 6px; padding: 2px 10px; border-radius: 99px; border: 1px solid var(--c-coral);
             background: var(--c-coral-pale); color: var(--c-coral); font-size: 12px; cursor: pointer; }
.pmf__t th[id] { white-space: nowrap; font-weight: 600; text-align: left; }
.pmf__t td .cinput { width: 100%; min-width: 180px; }
.pmf__t tr.is-empty th { color: var(--c-coral); }
.pmf__t tr.is-empty .cinput { border-color: var(--c-coral); background-color: var(--c-coral-pale); }
.pmf__t tr.is-suggest .cinput { border-color: var(--c-orange-ink); background-color: var(--c-cream); }
.pmf__why { display: block; margin-top: 4px; font-size: 11.5px; color: var(--c-orange-ink); white-space: normal; overflow-wrap: anywhere; }
.pmf__docs { font-size: 11.5px; color: var(--c-muted); white-space: nowrap; }
.pmf__foot { margin: 10px 0 0; font-size: 11.5px; color: var(--c-muted); }
/* ★ 묶어 보기 · 날짜 빠른 버튼 (2026-10-08) */
.pmf__mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; font-size: 12px; color: var(--c-muted); }
.pmf__mode span { margin-right: 4px; }
.pmf__mb { padding: 3px 12px; border-radius: 99px; border: 1px solid var(--c-line); background: #fff; font-size: 12px; cursor: pointer; color: var(--c-text); }
.pmf__mb.is-on { border-color: var(--c-blue); background: var(--c-blue); color: #fff; font-weight: 700; }
.pmf__need > b { display: block; }
.pmf__ng { margin: 2px 0; }
.pmf__gn { display: inline-block; min-width: 108px; font-size: 12px; font-weight: 700; color: var(--c-navy-deep); }
.pmf__gn em, .pmf__grp em { font-style: normal; font-weight: 400; color: var(--c-muted); }
.pmf__t tr.pmf__grp th { background: var(--c-sky-wash); color: var(--c-navy-deep); font-size: 12.5px; text-align: left; padding-top: 8px; padding-bottom: 8px; }
.pmf__date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.pmf__cal { height: 28px; padding: 0 6px; border: 1px solid var(--c-line); border-radius: 6px; font-size: 12px; color: var(--c-text); background: #fff; }
.pmf__dq { padding: 3px 9px; border-radius: 6px; border: 1px solid var(--c-sky-line); background: var(--c-sky-pale); color: var(--c-blue); font-size: 12px; cursor: pointer; }
.pmf__dq:hover, .pmf__mb:hover { border-color: var(--c-blue); }
.pmf__dq[data-pmday="clear"] { background: var(--c-surface-soft, #fff); color: var(--c-muted); border-color: var(--c-line); }
/* 앞 일정에서 온 기본 날짜 — 저장 전이라 흐리게(2026-10-09) */
.pmf__cal.is-base { color: var(--c-muted); border-style: dashed; }
.pmf__base { font-size: 11px; color: var(--c-muted); }
/* ★ 묶음 카드 (2026-10-09) */
.pmf__card { border: 1px solid var(--c-line); border-radius: 12px; background: #fff; margin: 0 0 14px; overflow: hidden; }
.pmf__card.has-empty { border-color: var(--c-coral-line, var(--c-coral)); }
.pmf__ch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--c-sky-wash);
           border-bottom: 1px solid var(--c-line); }
.pmf__ch b { font-size: 14px; color: var(--c-navy-deep); }
.pmf__ch em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--c-muted); }
.pmf__card.has-empty .pmf__ch { background: var(--c-coral-wash, var(--c-coral-pale)); }
.pmf__cn { padding: 1px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.pmf__cn.is-bad { background: var(--c-coral); color: #fff; }
.pmf__cn.is-ok { background: var(--c-mint-pale, #e6f6ef); color: var(--c-mint); }
.pmf__card .tablewrap { margin: 0; }
.pmf__card .pmf__t { margin: 0; }
/* 좁은 칸 — 줄을 카드로 쌓는다(오른쪽 열이 잘려 출처·서식이 안 보였다).
   ⚠️ 창이 아니라 **패널 폭**으로 가른다 — 넓은 창에서도 오른쪽 「조건」 칸 때문에 이 열은 좁다 */
#pm-fill { container-type: inline-size; }
@container (max-width: 820px) {
  .pmf__t thead { display: none; }
  .pmf__t { display: block; width: 100%; }
  /* 묶음 카드 안에서 칸을 타일로 — 넓으면 두 줄, 좁으면 한 줄 */
  .pmf__t tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
                  gap: 10px; padding: 12px; }
  .pmf__t tr { display: block; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
  .pmf__t tr.is-empty { border-color: var(--c-coral); border-left-width: 4px; }
  .pmf__t tr.is-suggest { border-color: var(--c-orange-ink); border-left-width: 4px; }
  .pmf__t th, .pmf__t td { display: block; border: 0; padding: 2px 0; }
  .pmf__t td.pmf__docs { display: inline-block; margin-left: 8px; }
  .pmf__t td:nth-child(3) { display: inline-block; }
  .pmf__t td .cinput { min-width: 0; }
}

/* ★ 시공사 명단 — 면허번호를 바로 고친다 (2026-10-04) */
.bdlic { min-width: 150px; font-size: 12.5px; }

/* ═══ 6. 현장 확인표 (2026-10-04) — 휴대폰으로 현장에서 쓴다 ═══════════ */
.vsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; margin-bottom: 16px; }
.vsum > div { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; }
.vsum b { display: block; font-size: 20px; line-height: 1.3; color: var(--c-navy-deep); font-variant-numeric: tabular-nums; }
.vsum span { display: block; font-size: 11.5px; color: var(--c-muted); }
.vsum .is-warn { border-color: var(--c-orange-ink); background: var(--c-cream); }
.vsum .is-bad { border-color: var(--c-coral); background: var(--c-coral-pale); }
.vsum .is-bad b { color: var(--c-coral); }
.vsum .is-good b { color: var(--c-mint); }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 14px; }
.vgrid label, label.vgrid__wide { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--c-muted); }
.vgrid__wide { grid-column: 1 / -1; }
.vcon { margin: 12px 0 0; font-size: 13px; }
.vmsg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.vmsg__t { width: 100%; font-family: inherit; line-height: 1.6; resize: vertical; background: var(--c-console-bg); }
.vmsg__a { margin: 8px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vchk { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vchk__i { border: 1px solid var(--c-line); border-left-width: 4px; border-radius: 10px; padding: 12px 14px;
           display: grid; gap: 8px; }
.vchk__i.is-none { border-left-color: var(--c-line); }
.vchk__i.is-ok { border-left-color: var(--c-mint); }
.vchk__i.is-issue { border-left-color: var(--c-coral); background: var(--c-coral-pale); }
.vchk__i.is-na { border-left-color: var(--c-subtle); opacity: .8; }
.vchk__h b { display: block; font-size: 14px; }
.vchk__h span { display: block; font-size: 12px; color: var(--c-muted); margin-top: 2px; word-break: keep-all; }
.vchk__s { display: flex; gap: 6px; flex-wrap: wrap; }
.vbtn { min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--c-line); background: #fff;
        font: inherit; font-size: 13px; cursor: pointer; color: var(--c-text); }
.vbtn.is-on.is-ok { background: var(--c-mint); border-color: var(--c-mint); color: #fff; }
.vbtn.is-on.is-issue { background: var(--c-coral); border-color: var(--c-coral); color: #fff; }
.vbtn.is-on.is-wait { background: var(--c-amber-pale); border-color: var(--c-amber-line); color: var(--c-amber-ink); font-weight: 600; }
.vbtn.is-on.is-na { background: var(--c-subtle); border-color: var(--c-subtle); color: #fff; }
.vchk__n { width: 100%; }
.vext td .cinput { width: 100%; min-width: 0; }
.vext__add { margin: 10px 0 14px; line-height: 2.2; }
.vchip { border-color: var(--c-blue); background: var(--c-sky-pale); color: var(--c-blue); }
.vprint { display: none; }
@media print {
  .vprint { display: block; }
  .vprint__p { padding: 14mm; font-size: 10pt; color: #000; }
  .vprint__p h1 { font-size: 16pt; margin: 0 0 4mm; }
  .vprint__p table { width: 100%; border-collapse: collapse; margin: 4mm 0; }
  .vprint__p th, .vprint__p td { border: 1px solid #888; padding: 2mm; vertical-align: top; text-align: left; }
  .vprint__p td:last-child { width: 32%; }
}

/* ═══ 7. 금액 확정 (2026-10-04) ═══════════════════════════════════ */
.prt th { text-align: left; font-weight: 600; white-space: nowrap; }
.prt th label { display: inline-flex; gap: 6px; align-items: center; }
.prt td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.prt--sum { max-width: 520px; }
.prt__tot th, .prt__tot td { font-weight: 800; color: var(--c-navy-deep); border-top: 2px solid var(--c-line); }
.prin { border-style: dashed; }
.prin__m { font-size: 15px; margin: 8px 0 0; }
.prin__m b { color: var(--c-mint); }
.prin__m.is-bad b { color: var(--c-coral); }
/* ★ 용량 변동 나누기 (2026-10-14) */
.kwsplit { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; }
.kwsplit .bdform__h { margin-top: 0; }
.kwsplit__v { display: block; padding: 8px 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-text); }
.kwsplit__v.is-bad { color: var(--c-coral); }
@media print { .prin { display: none !important; } }

/* ★★ 8. 인허가 진행판 (2026-10-04) — console/ptrack.html */
.ptdocs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ptdocs label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; cursor: pointer; }
.ptday { display: flex; gap: 6px; align-items: center; }
/* ★ 날짜 칸 하나 — 예정은 고정해 보여 주고 완료는 버튼으로 (2026-10-10) */
.vgrid .ptlab { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--c-muted); }
.ptfix, .ptdone { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--c-text); }
.ptfix b, .ptdone b { font-weight: 700; }
.ptdone { color: var(--c-mint-ink); }
.ptbtns { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ptbtns .pmf__chip { margin: 0; }
.ptday .cinput { flex: 1; min-width: 0; }
.ctable tr.is-late td { background: var(--c-coral-pale); }
.ptlink { margin-top: 6px; }
#pt-out > .panel + .panel { margin-top: 14px; }
.ptreject { border-color: var(--c-coral); }
.ptrounds { margin: 6px 0 12px; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; }
.ptdl { margin-top: 10px; }

/* ★★ 인허가 건 작업 화면 — 같은 건의 진행판·구조검토·서식을 탭으로 (2026-10-04 · js/permit-deal.js) */
.pdw { margin: -4px 0 18px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; overflow: hidden; }
.pdw__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 16px 10px; }
.pdw__head > b { font-size: 16px; color: var(--c-navy-deep); }
.pdw__head > span { font-size: 13px; color: var(--c-muted); }
.pdw__back { font-size: 13px; color: var(--c-blue); margin-right: 4px; }
.pdw__who { margin-left: auto; }
.pdw__tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 10px; }
.pdw__tab { position: relative; padding: 7px 12px 7px 22px; border-radius: 8px; font-size: 13px;
            color: var(--c-navy-deep); background: var(--c-g50); border: 1px solid transparent; }
.pdw__tab::before { content: ''; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
                    border-radius: 50%; background: var(--c-g300); }
.pdw__tab.is-done::before { background: var(--c-mint); }
.pdw__tab.is-go::before { background: var(--c-blue); }
.pdw__tab.is-warn::before { background: var(--c-orange); }
.pdw__tab.is-bad::before { background: var(--c-coral); }
.pdw__tab.is-on { background: #fff; border-color: var(--c-blue); font-weight: 700; }
.pdw__tab--doc { padding-left: 12px; }
.pdw__tab--doc::before { display: none; }
.pdw__sep { width: 1px; background: var(--c-line); margin: 4px 6px; }
.pdw__status { margin: 0; padding: 8px 16px; font-size: 13px; background: var(--c-sky-pale); color: var(--c-navy-deep); }
.pdw__status.is-bad { background: var(--c-coral-pale); color: var(--c-coral); }
@media print { .pdw { display: none !important; } }
.pmdeal__go { display: flex; gap: 6px; margin-left: auto; }
.stdeal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; border: 1px solid var(--c-line);
          border-radius: 10px; background: var(--c-g50); font-size: 13.5px; }
.stdeal p { margin: 0; flex: 1 1 320px; }
.stdeal.is-warn { border-color: var(--c-orange); background: var(--c-cream); }

/* ★ 11. 개발행위허가 — 이 땅의 입지 판정(엔진이 낸 것을 비춘다) */
.ptsite { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.ptsite li { line-height: 1.5; }
.ptsite .tag { margin-right: 4px; }

/* ★★ 13~ 공사 진행판 (2026-10-06) — js/build.js · 현장 확인표(.vchk·.vbtn)를 그대로 쓰고 셋만 더한다 */
.bdrow { align-items: center; }
.bdrow .cinput[type="date"] { width: auto; min-width: 150px; }
.bdup { display: inline-flex; align-items: center; color: var(--c-blue); border-color: var(--c-blue); }
.bdlate { display: block; margin-top: 10px; font-size: 13px; color: var(--c-coral); }
.bdlate .cinput { width: 100%; margin-top: 4px; }
.vchk__up { width: fit-content; margin-top: 6px; }   /* 현장 확인표 사진 — 공사 진행판과 같은 모양 */
.vchk__i .bdph { margin-top: 8px; }
.bdph { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.bdph figure { margin: 0; }
.bdph img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); }
.bdph figcaption { font-size: 11px; color: var(--c-muted); margin-top: 3px; }
.bdph__x { border: 0; background: none; padding: 0; font: inherit; font-size: 11px; color: var(--c-coral); cursor: pointer; text-decoration: underline; }
.bdlog__in { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.bdlog__in textarea { flex: 1; min-width: 0; resize: vertical; font-family: inherit; }
.bdlog { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bdlog li { font-size: 13px; line-height: 1.55; border-left: 3px solid var(--c-line); padding-left: 10px; word-break: keep-all; }
.bdlog li span { display: block; font-size: 11.5px; color: var(--c-muted); }
/* ★ 14. 입고 검수 표 — 부족한 줄은 코랄 면 */
.bddl td .cinput { width: 100%; min-width: 0; }
.bddl td:nth-child(3), .bddl td:nth-child(4) { width: 110px; }
.bddl tr.is-bad td { background: var(--c-coral-pale); }

/* 20. 정산판 — 달별 정산 표. 숫자 칸이 좁아 값이 잘려 보였다(1,280 창) — 칸마다 최소 폭을 준다 */
.setab input[type="month"] { min-width: 150px; }
.setab input[type="number"] { min-width: 110px; text-align: right; }
.setab input[type="date"] { min-width: 140px; }
.setab input[type="text"] { min-width: 150px; }

/* ★★ 자재 — 제안서 이미지 (2026-10-07) */
.stimg { margin: 12px 0 0; font-size: 12.5px; }
.stimg > b { color: var(--c-subtle); font-weight: 700; margin-right: 6px; }
.stimg__body { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-top: 8px; }
.stimg__img { display: block; width: 220px; max-height: 220px; object-fit: contain;
  border: 1px solid var(--c-line); border-radius: 8px; background: #fff; }
.stimg__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stimg .dlsub { margin: 4px 0 0; max-width: 60ch; line-height: 1.6; }

/* ★★★ 시공사 메뉴 (2026-10-08) */
.ctadd > summary { cursor: pointer; list-style: none; }
.ctadd > summary::-webkit-details-marker { display: none; }
.ctadd > summary { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */
.ctadd .stform__go { margin-top: 10px; }
.ctbar { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.ctbar .cinput { width: 240px; max-width: 100%; }
.ctsample { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ctsub { display: block; font-size: 11.5px; color: var(--c-muted); margin-top: 2px; }
.ctmiss { font-size: 11.5px; color: var(--c-coral); }
.ctnote { font-size: 12px; color: var(--c-text); max-width: 240px; }
.ctnote em { font-style: normal; color: var(--c-muted); }
.cttable tr.is-open td { background: var(--c-sky-wash); }
.ctedit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; padding: 8px 0; }
@media (max-width: 1000px) { .ctedit { grid-template-columns: 1fr; } }
.ctedit__h { margin: 14px 0 8px; font-size: 13px; color: var(--c-navy-deep); }
.ctedit__h:first-child { margin-top: 0; }
.ctedit__h em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--c-muted); margin-left: 6px; }
.ctnote__in { width: 100%; resize: vertical; }
.ctnotes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.ctnotes li { padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 12.5px; white-space: pre-wrap; }
.ctnotes__at { display: block; font-size: 11px; color: var(--c-muted); margin-bottom: 2px; }
/* 5. 시공사 선정 카드 */
.selbox { display: grid; gap: 8px; width: 100%; }
.selbox__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.selbox__row .cinput { min-width: 220px; flex: 1 1 220px; max-width: 420px; }
.selbox__new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 10px;
               border: 1px dashed var(--c-line); border-radius: 8px; }
.selbox__pick { padding: 10px 12px; border: 1px solid var(--c-mint); border-radius: 8px; background: var(--c-mint-pale, #eefaf4); font-size: 13px; }
.selbox__pick b { color: var(--c-navy-deep); }
.selbox__final { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; }
.selbox__lbl { font-size: 13px; font-weight: 600; color: var(--c-text); min-width: 76px; }
.selbox__row .selbox__won { flex: 0 1 180px; min-width: 140px; text-align: right; font-variant-numeric: tabular-nums; }
.selbox__row #tk-fin-vat { flex: 0 1 150px; min-width: 130px; }
.selbox__docs { gap: 6px 10px; }
.selbox__doc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* ★★★ 견적 받기 — 자동 비딩 (2026-10-08) */
.rqnew { border: 1px dashed var(--c-line); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.rqnew > summary { cursor: pointer; font-weight: 700; color: var(--c-navy-deep); }
.rqpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; margin: 8px 0 12px; }
.rqpick label { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 6px 8px; border: 1px solid var(--c-line); border-radius: 6px; }
.rqopt { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 10px; }
.rqopt label { display: grid; gap: 4px; font-size: 12px; color: var(--c-muted); }
.rqopt__note { flex: 1 1 260px; }
.rqbox { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 14px; margin-top: 12px; }
.rqbox.is-closed { background: var(--c-g50, #f7f8fb); }
.rqbox__h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.rqbox__n { margin-left: auto; font-size: 12px; color: var(--c-muted); }

/* ★★ 입출금 장부 (2026-10-09) — js/pay.js
   ⚠️ 칸 폭은 `.payt` 아래에 둔다 — `.payt .cinput`(0,2,0)이 단독 클래스(0,1,0)를 이긴다 */
.payt__wrap { overflow-x: auto; }
.payt { min-width: 980px; }
.payt--out { min-width: 1240px; }
.payt td { vertical-align: middle; }
.payt .cinput { width: 100%; min-width: 0; }
.payt .payt__won { min-width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.payt .payt__day { display: flex; gap: 4px; align-items: center; }
.payt .payt__day .cinput { min-width: 140px; }
.payt td:first-child .cinput { min-width: 96px; }
.payt td:nth-last-child(2) .cinput { min-width: 160px; }
.payt tr.is-done td { background: var(--c-mint-pale); }
.payt__sm { height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.payt__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
#py-sum .dwarns { margin-bottom: 16px; }
#py-sum .vsum b { white-space: nowrap; font-size: 18px; }

/* ★★ 차례 — 누구 답을 기다리나 (2026-10-09) · js/talk.js waitBox · js/deals.js */
.tkwait { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.tkwait__now { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--c-text); }
.tkwait__now span { font-weight: 400; color: var(--c-muted); }
.tkwait__now.is-late { color: var(--c-coral-ink); }
.dlwait { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--c-amber-ink); }
.dlwait.is-late { color: var(--c-coral-ink); font-weight: 600; }

/* ★ 14. 발주 줄(2026-10-09) — 입고 검수 줄 아래에 거래처·주문일·입고 예정·금액 */
.bddl__order td { border-top: 0; padding-top: 0; }
.bdord { display: flex; flex-wrap: wrap; gap: 8px; }
.bdord label { display: grid; gap: 2px; font-size: 11px; color: var(--c-muted); }
.bdord .cinput { min-width: 0; width: 140px; }
.bddl__order.is-warn td { background: var(--c-amber-wash); }
.bdorddoc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; }
.bdorddoc__f { display: inline-flex; align-items: center; gap: 4px; }

/* ★ 신청인 정보 — 4. 계약(2026-10-10) */
.tkapp .panel__title .tag { margin-left: 6px; vertical-align: middle; }
.tkapp__same { margin-top: 6px; justify-self: start; }

/* 12. 착공신고 — 감리 없이 할 수 있을 수 있는 경우(시행령 제19조②) · 2026-10-10 */
.ptexempt { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 8px; background: var(--c-surface-soft); }
.ptexempt > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ptexempt .note { margin-top: 8px; }
.ptreg { margin: 10px 0 2px; font-size: 13px; color: var(--c-text); font-weight: 600; }
/* ★ 보낸 문안 — 접어서 아래로(2026-10-10) */
.tkdraft.is-sent { background: var(--c-g50, #f6f7fb); }
.tkdraft.is-sent > summary { cursor: pointer; list-style: none; }
.tkdraft.is-sent > summary::-webkit-details-marker { display: none; }
.tkdraft.is-sent > summary { list-style: none; }  /* ⚠️ 요즘 Safari 는 ::marker 로 그린다 — 이게 없으면 화살표가 둘(2026-10-22) */
.tkdraft.is-sent:not([open]) > :not(summary) { display: none; }
/* 방문 시간 — 시·분 두 칸 (2026-10-10) */
.vtime { display: flex; gap: 6px; }
.vtime select:first-child { flex: 1.4 1 0; min-width: 0; }
.vtime select:last-child { flex: 1 1 0; min-width: 0; }
.vext__won { display: block; margin-top: 2px; font-size: 11.5px; color: var(--c-muted); min-height: 14px; text-align: right; }
/* ★ 추가 비용 — 시공사 신청은 승인·취소한다(2026-10-11) */
.vext tr.is-wait td { background: var(--c-amber-wash, #fffaf0); }
.vext tr.is-no td { color: var(--c-muted); text-decoration: line-through; }
.vext tr.is-no td .tag, .vext tr.is-no td .cbtn { text-decoration: none; }
.vext__st { white-space: nowrap; }
.vext__act { white-space: nowrap; }
.vext__wait { margin-bottom: 10px; }
.prx select.cinput { min-width: 92px; }
.prx__us { color: var(--c-coral-ink, #b2381f); font-weight: 600; }

/* ★★★ 단계 카드 — 정할 것 → 할 일 → 연락 상대 → 일정 (2026-10-11 사장님 「흐름을 깔끔하고 쉽게」) */
.tkcheck { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-bg); }
.tkcheck__h { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--c-text); display: flex; justify-content: space-between; }
.tkcheck__h b { font-variant-numeric: tabular-nums; color: var(--c-muted); font-weight: 600; }
.tkcheck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.tkcheck li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; }
.tkcheck li i { flex: none; width: 18px; height: 18px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.tkcheck li.is-ok i { background: var(--c-mint-pale); color: var(--c-mint-ink); }
.tkcheck li.is-ok span { color: var(--c-muted); }
.tkcheck li.is-todo i { background: var(--c-coral-pale, #fde8e4); color: var(--c-coral-ink); }
.tkcheck li.is-todo span { color: var(--c-text); font-weight: 600; }
.tkcheck li.is-opt i { background: var(--c-g100, #eef0f5); color: var(--c-muted); }
/* ★ 꼭 해야 할 일이 남았을 때(2026-10-13 사장님 — 붉은 계열 · 아주 느린 깜빡임) */
.tkcheck.has-todo { border-color: var(--c-coral); border-left-width: 4px; }
.tkcheck.has-todo .tkcheck__h b { color: var(--c-coral-ink); }
.tkcheck li.is-todo { margin: 0 -6px; padding: 2px 6px; border-radius: 6px; background: var(--c-coral-pale, #fde8e4); }
.tkcheck li.is-todo span { color: var(--c-coral-ink); }
.tkcheck.is-live li.is-todo i { animation: tkpulse 3.2s ease-in-out infinite; }
@keyframes tkpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(220 79 54 / 0); }
  50%      { box-shadow: 0 0 0 5px rgb(220 79 54 / .35); background: var(--c-coral); color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .tkcheck.is-live li.is-todo i { animation: none; } }
@media print { .tkcheck.is-live li.is-todo i { animation: none; } }
.tkcheck li em { font-style: normal; font-size: 11px; color: var(--c-muted); font-weight: 400; }
.tkcheck li .tklink { margin-left: auto; }

.tkcon { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--c-line); }
.tkcon__h { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.tkcon ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tkcon li { display: grid; grid-template-columns: 76px minmax(140px, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 2px;
  padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--c-line); }
.tkcon li:last-child { border-bottom: 0; }
.tkcon__r { font-size: 12px; color: var(--c-muted); font-weight: 600; }
.tkcon__n { min-width: 0; overflow-wrap: anywhere; }
.tkcon__n small { color: var(--c-muted); font-size: 12px; margin-left: 4px; }
.tkcon__a { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; max-width: 360px; }
/* ⚠️ 이름 칸이 한 글자 폭으로 눌리지 않게 — 이름은 140px 아래로 안 줄고, 오른쪽 칸은 360px 에서 접힌다(2026-10-12) */
.tkcon__a .cinput { height: 30px; width: auto; min-width: 110px; }
.tkcon__a .cbtn { height: 30px; padding: 0 10px; font-size: 12px; }
.tkcon__a .dlsub { font-size: 11.5px; }
.tkcon__b { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 12px;
  border: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; background: var(--c-surface-soft, #fff); }
.tkcon__b:hover { border-color: var(--c-blue); color: var(--c-blue); }
.tkcon__wait, .tkcon__other { grid-column: 2 / -1; font-size: 12px; color: var(--c-orange-ink, #8a4b00); }
.tkcon__wait.is-late, .tkcon__other.is-late { color: var(--c-coral-ink); font-weight: 600; }
.tkcon__other { margin: 6px 0 0; }
.tksched__h .tklink { margin-left: auto; }
.tkfoot__basics { margin: 10px 0 0; font-size: 12px; color: var(--c-muted); }
@media (max-width: 720px) { .tkcon li { grid-template-columns: 64px minmax(0, 1fr); } .tkcon__a { grid-column: 1 / -1; justify-content: flex-start; } }
.tksched__h { display: flex; align-items: center; gap: 8px; }

/* ★★ 「답할 거리」 한 줄 — 「통화 중에 답할 것」을 팝업으로 뺐다 (2026-10-11 사장님)
   단계 기둥에는 세 숫자만 두고 누르면 그 탭이 열린 팝업(.cmodal)이 뜬다. */
.tkcallbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px;
             padding: 10px 12px; border-color: var(--c-blue); }
.tkcallbar__h { align-self: center; font-size: 12px; font-weight: 700;
                color: var(--c-blue); margin-right: 4px; }
.tkcallbar__b { flex: 1 1 140px; min-width: 0; height: auto; display: flex; flex-direction: column;
                align-items: flex-start; gap: 2px; padding: 8px 12px; text-align: left;
                border: 1px solid var(--c-line); border-radius: 10px;
                background: var(--c-sky-pale); cursor: pointer; }
.tkcallbar__b:hover, .tkcallbar__b:focus-visible { border-color: var(--c-blue); }
.tkcallbar__b b { font-size: 11.5px; color: var(--c-muted); font-weight: 600; }
.tkcallbar__b span { font-size: 14px; font-weight: 700; color: var(--c-text);
                     max-width: 100%; overflow-wrap: anywhere; }
.cmodal__box.tkcard .tktabs { padding: 0 20px; }
.cmodal__head h2 .panel__sub { font-weight: 400; margin-left: 6px; }

/* ★ 「통화 중에 답할 것」 새 창 (console/call-win.html · 2026-10-11) */
.cwin { background: var(--c-bg); padding: 0 16px 24px; }
.cwin__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
              justify-content: space-between; gap: 12px; padding: 14px 4px;
              background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.cwin__t { font-size: 17px; }
.cwin__s { font-size: 12.5px; color: var(--c-muted); margin-top: 2px; }
.cwin__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.cwin__at { font-size: 11.5px; color: var(--c-muted); }
.cwin__main { margin-top: 14px; background: #fff; border: 1px solid var(--c-line);
              border-radius: 14px; padding: 0 18px 18px; }
.cwin__main .tktabs { margin: 0 -18px 14px; padding: 0 18px; }
.cwin__ro { border: 0; padding: 0; margin: 0; min-width: 0; }
.cwin__ro-n { font-size: 11.5px; color: var(--c-muted); margin-top: 10px; }
.tkcallbar__w { align-self: center; flex: none; }
.tkcallwin__acts { display: flex; gap: 8px; align-items: center; }

/* ★ 「통화 중에 답할 것」 팝업은 **높이를 고정**한다 (2026-10-11 사장님 — 탭을 바꾸면 창 크기가 바뀌며
   탭 버튼 위치가 움직였다). 머리·탭은 제자리에 두고 본문만 스크롤한다. */
.cmodal__box.tkcard { height: min(86vh, 900px); max-height: none; overflow: hidden;
                      display: flex; flex-direction: column; }
.cmodal__box.tkcard > .cmodal__head,
.cmodal__box.tkcard > .tktabs { flex: none; }
.cmodal__box.tkcard > .cmodal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ★★ 「설비 기본 정보」 — 단계 기둥 맨 위에 **붙어 있는** 한 줄 (2026-10-11 사장님)
   ⚠️ top 은 고정 기둥(.tkfix__in)과 같다 — 신원 줄(52px) 바로 아래.
   ⚠️ 한 줄을 지킨다(높이가 바뀌면 아래 본문이 튄다) — 값은 줄이고 칸은 줄바꿈 안 한다. */
.tkcallbar { position: sticky; top: calc(var(--h-topbar, 64px) + 66px); z-index: 20;
             flex-wrap: nowrap; align-items: center; gap: 6px; padding: 6px 8px;
             margin-bottom: 12px; background: #fff;
             box-shadow: 0 6px 16px rgb(15 23 42 / 8%); }
.tkcallbar__h { flex: none; white-space: nowrap; }
.tkcallbar__b { flex: 1 1 0; flex-direction: row; align-items: baseline; gap: 6px; padding: 6px 10px; }
.tkcallbar__b b { flex: none; white-space: nowrap; }
.tkcallbar__b span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tkcallbar__w { height: 32px; padding: 0 10px; white-space: nowrap; }
.tkgrid.is-big .tkcallbar { position: static; }
@media (max-width: 720px) { .tkcallbar { flex-wrap: wrap; } .tkcallbar__b { flex-basis: 45%; } }
/* 칸은 이름 위 · 값 아래 두 줄 — 좁은 단계 기둥에서도 값이 안 잘린다 */
.tkcallbar__h { font-size: 11px; line-height: 1.25; text-align: center; }
.tkcallbar__b { flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 10px; }
.tkcallbar__b b { font-size: 11px; }
.tkcallbar__b span { font-size: 13.5px; max-width: 100%; }
.tkcallbar__b[data-call="quote"] { flex-grow: 1.4; }
/* ⚠️ 규모 칸이 「91.52kW · 14…」로 잘려 장수가 안 보였다(2026-10-18 실연) — 규모 칸도 넓힌다 */
.tkcallbar__b[data-call="design"] { flex-grow: 1.3; }
.tkcallbar { box-shadow: 0 -14px 0 var(--c-bg), 0 6px 16px rgb(15 23 42 / 8%); }

/* ★★ 감리 고르기 팝업 (2026-10-11) — 추천 한 줄 + 명단 */
.supbox { display: flex; flex-direction: column; gap: 12px; }
.supbox__rec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--c-mint-line, var(--c-line)); border-radius: 8px; background: var(--c-mint-pale, var(--c-bg)); }
.supbox__rec p { margin: 0; }
.supbox__none { border-top: 1px solid var(--c-line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.supbox__none p { margin: 0; }
.supbox__nonerow { display: flex; gap: 8px; }
.supbox__nonerow .cinput { flex: 1; min-width: 0; }
.supbox__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.supbox__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--c-line); border-radius: 8px; }
.supbox__list li.is-on { border-color: var(--c-blue); background: var(--c-sky-pale); }
.supbox__list li > div { min-width: 0; }

/* ★ 현장 확인표 — 추가 비용 사유·사진·승인 사유(2026-10-13) */
.vext__why { display: block; margin-top: 4px; font-size: 12px; color: var(--c-muted); white-space: normal; }
.vext__why.is-none { color: var(--c-orange-ink, #8a5a12); }
.vext__note { display: block; width: 100%; min-width: 160px; margin-top: 6px; }

/* ★ 우리가 만들어 붙이는 것 — 저절로 가는 것이 아니다(2026-10-13) */
.stlist li.is-hand::before{ content:"✍️" }

/* ★ 진행판 서류 사본(2026-10-13) */
.ptdocs { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-line); }
.ptdocs ul { list-style: none; margin: 6px 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13px; }
/* ★ 인허가 서식 — 영업에게 요청 */
.pmf__ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: var(--c-amber-pale, #fff7e6); font-size: 13px; }
.ptoff { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }

/* ★ 10. 의뢰 경로 · 시공 도면(2026-10-13) */
.ptvia { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--c-line); }
.ptvia .pmf__chip.is-on { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.ptdl { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 4px; font-size: 13px; }

/* ★ 오늘 할 일(2026-10-13) */
.dltoday__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dltoday__list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.dltoday__list li.is-late { background: var(--c-coral-pale, #fff1ee); }
.dltoday__list a { color: inherit; text-decoration: none; min-width: 0; }
.dltoday__list a:hover { text-decoration: underline; }
.dltoday__day { color: var(--c-muted); font-variant-numeric: tabular-nums; min-width: 3.2em; }

/* ★ 단계별 로딩(2026-10-13) — 인허가 관리 등 건 자료를 모으는 화면 */
.pdload { padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-bg); }
.pdload__h { display: flex; justify-content: space-between; margin: 0 0 10px; font-size: 14px; }
.pdload__h span { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pdload__bar { display: block; margin-bottom: 12px; }
.pdload__bar .bar__fill { display: block; transition: width .45s ease; }
.pdload__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.pdload__steps .is-done { color: var(--c-mint-ink); }
.pdload__steps .is-now { color: var(--c-text); font-weight: 600; }
.pdload__steps .is-warn { color: var(--c-orange-ink); }
.pdload__spin { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid var(--c-line);
  border-top-color: var(--c-blue); border-radius: 50%; animation: pdspin .8s linear infinite; }
@keyframes pdspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pdload__spin { animation: none; } .pdload__bar .bar__fill { transition: none; } }

/* ★ 한전 계통 후보(2026-10-13) */
.tkcon__cand { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 6px 0 8px; font-size: 12px; }
.tkcon__cand > span { color: var(--c-muted); margin-right: 4px; }

/* 견적서 첨부 — 진짜 파일 칸을 버튼 위에 투명하게 덮는다(누른 것이 곧 파일 칸) */
.selbox__file { position: relative; overflow: hidden; cursor: pointer; }
.selbox__file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 100px; }

/* ★ 단계를 옮긴 뒤 아직 안 연 「보낼 메시지」 (2026-10-14) — 팝업을 저절로 띄우지 않고 버튼에 불을 켠다 */
.tkdock__new { border-color: var(--c-orange); background: var(--c-amber-pale); color: var(--c-orange-ink); font-weight: 700;
  animation: tkdocknew 3.2s ease-in-out infinite; }
@keyframes tkdocknew { 0%, 100% { box-shadow: 0 0 0 0 rgb(255 106 43 / 0); } 50% { box-shadow: 0 0 0 5px rgb(255 106 43 / .3); } }
@media (prefers-reduced-motion: reduce) { .tkdock__new { animation: none; } }

/* ★ 금액 확정 기타 조정 — 빼기/더하기 · 금액 · 만원/원 (2026-10-14) */
.vadj { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
/* ⚠️ .cinput 이 width:100% 라 셋이 세로로 쌓였다(사장님 화면) — 한 줄로 */
.vadj .cinput.vadj__s { width: 110px; flex: none; }
.vadj .cinput.vadj__n { width: 140px; flex: none; text-align: right; }
.vadj .cinput.vadj__u { width: 76px; flex: none; }
.vadj .vadj__m { font-size: 18px; font-weight: 700; color: var(--c-coral-ink); width: 18px; text-align: center; }
.vadj .uxecho { flex: 1 1 100%; text-align: right; }

/* ★★★ 하단 서식 바 — 남은 서식(필요한 순서) · 다 채운 서식(2026-10-16) */
body.has-pmdock { padding-bottom: 150px; }
.pmdock { position: fixed; left: 50%; bottom: 12px; translate: -50% 0; z-index: 55; width: min(980px, calc(100vw - 32px));
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / 16%); }
.pmdock__h { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 0; background: none;
  cursor: pointer; font: inherit; color: var(--c-text); text-align: left; }
.pmdock { padding-right: 0; }
.pmdock__pdf { position: absolute; top: 6px; right: 90px; height: 30px; font-size: 13px; }
.pmdock__h .bar { flex: 1; max-width: 260px; }
.pmdock__tg { margin-left: auto; font-size: 13px; color: var(--c-muted); }
.pmdock__b { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 12px; max-height: 32vh; overflow-y: auto; }
.pmdock__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pmdock__l { flex: 0 0 auto; width: 118px; font-size: 12px; font-weight: 700; color: var(--c-muted); line-height: 1.3; }
.pmdock__l em { display: block; font-style: normal; font-weight: 400; }
.pmdock__c { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 13px;
  border: 1px solid var(--c-coral-line, var(--c-line)); background: var(--c-coral-pale, var(--c-bg)); color: var(--c-text);
  cursor: pointer; text-decoration: none; }
.pmdock__c.is-wait { border-style: dashed; border-color: var(--c-amber-line, var(--c-line)); background: var(--c-bg); }
.pmdock__c.is-wait .pmdock__n { background: var(--c-muted); }
.pmdock__c.is-opt { border-color: var(--c-amber-line, var(--c-line)); background: var(--c-amber-pale, var(--c-bg)); }
.pmdock__c.is-opt .pmdock__n { background: var(--c-amber-ink, var(--c-muted)); }
.pmdock__s { font-size: 11px; color: var(--c-muted); }
.pmdock__c.is-ok { border-color: var(--c-mint-line, var(--c-line)); background: var(--c-mint-pale, var(--c-bg)); }
.pmdock__c.is-end { opacity: .55; }
.pmdock__n { min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--c-coral-ink); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.pmdock__i { color: var(--c-mint-ink); font-weight: 700; }
.pmdock__c.is-fresh { animation: pmfresh 1.2s ease-in-out 3; }
@keyframes pmfresh { 50% { box-shadow: 0 0 0 5px var(--c-mint-line, rgb(0 160 100 / 30%)); } }
@media (prefers-reduced-motion: reduce) { .pmdock__c.is-fresh { animation: none; } }
@media (max-width: 720px) { .pmdock__l { width: 100%; } }
@media print { .pmdock { display: none; } body.has-pmdock { padding-bottom: 0; } }

/* ★★★ 준공 시기별 수익 구조 — 2026년 안에 허가(REC 유지) vs 2027년 이후(계약시장) (2026-10-16) */
.tkscn { margin-top: 12px; border: 1px solid var(--c-line); border-radius: 8px; padding: 10px 12px; }
.tkscn__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tkscn .ctable th, .tkscn .ctable td { padding: 6px 8px; vertical-align: top; }
.tkscn .ctable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tkscn .ctable td.num .dlsub { display: block; }
.tkscn .ctable td.is-on { background: var(--c-sky-pale); font-weight: 700; }

/* ★★ 5. 시공사 선정 — 받은 견적 (2026-10-16 사장님 「받아 적은 견적이 여기서 안 보인다」) */
.selbox__got { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 8px; }
.selbox__got > .selbox__lbl { display: flex; align-items: baseline; gap: 10px; }
.selbox__cmp { font-size: 12px; font-weight: 500; }
.selbox__bid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 0; border-top: 1px dashed var(--c-line); font-size: 13px; }
.selbox__bid b { color: var(--c-navy-deep); }

/* ★★ 현장 확인표 — 「문제 있음」 항목 안에서 추가 비용을 바로 (2026-10-16) */
.vchk__cost { display: grid; gap: 6px; margin-top: 8px; padding: 8px 10px; border-radius: 8px;
  background: var(--c-coral-wash, #fff6f4); border: 1px dashed var(--c-coral-line, #f2b8ac); }
.vchk__cost > .cbtn { width: fit-content; }
.vchk__crow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.vchk__crow > .cinput { flex: 1 1 180px; min-width: 140px; }
.vchk__cwon { display: inline-flex; align-items: center; gap: 6px; }
.vchk__cwon .cinput { width: 120px; text-align: right; }
.vchk__kw { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--c-text); }
.vchk__kw .cinput { width: 140px; text-align: right; }
.vchk__kw small { color: var(--c-muted); }
/* ★ 금액 확정 — 바뀐 용량 보정(모듈 장수) (2026-10-16) */
.prkw { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; font-size: 13px; }
.prkw .cinput { width: 110px; text-align: right; margin: 0 4px; }
.prkw .vchip.is-on { background: var(--c-sky-pale); border-color: var(--c-blue); }
.vchk__snap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }
.vchk__snap .vchip.is-on { background: var(--c-sky-pale); border-color: var(--c-blue); }

/* ★ 진행판 다음·이전 단계 (2026-10-16) — js/ptrack.js fillNav */
.ptnav:empty { display: none; }
.ptnav { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 16px 0 4px; }
.ptnav--top { display: block; margin: 0 0 12px; }
.ptnav--top .note { align-items: center; }
.ptnav--top .note .cbtn { margin-left: auto; flex: none; }

/* ★ 진행판 서류 줄 — 작성된 서류 보기 (2026-10-16) */
.ptdocs li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ptdoc__links { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ptdoc__a { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--c-sky-line); color: var(--c-blue); text-decoration: none; white-space: nowrap; }
.ptdoc__a:hover { background: var(--c-sky-pale); }
.ptdoc__a--src { color: var(--c-muted); border-color: var(--c-line); }
/* ★ 서식을 내기 전에 기다릴 것(PPA 신청서 — 8단계 허가증 · 2026-10-17) */
/* 서류마다 붙는 근거 한 줄(법정 · 실무) — 2026-10-17 */
.ptdoc__why { display: block; flex-basis: 100%; font-size: 11.5px; color: var(--c-muted); margin: 1px 0 0 26px; }
.ptdoc__note { font-size: 12px; color: var(--c-orange-ink); white-space: nowrap; }

/* 서식 채우기 — 여러 줄 칸(설비개요 · 2026-10-17) */
.pmf__ta { width: 100%; min-height: 52px; resize: vertical; font: inherit; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; height: auto; }

/* ★ 고객에게 받을 서류(4. 계약 · 2026-10-17) */
.cdocs { margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; }
.selbox__h { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.cdoc .selbox__lbl { display: inline-flex; flex-direction: column; }
.cdoc.is-ok .selbox__lbl { color: var(--c-mint-ink); }
.cdoc__why { font-size: 11px; color: var(--c-muted); font-weight: 400; }
/* ★ 진행판 서류 줄 — 해당 시 서류의 해당 여부 · 줄마다 파일 올리기(2026-10-17) */
.ptdoc__need { display: inline-flex; gap: 4px; }
.ptdoc__need .vbtn { padding: 2px 10px; font-size: 12px; }
.ptdoc__up { cursor: pointer; }
.cdoc__q .cbtn.is-on { border-color: var(--c-blue); background: var(--c-sky-pale); color: var(--c-blue); font-weight: 700; }

/* ★ 용량과 안 맞는 서식 값(2026-10-17) — 경고 색(앰버) · 탭에는 「!」 표시 */
.pmf__t tr.is-warn th { color: var(--c-amber-ink); }
.pmf__t tr.is-warn .cinput { border-color: var(--c-amber); background-color: var(--c-amber-pale); border-width: 2px; }
.pmf__why--warn { color: var(--c-amber-ink); font-weight: 700; }
.pmf__need--warn { padding: 8px 12px; border: 1px solid var(--c-amber-line); border-radius: 8px; background: var(--c-amber-wash); line-height: 1.6; }
.pmf__need--warn > b { color: var(--c-amber-ink); }
.pdw__tab.is-err { border-color: var(--c-amber); }
.pdw__err { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 50%;
            background: var(--c-amber); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; vertical-align: 1px; }
@media (max-width: 720px) { .pmf__t tr.is-warn { border-color: var(--c-amber); border-left-width: 4px; } }

/* ★★★ 10. 구조검토 — 세 걸음 (2026-10-17 · js/ptrack.js sealFlow) */
.sealsteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.sealstep { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--c-line);
            border-radius: 12px; background: #fff; }
.sealstep__n { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800;
               background: var(--c-g150); color: var(--c-g700); }
.sealstep b { font-size: 14px; color: var(--c-heading); }
.sealstep small { font-size: 12px; color: var(--c-muted); }
.sealstep.is-now { border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-sky-pale); }
.sealstep.is-now .sealstep__n { background: var(--c-blue); color: #fff; }
.sealstep.is-done .sealstep__n { background: var(--c-mint); color: #fff; }
.sealwho { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: var(--c-sky-wash); border: 1px solid var(--c-sky-line); font-size: 13px; color: var(--c-g800); }
.sealitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sealitem { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; border: 1px solid var(--c-line); border-radius: 10px; font-size: 13px; }
.sealitem.is-ok { background: var(--c-mint-wash); border-color: var(--c-mint-line); }
.sealitem__mk { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800;
                background: var(--c-g200); color: #fff; }
.sealitem.is-ok .sealitem__mk { background: var(--c-mint); }
.sealitem__t { flex: 1 1 220px; min-width: 0; }
.sealitem__r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sealchk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--c-g700); white-space: nowrap; }
#pt-sealmsg { font-size: 13px; line-height: 1.6; resize: vertical; }
.sealgot { padding: 8px 12px; border-radius: 10px; background: var(--c-mint-wash); border: 1px solid var(--c-mint-line); }
.sealmore { margin: 6px 0 12px; }
.sealmore > summary { cursor: pointer; padding: 8px 2px; font-size: 13px; color: var(--c-g600); font-weight: 600; }
@media (max-width: 720px) { .sealsteps { grid-template-columns: 1fr; } }
.sealitem__a { padding: 3px 10px; font-size: 12px; }
.sealmsg { margin-top: 10px; }
.sealmsg > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-blue); padding: 4px 0; }
.sealitem .ptdoc__why { display: block; }
@media (max-width: 1100px) { .sealsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ★ 구조검토 의뢰서 — 의뢰 받는 기술사(2026-10-17) */
.stengr { margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--c-sky-line); background: var(--c-sky-wash); display: grid; gap: 4px; }
.stengr p { margin: 0; font-size: 14px; }
.stengr .dlsub { font-size: 12.5px; }
/* ★★ 구조검토 의뢰서 — 인허가 건 화면(2026-10-17 · structure.js dealLayout) */
.st-deal .grid--2, .st-deal #st-lock, .st-deal .mockfold, .st-deal p.mock { display: none !important; }
.stflow__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 18px 0 10px; font-size: 17px; color: var(--c-heading); }
.stflow__h small { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--c-muted); padding-left: 40px; }
.stflow__n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-blue); color: #fff; font-size: 14px; font-weight: 800; }
.st-deal #st-doc-panel { margin-bottom: 14px; }
.stflow__opt { margin: 4px 0 16px; border: 1px dashed var(--c-g250); border-radius: 12px; background: var(--c-g50); }
.stflow__opt > summary { cursor: pointer; padding: 12px 16px; font-size: 13.5px; color: var(--c-g700); }
.stflow__opt[open] > summary { border-bottom: 1px dashed var(--c-g250); }
.stflow__opt > .panel { margin: 12px; }
.stflow__end { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--c-line); background: #fff; font-size: 14px; margin-bottom: 18px; }
.stflow__end .stflow__n { background: var(--c-g300); }
.sealrec { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.sealrec > p { margin: 0 0 6px; }
.ptlab .tag, label .tag { vertical-align: 1px; }
.st-deal .stpicks { display: block; }
.stwhere { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px;
           border-radius: 12px; background: var(--c-navy); color: #fff; font-size: 14px; }
.stwhere a:not(.cbtn) { color: #c8d8ff; }
.stwhere .cbtn { background: #fff; }
/* ★ 견적 탭 — 구조검토비 · 설계감리비(2026-10-17) */
.tkfee { margin: 12px 0; padding: 10px 14px; border: 1px dashed var(--c-g250); border-radius: 12px; background: var(--c-g50); }
.tkfee__h { margin: 0 0 8px; font-size: 13px; }
.tkfee__r { display: grid; grid-template-columns: 140px 110px 1fr 160px; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; }
.tkfee__w { color: var(--c-heading); font-variant-numeric: tabular-nums; }
.tkfee__s { font-size: 11.5px; color: var(--c-muted); }
@media (max-width: 720px) { .tkfee__r { grid-template-columns: 1fr 1fr; } }
.prfee__sel { min-width: 150px; padding: 4px 8px; font-size: 12.5px; }
.tkfee__l { font-size: 13px; color: var(--c-g700); }
/* ★★ 견적 방식 — 턴키 / 자재 지급(2026-10-19) */
.supmode { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.supgroups { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; }
.supmat { margin: 4px 0 8px; }

/* ★ 회사 정보 — 색상 테마 고르기(2026-10-19) */
.copal { display: flex; flex-wrap: wrap; gap: 6px; }
.copal__i { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--c-line); border-radius: 999px; cursor: pointer; font-size: 13px; }
.copal__i input { position: absolute; opacity: 0; pointer-events: none; }
.copal__i i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.copal__i.is-on { border-color: var(--c-blue); box-shadow: 0 0 0 2px var(--c-sky-pale); font-weight: 600; }

/* ★ 보낸 제안서 판의 오류(2026-10-22) — 그 판 줄을 코랄로, 아래에 무엇이 틀렸는지 */
.tkweb__row.is-bad { border-left: 3px solid var(--c-coral); padding-left: 8px; }
.tkweb__iss { flex-basis: 100%; font-size: 12px; color: var(--c-coral-ink); }
.tkweb__warn { margin-top: 8px; }

/* ★★★ 시공사 화면(portal.html · join.html · 2026-10-22) — 콘솔 껍데기 없이 한 장 */
.ptlbody { background: var(--c-bg); min-height: 100vh; }
.ptl__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
  background: var(--c-surface-soft, #fff); border-bottom: 1px solid var(--c-line); }
.ptl__logo { height: 26px; width: auto; }
.ptl__who { flex: 1; min-width: 160px; font-size: 14px; }
.ptl__who span { color: var(--c-muted); font-size: 13px; }
.ptl { max-width: 880px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; }
.ptl__hint { margin: 0 0 10px; font-size: 13px; color: var(--c-muted); }
.ptl__empty { margin: 8px 0; font-size: 13px; color: var(--c-muted); }
.ptl__err { color: var(--c-coral-ink, #b3261e); }
.ptl__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.ptl__row.is-new { background: var(--c-sky-pale); margin: 0 -10px; padding: 10px; border-radius: 8px; }
.ptl__main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; }
.ptl__main .ptl__ln { width: 100%; color: var(--c-text); }
.ptl__main small { width: 100%; color: var(--c-muted); font-size: 12px; }
.ptl__row .cbtn { flex: none; text-decoration: none; }
.ptl__pw { display: grid; gap: 8px; max-width: 360px; }
.ptl__pw label { display: grid; gap: 4px; font-size: 13px; }
.ptl__toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); margin: 0; z-index: 70;
  background: var(--c-navy); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.jn__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.jn__grid label, .jn__f { display: grid; gap: 4px; font-size: 13px; }
.jn__need { color: var(--c-coral-ink, #b3261e); }
.jn__agree { font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.jn__terms { font-size: 12px; color: var(--c-muted); background: var(--c-g50, #f4f6fb); padding: 10px; border-radius: 8px; margin: 0; }
@media (max-width: 560px) { .ptl__row { flex-wrap: wrap; } .ptl__row .cbtn { width: 100%; justify-content: center; } }
.ctacc__a { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; flex-wrap: wrap; }
.ctacc__a .cinput { width: 130px; }
.ctacc__new { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ctacc__new .cinput { width: 170px; }
.ctsign { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--c-line); }
.ctsign__a { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ctsign__a .cinput { width: 160px; }
.ctacc { grid-column: 1 / -1; border-top: 1px solid var(--c-line); padding-top: 10px; }
.ptl > .panel { padding: 16px; }
.ptl__bell b { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px;
  background: var(--c-coral, #e5533d); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.ptl__bell b[hidden] { display: none; }
.ptl__nt { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--c-line); font-size: 14px; }
.ptl__nt.is-new span { font-weight: 700; }
.ptl__nt small, .ptl__doc small { color: var(--c-muted); font-size: 12px; flex: none; }
.ptl__h3 { margin: 16px 0 6px; font-size: 14px; }
.ptl__doc { padding: 6px 0; border-top: 1px solid var(--c-line); font-size: 14px; }
.ptl__up { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.ptl__up .cinput { width: 220px; }
.ptl__file { position: relative; overflow: hidden; cursor: pointer; }
.ptl__file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.jn__docs { display: grid; gap: 8px; }
.jn__doc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.jn__doc em { color: var(--c-muted); font-style: normal; }
.ctjoin__url { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ctjoin__url span { font-weight: 700; font-size: 13px; }
.ctjoin__url .cinput { flex: 1; min-width: 220px; }