/* 제목/설명 */
h1 { text-align:center; font-size:2rem; margin-top:2rem; color:var(--text-color); }
.description { text-align:center; font-size:1rem; margin-bottom:1.5rem; color:var(--text-secondary); }

/* 링크 (항상 포함) */
.logo { text-decoration:none; color:white; font-weight:bold; }
.logo:hover { opacity:0.8; }

/* 입력/옵션 래퍼 */
.select-wrapper {
  width:95%; max-width:800px; margin:0 auto 1rem auto;
  display:flex; flex-direction:column; gap:0.5rem;
}
.select-wrapper label { font-size:1rem; color:var(--text-color); }

/* 행 */
.row { display:grid; gap:0.5rem; }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 필드 */
.field { display:flex; flex-direction:column; gap:0.4rem; }
.field-label { font-size:0.95rem; color:var(--text-secondary); }

/* 입력 공통 */
textarea#qr-text {
  width:100%; height:clamp(100px, 22vh, 240px);
  padding:1.2rem; border-radius:10px; border:1px solid var(--border-color, #ccc);
  background:var(--card-bg); color:var(--text-color); box-sizing:border-box;
  font-size:1.05rem; line-height:1.6;
}
textarea#qr-text:focus { outline:none; border-color:var(--accent-color); }

input[type="number"], select, input[type="color"] {
  width:100%; padding:0.6rem; font-size:1rem; border-radius:8px;
  border:1px solid var(--border-color, #ccc); background:var(--card-bg);
  color:var(--text-color); box-sizing:border-box;
}

/* 토글 */
.toggle { display:flex; align-items:center; gap:0.5rem; }
.toggle input { width:auto; }

/* 결과 박스 */
#result {
  display:flex; flex-direction:column; align-items:center; gap:0.8rem;
  margin:1.5rem auto 2rem; padding:1rem; border-radius:10px;
  background:var(--card-bg); box-shadow:0 2px 6px rgba(0,0,0,0.1);
  width:90%; max-width:800px; box-sizing:border-box;
}
#qr-preview-wrap {
  padding:0.75rem; border-radius:12px; background:var(--bg-color);
  border:1px solid var(--border-color, #ddd);
}
#qr-preview { display:flex; align-items:center; justify-content:center; min-width:64px; min-height:64px; }

/* 버튼 */
.primary-btn, .secondary-btn {
  padding:0.6rem 0.9rem; border-radius:8px; border:1px solid var(--border-color, #ccc);
  background:var(--tag-bg); color:#fff; cursor:pointer; text-align:center;
}
.secondary-btn { background:#6c7a89; }
.primary-btn:hover, .secondary-btn:hover { opacity:0.9; }

.actions { display:flex; gap:0.5rem; flex-wrap:wrap; }

/* 다크 모드 */
html.dark-mode textarea#qr-text,
html.dark-mode input, html.dark-mode select {
  border-color:#555; background:var(--card-bg); color:var(--text-color);
}
html.dark-mode #qr-preview-wrap { border-color:#444; background:var(--card-bg); }