/* ============================================================================
 * 공용 다이얼로그 타입 (2026-09-09) — OP 와 같은 이름·같은 규칙, 마크업만 PP 것.
 *
 * 퍼블 정본은 pages/guide/popup.html 의 "알림형 · 아이콘"(.popup-msg = 아이콘 40 + 안내, 가운데).
 * 아이콘은 PP 방식 그대로 mask + currentcolor 라 색은 .popup-msg-icon 의 color 로만 준다.
 * 어떤 타입이 어떤 아이콘·제목·버튼을 갖는지는 partner-ui.js 의 DIALOG_TYPES 한 표에 있다.
 *
 * 🔴 --y-500 은 PP 퍼블 팔레트에 없다(p·db·n·r·g·b 뿐). OP 는 이미 같은 값을 갖고 있고,
 *    두 포털의 알림 체계를 맞추려면 "주의(주황)" 자리가 필요해 여기서만 정의한다.
 *    벤더본(common.css)에 넣으면 퍼블 원본과 드리프트가 난다 — 반드시 이 파일에 둔다.
 * ========================================================================== */
:root {
  --y-500: #ee7926;
}

.ico-bell {
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/bell.svg") center/contain no-repeat;
          mask: url("/img/icons/line/bell.svg") center/contain no-repeat;
}

.ico-caution {
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/caution.svg") center/contain no-repeat;
          mask: url("/img/icons/line/caution.svg") center/contain no-repeat;
}

/* 심각도는 색이, 종류는 도형이 말한다.
   notice 종(주황) · success 원+체크(퍼블 정본색) · warning 원+느낌표(주황) · error 삼각+느낌표(빨강) */
.partner-common-modal-box[data-dialog-type="notice"]  .popup-msg-icon { color: var(--y-500); }
.partner-common-modal-box[data-dialog-type="warning"] .popup-msg-icon { color: var(--y-500); }
.partner-common-modal-box[data-dialog-type="error"]   .popup-msg-icon { color: var(--r-500); }
/* success 는 퍼블 기본색(.popup-msg-icon { color: var(--p-600) })을 그대로 쓴다 — 덮지 않는다. */

/* 아이콘이 붙는 타입만 퍼블 알림형 배치가 된다(.popup-msg 를 JS 가 얹는다). */
.partner-common-modal-text.popup-msg { width: 100%; }

/* [손수 작성 파일 — scope-css.js 생성물 아님]
 * 파트너포털 화면 보정.
 *
 * 2026-08-31 화면 검수(`docs/PP_화면검수_디자인레이아웃_20260831.md`)에서 나온 것 중
 * **CSS 로 끝나는 것**만 여기 둔다. 헤더 보정은 `header-pub.css` 가 따로 담당한다.
 *
 * 규칙 — 항목마다 ① 왜 ② 실측 근거 ③ 철거조건을 남긴다.
 *   퍼블 벤더본(`pp-pub-scoped.css`·`pages/*-pub.css`)은 **고치지 않는다.** 다음 드롭에 덮이기 때문이다.
 *   그래서 보정은 전부 이 파일에서 '덧쓰기' 로 한다(로드 순서상 벤더본 뒤).
 */

/* ── 1) 표 넘침 기준 — 칸보다 긴 값은 자르지 않고 줄바꿈한다 (2026-09-03 확정)
 * OP·PP 공통 기준. OP 는 op-bridge.css 의 같은 이름 블록이 담당한다.
 *   · nowrap / 말줄임 예외 0개 — 값이 화면에서 사라지지 않게 한다
 *   · overflow-wrap: anywhere — 공백 없는 긴 값(ID·이메일·파일명)도 칸 안에서 꺾는다
 *   · body 의 word-break: keep-all 은 그대로 — 한글은 어절 단위로 꺾인다
 *
 * ★종전 이 자리에 `.td-phone { white-space: nowrap }` 이 있었다. 전화번호가
 *   `010-0000-` / `0000` 으로 갈리는 걸 막던 규칙인데, 예외 0개 기준에 따라 걷어냈다.
 *   예외를 두면 그 열은 다시 말줄임(값 손실)이나 넘침 중 하나를 골라야 하고,
 *   행 높이는 어차피 그 행에서 가장 긴 셀이 정하므로 이득이 없다.
 *   ★근본 원인은 12열을 1440px 에 밀어 넣은 열 구성이다 — 좁아서 갈리는 화면은
 *   CSS 가 아니라 열 폭으로 푼다.
 *
 * ★전제 — 어떤 열도 60px 아래로 내려가지 않게 colgroup 을 짠다. 그보다 좁아지면
 *   anywhere 가 한글 어절도 중간에서 끊는다(실측 경계: 담당업무 열 63px 유지 / 54px 깨짐).
 *   운영 최소 폭(#wrap min-width 1600px)에서는 도달하지 않는다.
 */
/* ★긴 값 열에만 준다 — 전 셀에 주면 그 열의 최소폭이 1글자가 돼
 * table-layout: auto 가 짧은 코드 열까지 쪼그라뜨린다(OP 실측: 분류 62→52px, LOC/L 로 깨짐).
 * 공백이 없어 스스로 못 꺾는 값(ID·이메일·파일명)이 들어가는 열에만 .td-break 를 붙인다.
 *
 * ★2026-09-03 — 여기서 `.left` 를 뺐다. 정렬과 줄바꿈은 서로 다른 판단이라 한 클래스에
 *   묶으면 안 된다. `.left` 는 정렬(text-align: left)만 주는 클래스인데 anywhere 까지
 *   얹혀 있으면, 이름·부서명·담당업무에 왼쪽정렬을 주는 순간 한글이 어절 중간에서 끊긴다. */
.pp-pub .table td.td-title,
.pp-pub .table td.td-break,
.pp-pub .table th.td-break,
.pp-pub .info-table td.td-break {
  overflow-wrap: anywhere;
}

/* ★긴 값 열에는 바닥을 준다 — 이 열들만.
 * anywhere 는 그 열의 최소폭을 1글자로 낮추므로, 바닥이 없으면 table-layout: auto 가
 * 그 열을 끝까지 짜낸다(실측 user/partner 이메일 59px = 7줄). 바닥 120px 면 3줄로 줄고
 * 나머지 10열 폭은 1px 도 안 변한다(표폭 1002→1063).
 * ⚠ 전 셀에 min-width 를 주면 안 된다 — 짧은 열이 필요 없는 폭을 붙잡아 긴 열을 되레 좁힌다. */
.pp-pub .table td.td-title,
.pp-pub .table td.td-break {
  min-width: 120px;
}

/* ── 표 열 정렬 기준 (2026-09-03 확정) ─────────────────────────────────────
 *   가운데 — 길이가 고정되거나 비슷한 값(순번·ID·코드·타입·상태·일시·건수·버튼)
 *   왼쪽   — 길이가 들쭉날쭉한 텍스트(~명/이름·제목·설명·이메일·URL·파일명)
 * 기본값이 가운데(`.table td { text-align: center }`)라 왼쪽만 `.left` 로 옵트인한다.
 * ⚠ `.left` 는 정렬만 준다. 줄바꿈이 필요하면 `.td-break` 를 함께 붙인다. */

/* ── 일시·기간 셀 — 좁아졌을 때만, 정해진 자리에서 나뉜다 ─────────────────
 * 일시는 `년월일` / `시각`, 기간은 `시작일` / `~` / `종료일` 로 끊어 읽되
 * **평소에는 한 줄**이어야 한다(2026-09-03 지시). 그래서 값에 줄바꿈 문자를 넣지 않는다 —
 * 넣으면 칸이 넓어도 늘 두 줄이 된다(실측: 320px 에서 일시 2줄·기간 3줄).
 * 구분자를 공백으로 두면 좁아졌을 때만 그 자리에서 꺾인다.
 * 이 클래스는 줄바꿈 규칙(overflow-wrap: anywhere)이 이 칸으로 새어 들어오는 것을 막는다. */
.pp-pub .table td.td-datetime,
.pp-pub .table td.td-date-time,
.pp-pub .table td.td-period,
.pp-pub .info-table td.td-datetime,
.pp-pub .info-table td.td-period {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* ★일시 칸에는 바닥을 준다 — 값 길이가 정해져 있으니 그 아래로 줄어들 이유가 없다.
 * 바닥이 없으면 auto 배분이 옆 열에 자리를 주려고 이 칸을 계속 짜내 날짜가 중간에서 갈린다. */
.pp-pub .table td.td-datetime,
.pp-pub .table td.td-date-time { min-width: 92px; }
.pp-pub .table td.td-period { min-width: 112px; }

/* ── 명칭·설명 칸 — 칸보다 긴 낱말은 꺾는다 ────────────────────────────────
 * ⚠ anywhere 가 아니라 break-word 다. anywhere 는 그 열의 최소폭을 1글자로 낮춰 열 폭을
 *   뺏기게 하고 한글도 어절 중간에서 끊는다. break-word 는 낱말이 한 줄에 안 들어갈 때만 꺾는다. */
.pp-pub .table td.left,
.pp-pub .table td.td-title {
  overflow-wrap: break-word;
}

/* ── 2) 조회 버튼 위치가 화면마다 다르다 ───────────────────────────────────────
 * `.search-bar{flex:1 1 auto}` 로 필터 바 자체는 늘어나는데, 그 안에서 **늘어나는 입력이 있는
 * 화면**(공지 — 키워드 입력)만 조회 버튼이 오른쪽 끝으로 밀린다. 셀렉트·날짜처럼 고정폭만 있는
 * 화면(파일요청)은 버튼이 입력 옆에 남아 가운데가 크게 빈다.
 * 실측(1760): 공지 조회 버튼 l=1404(엑셀 l=1489 옆) · 파일요청 l=512.
 *
 * 조회 버튼을 필터 바의 오른쪽 끝으로 고정한다. 이미 오른쪽에 있는 화면은 보이는 변화가 없다.
 * ★철거조건: 퍼블이 필터 바 정렬 규칙을 주면 그쪽을 따르고 이 블록을 지운다.
 */
.pp-pub .search-bar .btn-filter--search {
  margin-left: auto;
}

/* ── 3) 활성 선택 컨트롤의 라벨 전체가 클릭되지만 일부 영역만 pointer다 ────────
 * `.check` 내부는 퍼블 공통 규칙이 처리하지만, 회원탈퇴 후임자 카드처럼 radio를 감싼
 * 바깥 label은 본문 위에서 기본 커서로 보인다. 실제로 값을 바꾸는 활성 선택 컨트롤과
 * 그 라벨 전체에만 pointer를 적용하고 disabled 상태는 그대로 둔다.
 */
.pp-pub input[type="checkbox"]:not(:disabled),
.pp-pub input[type="radio"]:not(:disabled),
.pp-pub label:has(input[type="checkbox"]:not(:disabled)),
.pp-pub label:has(input[type="radio"]:not(:disabled)),
.pp-pub label[for]:has(+ input[type="checkbox"]:not(:disabled)),
.pp-pub label[for]:has(+ input[type="radio"]:not(:disabled)) {
  cursor: pointer;
}

/* ── 4) GNB 메가패널 높이 — 고정(height)이 아니라 바닥(min-height)으로 받는다 ──
 * 09.07 드롭이 `.gnb-mega-inner` 에 `height: 240px` 를 넣었다. 퍼블 목업은 메뉴가 고정이라
 * 문제가 없지만 **PP 의 메가패널은 운영DB 메뉴라 항목 수가 변한다.**
 *
 * 실측(2026-09-08, 로컬 PP · `adminik` · 1600px): 드롭 적용 시 패널 콘텐츠 바닥 한계가 y=294 인데
 * 최장 컬럼(이용안내 4항목)의 마지막 항목이 y=282 에서 끝난다 — **여유 12px.** 항목 하나가 더
 * 붙으면(≈40px) 한계를 넘고, `.gnb-mega`·`.gnb-mega-inner` 둘 다 `overflow: visible` 이라
 * 잘리는 대신 패널 밖으로 삐져나온다. 종전(auto, 실측 280px)에는 알아서 늘어나던 자리다.
 *
 * 디자인 의도(최소 240px 확보)는 그대로 두고 상한만 푼다.
 * ★철거조건: 퍼블이 항목 수 가변을 전제로 높이 규칙을 다시 주면 그쪽을 따르고 이 블록을 지운다.
 */
.pp-pub .header .gnb-mega-inner {
  height: auto;
  min-height: 240px;
}

/* ── 5) 접수 배지는 하늘색 (2026-09-08 사용자 확정) ──────────────────────────
 * 퍼블은 접수를 남파랑(`--b-600` #153ed4)으로 준다. 파일요청 화면에서 상태 흐름을 보면
 * 등록(초록) → 접수 → 처리완료/이메일 발송(보라) 인데, 남파랑이 보라와 붙어 보여
 * 진행 단계가 눈에 안 들어온다. 같은 팔레트의 밝은 파랑(`--b-500` #1e92f9)으로 내린다.
 *
 * ★클래스는 그대로 `badge-receipt` 를 쓴다. 이 클래스는 파일요청 말고도 가입 접수 3화면
 *   (mypage · partner-join-approval · partner-management)이 함께 쓴다 — 같은 뜻의 상태가
 *   화면마다 다른 색이 되면 그게 더 큰 결함이라, 색을 한 곳에서 같이 내린다.
 * ★철거조건: 퍼블이 접수 색을 다시 정해 주면 그쪽을 따르고 이 블록을 지운다.
 */
.pp-pub .badge-receipt {
  color: var(--b-500);
  border-color: var(--b-500);
}

/* ── 6) 헤더 사용자 이름 — 글자수가 아니라 "남는 공간"으로 자른다 (2026-09-08 사용자 확정)
 * 퍼블 헤더는 `.gnb { margin-right: auto }` 라 GNB 마지막 메뉴와 카드사 라디오 사이 여백이
 * **쓰고 남은 공간**이다. 자식이 전부 `flex: 0 0 auto` 라 아무도 줄어들지 않아, 1380px 중앙
 * 컨테이너가 꽉 차는 순간 여백이 0 이 되고 두 요소가 붙어 버린다.
 * 실측(1760px): 이름 3자 → 57px · 5자 → 31px · 7자 → 5px · 8자 이상 → 0px(겹침).
 *
 * ★고정 글자수(5자=65px)로 자르는 안을 먼저 넣었다가 이걸로 바꿨다 — 이름이 짧아 자리가
 *   남는데도 무조건 자르는 게 아깝고, 나중에 이름이 길어지면 기준을 다시 잡아야 하기 때문이다.
 *   지금 방식은 **여백 24px 을 못 지킬 때만, 모자란 만큼만** 이름을 자른다.
 * ★말줄임(…)은 쓰지 않는다 — 사용자 지시. 전체 이름은 사용자 버튼을 눌러 팝오버
 *   (#headerUserPopName)에서 그대로 볼 수 있다.
 * ★자르는 대상은 이름 span 하나다. `.header-id` 에 걸면 뒤따르는 " 님" 까지 잘려 문장이 깨진다.
 *
 * 축소가 전파되려면 사슬 전체를 열어야 한다:
 *   .header-inner-center > .header-info > .header-menu > .header-userbox > .header-user > .header-id
 * 퍼블은 이 중 .header-info·.header-userbox 를 `flex: 0 0 auto` 로 잠가 뒀다.
 * ★철거조건: 헤더가 좁아질 때 스스로 줄어드는 구조로 퍼블이 바꿔 주면 이 블록을 지운다.
 */
.pp-pub .header .gnb {
  margin-right: 24px;          /* auto → 최소 여백 보장. 남는 공간은 아래 margin-left:auto 가 먹는다 */
}
.pp-pub .header .header-info {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.pp-pub .header .header-menu,
.pp-pub .header .header-userbox,
.pp-pub .header .header-user {
  min-width: 0;
}
/* ★userbox 는 퍼블에서 display:block 이다. 그대로 두면 압박이 안쪽 버튼까지 전달되지 않아
   버튼이 박스 밖으로 삐져나온다(실측: 박스 171px 인데 버튼 256px). flex 로 열어야 한다. */
.pp-pub .header .header-userbox {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
}
.pp-pub .header .header-user {
  flex: 0 1 auto;
}
.pp-pub .header .header-id {
  display: flex;
  align-items: center;
  min-width: 0;
}
.pp-pub .header .header-id #headerUserName {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* ── 7) 오류 박스 아이콘은 항상 첫 줄 옆 (2026-09-08 사용자 확정) ────────────────
 * 퍼블 공용 `.error-msg` 는 `align-items: center` 라 문구가 한 줄일 때만 맞는다. PP 는 서버 문구를
 * formatSentences 로 문장 단위 줄바꿈하므로 두 줄 이상이 흔하다(비밀번호 확인 불일치·재설정·변경 등) —
 * 그때 느낌표 아이콘이 줄 사이 가운데에 떠서 어느 줄의 오류인지 흐려진다.
 *
 * 분홍 박스·여백은 퍼블 그대로 두고 정렬만 위로 올린다. 화면별 CSS(signup-pp/auth-pp)에 같은 규칙을
 * 흩뿌리지 않고 여기 한 곳에서 처리한다 — 그래서 layout/auth.html 도 이 파일을 싣는다.
 * `.ico` 의 2px 은 아이콘 16px 을 첫 줄 line-height 20px 의 세로 중앙에 두는 값이다.
 * ★철거조건: 퍼블 common.css 의 .error-msg 가 flex-start 로 바뀌면 이 블록을 지운다.
 */
.pp-pub .error-msg {
  align-items: flex-start;
}
.pp-pub .error-msg .ico {
  margin-top: 2px;
}

/* ── 8) 비밀번호 칸의 눈은 PP 토글 하나만 (2026-09-11, OP #193 과 같은 증상) ─────────
 * Edge 는 type=password 칸에 포커스·입력이 있을 때 자기 reveal 버튼(::-ms-reveal)을 덧그린다.
 * 로그인·비밀번호 재설정·만료 화면은 퍼블 .login-pw-toggle 을 이미 두고 있어 Edge 에서 눈이 둘로 보인다.
 * Chrome·Safari 는 이런 버튼이 없어 이 규칙은 Edge 에서만 효과가 있다. OP op-bridge.css 와 같은 규칙.
 */
input[type="password"]::-ms-reveal {
  display: none;
}

/* Keep list privacy and registration actions together on the right. */
.pp-pub .list-toolbar:has(> [data-privacy-toggle]) {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-pub .list-toolbar > [data-privacy-toggle] {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}