/* QR코드 생성기 도구 전용 스타일
   테마: 청록(teal) 계열 — "스캔/기술" 느낌을 살리면서
   국기(블루)·이모지(오렌지/블랙)·특수문자(보라)와는 확실히 다른 톤으로 구분 */

:root {
  --qr-primary: #0d9488;
  --qr-primary-dark: #0f766e;
  --qr-bg: #f7f7f7;
  --qr-card-bg: #ffffff;
  --qr-border: #ccebe6;
  --qr-text: #212529;
  --qr-text-muted: #53575e;
  --qr-radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--qr-bg);
  color: var(--qr-text);
  line-height: 1.6;
}

/* back-link을 position:fixed로 화면에 띄우면, 스크롤 중인 본문 텍스트가 그 아래를
   지나가는 순간마다 겹쳐 보이는 문제가 있었습니다(실사용 스크린샷으로 발견). 그래서
   버튼만 따로 띄우는 대신, 폭 전체를 덮는 불투명한 배경의 sticky 바(.top-bar) 안에
   버튼을 넣는 방식으로 바꿨습니다 — 그 바 아래로 지나가는 내용은 불투명 배경에
   완전히 가려지므로 어떤 화면 크기에서도 겹쳐 보이지 않습니다. */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background: var(--qr-bg);
}

/* PC처럼 넓은 화면에서는 스크롤을 올렸을 때 상단바 전체가 화면을 가리지 않도록,
   막대(.top-bar) 자체를 폭 전체가 아니라 버튼 크기만큼만 남기고 배경도 지웁니다.
   .back-link 자체가 이미 불투명한 배경(pill 버튼)을 갖고 있어서 겹침 문제 없이
   버튼만 떠 있는 것처럼 보입니다. */
@media (min-width: 768px) {
  .top-bar {
    width: fit-content;
    height: auto;
    padding: 12px 16px 0;
    background: transparent;
  }
}

.back-link {
  display: inline-block;
  padding: 6px 14px;
  background: var(--qr-card-bg);
  border: 1px solid var(--qr-border);
  border-radius: 999px;
  color: var(--qr-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.back-link:hover {
  color: var(--qr-primary);
}

.page-header {
  text-align: center;
  padding: 10px 16px 16px;
}

.page-header h1 {
  margin: 0 0 8px;
  font-family: "Encode Sans Expanded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  color: var(--qr-primary-dark);
}

.subtitle {
  margin: 0;
  color: var(--qr-text-muted);
  font-size: 1.1rem;
}

.tagline-extra {
  margin: 6px 0 0;
  color: var(--qr-text-muted);
  font-size: 0.9rem;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.qr-input-section {
  margin-top: 8px;
}

.qr-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.qr-category-tab {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--qr-border);
  border-radius: 999px;
  background: var(--qr-card-bg);
  color: var(--qr-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.qr-category-tab:hover {
  border-color: var(--qr-primary);
  color: var(--qr-primary-dark);
}

.qr-category-tab.is-active {
  background: var(--qr-primary);
  border-color: var(--qr-primary);
  color: #fff;
}

.qr-category-desc {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: var(--qr-text-muted);
}

.qr-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* .qr-form { display: flex }와 브라우저 기본 [hidden] { display: none } 규칙은
   상세도(specificity)가 같아서, 나중에 선언된 이 규칙이 항상 이겨버려 hidden 속성이
   무시되는 문제가 있었습니다. 그래서 [hidden]을 명시적으로 다시 덮어씁니다. */
.qr-form[hidden] {
  display: none;
}

.qr-field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--qr-text-muted);
  margin-bottom: 6px;
}

.qr-field input,
.qr-field select,
.qr-field textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: 1.1rem;
  border: 2px solid var(--qr-border);
  border-radius: var(--qr-radius);
  outline: none;
  background: var(--qr-card-bg);
  color: var(--qr-text);
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.qr-field textarea {
  resize: vertical;
}

.qr-field input:focus,
.qr-field select:focus,
.qr-field textarea:focus {
  border-color: var(--qr-primary);
}

.qr-field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qr-field-checkbox label {
  margin: 0;
  order: 2;
}

.qr-field-checkbox input {
  width: auto;
  order: 1;
}

/* 미리보기(왼쪽)와 디자인 설정(오른쪽)을 좌우로 나란히 볼 수 있게 감싸는 컨테이너입니다.
   좁은 화면(모바일 등)에서는 겹쳐 보이지 않도록 위아래로 쌓고, 화면이 충분히 넓을 때만
   나란히 배치합니다. */
.qr-workspace {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 680px) {
  .qr-workspace {
    flex-direction: row;
    align-items: flex-start;
  }

  .qr-preview-section {
    flex: 0 0 320px;
  }

  .qr-design-section {
    flex: 1;
    min-width: 0;
  }
}

.qr-preview-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-preview-box {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: var(--qr-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* QR이 아직 생성되기 전(빈 상태·에러 상태)에는 "여기에 결과가 나올 자리"라는 걸
   알 수 있게 은은한 배경+점선 테두리를 보여줍니다. #qr-preview 캔버스에 hidden
   속성이 붙어 있는 동안만(=QR이 없는 동안만) 적용되고, QR이 생기면 사라져서
   QR 이미지 외에 다른 장식이 섞이지 않습니다. */
.qr-preview-box:has(#qr-preview[hidden]) {
  background: var(--qr-card-bg);
  border: 1px dashed var(--qr-border);
}

.qr-preview {
  max-width: 100%;
  height: auto;
  display: block;
}

/* #qr-preview가 div가 아니라 canvas 자체라서, canvas의 기본 표시 방식(inline)과
   [hidden] { display:none } 규칙이 .qr-preview { display:block }과 상세도가 같아
   나중에 선언된 쪽이 이겨버리는 문제가 있었습니다(이 프로젝트에서 이미 여러 번 겪은
   패턴). hidden 상태에서 캔버스의 기본 크기(300×150)가 그대로 노출되면서 빈 상태
   문구 위치가 틀어져 보였습니다. */
.qr-preview[hidden] {
  display: none;
}

.qr-design-section {
  width: 100%;
}

.design-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border: none;
  background: none;
  color: var(--qr-primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.design-toggle-icon {
  transition: transform 0.15s ease;
}

.design-toggle[aria-expanded="true"] .design-toggle-icon {
  transform: rotate(180deg);
}

.qr-design-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
  padding: 16px;
  background: var(--qr-card-bg);
  border: 1px solid var(--qr-border);
  border-radius: var(--qr-radius);
}

/* [hidden] 속성과 .qr-design-panel { display:flex }는 상세도가 같아서 나중에
   선언된 쪽이 이겨 hidden이 무시되는 문제가 있었습니다(같은 프로젝트에서 이미
   두 번 겪은 버그라 이번엔 처음부터 명시적으로 덮어씁니다). */
.qr-design-panel[hidden] {
  display: none;
}

/* 화면이 충분히 넓어 미리보기와 나란히 볼 수 있을 때는 접이식 버튼 없이 설정 패널을
   항상 펼쳐서 보여줍니다 — 좌우로 보면서 바로 조정할 수 있게 하기 위함입니다.
   좁은 화면(모바일)에서는 세로 공간이 부족하므로 기존처럼 접이식으로 유지합니다. */
@media (min-width: 680px) {
  .design-toggle {
    display: none;
  }

  .qr-design-panel[hidden] {
    display: flex;
  }
}

.qr-design-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.qr-design-field label {
  font-size: 0.85rem;
  color: var(--qr-text-muted);
}

.qr-design-field input[type="color"] {
  width: 40px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  background: none;
  /* 브라우저 기본(UA 스타일시트) 테두리는 없애되, 흰색을 골랐을 때 패널 배경과
     완전히 같은 색이 되어 견본이 안 보이는 문제가 있어 옅은 테두리를 다시 넣었습니다.
     QR 테마 색(청록) 대신 무채색을 써서 실제 고른 색상에 영향을 주지 않게 합니다. */
  border: 1px solid #d1d5db;
}

/* input[type="color"]은 위처럼 input 자체의 border를 없애도, 브라우저가 색상 견본
   (swatch) 안쪽에 별도의 기본 테두리를 한 번 더 그려 넣습니다. 이건 일반 CSS border가
   아니라 브라우저 내부 의사 요소(pseudo-element)라서 따로 없애야 합니다. */
.qr-design-field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.qr-design-field input[type="color"]::-webkit-color-swatch {
  border: none;
}

.qr-design-field input[type="color"]::-moz-color-swatch {
  border: none;
}

.qr-design-field input[type="range"] {
  flex: 1;
  max-width: 160px;
  accent-color: var(--qr-primary);
}

.qr-design-field-checkbox {
  justify-content: flex-start;
}

.qr-design-field-checkbox input {
  width: auto;
  order: -1;
  margin-right: 8px;
  accent-color: var(--qr-primary);
}

.qr-design-warning {
  margin: 0;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.8rem;
}

.design-reset {
  align-self: flex-start;
  padding: 6px 14px;
  border: 1px solid var(--qr-border);
  border-radius: 999px;
  background: none;
  color: var(--qr-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.design-reset:hover {
  border-color: var(--qr-primary);
  color: var(--qr-primary-dark);
}

.qr-design-divider {
  height: 1px;
  background: var(--qr-border);
  margin: 4px 0;
}

.qr-logo-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px;
  border: 2px dashed transparent;
  border-radius: 10px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.qr-logo-section.is-drag-over {
  border-color: var(--qr-primary);
  background: var(--qr-bg);
}

.qr-logo-file-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--qr-text-muted);
}

.qr-logo-section input[type="file"] {
  font-size: 0.8rem;
  color: var(--qr-text-muted);
}

.qr-logo-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

#logo-thumbnail {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: var(--qr-card-bg);
}

.qr-logo-position-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.qr-logo-position-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--qr-border);
  border-radius: 999px;
  background: var(--qr-card-bg);
  color: var(--qr-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.qr-logo-position-btn:hover {
  border-color: var(--qr-primary);
  color: var(--qr-primary-dark);
}

.qr-logo-position-btn.is-active {
  background: var(--qr-primary);
  border-color: var(--qr-primary);
  color: #fff;
}

.qr-empty-message,
.qr-error-message {
  text-align: center;
  color: var(--qr-text-muted);
  font-size: 0.95rem;
  padding: 0 12px;
}

.qr-error-message {
  color: #dc2626;
}

.qr-download-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.qr-download-row button {
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 999px;
  background: var(--qr-primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.12s ease;
}

.qr-download-row button:hover:not(:disabled) {
  background: var(--qr-primary-dark);
}

.qr-download-row button:disabled {
  background: var(--qr-border);
  color: var(--qr-text-muted);
  cursor: not-allowed;
}

.qr-download-row .download-btn-svg {
  background: #78716c;
}

.qr-download-row .download-btn-svg:hover:not(:disabled) {
  background: #57534e;
}

.ads-container {
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qr-card-bg);
  border: 1px solid var(--qr-border);
  border-radius: var(--qr-radius);
  color: var(--qr-text-muted);
  font-size: 0.9rem;
}

.ads-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 160px;
  margin: 0;
  display: none;
  z-index: 5;
}

.ads-rail-left {
  left: 16px;
}

.ads-rail-right {
  right: 16px;
}

@media (min-width: 1052px) {
  .ads-rail {
    display: flex;
  }
}

.info-section {
  margin-top: 24px;
}

.info-section h2 {
  color: var(--qr-primary-dark);
  font-size: 1.35rem;
  margin-top: 32px;
}

.faq-list .faq-item {
  margin-bottom: 16px;
}

.faq-list dt {
  font-weight: 600;
  color: var(--qr-text);
  margin-bottom: 4px;
}

.faq-list dd {
  margin: 0;
  color: var(--qr-text-muted);
}

.footer-links {
  margin: 8px 0 0;
}

.footer-links a {
  color: var(--qr-text-muted);
  text-decoration: underline;
}

.footer-links a:hover {
  color: var(--qr-primary);
}

.page-footer {
  text-align: center;
  padding: 24px 16px 40px;
  color: var(--qr-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 1.7rem;
  }

  .qr-download-row {
    width: 100%;
  }

  .qr-download-row button {
    flex: 1;
  }
}

.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--qr-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(13, 148, 136, 0.3);
  transition: background 0.12s ease, transform 0.12s ease;
}

.scroll-top-btn:hover {
  background: var(--qr-primary-dark);
  transform: translateY(-2px);
}

/* [hidden] 속성과 .scroll-top-btn { display:flex }는 상세도(specificity)가 같아서
   나중에 선언된 쪽이 이겨 hidden이 무시되는 문제가 있었습니다(카테고리 폼에서 이미
   겪은 버그와 동일한 원인). 그래서 [hidden]을 명시적으로 다시 덮어씁니다. */
.scroll-top-btn[hidden] {
  display: none;
}