/* ─── OurBox ─── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

.ob-shell {
  max-width: 620px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
  font-family: 'Noto Sans KR', sans-serif;
}

/* Hero */
.ob-hero { text-align: center; margin-bottom: 1.5rem; }
.ob-logo { display: inline-flex; align-items: baseline; gap: 1px; margin-bottom: .35rem; }
.ob-logo-our { font-size: 2rem; font-weight: 700; color: #2563EB; }
.ob-logo-box { font-size: 2rem; font-weight: 700; color: #1e293b; }
.ob-logo-sub {
  display: inline-block; font-size: .71rem; color: #64748b;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 20px; padding: 2px 10px; margin-bottom: .55rem;
}
.ob-desc { font-size: .84rem; color: #64748b; line-height: 1.75; }
.ob-desc strong { color: #1e293b; font-weight: 500; }
.ob-login-tip {
  display: inline-block; margin-top: .5rem;
  font-size: .77rem; color: #2563EB;
  background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: 8px; padding: .32rem .85rem;
}
.ob-login-tip a { color: #2563EB; font-weight: 700; }

/* Tabs */
.ob-tabs {
  display: flex; border-radius: 10px; overflow: hidden;
  border: 1px solid #e2e8f0; background: #fff; margin-bottom: 1.5rem;
}
.ob-tab {
  flex: 1; padding: .7rem 1rem; background: none; border: none;
  cursor: pointer; font-size: .9rem; font-weight: 500; color: #64748b;
  transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Noto Sans KR', sans-serif;
}
.ob-tab:first-child { border-right: 1px solid #e2e8f0; }
.ob-tab.active { background: #2563EB; color: #fff; }

.ob-panel { display: none; }
.ob-panel.active { display: block; }

/* Card */
.ob-card {
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 12px; overflow: hidden; margin-bottom: .875rem;
}
.ob-card-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e2e8f0; }
.ob-card-title { font-size: 1rem; font-weight: 700; color: #1e293b; }
.ob-card-desc { font-size: .8rem; color: #64748b; margin-top: 3px; line-height: 1.55; }
.ob-card-body { padding: 1.25rem 1.5rem; }
.ob-badge {
  display: inline-block; font-size: .72rem; padding: 2px 8px;
  border-radius: 20px; font-weight: 500; margin-bottom: .35rem;
  background: #EFF6FF; color: #2563EB;
}

/* Compose */
.ob-compose {
  border: 1.5px solid #e2e8f0; border-radius: 12px;
  overflow: hidden; background: #fff; margin-bottom: 1rem;
}
.ob-compose-memo textarea {
  width: 100%; border: none; outline: none;
  font-size: .92rem; color: #1e293b; resize: none; min-height: 88px;
  font-family: 'Noto Sans KR', sans-serif; background: transparent;
  line-height: 1.7; padding: 1rem;
}
.ob-char-count {
  text-align: right; font-size: .72rem; color: #94a3b8;
  padding: 0 1rem .45rem; margin-top: -4px;
}
.ob-compose-divider { height: 1px; background: #e2e8f0; }
.ob-compose-file {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 1rem; cursor: pointer; transition: background .15s;
}
.ob-compose-file:hover { background: #f8fafc; }
.ob-compose-file.has-file .ob-file-main { color: #16a34a; font-weight: 700; }
.ob-file-icon { font-size: 1.25rem; flex-shrink: 0; }
.ob-file-label { flex: 1; }
.ob-file-main { font-size: .84rem; color: #64748b; font-weight: 500; }
.ob-file-sub { font-size: .73rem; color: #94a3b8; margin-top: 1px; }
.ob-file-remove {
  background: none; border: none; font-size: .77rem;
  color: #dc2626; cursor: pointer; padding: 4px 8px;
  font-family: 'Noto Sans KR', sans-serif;
}

/* Section sep */
.ob-section-sep {
  font-size: .77rem; font-weight: 700; color: #64748b;
  margin-bottom: .65rem; padding-bottom: .38rem;
  border-bottom: 1px solid #e2e8f0; margin-top: .25rem;
}
.ob-field-label { font-size: .82rem; font-weight: 500; color: #64748b; margin-bottom: .5rem; }

/* Radio grid */
.ob-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 1rem; }
.ob-radio {
  border: 1.5px solid #e2e8f0; border-radius: 8px;
  padding: .42rem .3rem; cursor: pointer; transition: all .15s;
  text-align: center;
}
.ob-radio span { font-size: .82rem; font-weight: 700; color: #1e293b; }
.ob-radio.selected { border-color: #2563EB; background: #EFF6FF; }
.ob-radio.selected span { color: #2563EB; }

/* Toggle */
.ob-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem;
}
.ob-toggle-info { flex: 1; margin-right: 1rem; }
.ob-toggle-label { font-size: .85rem; font-weight: 700; color: #1e293b; }
.ob-toggle-sub { font-size: .73rem; color: #64748b; margin-top: 2px; }
.ob-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.ob-switch input { opacity: 0; width: 0; height: 0; }
.ob-slider {
  position: absolute; inset: 0; background: #e2e8f0;
  border-radius: 24px; cursor: pointer; transition: .2s;
}
.ob-slider:before {
  content: ''; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s;
}
.ob-switch input:checked + .ob-slider { background: #2563EB; }
.ob-switch input:checked + .ob-slider:before { transform: translateX(20px); }

/* Button */
.ob-btn-primary {
  width: 100%; padding: .7rem; border: none; border-radius: 8px;
  font-size: .95rem; font-weight: 700; cursor: pointer;
  background: #2563EB; color: #fff; transition: all .15s;
  font-family: 'Noto Sans KR', sans-serif; margin-bottom: 0;
}
.ob-btn-primary:hover { background: #1d4ed8; }
.ob-btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }

/* Progress */
.ob-progress { margin: .9rem 0; display: none; }
.ob-progress.show { display: block; }
.ob-prog-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.ob-prog-label { font-size: .82rem; font-weight: 500; color: #1e293b; }
.ob-prog-pct { font-size: .82rem; font-weight: 700; color: #2563EB; }
.ob-prog-track { width: 100%; height: 9px; background: #e2e8f0; border-radius: 99px; overflow: hidden; }
.ob-prog-bar { height: 100%; width: 0%; background: #2563EB; border-radius: 99px; }
.ob-bar-green { background: #16a34a !important; }
.ob-prog-status { font-size: .76rem; color: #64748b; margin-top: 4px; min-height: 17px; }

/* Notices */
.ob-notice {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: .65rem 1rem;
  font-size: .78rem; color: #78350f; margin-top: 1rem; line-height: 1.6;
}
.ob-notice-blue {
  background: #EFF6FF; border: 1px solid #BFDBFE;
  border-radius: 8px; padding: .65rem 1rem;
  font-size: .78rem; color: #1e3a8a; margin-top: .75rem; line-height: 1.6;
}
.ob-notice-blue strong { color: #2563EB; }
.ob-warn {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; padding: .65rem 1rem;
  font-size: .78rem; color: #991b1b; margin-top: .75rem;
}

/* Steps */
.ob-steps { display: flex; margin-bottom: 1.2rem; }
.ob-step { flex: 1; text-align: center; padding: .45rem .2rem; font-size: .71rem; color: #64748b; position: relative; }
.ob-step.done { color: #2563EB; }
.ob-step-num {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid #e2e8f0; display: flex;
  align-items: center; justify-content: center;
  font-size: .69rem; font-weight: 700; margin: 0 auto 3px;
}
.ob-step.done .ob-step-num { border-color: #2563EB; background: #2563EB; color: #fff; }
.ob-step-line { position: absolute; top: 17px; left: 50%; right: -50%; height: 1.5px; background: #e2e8f0; }
.ob-step:last-child .ob-step-line { display: none; }

/* Code Reveal */
.ob-code-reveal {
  background: #EFF6FF; border: 2px solid #BFDBFE;
  border-radius: 14px; padding: 1.5rem 1.5rem 1.25rem;
  text-align: center; margin-bottom: .875rem;
}
.ob-code-eyebrow { font-size: .77rem; font-weight: 500; color: #2563EB; margin-bottom: .5rem; }
.ob-code-big { font-size: 3rem; font-weight: 700; letter-spacing: .35em; color: #2563EB; margin-bottom: .3rem; line-height: 1.1; }
.ob-code-expiry { font-size: .75rem; color: #64748b; margin-bottom: .85rem; }
.ob-code-badges { display: flex; gap: 5px; justify-content: center; margin-bottom: .85rem; flex-wrap: wrap; }
.ob-cbadge {
  font-size: .71rem; padding: 3px 9px; border-radius: 20px;
  background: #fff; border: 1px solid #BFDBFE; color: #2563EB;
}
.ob-code-instr {
  background: #fff; border: 1px solid #BFDBFE; border-radius: 8px;
  padding: .75rem 1rem; font-size: .82rem; color: #1e293b;
  line-height: 1.75; margin-bottom: 1rem; text-align: left;
}
.ob-code-instr strong { color: #2563EB; }
.ob-copy-btn {
  padding: .5rem 1.4rem; background: #2563EB; color: #fff;
  border: none; border-radius: 8px; font-size: .85rem; font-weight: 700;
  cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
}
.ob-copy-btn:hover { background: #1d4ed8; }

/* OTP */
.ob-otp-row { display: flex; gap: 8px; justify-content: center; margin-bottom: .6rem; }
.ob-otp-cell {
  width: 46px; height: 54px; border: 1.5px solid #e2e8f0;
  border-radius: 10px; font-size: 1.6rem; font-weight: 700;
  text-align: center; color: #1e293b; background: #fff;
  outline: none; font-family: inherit; transition: border-color .2s, box-shadow .2s;
  caret-color: transparent;
}
.ob-otp-cell:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ob-otp-cell.filled { border-color: #2563EB; background: #EFF6FF; }

.ob-hint { font-size: .76rem; color: #64748b; margin-top: .5rem; text-align: center; }

/* Result */
.ob-result { border: 1px solid #bbf7d0; border-radius: 10px; overflow: hidden; margin-top: .75rem; }
.ob-result-memo { padding: .85rem 1rem; background: #f0fdf4; }
.ob-result-memo-label { font-size: .73rem; font-weight: 700; color: #16a34a; margin-bottom: .4rem; }
.ob-result-memo-text { font-size: .88rem; color: #1e293b; line-height: 1.75; white-space: pre-wrap; }
.ob-result-file {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1rem; background: #fff;
  border-top: 1px solid #bbf7d0; cursor: pointer;
}
.ob-result-file:hover { background: #f0fdf4; }
.ob-result-file-icon { font-size: 1.25rem; }
.ob-result-file-name { font-size: .84rem; font-weight: 500; color: #16a34a; }
.ob-result-file-sub { font-size: .72rem; color: #64748b; }
.ob-result-file-dl { margin-left: auto; font-size: .82rem; color: #16a34a; font-weight: 500; }
.ob-burn-timer {
  padding: .55rem 1rem; background: #fef2f2;
  border-top: 1px solid #fecaca; font-size: .81rem;
  color: #dc2626; font-weight: 500; text-align: center;
}
.ob-result-expiry {
  padding: .5rem 1rem; background: #fff;
  border-top: 1px solid #bbf7d0; font-size: .75rem;
  color: #64748b; text-align: center;
}

/* Deleted / Expired */
.ob-deleted {
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 10px; padding: 1.1rem;
  text-align: center; margin-top: .75rem;
}
.ob-deleted-icon { font-size: 1.9rem; margin-bottom: .3rem; }
.ob-deleted-title { font-size: 1rem; font-weight: 700; color: #dc2626; }
.ob-deleted-sub { font-size: .77rem; color: #7f1d1d; margin-top: 3px; line-height: 1.6; }

.ob-expired {
  background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 1.1rem;
  text-align: center; margin-top: .75rem;
}
.ob-expired-icon { font-size: 1.8rem; margin-bottom: .3rem; }
.ob-expired-title { font-size: .95rem; font-weight: 700; color: #64748b; }
.ob-expired-sub { font-size: .78rem; color: #64748b; margin-top: .4rem; line-height: 1.65; }
.ob-expired-sub a { color: #2563EB; font-weight: 500; }

/* History */
.ob-history-item {
  padding: .75rem 0; border-bottom: 1px solid #e2e8f0;
  display: flex; align-items: flex-start; gap: .75rem;
}
.ob-history-item:last-child { border-bottom: none; }
.ob-history-code { font-size: 1.1rem; font-weight: 700; color: #2563EB; letter-spacing: .15em; }
.ob-history-meta { font-size: .76rem; color: #64748b; margin-top: 2px; }
.ob-history-status { margin-left: auto; font-size: .73rem; padding: 2px 8px; border-radius: 20px; }
.ob-history-ok { background: #f0fdf4; color: #16a34a; }
.ob-history-exp { background: #f8fafc; color: #64748b; }
.ob-history-del { background: #fef2f2; color: #dc2626; }