* { box-sizing: border-box; }
body {
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  margin: 0; padding: 12px; font-size: 13px; color: #1a1a1a; background: #fafafa;
}
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.header-actions { display: flex; align-items: center; gap: 4px; }
h1 { font-size: 15px; margin: 0; }
.link { background: none; border: none; cursor: pointer; font-size: 16px; }
.field { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.field.two { flex-direction: row; gap: 8px; }
.field.two > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
label { font-weight: 600; font-size: 12px; }
.dim { color: #999; font-weight: 400; }
input, select, textarea {
  width: 100%; padding: 7px 8px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 13px; font-family: inherit; background: #fff;
}
textarea { resize: vertical; line-height: 1.5; }
button.primary {
  width: 100%; padding: 9px; border: none; border-radius: 6px; background: #111; color: #fff;
  font-weight: 600; font-size: 13px; cursor: pointer; margin-bottom: 6px;
}
button.primary:disabled { background: #999; cursor: default; }
.status { font-size: 12px; color: #666; min-height: 16px; margin-bottom: 8px; white-space: pre-wrap; }
.status.err { color: #c0392b; }
.status.ok { color: #1e8449; }
.notice { background: #fff6d6; border: 1px solid #f0d264; padding: 8px; border-radius: 6px; margin-bottom: 10px; }
.hidden { display: none; }
.result { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.tag { display: inline-block; background: #eef2ff; color: #3b5bdb; border-radius: 12px; padding: 2px 10px; font-size: 11px; font-weight: 600; }
.block { margin-top: 8px; }
.blabel { font-size: 11px; font-weight: 700; color: #555; margin-bottom: 3px; }
.btext { font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.chips { display: flex; flex-direction: column; gap: 5px; }
.chip {
  text-align: left; background: #f3f4f6; border: 1px solid #dcdde0; border-radius: 6px;
  padding: 6px 8px; font-size: 12.5px; cursor: pointer; line-height: 1.4;
}
.chip:hover { background: #e7ebff; border-color: #b9c4ff; }
.sep { border: none; border-top: 1px solid #e2e2e2; margin: 16px 0 8px; }
h2 { font-size: 14px; margin: 0 0 8px; }
.inline { display: flex; gap: 6px; }
.inline input { flex: 1; }
button.mini { padding: 7px 12px; border: none; border-radius: 6px; background: #444; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
button.mini:disabled { background: #aaa; }
.products { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.product { display: flex; gap: 8px; align-items: center; border: 1px solid #dcdde0; border-radius: 6px; padding: 6px; cursor: pointer; background: #fff; }
.product.sel { border-color: #3b5bdb; background: #eef2ff; }
.product img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.product .pinfo { font-size: 12px; line-height: 1.35; }
.product .pprice { font-weight: 700; }
.rocket { color: #2f80ed; font-weight: 700; font-size: 11px; }
.picked { background: #fff; border: 1px solid #e2e2e2; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.picked input { margin-top: 6px; }

/* ===================================================================
   모바일(iOS) 보정 — 이 아래가 확장용 CSS와 다른 부분이다.
   =================================================================== */

/* 노치·홈바 영역 확보 (viewport-fit=cover 와 함께 동작) */
body {
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* iOS 사파리는 입력창 글자가 16px 미만이면 포커스 시 화면을 확대한다.
   확대되면 레이아웃이 틀어지고 되돌아오지 않아 반드시 16px 이상으로 둔다. */
input, select, textarea {
  font-size: 16px;
}

/* 터치 타깃을 손가락 크기(44px)에 맞춘다 */
button, select, input[type="file"] {
  min-height: 44px;
}
button.mini {
  min-height: 40px;
  padding: 8px 12px;
}
.link {
  min-width: 44px; min-height: 44px;
  font-size: 20px;
}

/* 좁은 화면에서 2단 배치는 답답하므로 세로로 편다 */
@media (max-width: 430px) {
  .field.two { flex-direction: column; }
  .inline { flex-wrap: wrap; }
}

/* 접이식 설정 섹션 */
.settings {
  border: 1px solid #d8dce6;
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 14px;
}
.settings h2 { font-size: 14px; margin: 0 0 10px; }

/* 본문 가독성: 폰에서는 기본 글자를 조금 키운다 */
body { font-size: 14px; }
label { font-size: 13px; }

/* 큰 화면(PC)에서는 가운데 정렬해 지나치게 늘어나지 않게 */
@media (min-width: 700px) {
  body { max-width: 620px; margin: 0 auto; }
}