/* 공개 폼 페이지. [data-hm-root] 스코프의 --hm-* 변수만 쓴다.
   모바일 우선, 단일 컬럼, 큰 터치 대상. form.html(독립 페이지)과 관리
   화면의 미리보기(.hm-preview)가 함께 쓴다. index.html도 이 파일을
   미리보기용으로 싣는다. 바닥 3규칙(변수·box-sizing·[hidden], style.css와
   같은 값) 외의 모든 선택자는 .hm-pub 또는 .hm-preview 아래로 한정한다.
   범용 클래스(.hm-btn·.hm-field·.hm-note 등)를 전역으로 두면 로드 순서상
   뒤에 와 관리 화면의 style.css 값을 덮어쓴다(차단 회귀). */
[data-hm-root] {
  --hm-blue: #388CCC;
  --hm-red: #CF2C28;
  --hm-white: #FFFFFF;
  --hm-charcoal: #15191F;
  --hm-page: #FFFFFF;
  --hm-ink: #15191F;
  --hm-muted: rgba(21, 25, 31, 0.64);
  --hm-line: rgba(21, 25, 31, 0.14);
  --hm-wash: rgba(56, 140, 204, 0.12);
  --hm-warnbg: rgba(207, 44, 40, 0.08);
  --hm-radius: 10px;
  --hm-gap: 16px;
  background: var(--hm-page);
  color: var(--hm-ink);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  margin: 0;
  min-height: 100vh;
}
[data-hm-root] *, [data-hm-root] *::before, [data-hm-root] *::after {
  box-sizing: border-box;
}
[data-hm-root] [hidden] {
  display: none !important;
}
[data-hm-root] .hm-pub {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: grid;
  gap: var(--hm-gap);
}
[data-hm-root] .hm-pub .hm-pub-head,
[data-hm-root] .hm-preview .hm-pub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--hm-blue);
}
[data-hm-root] .hm-pub .hm-pub-logo,
[data-hm-root] .hm-preview .hm-pub-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}
[data-hm-root] .hm-pub .hm-pub-brand,
[data-hm-root] .hm-preview .hm-pub-brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
[data-hm-root] .hm-pub .hm-pub-brand small,
[data-hm-root] .hm-preview .hm-pub-brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--hm-muted);
  letter-spacing: 0;
}
[data-hm-root] .hm-pub .hm-pub-card,
[data-hm-root] .hm-preview .hm-pub-card {
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  padding: 18px 16px;
  margin: 0;
  background: var(--hm-page);
}
[data-hm-root] .hm-pub .hm-pub-card h1,
[data-hm-root] .hm-preview .hm-pub-card h1 {
  font-size: 20px;
  margin: 0 0 8px;
  line-height: 1.4;
}
[data-hm-root] .hm-pub .hm-pub-desc,
[data-hm-root] .hm-preview .hm-pub-desc {
  margin: 0 0 4px;
  color: var(--hm-muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
[data-hm-root] .hm-pub .hm-pub-step,
[data-hm-root] .hm-preview .hm-pub-step {
  font-size: 13px;
  color: var(--hm-muted);
  margin: 12px 0 0;
}
[data-hm-root] .hm-pub .hm-field,
[data-hm-root] .hm-preview .hm-field {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
[data-hm-root] .hm-pub .hm-field:last-child,
[data-hm-root] .hm-preview .hm-field:last-child {
  margin-bottom: 0;
}
[data-hm-root] .hm-pub .hm-qlabel,
[data-hm-root] .hm-preview .hm-qlabel {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
[data-hm-root] .hm-pub .hm-req,
[data-hm-root] .hm-preview .hm-req {
  color: var(--hm-red);
  font-weight: 700;
}
[data-hm-root] .hm-pub .hm-qdesc,
[data-hm-root] .hm-preview .hm-qdesc {
  margin: 0;
  font-size: 13px;
  color: var(--hm-muted);
  line-height: 1.6;
}
[data-hm-root] .hm-pub .hm-input,
[data-hm-root] .hm-preview .hm-input,
[data-hm-root] .hm-pub .hm-select,
[data-hm-root] .hm-preview .hm-select,
[data-hm-root] .hm-pub .hm-area,
[data-hm-root] .hm-preview .hm-area {
  font: inherit;
  color: var(--hm-ink);
  background: var(--hm-white);
  border: 1px solid var(--hm-line);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  min-height: 48px;
}
[data-hm-root] .hm-pub .hm-area,
[data-hm-root] .hm-preview .hm-area {
  min-height: 120px;
  resize: vertical;
}
[data-hm-root] .hm-pub .hm-input:focus-visible,
[data-hm-root] .hm-preview .hm-input:focus-visible,
[data-hm-root] .hm-pub .hm-select:focus-visible,
[data-hm-root] .hm-preview .hm-select:focus-visible,
[data-hm-root] .hm-pub .hm-area:focus-visible,
[data-hm-root] .hm-preview .hm-area:focus-visible {
  outline: 3px solid var(--hm-blue);
  outline-offset: 1px;
}
[data-hm-root] .hm-pub .hm-input[aria-invalid="true"],
[data-hm-root] .hm-preview .hm-input[aria-invalid="true"],
[data-hm-root] .hm-pub .hm-select[aria-invalid="true"],
[data-hm-root] .hm-preview .hm-select[aria-invalid="true"],
[data-hm-root] .hm-pub .hm-area[aria-invalid="true"],
[data-hm-root] .hm-preview .hm-area[aria-invalid="true"] {
  border-color: var(--hm-red);
  background: var(--hm-warnbg);
}
[data-hm-root] .hm-pub .hm-opts,
[data-hm-root] .hm-preview .hm-opts {
  display: grid;
  gap: 8px;
}
[data-hm-root] .hm-pub .hm-opt,
[data-hm-root] .hm-preview .hm-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hm-line);
  border-radius: 8px;
  padding: 12px;
  min-height: 48px;
  font-size: 15px;
  cursor: pointer;
}
[data-hm-root] .hm-pub .hm-opt input,
[data-hm-root] .hm-preview .hm-opt input {
  width: 20px;
  height: 20px;
  flex: none;
  accent-color: var(--hm-blue);
}
[data-hm-root] .hm-pub .hm-stars,
[data-hm-root] .hm-preview .hm-stars {
  display: flex;
  gap: 4px;
}
[data-hm-root] .hm-pub .hm-star,
[data-hm-root] .hm-preview .hm-star {
  font: inherit;
  font-size: 32px;
  line-height: 1;
  min-width: 48px;
  min-height: 48px;
  color: var(--hm-muted);
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
}
[data-hm-root] .hm-pub .hm-star[aria-pressed="true"],
[data-hm-root] .hm-preview .hm-star[aria-pressed="true"] {
  color: var(--hm-blue);
}
[data-hm-root] .hm-pub .hm-err,
[data-hm-root] .hm-preview .hm-err {
  margin: 0;
  font-size: 13px;
  color: var(--hm-red);
  line-height: 1.5;
}
[data-hm-root] .hm-pub .hm-form-err,
[data-hm-root] .hm-preview .hm-form-err {
  margin: 0 0 12px;
  padding: 12px;
  font-size: 14px;
  color: var(--hm-red);
  background: var(--hm-warnbg);
  border: 1px solid var(--hm-red);
  border-radius: 8px;
  line-height: 1.5;
}
[data-hm-root] .hm-pub .hm-h,
[data-hm-root] .hm-preview .hm-h {
  margin: 20px 0 8px;
  line-height: 1.4;
}
[data-hm-root] .hm-pub h2.hm-h,
[data-hm-root] .hm-preview h2.hm-h {
  font-size: 18px;
}
[data-hm-root] .hm-pub h3.hm-h,
[data-hm-root] .hm-preview h3.hm-h {
  font-size: 16px;
}
[data-hm-root] .hm-pub .hm-p,
[data-hm-root] .hm-preview .hm-p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}
[data-hm-root] .hm-pub .hm-hr,
[data-hm-root] .hm-preview .hm-hr {
  border: 0;
  border-top: 1px solid var(--hm-line);
  margin: 20px 0;
}
[data-hm-root] .hm-pub .hm-consent,
[data-hm-root] .hm-preview .hm-consent {
  border: 1px solid var(--hm-line);
  border-radius: var(--hm-radius);
  padding: 16px;
  display: grid;
  gap: 12px;
  margin: 8px 0 0;
}
[data-hm-root] .hm-pub .hm-consent dl,
[data-hm-root] .hm-preview .hm-consent dl {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.6;
}
[data-hm-root] .hm-pub .hm-consent dt,
[data-hm-root] .hm-preview .hm-consent dt {
  font-weight: 700;
}
[data-hm-root] .hm-pub .hm-consent dd,
[data-hm-root] .hm-preview .hm-consent dd {
  margin: 0;
  color: var(--hm-muted);
  white-space: pre-wrap;
}
[data-hm-root] .hm-pub .hm-check,
[data-hm-root] .hm-preview .hm-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  cursor: pointer;
}
[data-hm-root] .hm-pub .hm-check input,
[data-hm-root] .hm-preview .hm-check input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--hm-blue);
}
[data-hm-root] .hm-pub .hm-check small,
[data-hm-root] .hm-preview .hm-check small {
  display: block;
  color: var(--hm-muted);
  font-size: 13px;
}
[data-hm-root] .hm-pub .hm-pub-actions,
[data-hm-root] .hm-preview .hm-pub-actions {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
[data-hm-root] .hm-pub .hm-btn,
[data-hm-root] .hm-preview .hm-btn {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  min-height: 52px;
  border-radius: var(--hm-radius);
  border: 1px solid var(--hm-charcoal);
  background: var(--hm-charcoal);
  color: var(--hm-white);
  cursor: pointer;
  padding: 12px 16px;
}
[data-hm-root] .hm-pub .hm-btn-ghost,
[data-hm-root] .hm-preview .hm-btn-ghost {
  background: var(--hm-white);
  color: var(--hm-ink);
  border-color: var(--hm-line);
  font-weight: 400;
}
[data-hm-root] .hm-pub .hm-btn:disabled,
[data-hm-root] .hm-preview .hm-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
[data-hm-root] .hm-pub .hm-note,
[data-hm-root] .hm-preview .hm-note {
  margin: 0;
  font-size: 14px;
  color: var(--hm-muted);
  line-height: 1.6;
}
[data-hm-root] .hm-pub .hm-result,
[data-hm-root] .hm-preview .hm-result {
  text-align: center;
  padding: 24px 0;
  display: grid;
  gap: 12px;
}
[data-hm-root] .hm-pub .hm-result h1,
[data-hm-root] .hm-preview .hm-result h1 {
  font-size: 20px;
  margin: 0;
}
[data-hm-root] .hm-pub .hm-trap,
[data-hm-root] .hm-preview .hm-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
[data-hm-root] .hm-pub .hm-sr,
[data-hm-root] .hm-preview .hm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (min-width: 720px) {
  [data-hm-root] .hm-pub {
    padding-top: 32px;
  }
  [data-hm-root] .hm-pub .hm-pub-actions,
  [data-hm-root] .hm-preview .hm-pub-actions {
    grid-template-columns: 1fr 1fr;
  }
  [data-hm-root] .hm-pub .hm-pub-actions .hm-btn-wide,
  [data-hm-root] .hm-preview .hm-pub-actions .hm-btn-wide {
    grid-column: 1 / -1;
  }
}