/* 이사 체크리스트(/checklists) — 종류 큰 카드 4장 · 한 장(항목 묶음 카드 + 진행률 큰 숫자) · 비교표 · 인쇄(표 한 장).
   휴대폰에서 한 손으로: 누르는 칸 44px 이상, 칩·체크 칸 크게. 값은 토큰만, 진행률 막대 길이만 CSS 변수(--p).
   인쇄(@media print)만 종이용 흑백 고정색(#000·#999·#eee) — 다크 모드여도 종이는 흰 바탕. */

/* ── 종류 카드 ── */
.cl-kinds { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .cl-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-kind { display: flex; flex-direction: column; gap: var(--space-3); }
.cl-kind .card-foot { margin-top: auto; padding-top: var(--space-3); }
.cl-kind-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); background: var(--primary-soft); color: var(--primary-ink); }
.cl-kind-icon svg { width: 24px; height: 24px; }
.cl-kind-title { font-size: var(--text-xl); font-weight: var(--weight-heavy); }
.cl-mine { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.cl-mine a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); min-height: 44px; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); text-decoration: none; }
.cl-mine a:hover { background: var(--surface-3); }
.cl-mine .t { font-weight: var(--weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-mine .p { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-2); }
.cl-mine .bar { grid-column: 1 / -1; }

/* 진행률 막대(길이만 --p) */
.bar { display: block; height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--primary); border-radius: inherit; transition: width var(--dur) var(--ease); }

/* ── 한 장 ── */
.cl-head { display: grid; gap: var(--space-4); align-items: end; margin-bottom: var(--space-5); }
.cl-head .page-head { margin-bottom: 0; }
@media (min-width: 720px) { .cl-head { grid-template-columns: minmax(0, 1fr) 220px; } }
.cl-progress { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); border-radius: var(--r-lg); background: var(--surface-2); }
.cl-pct { font-size: var(--text-num); font-weight: var(--weight-heavy); line-height: 1; color: var(--text); }
.cl-pct small { font-size: var(--text-xl); margin-left: 2px; }
.cl-count { font-size: var(--text-sm); color: var(--text-2); font-weight: var(--weight-bold); }

.cl-form { margin-top: var(--space-5); }
.cl-group { display: grid; gap: var(--space-3); }
.cl-group-title { font-size: var(--text-lg); font-weight: var(--weight-heavy); }
.cl-note { font-size: var(--text-sm); color: var(--text-2); padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface-2); }
.cl-rows { display: grid; }
.cl-row { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border: 0; border-top: 1px solid var(--border); margin: 0; min-width: 0; }
.cl-rows > .cl-row:first-child { border-top: 0; }
fieldset.cl-row { padding-inline: 0; }
.cl-label { font-weight: var(--weight-bold); font-size: var(--text-md); padding: 0; }
.cl-ctl { display: grid; gap: var(--space-2); min-width: 0; }
@media (min-width: 600px) {
  .cl-row { grid-template-columns: 180px minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
  fieldset.cl-row > legend { float: left; width: 180px; margin-right: var(--space-4); padding-top: var(--space-2); }
  fieldset.cl-row { display: block; }
  fieldset.cl-row::after { content: ""; display: table; clear: both; }
  fieldset.cl-row > .cl-ctl { margin-left: calc(180px + var(--space-4)); }
  .cl-row-wide, .cl-row-check { grid-template-columns: minmax(0, 1fr); }
}
.cl-row .input-suffix { max-width: 260px; }
.cl-row input[type="date"], .cl-row input[type="datetime-local"] { max-width: 260px; }
.cl-auto { font-weight: var(--weight-bold); }
.cl-addr { font-weight: var(--weight-bold); }
.cl-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-sm); color: var(--text-2); }
.cl-link { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--primary-ink); font-weight: var(--weight-bold); text-decoration: none; }
.cl-link:hover { text-decoration: underline; }
.cl-link svg { width: 16px; height: 16px; }

/* 고르기 칩(라디오) — 다시 누르면 취소(checklist.js) */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-opt span { display: inline-flex; align-items: center; min-height: 44px; min-width: 64px; justify-content: center; padding: 0 var(--space-4); border-radius: var(--r-full); background: var(--surface-2); color: var(--text-2); font-weight: var(--weight-bold); border: 1px solid transparent; transition: background var(--dur) var(--ease); }
.chip-opt:hover span { background: var(--surface-3); color: var(--text); }
.chip-opt input:checked + span { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); }
.chip-opt.is-bad input:checked + span { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* 체크(했음) — 큰 네모 */
.cl-check { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; cursor: pointer; position: relative; }
.cl-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cl-check .box { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); border: 2px solid var(--border-strong); background: var(--surface); color: transparent; transition: background var(--dur) var(--ease); }
.cl-check .box svg { width: 18px; height: 18px; }
.cl-check input:checked + .box { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.cl-check input:focus-visible + .box { outline: 3px solid var(--focus); outline-offset: 2px; }
.cl-check .txt { font-weight: var(--weight-bold); }
.cl-check input:checked ~ .txt { color: var(--text-2); }
.cl-row-check .cl-info { padding-left: calc(28px + var(--space-3)); }
.cl-task-in { display: grid; gap: var(--space-2); padding-left: calc(28px + var(--space-3)); }
@media (min-width: 600px) { .cl-task-in { grid-template-columns: minmax(0, 1fr) 240px; } }

.cl-addr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cl-addr-list a { display: grid; gap: 2px; min-height: 44px; padding: var(--space-3) var(--space-4); border-radius: var(--r); background: var(--surface-2); color: var(--text); text-decoration: none; }
.cl-addr-list a:hover { background: var(--surface-3); }
.cl-addr-list span { font-size: var(--text-sm); color: var(--text-2); }

.cl-next .card-foot { margin-top: var(--space-4); }

/* 사진 칸(묶음 아래 · 하자 항목 아래) */
.photo-slot { display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.photo-slot-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--text-2); }
.photo-slot-title svg { width: 18px; height: 18px; }
.cl-rows .photo-slot { padding-left: calc(28px + var(--space-3)); border-top: 0; padding-top: 0; padding-bottom: var(--space-3); }
.photo-slot-guest p { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-2); }
.photo-slot-guest svg { width: 18px; height: 18px; }
.photo-slot-guest a { display: inline-flex; align-items: center; min-height: 40px; color: var(--primary-ink); font-weight: var(--weight-bold); }
.cl-cmp .photo-grid { grid-template-columns: repeat(3, minmax(0, 64px)); }

/* 저장 줄 — 아래에 붙어 따라옴(휴대폰은 아래 탭 위) */
.cl-savebar { position: sticky; bottom: var(--space-3); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-2); }
.cl-status { font-size: var(--text-sm); color: var(--text-2); font-weight: var(--weight-bold); }
.cl-savebar .btn-row > .btn { flex: none; }
@media (max-width: 959px) { .has-tabbar .cl-savebar { bottom: calc(68px + env(safe-area-inset-bottom)); } }
/* 휴대폰: 한 줄로 얇게(상태 글 줄임 · 인쇄 버튼 숨김 — 인쇄는 PC 에서) */
@media (max-width: 599px) {
  .cl-savebar { flex-wrap: nowrap; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); }
  .cl-status { flex: 1 1 auto; min-width: 0; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cl-savebar .btn-row { flex-wrap: nowrap; }
  .cl-savebar [data-print] { display: none; }
}
.cl-danger { margin-top: var(--space-5); display: flex; justify-content: flex-end; }

/* ── 비교 ── */
.cl-cmp-pick { display: grid; gap: 0 var(--space-4); }
@media (min-width: 720px) { .cl-cmp-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cl-cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cl-cmp { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--text-sm); }
.cl-cmp th, .cl-cmp td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.cl-cmp thead th { position: sticky; top: 0; background: var(--surface-2); font-size: var(--text-md); }
.cl-cmp thead th a { color: var(--text); font-weight: var(--weight-heavy); text-decoration: none; display: inline-flex; min-height: 40px; align-items: center; }
.cl-cmp thead .p { display: block; color: var(--text-2); font-size: var(--text-xs); }
.cl-cmp tbody th[scope="row"] { width: 28%; color: var(--text-2); font-weight: var(--weight-medium); }
.cl-cmp tr.g th { background: var(--surface-2); font-weight: var(--weight-heavy); color: var(--text); }
.cl-cmp td.is-bad, .cl-bad-key { color: var(--danger); font-weight: var(--weight-bold); }
.cl-cmp td { white-space: pre-line; }

/* ── 인쇄: 엑셀처럼 표 한 장 ── */
@media print {
  @page { margin: 12mm; }
  .topbar, .foot, .tabbar, .notice-bar, .toasts, .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page, main { padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 0 !important; padding: 0 !important; border-radius: 0 !important; background: none !important; }
  .cl-head { grid-template-columns: 1fr auto; margin-bottom: 8pt; }
  .cl-head .page-head p:not(.card-eyebrow) { display: none; }
  .cl-progress { background: none; padding: 0; }
  .cl-pct { font-size: 20pt; }
  .bar { display: none; }
  .cl-form { gap: 0; margin: 0; }
  .cl-group { gap: 0; break-inside: auto; }
  .cl-group-title { font-size: 11pt; padding: 3pt 6pt; border: 1px solid #000; border-bottom: 0; background: #eee; }
  .cl-note { display: none; }
  .cl-rows { border: 1px solid #000; }
  .cl-row { display: grid !important; grid-template-columns: 150px minmax(0, 1fr); gap: 0; padding: 0; border-top: 1px solid #999 !important; break-inside: avoid; }
  /* 고르기(fieldset)는 legend 가 격자에 안 들어가서 왼쪽 띄우기로 같은 모양 */
  fieldset.cl-row { display: block !important; padding: 0; border: 0; border-top: 1px solid #999 !important; break-inside: avoid; }
  fieldset.cl-row::after { content: ""; display: table; clear: both; }
  fieldset.cl-row > legend { float: left; width: 150px; margin: 0; box-sizing: border-box; border-right: 1px solid #999; }
  fieldset.cl-row > .cl-ctl { margin-left: 150px; }
  .cl-rows > .cl-row:first-child { border-top: 0 !important; }
  .input-suffix { display: flex; align-items: baseline; gap: 2pt; max-width: none !important; }
  .input-suffix .input { width: 7em !important; flex: none; }
  .input-suffix .suffix { position: static !important; transform: none !important; color: #000; }
  .cl-link, .cl-row[data-type="addr"] .field-hint { display: none !important; }
  .input::placeholder { color: transparent; }
  .photo-slot { padding: 3pt 6pt; border-top: 1px solid #999; break-inside: avoid; }
  .photo-slot-title { font-size: 9pt; color: #000; }
  .photo-grid { grid-template-columns: repeat(8, 56pt); gap: 3pt; }
  .photo-grid li:nth-child(n+9) { display: none; }   /* 인쇄에는 칸마다 8장까지 */
  .photo-thumb img { transform: none !important; }
  input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { display: none; }
  .cl-label, .cl-row-check .cl-check { padding: 3pt 6pt; font-size: 10pt; }
  .cl-row .cl-label { border-right: 1px solid #999; }
  .cl-ctl { padding: 3pt 6pt; gap: 2pt; }
  .cl-row-check, .cl-row-wide { grid-template-columns: 1fr; }
  .input, textarea.input { border: 0 !important; background: none !important; padding: 0 !important; min-height: 0 !important; height: auto !important; font-size: 10pt; color: #000; }
  .input-suffix .suffix { position: static; }
  .chips { gap: 4pt; }
  .chip-opt input:not(:checked) + span { display: none; }
  .chip-opt span { min-height: 0; padding: 0; background: none !important; border: 0 !important; color: #000 !important; }
  .cl-check { min-height: 0; }
  .cl-check .box { width: 12pt; height: 12pt; border: 1px solid #000; }
  .cl-check input:checked + .box { background: #000; color: #fff; }
  .cl-info, .field-hint, .cl-task-in input:placeholder-shown { font-size: 8pt; }
  .cl-link svg { display: none; }
  .cl-next { margin-top: 8pt; }
  .cl-next .card-foot { display: none; }
  .cl-cmp-wrap { border: 0; overflow: visible; }
  .cl-cmp { min-width: 0; font-size: 9pt; }
  .cl-cmp th, .cl-cmp td { border: 1px solid #000; padding: 2pt 4pt; }
  .cl-cmp thead th { position: static; background: #eee; }
}