:root {
  --primary: #2c3e50;
  --bg: #f5f6fa;
  --border: #dcdde1;
  --gold: #d4af37;
  --ok: #27ae60;
  --warn: #e67e22;
  --bad: #c0392b;
}

* { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  background: var(--bg);
  margin: 0;
}

#app-container {
  max-width: 980px;
  margin: 0 auto;
  background: #fff;
  min-height: 100vh;
}

.app-header {
  background: var(--primary);
  color: #fff;
  padding: 1rem;
}

.hdr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.app-brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  text-decoration:none;
}
.app-logo{
  width:34px;
  height:34px;
  object-fit:contain;
}
.app-brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.app-title { margin: 0; font-size: 1.05rem; font-weight: 900; }
.app-sub { font-size: .85rem; opacity: .9; }

.hdr-actions { display: flex; gap: .5rem; }

.disclaimer {
  margin-top: .5rem;
  opacity: .95;
  line-height: 1.35;
  font-size: .95rem;
}

.steps-nav {
  display: flex;
  background: #eee;
  border-bottom: 1px solid var(--border);
}

.steps-nav button {
  flex: 1;
  padding: 1rem .5rem;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
}

.steps-nav button.active {
  background: #fff;
  border-bottom: 3px solid var(--primary);
}

.step-view { display: none; padding: 1.5rem; }
.step-view.active { display: block; }

.grid-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.grid-select button {
  padding: 1rem;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 700;
}

.grid-select button.selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,175,55,.25) inset;
}

.form-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

label { display: grid; gap: .5rem; font-weight: 600; }
select, input[type="number"], input[type="text"] {
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
}

.row { display: flex; gap: .75rem; margin-top: 1rem; }
.space-between { justify-content: space-between; }

.next-btn, #print-btn, .back-btn {
  background: var(--primary);
  color: #fff;
  padding: .85rem 1.25rem;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 700;
}

.back-btn { background: #6b7280; }

.ghost-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  padding: .55rem .85rem;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
}

.step-view .ghost-btn {
  border-color: var(--border);
  color: var(--primary);
}

.hint {
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: .9rem;
  margin-top: 1rem;
  background: #fafafa;
}

.mini-title { font-weight: 900; margin-bottom: .25rem; }

.guest-form {
  display: grid;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr auto;
  gap: .75rem;
  align-items: center;
  margin-top: 1rem;
}

.inline-check {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-weight: 700;
}

.guest-toolbar { margin-top: .5rem; }

.guest-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.guest-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.guest-list li:last-child { border-bottom: 0; }

.badge-rank {
  font-weight: 900;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.badge-rank.vip { border-color: var(--gold); }
.badge-rank.sheikh { border-color: #7f8c8d; }
.badge-rank.normal { border-color: #95a5a6; }

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.result-actions { display: flex; gap: .5rem; }

.risk-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
  background: #fafafa;
}

.risk-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.risk-title { font-weight: 900; }
.risk-score { font-weight: 900; font-size: 1.1rem; }

.risk-list { margin: .75rem 0 0; padding: 0 1.1rem; }
.risk-list li { margin: .25rem 0; }

.map-container {
  position: relative;
  width: 100%;
  height: 420px;
  background: #fdfdfd;
  border: 1px solid var(--border);
  overflow: hidden;
  border-radius: 12px;
  margin-top: 1rem;
}

.seat {
  position: absolute;
  width: 86px;
  height: 64px;
  background: #fff;
  border: 2px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: grab;
  user-select: none;
  text-align: center;
  padding: .25rem;
  border-radius: 12px;
}

.seat.sadr { border-color: var(--gold); border-width: 3px; background: #fffbf0; }
.seat.host { border-color: var(--ok); }

.protocol-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.checklist ul { margin: .5rem 0 0; }

@media (max-width: 860px) {
  .guest-form { grid-template-columns: 1fr 1fr; }
  .protocol-lists { grid-template-columns: 1fr; }
  .map-container { height: 520px; }
}

/* =========================
   PRINT (FINAL, FIT-TO-WIDTH)
   ========================= */
@media print {
  /* 프린터마다 비인쇄 영역이 달라서 여백+축소를 같이 건다 */
  @page {
    size: A4;
    margin: 10mm; /* 10~12mm 권장 */
  }

  html, body {
    background: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .no-print { display: none !important; }

  #app-container {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: auto !important;
    background: #fff !important;
  }

  /* Step3만 출력 */
  .step-view { display: none !important; }
  #step3.step-view { display: block !important; }

  /* ---- 강제 가로 맞춤(핵심) ----
     브라우저/프린터 조합에서 "잘림"을 없애는 가장 확실한 방식.
     기준폭(900px)을 A4 printable width에 맞춰 안전하게 축소한다. */
  #step3 {
    padding: 0 !important;
    width: 900px !important;
    margin: 0 !important;
    transform-origin: top right; /* RTL 기준 */
    transform: scale(0.83);      /* 안 잘리게 안전값. 너무 작으면 0.86~0.89로 */
  }

  /* 상단 영역 간격 약간 압축 */
  .result-header {
    margin: 0 0 4mm 0 !important;
    padding: 0 !important;
  }

  .risk-panel {
    margin: 0 0 4mm 0 !important;
    padding: 3mm 4mm !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    border-radius: 0 !important;
  }

  /* 맵은 페이지에 안전하게 들어오도록 */
  .map-container {
    margin: 0 0 4mm 0 !important;
    height: 110mm !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* 좌석 박스도 인쇄에 맞게 살짝 축소 */
  .seat {
    width: 76px !important;
    height: 56px !important;
    font-size: 10pt !important;
    border-radius: 8px !important;
  }

  .protocol-lists {
    margin-top: 0 !important;
    gap: 6mm !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .protocol-lists h4 { margin: 0 0 2mm 0 !important; }

  #serving-sequence,
  .checklist ul {
    margin: 0 !important;
    padding-right: 18px !important;
  }

  /* 페이지 분할 방지 */
  .risk-panel,
  .map-container,
  .protocol-lists,
  .protocol-lists > div,
  .result-header {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}