/* [사본] 원본 99.OnePlatform/public/css/one-ui.css 버전 20261022 — 2026-10-22 복사. 사본은 고치지 않는다: 원본을 고치고 버전을 올린 뒤 통째로 바꿔 넣는다. */
/* =====================================================================
 * ONE 플랫폼 공통 UI — 대화상자 · 모달 (one-ui.css)              버전 20261022
 *
 * js/one-ui.js 와 한 벌이다. 원본: 99.OnePlatform/public/css/one-ui.css
 * 각 시스템은 복사해서 **자기 CSS 뒤에** 링크한다(뒤에 와야 이 파일 규칙이 이긴다).
 *
 * [원칙]
 *  · 이름은 모두 .oui- 로 시작한다 — 그 시스템의 .modal · .btn 과 부딪히지 않게.
 *    버튼·제목은 .oui-dialog 아래로 한 번 더 좁혀(세기 0,2,0) 전역 button · h2 규칙을 이긴다.
 *  · 색은 아래 변수만 바꾸면 된다. 시스템 CSS 에서 :root { --oui-primary: #… } 로 덮는다.
 *  · 색은 hex/rgba 로 적는다 — oklch 를 모르는 옛 브라우저에서 버튼이 투명해지지 않게.
 *  · 모양을 JS 가 style="" 로 넣지 않는다(CSP 가 막는 시스템이 있다). 겹침 순서(z-index)만
 *    one-ui.js 가 CSSOM 으로 정한다.
 * ===================================================================== */
:root {
  --oui-primary: #255ebc;          /* 쉘 primary 버튼(oklch 50% .16 260)에 가까운 값 */
  --oui-primary-hover: #1d4d9e;
  --oui-primary-ring: rgba(37, 94, 188, .22);
  --oui-danger: #c53637;
  --oui-danger-hover: #a72b2c;
  --oui-text: #1f2330;
  --oui-text2: #646977;
  --oui-border: #dadde5;
  --oui-surface: #ffffff;
  --oui-muted: #f1f2f6;
  --oui-muted-hover: #e6e8ee;
  --oui-scrim: rgba(18, 20, 34, .45);
  --oui-radius: 14px;
}

/* ── 배경 ── */
.oui-back {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;                  /* 실제 값은 one-ui.js 가 겹친 순서대로 올린다 */
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--oui-scrim);
  overflow-y: auto;
  -webkit-tap-highlight-color: transparent;
  animation: oui-fade .12s ease-out;
}

/* ── 창 ── */
.oui-dialog {
  position: relative; box-sizing: border-box;
  width: 400px; max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto; overscroll-behavior: contain;
  margin: auto; padding: 22px 24px 18px;
  background: var(--oui-surface); color: var(--oui-text);
  border-radius: var(--oui-radius);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
  font-family: inherit; font-size: 14px; line-height: 1.6;
  text-align: left; letter-spacing: normal;
}
.oui-dialog *, .oui-dialog *::before, .oui-dialog *::after { box-sizing: border-box; }
.oui-dialog--prompt { width: 420px; }
/* 상자 자체가 포커스를 받아도(첫 포커스 자리) 테두리를 그리지 않는다. 기존 모달에도 붙는다. */
.oui-focus-host:focus { outline: none; }

.oui-dialog .oui-icon {
  width: 34px; height: 34px; margin: 0 0 12px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; line-height: 1;
  background: #e2eafa; color: var(--oui-primary);
}
.oui-dialog .oui-icon--ok   { background: #d8f1de; color: #1e7a3d; }
.oui-dialog .oui-icon--bad  { background: #fbe2de; color: #b42d2d; }
.oui-dialog .oui-icon--warn { background: #fcefd2; color: #94600a; }

.oui-dialog .oui-title {
  margin: 0 0 6px; padding: 0;
  font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--oui-text);
}
/* 줄바꿈(\n)을 그대로 보인다. 한글은 낱말 단위로 접고, 긴 주소·메일은 어디서든 접는다. */
.oui-dialog .oui-msg {
  margin: 0; font-size: 14px; line-height: 1.6; color: var(--oui-text);
  white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere;
}
.oui-dialog .oui-title + .oui-msg { color: var(--oui-text2); }

/* ── 입력칸 (prompt) ── */
.oui-dialog .oui-input {
  display: block; width: 100%; margin: 12px 0 0;
  padding: 9px 11px;
  font: inherit; font-size: 16px;  /* 16px 미만이면 iOS 가 화면을 확대한 채로 둔다 */
  line-height: 1.4; color: var(--oui-text); background: #fff;
  border: 1px solid var(--oui-border); border-radius: 8px;
  outline: none; box-shadow: none;
}
.oui-dialog .oui-input:focus { border-color: var(--oui-primary); box-shadow: 0 0 0 3px var(--oui-primary-ring); }
.oui-dialog .oui-input.oui-bad { border-color: var(--oui-danger); }
.oui-dialog .oui-err { display: none; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--oui-danger); }
.oui-dialog .oui-err.oui-on { display: block; }

/* ── 버튼 — [취소] [확인], 확인이 오른쪽 ── */
.oui-dialog .oui-actions {
  display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px;
  margin: 20px 0 0; padding: 0;
}
.oui-dialog .oui-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 72px; min-height: 36px; margin: 0; padding: 0 16px;
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; text-transform: none; letter-spacing: normal; text-decoration: none;
  color: var(--oui-text); background: var(--oui-muted);
  border: 1px solid var(--oui-border); border-radius: 8px;
  box-shadow: none; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.oui-dialog .oui-btn:hover { background: var(--oui-muted-hover); }
.oui-dialog .oui-btn--primary { color: #fff; background: var(--oui-primary); border-color: transparent; }
.oui-dialog .oui-btn--primary:hover { background: var(--oui-primary-hover); }
.oui-dialog .oui-btn--danger { color: #fff; background: var(--oui-danger); border-color: transparent; }
.oui-dialog .oui-btn--danger:hover { background: var(--oui-danger-hover); }
/* 키보드로 옮겨 다닐 때 어디에 있는지 보이게. :focus-visible 을 모르는 브라우저는 늘 보인다. */
.oui-dialog .oui-btn:focus { outline: 2px solid var(--oui-primary); outline-offset: 2px; }
.oui-dialog .oui-btn:focus:not(:focus-visible) { outline: none; }

/* ── 폰: 창을 꽉 채우고 버튼을 손가락 크기로 ── */
@media (max-width: 640px) {
  .oui-dialog { width: 100%; padding: 20px 18px 16px; }
  .oui-dialog--prompt { width: 100%; }
  .oui-dialog .oui-btn { flex: 1 1 0; min-height: 44px; font-size: 15px; }
}

/* ── 움직임 ──
   배경으로 닫히지 않는 창에서 배경을 누르면 살짝 흔든다('창이 떠 있다').
   등장 애니메이션은 배경에만 둔다 — 창(.oui-dialog)에 두면 흔들기가 끝날 때 등장이 다시 돈다. */
@keyframes oui-fade { from { opacity: 0; } to { opacity: 1; } }
/* [20261022] 흔들기는 transform 이 아니라 개별 속성 translate 로 한다.
   예전(20261021)엔 transform: scale() 이라, 시스템 모달이 transform: translate(-50%,-50%) 로
   가운데에 서 있으면 흔들리는 동안 그 값이 덮여 오른쪽 아래로 튀었다(ONE스케줄 .modal 에서 발견).
   translate 속성은 요소의 transform 과 따로 더해지므로 어떤 모달이든 제자리에서 흔들린다.
   (scale 속성은 기준점 때문에 큰 모달이 몇 px 밀려 쓰지 않는다) */
@keyframes oui-nudge {
  0%, 100% { translate: none; }
  25% { translate: -5px 0; }
  50% { translate: 4px 0; }
  75% { translate: -2px 0; }
}
.oui-nudge { animation: oui-nudge .28s ease-out !important; }
/* translate 속성을 모르는 옛 브라우저(크롬 104·사파리 14.1 전)는 예전 흔들기 — 그 경우만 위 문제가 남는다 */
@supports not (translate: 0) {
  @keyframes oui-nudge-legacy {
    0%, 100% { transform: none; }
    35% { transform: scale(1.015); }
    70% { transform: scale(.995); }
  }
  .oui-nudge { animation-name: oui-nudge-legacy !important; }
}
@media (prefers-reduced-motion: reduce) {
  .oui-back, .oui-nudge { animation: none !important; }
}