/* ================== Base / Reset ================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  line-height: 1.5;
}
img, video { max-width: 100%; height: auto; }

.auth-card { max-width: 420px; margin: 6rem auto; }
.container-narrow { max-width: 760px; margin: 0 auto; }
.con { max-width: 1080px; margin: 1.25rem auto; }
.conmax { max-width: 1200px; margin: 1.25rem auto; }
@media (max-width:576px){ .container-narrow, .con, .conmax { padding: 0 12px; } }

/* ================== Dashboard Tiles ================== */
.tile-btn{
  display:flex; align-items:center; justify-content:center;
  height:168px; border-radius:1rem;
  font-size:1.75rem; font-weight:700; color:#fff; text-decoration:none;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.08);
  transition:transform .08s ease, box-shadow .08s ease, filter .2s ease;
}
@media (min-width:768px){ .tile-btn{ height:180px; font-size:2rem; } }
@media (min-width:1200px){ .tile-btn{ height:200px; font-size:2.2rem; } }
.tile-btn:hover{ filter:brightness(1.03); text-decoration:none; }
.tile-btn:active{ transform:translateY(1px); }
.tile-sky{ background:linear-gradient(135deg,#7dd3fc,#38bdf8); }
.tile-orange{ background:linear-gradient(135deg,#ffb15a,#ff7a29); }

/* ================== Install List ================== */
.table.tbl-install td,
.table.tbl-install th { vertical-align: middle; padding: .45rem .5rem; }
.btn-xxs { padding: .1rem .45rem; font-size: .78rem; line-height: 1.1; }
.clamp-1 { display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.badge-confirmed { background:#20c997; }
.badge-pending { background:#adb5bd; color:#212529; }
.btn-step-done { background:#e9ecef; color:#495057; border-color:#e9ecef; }
.btn-step-todo { background:#0d6efd; color:#fff; border-color:#0d6efd; }
.btn-step-done:disabled { opacity:1; }
.col-install .small { line-height: 1.2; }

/* ========== 모바일(≤576px): 카드형 ========== */
@media (max-width:576px){
  .table.tbl-install thead { display:none; }
  .table.tbl-install { border-collapse:separate; border-spacing:0 10px; }
  .table.tbl-install tbody tr{
    display:grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "seq  staff"
      "place count"
      "inst  inst"
      "actions actions";
    row-gap: 6px;
    padding:12px 14px;
    border:1px solid #e9ecef;
    border-radius:12px;
    background:#fff;
    text-align:left;
  }
  .table.tbl-install tbody tr td{ display:block; border:0; padding:0; text-align:left; }

  .col-id { display:none !important; } /* 번호 컬럼 숨김 */

  .col-seq{ grid-area:seq; font-weight:600; }
  .col-staff{ grid-area:staff; color:#495057; text-align:right; }
  .col-place{ grid-area:place; }
  .col-count{ grid-area:count; white-space:nowrap; color:#6c757d; text-align:right; }
  .col-count::before{ content:" / "; color:#adb5bd; margin:0 6px; }

  /* 장소는 자연 줄바꿈 */
  .table.tbl-install .col-place .js-place{
    display:inline; font-weight:700; white-space:normal;
    overflow-wrap:anywhere; word-break:break-word;
    -webkit-line-clamp:initial!important; -webkit-box-orient:initial!important; overflow:visible!important;
    text-decoration:none;
  }

  /* 날짜: 설치일 + (작은 글씨) 수정일을 같은 블록에서 2줄 */
  .col-install{ grid-area:inst; font-size:.95rem; color:#495057; text-align:right!important; }

  /* 데스크톱용 수정일 TD는 모바일에서 숨김 */
  .col-updated{ display:none!important; }

  .col-actions{ grid-area:actions; }
  .col-actions .d-flex{ gap:10px; flex-wrap:wrap; justify-content:flex-start; }
  .col-actions .btn{ padding:.43rem .65rem; font-size:.9rem; line-height:1.2; }
}

/* ========== 태블릿(577–991.98px) ========== */
@media (min-width:577px) and (max-width:991.98px){
  .table.tbl-install th,
  .table.tbl-install td { padding: .35rem .4rem; }
  .col-id { display:none; }
  .col-updated { display:none; }
  .col-count { width: 60px; text-align:right; }
  .col-install { width: 120px; white-space:nowrap; text-align:right; }
  .col-actions { width: 220px; }
  .col-place .js-place { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
  .col-actions .d-flex { gap:4px; flex-wrap:wrap; }
  .col-actions .btn { padding:.22rem .48rem; font-size:.82rem; line-height:1.1; }
}

/* ========== 데스크톱(≥992px) ========== */
@media (min-width: 992px){
  .col-updated { white-space: nowrap; }
}

/* ========== 장소 폭 미세조정(선택) ========== */
@media (min-width: 576px) and (max-width: 767.98px){
  .table.tbl-install .col-place .js-place{ display:inline-block !important; width:12ch; white-space:normal; overflow-wrap:anywhere; word-break:break-word; -webkit-line-clamp:initial !important; -webkit-box-orient:initial !important; overflow:visible !important; }
}
@media (min-width: 768px) and (max-width: 991.98px){
  .table.tbl-install .col-place .js-place{ display:inline-block !important; width:14ch; white-space:normal; overflow-wrap:anywhere; word-break:break-word; -webkit-line-clamp:initial !important; -webkit-box-orient:initial !important; overflow:visible !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
  .table.tbl-install .col-place .js-place{ display:inline-block !important; width:16ch; white-space:normal; overflow-wrap:anywhere; word-break:break-word; -webkit-line-clamp:initial !important; -webkit-box-orient:initial !important; overflow:visible !important; }
}
@media (min-width: 1200px){
  .table.tbl-install .col-place .js-place{
    width:auto; display:-webkit-box !important;
    -webkit-line-clamp:1 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  }
}