/* ==========================================================================
   qr-generator / style.css — 이 도구에만 필요한 것. 색·간격은 common.css 변수만.
   🔴 인라인 style 이 CSP 로 막혀 상태는 hidden·disabled 로만 바꿉니다.
   🔴 QR 은 다크 모드에서도 흰 바탕·검은 칸 그대로(뒤집으면 못 읽는 스캐너가 있음).
   ========================================================================== */

/* 넓은 화면: 입력 왼쪽 · QR 오른쪽(스크롤해도 따라옴). 좁은 화면: 위아래 */
.qr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-6);
  align-items: start;
}
.qr-result {
  position: sticky;
  top: var(--space-4);
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
@media (max-width: 860px) {
  .qr-layout { grid-template-columns: 1fr; }
  .qr-result { position: static; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
}

/* 종류 고르기: 라디오 4개를 버튼처럼 */
.qr-types { min-width: 0; margin: 0; padding: 0; border: 0; }
.qr-types > legend { padding: 0; }
.qr-types__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (max-width: 480px) {
  .qr-types__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.qr-type { position: relative; display: block; cursor: pointer; }
.qr-type input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.qr-type span {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: var(--weight-bold);
  text-align: center;
}
.qr-type input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.qr-type input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.qr-panel__note { margin: 0 0 var(--space-3); }
.qr-area { min-height: 140px; resize: vertical; font: inherit; line-height: 1.6; }

.qr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
}
.qr-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .qr-grid, .qr-grid--three { grid-template-columns: 1fr; }
}
.qr-options { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.qr-options > legend { float: left; width: 100%; padding: 0; }
.qr-options > legend + * { clear: both; }
.qr-options .field-hint { margin: var(--space-3) 0 0; }

.qr-check {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
  align-self: end;
  font-weight: var(--weight-bold);
  cursor: pointer;
}
.qr-check span { word-break: keep-all; }
.qr-check input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--color-primary); }
.text-input:disabled { opacity: 0.55; cursor: not-allowed; }

.qr-result .result-header .badge { align-self: flex-start; } /* 좁은 화면에서 배지가 가로로 늘어나지 않게 */

/* QR 그림: 늘 흰 바탕 */
.qr-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  margin-top: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.qr-svg { display: block; width: 100%; height: 100%; }
.qr-placeholder { margin: 0; padding: var(--space-5); color: #546274; text-align: center; }

.qr-warn { margin: var(--space-2) 0 0; color: var(--color-warning); font-weight: var(--weight-bold); }
.qr-actions { flex-wrap: wrap; margin-top: var(--space-4); }
.qr-actions .button { flex: 1 1 140px; }

.qr-payload { margin-top: var(--space-4); }
.qr-payload summary { display: flex; min-height: 44px; align-items: center; font-weight: var(--weight-bold); cursor: pointer; }
.qr-payload__text {
  max-height: 220px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.qr-scan-tip { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.qr-cherry { margin: var(--space-5) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.qr-cherry a { display: inline-flex; min-height: 44px; align-items: center; font-weight: var(--weight-bold); }

.qr-related { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.qr-related__title { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.qr-related__list { margin: 0; padding: 0; list-style: none; }
.qr-related__list a { display: flex; min-height: 44px; align-items: center; color: var(--color-primary); font-weight: var(--weight-bold); }
.qr-legal { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.qr-legal a { display: inline-flex; min-height: 44px; align-items: center; }

.qr-rules { padding-left: 1.4em; }
.qr-rules li + li { margin-top: var(--space-2); }

/* 빵부스러기 ‘홈’ 누르는 영역 44px (다른 도구와 같은 방식) */
.breadcrumbs a { min-width: 44px; justify-content: center; }

/* 인쇄: QR 그림만 첫 쪽 가운데 7cm (나머지는 자리도 차지하지 않게 display:none) */
@media print {
  .skip-link, .site-header, .hero, .section, .site-footer, .about-cherry, .notice, .qr-form, .qr-related, .qr-legal,
  .qr-result > :not(.qr-figure), .qr-placeholder { display: none !important; }
  .tool-shell { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; }
  .qr-layout { display: block; }
  .qr-result { position: static; padding: 0; border: 0; }
  .qr-figure { width: 70mm; margin: 20mm auto 0; border: 0; }
}