/*
 * Component styles — UIUX v2 §1.3 (14 core components).
 * Per CLAUDE.md §1, this file <= 200 lines.
 */

/* ---------------- Header ---------------- */
/* [FB-E4 ID133-b] sticky는 래퍼(#orbit-header, body 직계)에 걸어야 페이지 끝까지 따라온다 —
   .orbit-header 자체 sticky는 부모(#orbit-header) 높이가 자신과 같아 이동 공간 0이라 무효였음(전 페이지 공통 라이브 확인). */
#orbit-header { position: sticky; top: 0; z-index: 100; }
.orbit-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6); background: var(--surface);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* [FB-E4 ID133] sticky 기적용 — 그림자 추가 */
}
/* [FB-E4 ID134] 내비 CTA — 헤더 안 filled 버튼 글자색 보정 */
.orbit-nav .nav-cta-start { color: #fff; font-weight: 600; }
.orbit-nav .nav-cta-start:hover { color: #fff; }
/* P63_BRAND: SVG 로고가 inline 색상 갖고 있어 wrapper는 단순 link */
.orbit-logo, .atorni-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.orbit-logo:hover, .atorni-logo:hover { opacity: 0.85; }
.atorni-brand { font-family: -apple-system, 'Pretendard', sans-serif; font-weight: 700; color: var(--text); }
.orbit-nav { display: flex; gap: var(--sp-5); align-items: center; }
.orbit-nav a { font-size: var(--fs-md); color: var(--text-sub); font-weight: 500; }
.orbit-nav a:hover { color: var(--text); text-decoration: none; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: 10px 18px; border-radius: var(--radius);
  font-weight: 600; font-size: var(--fs-md); transition: all 0.15s;
  background: var(--surface-alt); color: var(--text);
  border: 1px solid var(--border);
}
/* [P63Q6_BTN_HOVER] generic .btn:hover only applies to neutral btn — colored variants get their own hover */
.btn:hover:not(:disabled):not(.btn-primary):not(.btn-violet):not(.btn-success):not(.btn-danger):not(.btn-ghost) { background: var(--neutral-light); }
.btn-primary { background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.18); }
.btn-primary:hover:not(:disabled) { background: var(--brand-gradient); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.32); filter: brightness(1.04); }
.btn-violet { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.btn-violet:hover:not(:disabled) { background: var(--brand-gradient); color: #fff; transform: translateY(-1px); filter: brightness(1.04); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-success:hover:not(:disabled) { background: var(--success); color: #fff; filter: brightness(1.06); }
.btn-danger  { background: var(--danger);  color: #fff; border-color: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; filter: brightness(1.06); }
.btn-ghost   { background: transparent; border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-alt); color: var(--text); }
.btn-block   { width: 100%; }
.btn-lg      { padding: 14px 24px; font-size: var(--fs-base); }
.btn-sm      { padding: 6px 12px;  font-size: var(--fs-sm); }

/* ---------------- Inputs ---------------- */
.input, .textarea, .select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--toss-blue); box-shadow: 0 0 0 3px var(--toss-blue-12);
}
.label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); margin-bottom: var(--sp-1); display: block; }

/* ---------------- Pills ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 600;
  background: var(--neutral-light); color: var(--text-sub);
}
.pill-success { background: var(--success-light); color: var(--success); }
.pill-warn    { background: var(--warn-light);    color: var(--warn); }
.pill-danger  { background: var(--danger-light);  color: var(--danger); }
.pill-info    { background: var(--info-light);    color: var(--info); }
.pill-violet  { background: var(--orbit-violet-12);color: var(--orbit-violet); }
.pill-blue    { background: var(--toss-blue-12);  color: var(--toss-blue); }

/* Free/paid badges (CLAUDE.md §5) */
.badge-free   { background: var(--free-bg); color: var(--free-text); padding: 3px 9px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.badge-paid   { background: var(--paid-bg); color: var(--paid-text); padding: 3px 9px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }

/* Urgent badge */
.badge-urgent {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--danger); color: #fff; font-size: var(--fs-xs); font-weight: 700;
  animation: pulse 2s ease-in-out 1;
}

/* Unread badge */
.badge-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; color: #fff;
}
.badge-unread-client { background: var(--danger); }
.badge-unread-bc     { background: var(--orbit-violet); }
.badge-unread-info   { background: var(--toss-blue); }

/* ---------------- Card ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-card);
}
.card-tight { padding: var(--sp-4); }
.card-flat  { box-shadow: none; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(25, 31, 40, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: var(--sp-4); animation: fadeIn 0.15s ease-out;
}
.modal {
  background: var(--surface); border-radius: var(--radius-lg);
  width: 100%; max-width: 520px; max-height: 90vh;
  overflow-y: auto; box-shadow: var(--shadow-lg);
  animation: fadeUp 0.2s ease-out;
}
.modal-header { padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-body   { padding: var(--sp-6); }
.modal-footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); display: flex; gap: var(--sp-2); justify-content: flex-end; }
.modal-close  { font-size: 22px; color: var(--text-mute); cursor: pointer; }

/* ---------------- Toast ---------------- */
.toast-stack { position: fixed; top: var(--sp-5); right: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 300; }
.toast {
  background: var(--text); color: #fff; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius); font-size: var(--fs-md); animation: fadeUp 0.2s ease-out;
  max-width: 380px; box-shadow: var(--shadow-md);
}
.toast-success { background: var(--success); }
.toast-warn    { background: var(--warn); }
.toast-danger  { background: var(--danger); }

/* ---------------- Lang switcher ---------------- */
.lang-switcher { position: relative; display: inline-block; }
.lang-current  { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.lang-current:hover { background: var(--neutral-light); }
.lang-menu     { position: absolute; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 160px; padding: 4px 0; margin-top: 4px; }
.lang-item     { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: var(--fs-md); }
.lang-item:hover { background: var(--surface-alt); }
.lang-item.active { color: var(--toss-blue); font-weight: 600; }

/* ---------------- Footer ---------------- */
.orbit-footer { text-align: center; padding: var(--sp-12) var(--sp-6); font-size: var(--fs-sm); color: var(--text-mute); border-top: 1px solid var(--border); margin-top: var(--sp-12); }
.orbit-brand  {
  font-family: var(--font-brand); font-style: italic; font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* P62H-3v2 chat payment card + coord action modal */
.chat-payment-card { display: flex; gap: 14px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #3182f6, #1f6feb); color: white; align-items: center; max-width: 380px; }
.cpc-icon { font-size: 32px; flex-shrink: 0; }
.cpc-body { flex: 1; }
.cpc-title { font-size: 11px; opacity: 0.85; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 2px; }
.cpc-label { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.cpc-amount { font-size: 18px; font-weight: 800; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.cpc-btn { background: white; color: #1f6feb; border: none; padding: 9px 16px; border-radius: 8px; font-weight: 800; font-size: 13px; cursor: pointer; width: 100%; }
.cpc-btn:hover { background: #f0f7ff; }
.cpc-send-btn { background: transparent; border: 1.5px solid var(--toss-blue); color: var(--toss-blue); padding: 6px 10px; border-radius: 8px; font-size: 16px; cursor: pointer; margin-right: 6px; }
.cpc-send-btn:hover { background: var(--toss-blue-12, #eaf3ff); }
.cpc-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9999; display: grid; place-items: center; }
.cpc-modal { background: white; padding: 24px; border-radius: 14px; min-width: 360px; max-width: 90vw; display: flex; flex-direction: column; gap: 10px; }
.cpc-modal h3 { margin: 0 0 6px; font-size: 18px; }
.cpc-modal label { font-size: 12px; color: var(--text-sub); font-weight: 600; }
.cpc-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* P63H EntryCard next-step infographic */
.entry-card-steps { margin: 12px 0; padding: 12px 14px; background: #f7f9fc; border-radius: 10px; border: 1px solid var(--border); }
.entry-card-steps-label { font-size: 11px; color: var(--text-sub); font-weight: 700; letter-spacing: 0.4px; margin-bottom: 8px; text-transform: uppercase; }
.entry-card-steps-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.entry-card-step { display: flex; gap: 6px; align-items: center; }
.entry-card-step-num { width: 18px; height: 18px; border-radius: 50%; background: var(--toss-blue, #3182f6); color: white; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }
.entry-card-step-text { font-size: 11.5px; color: var(--text); font-weight: 600; line-height: 1.3; }
.entry-card-step-arrow { color: var(--text-mute); font-size: 12px; font-weight: 700; }

/* P63H entry-card note (filing_500k 예약 안내) */
.entry-card-note { font-size: 11.5px; color: var(--text-sub); background: #eef4ff; border-left: 3px solid var(--toss-blue, #3182f6); padding: 8px 12px; margin: 10px 0; border-radius: 4px; line-height: 1.5; }

/* P62H-5 + P63H V2 header mailbox — Toss/배민 style corner badge */
.mailbox-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text); text-decoration: none; transition: background 0.15s; margin: 0 4px; }
.mailbox-btn:hover { background: var(--surface-alt); }
.mailbox-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--text); }
.mailbox-dot { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; background: #ef4444; color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 800; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2.5px #fff, 0 1px 3px rgba(0,0,0,0.18); line-height: 1; letter-spacing: -0.3px; transform-origin: center; }
.mailbox-dot.on { display: inline-flex; animation: mailbox-pulse 2.2s ease-in-out infinite; }
@keyframes mailbox-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2.5px #fff, 0 1px 3px rgba(0,0,0,0.18); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 2.5px #fff, 0 2px 8px rgba(239, 68, 68, 0.45); }
}


/* P63I-v2 Messenger floating widget — FB Messenger style */
.msger-root { position: fixed; bottom: 20px; right: 20px; z-index: 9998; pointer-events: none; }
.msger-window { width: 360px; height: 540px; background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08); pointer-events: auto; display: flex; flex-direction: column; overflow: hidden; animation: msger-slide-in 0.22s ease-out; }
@keyframes msger-slide-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 768px) { .msger-window { width: calc(100vw - 24px); height: calc(100vh - 24px); max-height: 90vh; } .msger-root { bottom: 12px; right: 12px; left: 12px; } }
.msger-header { padding: 12px 14px; background: linear-gradient(135deg, #3182f6, #1f6feb); color: white; display: flex; align-items: center; gap: 10px; }
.msger-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msger-header-title { font-weight: 800; font-size: 15px; letter-spacing: -0.2px; }
.msger-header-sub { font-size: 10.5px; opacity: 0.85; font-family: monospace; }
.msger-close, .msger-back, .msger-open-case { background: rgba(255,255,255,0.18); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 16px; font-weight: 700; text-decoration: none; flex-shrink: 0; transition: background 0.12s; }
.msger-close:hover, .msger-back:hover, .msger-open-case:hover { background: rgba(255,255,255,0.32); }
.msger-list, .msger-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.msger-list-body { flex: 1; overflow-y: auto; }
.msger-item { display: flex; gap: 10px; padding: 12px 14px; cursor: pointer; transition: background 0.12s; position: relative; align-items: center; border-bottom: 1px solid #f0f2f5; }
.msger-item:hover { background: #f7f9fc; }
.msger-item.unread { background: #fff5f5; }
.msger-item.unread:hover { background: #ffeded; }
.msger-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #3182f6, #7c3aed); color: white; font-size: 20px; display: grid; place-items: center; flex-shrink: 0; }
.msger-meta { flex: 1; min-width: 0; }
.msger-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.msger-name { font-size: 13.5px; font-weight: 700; color: #050505; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msger-time { font-size: 10.5px; color: #65676b; flex-shrink: 0; font-weight: 500; }
.msger-preview { font-size: 12px; color: #65676b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; line-height: 1.35; }
.msger-item.unread .msger-preview { color: #050505; font-weight: 600; }
.msger-badge { position: absolute; top: 14px; right: 14px; min-width: 18px; height: 18px; padding: 0 6px; background: #ef4444; color: white; border-radius: 999px; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px white; }
.msger-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f7f9fc; }
.msger-msg { max-width: 75%; padding: 8px 12px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.msger-msg.me { background: #3182f6; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.msger-msg.them { background: #e4e6eb; color: #050505; align-self: flex-start; border-bottom-left-radius: 4px; }
.msger-msg.sys { background: transparent; color: #65676b; font-size: 12px; align-self: center; text-align: center; max-width: 90%; padding: 4px 12px; }
.msger-msg.has-card { background: transparent; padding: 0; max-width: 85%; align-self: flex-start; }
.msger-pay-card { background: linear-gradient(135deg, #3182f6, #1f6feb); color: white; padding: 14px 16px; border-radius: 14px; }
.msger-pay-label { font-size: 12px; opacity: 0.9; margin-bottom: 4px; }
.msger-pay-amount { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.msger-pay-btn { display: block; text-align: center; background: white; color: #1f6feb; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 800; font-size: 13px; }
.msger-input-wrap { padding: 10px; border-top: 1px solid #e4e6eb; display: flex; gap: 8px; background: white; }
.msger-input { flex: 1; padding: 8px 14px; border: 1px solid #e4e6eb; border-radius: 999px; outline: none; font-size: 14px; background: #f0f2f5; }
.msger-input:focus { background: white; border-color: #3182f6; }
.msger-send { background: #3182f6; color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 14px; transition: background 0.12s; }
.msger-send:hover { background: #1f6feb; }
.msger-empty { padding: 40px 20px; text-align: center; color: #65676b; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.msger-empty .em { font-size: 48px; opacity: 0.35; margin-bottom: 10px; }
.msger-empty p { font-size: 13px; }
/* [MSG2_DM] person-based extras */
.msger-newchat { background: rgba(255,255,255,0.18); border: none; color: white; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 15px; font-weight: 700; flex-shrink: 0; transition: background 0.12s; }
.msger-newchat:hover { background: rgba(255,255,255,0.32); }
.msger-search-wrap { padding: 10px; border-bottom: 1px solid #e4e6eb; background: white; }
.msger-search { width: 100%; padding: 8px 14px; border: 1px solid #e4e6eb; border-radius: 999px; outline: none; font-size: 14px; background: #f0f2f5; }
.msger-search:focus { background: white; border-color: #3182f6; }
.msger-locked { padding: 12px 14px; border-top: 1px solid #e4e6eb; background: #f7f9fc; color: #65676b; font-size: 12.5px; text-align: center; }

/* [P63Q3_DATEPICKER] locale-aware date picker */
.dp-wrap { position: relative; display: block; width: 100%; }
.dp-input { width: 100%; cursor: pointer; padding-right: 36px; }
.dp-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 4px; cursor: pointer; font-size: 16px;
  opacity: .6; }
.dp-icon:hover { opacity: 1; }
.dp-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  width: 280px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); padding: 12px;
  user-select: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; }
.dp-nav { background: none; border: 0; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 4px 10px; border-radius: 6px; color: var(--text); }
.dp-nav:hover { background: var(--surface-alt); }
.dp-title { font-weight: 600; font-size: 14px; color: var(--text); }
.dp-wd { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px;
  font-size: 11px; color: var(--text-mute); text-align: center;
  padding: 4px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.dp-cell { aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; font-size: 13px; border-radius: 8px; color: var(--text); }
.dp-day { cursor: pointer; }
.dp-day:hover { background: var(--surface-alt); }
.dp-today { font-weight: 700; color: var(--brand-primary); }
.dp-sel { background: var(--brand-primary); color: #fff !important; }
.dp-sel:hover { background: var(--brand-primary); }
.dp-empty { visibility: hidden; }
.dp-time-row { display: flex; align-items: center; gap: 6px; padding: 8px 0;
  border-top: 1px solid var(--border); margin-top: 6px; font-size: 13px; }
.dp-time-sel { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); }
.dp-foot { display: flex; gap: 6px; justify-content: flex-end; padding-top: 8px;
  border-top: 1px solid var(--border); margin-top: 8px; }
.dp-foot-btn { background: none; border: 0; padding: 6px 10px; border-radius: 6px;
  cursor: pointer; font-size: 12px; color: var(--text-sub); }
.dp-foot-btn:hover { background: var(--surface-alt); }
.dp-today-btn { color: var(--brand-primary); font-weight: 600; }
.dp-done { color: var(--brand-primary); font-weight: 700; }
@media (max-width: 480px) { .dp-panel { width: 260px; } }

/* [P63Q5_COMING_SOON] */
.coming-card { max-width: 560px; margin: 32px auto; text-align: center;
  padding: 40px 28px; border-radius: 20px;
  background: linear-gradient(180deg, var(--surface), var(--surface-alt));
  border: 1px solid var(--border); box-shadow: 0 4px 24px rgba(0,0,0,.04); }
.coming-emoji { font-size: 56px; line-height: 1; margin-bottom: 16px; }
.coming-title { font-size: 22px; font-weight: 800; margin: 0 0 6px;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; }
.coming-svc { font-size: 14px; color: var(--text-mute); font-weight: 600;
  padding: 4px 12px; background: var(--surface-alt); border-radius: 999px;
  display: inline-block; margin-bottom: 14px; }
.coming-desc { color: var(--text-sub); line-height: 1.6; margin: 0 0 20px; font-size: 15px; }
.coming-meta { margin-bottom: 24px; }
.coming-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: rgba(124, 58, 237, 0.08); color: var(--brand-primary);
  border-radius: 999px; font-size: 13px; font-weight: 600; }
.coming-chip::before { content: '\1F4AC'; }
.coming-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.coming-actions .btn { min-width: 140px; height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 700; text-decoration: none; }
.coming-actions .btn-secondary { background: var(--surface); color: var(--text);
  border: 1px solid var(--border); }
.coming-actions .btn-secondary:hover { background: var(--surface-alt); }
@media (max-width: 480px) {
  .coming-card { padding: 28px 18px; margin: 20px 12px; }
  .coming-emoji { font-size: 44px; }
  .coming-title { font-size: 19px; }
}


/* [P64_U3_SD_CSS] */
/* SearchableDropdown — 검색 가능한 단일 선택 (피드백 ID 2, 6) */
.sd-wrap { position: relative; width: 100%; }
.sd-input { padding-right: 36px; cursor: text; }
/* [R13] 선택된 국기를 input 왼쪽에 SVG로 렌더 (Windows native font의 'KR' 이니셜 표시 회피) */
.sd-flag { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 16px; object-fit: contain; pointer-events: none; z-index: 1; }
.sd-has-flag .sd-input { padding-left: 44px; }
.sd-caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 4px 6px; cursor: pointer; font-size: 12px;
  color: var(--text-mute); }
.sd-caret:hover { color: var(--text); }
.sd-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); max-height: 280px; overflow-y: auto; padding: 4px 0; }
.sd-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  font-size: 14px; transition: background 0.1s; }
.sd-row:hover, .sd-row.hov { background: var(--surface-alt); }
.sd-row.sel { color: var(--brand-primary); font-weight: 600; }
.sd-row.sel.hov { background: var(--brand-primary-12); }
.sd-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-check { color: var(--brand-primary); font-weight: 800; flex-shrink: 0; }
.sd-empty { padding: 16px 12px; color: var(--text-mute); font-size: 13px; text-align: center; }


/* [P64_U6_TWEMOJI_CSS] */
/* Twemoji 자동 변환 이모지 — 인라인 사이즈·정렬 통일 */
img.emoji { height: 1em; width: 1em; vertical-align: -0.125em; display: inline-block; margin: 0 1px; }
.wizard-option img.emoji, .sd-row img.emoji { height: 1.05em; width: 1.05em; }

/* [FB2-4/ID154 B2b] 흑백 폴백 폐기(사용자 결정 2026-06-05 — "회색은 장례식장"): 미매핑 이모지 = 원본 컬러 유지,
 * B3 전수 매핑 완료로 모노톤 통일 달성. (.emoji-mono 마킹은 엔진에 잔존 — 커버리지 디버그용, 시각 효과 없음) */
/* [B2 절충] 라인 아이콘 본문=브랜드 보라(랜딩 .how-ico 동일) — 타이틀(h3) 그라데이션은 엔진이 svg 내 defs로 적용 */
.wz-ico { display: inline-flex; line-height: 0; vertical-align: -0.15em; margin: 0 1px; color: var(--brand-primary); }
.wz-ico svg { width: 1.05em; height: 1.05em; }


/* [P66_U13_DOC_UPLOAD_CSS] */
/* DocUploadInput — 위저드 단계 임시 업로드 (피드백 ID 3) */
.doc-upload { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; flex-wrap: wrap; }
.doc-upload-btn { font-size: 11px; padding: 4px 10px; border-radius: 6px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-sub); cursor: pointer; transition: all 0.12s; }
.doc-upload-btn:hover:not(:disabled) { background: var(--brand-primary-12); color: var(--brand-primary); border-color: var(--brand-primary); }
.doc-upload-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.doc-upload-info { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.doc-upload-progress { color: var(--brand-primary); font-weight: 700; }
.doc-upload-ok { font-weight: 700; }
.doc-upload-failed { font-weight: 600; }
.doc-upload-delete { font-size: 11px; padding: 2px 6px; min-width: 0; }


/* [ID68_WORDBREAK_GLOBAL] 한글 단어 중간 줄바꿈 방지 전역화 (체크아웃·사건상세·공용카드).
 * 입력창(input/textarea)·코드는 제외 — 값 줄바꿈 깨짐 방지. */
.btn, .card, .case-block, .label, .badge, .chip,
h1, h2, h3, h4, p, li {
  word-break: keep-all;
  overflow-wrap: break-word;
}