/* 연속 번호 만들기 */

.seq {
  margin-top: 0.4rem;
}

/* ── 기준 텍스트 ── */
.seq-card {
  padding: 1.1rem 1.15rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.seq-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.seq-input {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.seq-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.seq-hint {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-sub);
}
.seq-hint-sm { margin-top: 0.45rem; font-size: 0.76rem; }

/* ── 늘릴 숫자 고르기 ── */
.seq-pick {
  margin-top: 0.95rem;
  padding: 0.75rem 0.85rem 0.8rem;
  background: var(--surface-2);
  border-radius: 10px;
}
.seq-pick[hidden] { display: none; }
.seq-pick-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-sub);
}
.seq-parts {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  line-height: 2;
  color: var(--text);
  /* 앞뒤 공백이 있는 텍스트도 보이는 그대로 유지한다 */
  white-space: pre-wrap;
  word-break: break-all;
}
.seq-part {
  padding: 0.2rem 0.4rem;
  font-family: inherit;
  font-size: inherit;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.seq-part:hover { border-color: var(--primary); }
.seq-part.is-active {
  color: #fff;
  background: var(--primary-solid);
  border-color: var(--primary-solid);
}

.seq-warn {
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-sub);
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 25%, transparent);
  border-radius: 10px;
}
.seq-warn[hidden] { display: none; }

/* ── 고른 숫자마다 한 줄 ── */
.seq-rules {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.seq-rules:empty { display: none; }

.seq-rule {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
/* 어느 숫자에 대한 줄인지 — 조각 칩과 같은 모양으로 맞춘다 */
.seq-rule-chip {
  flex: 0 0 auto;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--primary-solid);
  border-radius: 7px;
}
.seq-rule label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-sub);
}
.seq-rule input[type="number"] {
  width: 84px;
  min-height: 40px;
  padding: 0.4rem 0.55rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.seq-rule .seq-digits input[type="number"] { width: 70px; }
.seq-rule input[type="number"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

/* ── 옵션 ── */
/* ── 옵션 ── */
.seq-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.seq-options label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sub);
}
.seq-options input,
.seq-options select {
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.seq-options input:focus,
.seq-options select:focus,
.seq-digits input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

.seq-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.seq-check input { width: 18px; height: 18px; accent-color: var(--primary-solid); cursor: pointer; }

/* ── 결과 ── */
.seq-result {
  margin-top: 1.5rem;
}
.seq-result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.seq-result-head h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.seq-made {
  padding: 0.12rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-sub);
  background: var(--chip);
  border-radius: 999px;
}
.seq-result-actions {
  display: flex;
  gap: 0.45rem;
  margin-left: auto;
}
.seq-result-actions .btn { min-height: 44px; }

.seq-out {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  /* 탭·쉼표 구분일 때 한 줄이 길어지므로 가로 스크롤을 허용한다 */
  overflow-x: auto;
}
.seq-out:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}

@media (max-width: 480px) {
  .seq-rule { gap: 0.4rem 0.5rem; padding: 0.55rem 0.6rem; }
  .seq-rule input[type="number"] { width: 72px; }
  .seq-card { padding: 0.9rem; }
  .seq-parts { font-size: 0.95rem; }
  .seq-result-actions { width: 100%; margin-left: 0; }
  .seq-result-actions .btn { flex: 1 1 0; }
  .seq-out { font-size: 0.86rem; }
}