/* [생성 파일 — 직접 수정 금지]
 * common.css 를 ".pp-pub" 스코프로 한정한 파생본.
 * 원본이 갱신되면 scripts/scope-css.js 를 재실행해 다시 생성할 것.
 */
@charset "UTF-8";
/**
 * common.css — 전 페이지 공통 (리셋/토큰/폰트/레이아웃/헤더·푸터/컴포넌트).
 * 페이지 전용은 src/scss/pages/<group>.scss.
 */
/**
 * 디자인 토큰 (:root) — CSS 출력 파일. common.scss 에서만 @use(1회 출력).
 * pages/*.scss 는 @use 금지(중복 출력). 값은 어디서나 var(--xxx)로 사용.
 */
/**
 * SCSS 변수 (연산/믹스인용) — CSS 출력 없음(어디서 @use 해도 중복 없음).
 * :root 토큰은 _tokens.scss 에서 출력.
 */
/* 레이아웃 폭 (PC 전용) */
/**
 * 타이포 스케일 (단일 소스) — @Guide_Typography 기준. key = font-size(px).
 * 여기만 고치면 font() 믹스인과 --fs-* / --lh-* 토큰이 함께 갱신됨.
 */:root{
  /* 디자인 시스템 팔레트 (원시 토큰) — @Guide_Color 기준.
     ⚠ 가이드 작업 미완료 → 단계 추가될 수 있음. 의미 토큰이 이걸 var()로 참조. */
  /* Primary (브랜드 보라) */
  --p-700: #4233cb;
  --p-600: #4f3fec;
  --p-500: #786bff;
  --p-400: #a39aff;
  --p-300: #c8c3ff;
  --p-200: #e5e2ff;
  --p-100: #efedfc;
  --p-50: #f7f5ff;
  /* Neutral (회색) */
  --n-900: #1a1a1b;
  --n-800: #343639;
  --n-700: #424549; /* MCP 미제공 — 추정값 */
  --n-600: #595c61;
  --n-500: #898c95;
  --n-400: #afb0b7;
  --n-300: #cfd2d6;
  --n-200: #dbdde0;
  --n-100: #e5e6ea;
  --n-50: #f2f3f6;
  --n-40: #f8f9fa; /* 최연회색(테이블 hover 등) */
  --n-45: #f4f5f8; /* badge(취소/사용중지) 배경 */
  /* Dark Blue (네이비) */
  --db-700: #302b57;
  --db-600: #48436f;
  --db-500: #5457ac;
  --db-100: #c8cbde;
  --db-50: #e8eaf4;
  /* UI — Red(에러) / Green(성공) / Blue(정보) */
  --r-500: #d83838;
  --r-200: #ffd8d8;
  --r-100: #ffebeb;
  --r-50: #fff7f7;
  --g-600: #007b15;
  --g-500: #009b1a;
  --g-100: #e8f7ea;
  --g-50: #f4fdf6; /* 엑셀 버튼 hover 배경 */
  --b-600: #153ed4;
  --b-500: #1e92f9;
  --b-100: #e1f1ff;
  --b-50: #f3f9ff;
  /* 의미 토큰 (semantic) — 팔레트 참조. 페이지는 이걸 사용 */
  --text-point-color: var(--p-600);
  --blurple: var(--p-600);
  --text-01: var(--n-800);
  --text-02: var(--n-600);
  --text-03: var(--n-500);
  --text-04: var(--n-400);
  --color-text-black: var(--n-900);
  --color-text-dark: var(--n-800);
  --color-text-default: var(--n-800);
  --color-text-light: var(--n-500);
  --color-error: var(--r-500);
  --color-point: var(--p-600);
  --color-primary: var(--p-600); /* 별칭 — 레거시 인라인 호환(=color-point) */
  --color-text: var(--n-900); /* 별칭 — 레거시 인라인 호환(=color-text-black) */
  --color-text-muted: var(--n-500); /* 별칭 — 레거시 인라인 호환(=text-03) */
  --color-bd: var(--n-500);
  --color-bd-light: var(--n-300);
  --color-bd-light-2: var(--n-100);
  --color-bg-light: var(--n-300);
  --color-bg-light-2: var(--n-100);
  --color-bg-error: var(--r-200);
  --color-bg-tranparent: var(--p-50); /* 닫힘 Q뱃지 등 */
  --color-bg-page: #f3f4f6; /* Figma Page-BG 전용 — N-50(#f2f3f6)과 별개 컬러 */
  --color-good: var(--b-500);
  --color-normal: var(--g-500);
  /* layout */
  --screen-max: 1920px;
  --content-width: 1200px;
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 58px;
  --grid-gutter: 20px;
  /* font-family — Pretendard (가변폰트, weight는 font-weight로 제어) */
  --font-base:
    "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* font-weight — 디자인 시스템 사용 weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* 타이포 스케일 — $font-scale(_variables) 단일 소스에서 자동 생성.
     개별 사용: var(--fs-20) / var(--lh-20). 짝 적용은 font(20) 믹스인 권장. */
  --fs-32: 32px;
  --lh-32: 44px;
  --fs-28: 28px;
  --lh-28: 40px;
  --fs-24: 24px;
  --lh-24: 36px;
  --fs-20: 20px;
  --lh-20: 30px;
  --fs-18: 18px;
  --lh-18: 28px;
  --fs-16: 16px;
  --lh-16: 24px;
  --fs-15: 15px;
  --lh-15: 22px;
  --fs-14: 14px;
  --lh-14: 20px;
  --fs-13: 13px;
  --lh-13: 20px;
  --fs-12: 12px;
  --lh-12: 18px;
}

/**
 * 웹폰트 Pretendard (가변) — 경로는 루트 절대(/fonts/, 타임리프 대응).
 * 단일 woff2로 weight 45~920 커버. 지원 브라우저 전부 가변폰트 OK.
 */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Pretendard/PretendardVariable.woff2") format("woff2");
}.pp-pub, .pp-pub *{
  box-sizing: border-box;
}.pp-pub, .pp-pub, .pp-pub div, .pp-pub span, .pp-pub h1, .pp-pub h2, .pp-pub h3, .pp-pub h4, .pp-pub h5, .pp-pub h6, .pp-pub p, .pp-pub blockquote, .pp-pub pre, .pp-pub a, .pp-pub abbr, .pp-pub address, .pp-pub em, .pp-pub img, .pp-pub small, .pp-pub strong, .pp-pub sub, .pp-pub sup, .pp-pub b, .pp-pub i, .pp-pub dl, .pp-pub dt, .pp-pub dd, .pp-pub ol, .pp-pub ul, .pp-pub li, .pp-pub fieldset, .pp-pub form, .pp-pub label, .pp-pub legend, .pp-pub table, .pp-pub caption, .pp-pub tbody, .pp-pub tfoot, .pp-pub thead, .pp-pub tr, .pp-pub th, .pp-pub td, .pp-pub article, .pp-pub aside, .pp-pub figure, .pp-pub figcaption, .pp-pub footer, .pp-pub header, .pp-pub nav, .pp-pub section, .pp-pub main{
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}.pp-pub article, .pp-pub aside, .pp-pub figure, .pp-pub figcaption, .pp-pub footer, .pp-pub header, .pp-pub nav, .pp-pub section, .pp-pub main{
  display: block;
}.pp-pub ol, .pp-pub ul{
  list-style: none;
}.pp-pub a{
  color: inherit;
  text-decoration: none;
}.pp-pub img{
  max-width: 100%;
  vertical-align: top;
  border: 0;
}.pp-pub button{
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}.pp-pub input, .pp-pub textarea, .pp-pub select{
  font: inherit;
  color: inherit;
}.pp-pub table{
  border-collapse: collapse;
  border-spacing: 0;
}.pp-pub{
  text-size-adjust: 100%;
  background-color: var(--color-bg-page);
}.pp-pub{
  font-family: var(--font-base);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text-default);
  background-color: var(--color-bg-page);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}.pp-pub .blind{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 콘텐츠 컨테이너 (1200) — 페이지에서 width 오버라이드 가능(예: myinfo 1368) */.pp-pub .inner{
  width: var(--content-width);
  margin: 0 auto;
}

/**
 * 레이아웃 (PC 전용 / 지원 1920). 두 타입:
 *   [A] 중앙 정렬형 (콘텐츠 1200 가운데) / [B] 풀폭 사이드형 (좌 사이드 + 우 콘텐츠)
 */
/* 1200 미만에서도 깨지지 않도록 최소폭 고정 (그 이하 가로 스크롤) */
/* 스티키풋터: 세로 flex + 최소 100vh → 본문(main)이 남은 높이를 채워 footer 를 페이지 bottom 에 고정 */
/* 고정 헤더(position:fixed) 높이만큼 padding-top 으로 본문 오프셋 */.pp-pub #wrap{
  display: flex;
  flex-direction: column;
  min-width: 1200px;
  min-height: 100vh;
  padding-top: 70px;
  box-sizing: border-box;
}.pp-pub #wrap > main{
  flex: 1 1 auto;
}

/* 콘텐츠 영역 (헤더/푸터를 제외한 본문). 배경은 연한 회색(Page-BG) */.pp-pub .wrap{
  padding: 40px 0 80px;
  background: var(--color-bg-page);
}

/* [A] 중앙 정렬형 — 콘텐츠 정렬 컨테이너. 풀폭 배경은 바깥 100% + 안쪽 .inner 패턴 */.pp-pub .full{
  width: 100%;
}.pp-pub .full > .inner{
  width: 1200px;
  margin: 0 auto;
}

/* [B] 풀폭 사이드형 — 1920 맥스 안에서 좌 사이드패널 + 우 콘텐츠가 폭을 모두 사용 */.pp-pub .layout-side{
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 70px);
  max-width: 1920px;
  margin: 0 auto;
  /* 좌측 사이드패널 (고정폭, 펼침 240) */
}.pp-pub .layout-side > .side{
  flex: 0 0 240px;
  width: 240px;
  transition: flex-basis 0.2s ease, width 0.2s ease;
}.pp-pub .layout-side{
  /* 우측 콘텐츠 (가변폭 = 1920 - 사이드폭) */
}.pp-pub .layout-side > .content{
  flex: 1 1 auto;
  min-width: 0;
}.pp-pub .layout-side{
  /* 접힘 상태: 사이드패널 58, 콘텐츠가 자동으로 1920-58 차지 */
}.pp-pub .layout-side.is-collapsed > .side{
  flex-basis: 58px;
  width: 58px;
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 공용 믹스인 — `@use '../common/mixins' as *;`
 */
/**
 * 타이포 스케일 적용(size+line-height 한 쌍). `@include font(20);` → 20px/30px.
 * 허용 키는 $font-scale. weight는 별도(--fw-* 토큰).
 */.pp-pub .header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--color-bd-light-2);
}.pp-pub .header .header-inner{
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1920px;
  height: 70px;
  margin: 0 auto;
  padding: 0 24px;
}.pp-pub .header .logo{
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  white-space: nowrap;
}.pp-pub .header .logo a{
  color: var(--color-text-black);
}.pp-pub .header .gnb{
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
}.pp-pub .header .gnb > ul{
  display: flex;
  height: 100%;
  gap: 48px;
}.pp-pub .header .gnb > ul a{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  color: var(--color-text-default);
}.pp-pub .header .gnb > ul a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--p-400);
  opacity: 0;
  transition: opacity 0.16s ease;
}.pp-pub .header .gnb > ul a:hover::after{
  opacity: 1;
}.pp-pub .header{
  /* 메가메뉴 (2뎁스) — 전체 폭 흰 패널 + 그림자. GNB hover/focus 시 표출(JS 없음). */
}.pp-pub .header .gnb-mega{
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  display: flex;
  gap: 10px;
  padding-top: 12px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}.pp-pub .header .gnb-mega::before{
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 70px;
  height: 252px;
  z-index: -1;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}.pp-pub .header .gnb:hover .gnb-mega, .pp-pub .header .gnb:focus-within .gnb-mega{
  opacity: 1;
  visibility: visible;
}.pp-pub .header{
  /* 컬럼 */
}.pp-pub .header .gnb-mega-col{
  flex: 0 0 auto;
  width: 190px;
}.pp-pub .header{
  /* 컬럼 제목 */
}.pp-pub .header .gnb-mega-title{
  padding: 6px 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
}.pp-pub .header{
  /* 컬럼 링크 목록 */
}.pp-pub .header .gnb-mega-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}.pp-pub .header .gnb-mega-list a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-medium);
  color: var(--n-700);
  white-space: nowrap;
}.pp-pub .header .gnb-mega-list a .ico{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--n-500);
}.pp-pub .header .gnb-mega-list a:hover{
  background: var(--n-40);
}.pp-pub .header .gnb-mega-list a.is-current{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header{
  /* 컬럼 구분선 */
}.pp-pub .header .gnb-mega-line{
  flex: 0 0 auto;
  align-self: flex-start;
  width: 1px;
  height: 240px;
  margin-top: 12px;
  background: var(--n-100);
}.pp-pub .header{
  /* 현재 페이지 메가 항목 강조 — .gnb-mega[data-sub="키"] + [data-key="키"].
     include: { "gnb": "guide", "sub": "notice" } → 이용안내 밑줄 + 공지사항 셀렉트. */
}.pp-pub .header .gnb-mega[data-sub=sdk] [data-key=sdk]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=file-request] [data-key=file-request]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=luk] [data-key=luk]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=state-noti] [data-key=state-noti]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=token-state-noti] [data-key=token-state-noti]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=testkey-limit] [data-key=testkey-limit]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=product] [data-key=product]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=transaction] [data-key=transaction]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=stat-token] [data-key=stat-token]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=stat-approval] [data-key=stat-approval]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=stat-bypass] [data-key=stat-bypass]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=stat-card] [data-key=stat-card]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=notice] [data-key=notice]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=manual] [data-key=manual]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=faq] [data-key=faq]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header .gnb-mega[data-sub=trouble] [data-key=trouble]{
  background: var(--p-50);
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}.pp-pub .header{
  /* GNB 활성 메뉴: .gnb[data-active="키"] + li.gnb-키 */
}.pp-pub .header .gnb[data-active=file] .gnb-file > a::after{
  background: var(--color-point);
  opacity: 1;
}.pp-pub .header .gnb[data-active=config] .gnb-config > a::after{
  background: var(--color-point);
  opacity: 1;
}.pp-pub .header .gnb[data-active=product] .gnb-product > a::after{
  background: var(--color-point);
  opacity: 1;
}.pp-pub .header .gnb[data-active=stats] .gnb-stats > a::after{
  background: var(--color-point);
  opacity: 1;
}.pp-pub .header .gnb[data-active=guide] .gnb-guide > a::after{
  background: var(--color-point);
  opacity: 1;
}.pp-pub .header{
  /* 우측 정보 영역 — 앱선택 | 사용자 | 시각 | 공지사항 */
}.pp-pub .header .header-info{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}.pp-pub .header{
  /* 카드사/TRID 뷰 전환 라디오 (Figma) — 앱 셀렉트박스 앞 */
}.pp-pub .header .header-viewtype{
  display: flex;
  align-items: center;
  gap: 16px;
}.pp-pub .header{
  /* 앱 선택 (Select Box small) — 헤더 인스턴스: 폭 160 고정 · h34.
     값이 flex-1 로 꽉 차 화살표를 우측 끝으로 밀어냄. */
}.pp-pub .header .header-select{
  width: 160px;
}.pp-pub .header .header-select .select-trigger{
  width: 160px;
  height: 34px;
}.pp-pub .header .header-select .select-value{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}.pp-pub .header .header-select .select-dropdown{
  width: 100%;
  min-width: 0;
  overflow: hidden;
}.pp-pub .header .header-select .select-option{
  display: block;
  line-height: 32px;
  white-space: nowrap;
}.pp-pub .header{
  /* 사용자 영역 — 클릭 시 프로필 팝업(.header-userpop) 기준 */
}.pp-pub .header .header-userbox{
  position: relative;
  flex: 0 0 auto;
}.pp-pub .header{
  /* 사용자 (역할 뱃지 + 이름) — 팝업 트리거(button) */
}.pp-pub .header .header-user{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}.pp-pub .header .header-user::before{
  content: "";
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  border-radius: 6px;
  background: transparent;
  transition: background 0.15s;
}.pp-pub .header .header-user:hover::before{
  background: var(--n-40);
}.pp-pub .header{
  /* 프로필 팝업 (popup_my) — w240 · border N-200 · radius 10 */
}.pp-pub .header .header-userpop{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: none;
  width: 240px;
  background: #fff;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  overflow: hidden;
}.pp-pub .header .header-userbox.is-open .header-userpop{
  display: block;
}.pp-pub .header{
  /* 상단 — 아이디 + 최종접속 */
}.pp-pub .header .header-userpop-info{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 16px;
}.pp-pub .header .header-userpop-name{
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}.pp-pub .header .header-userpop-login{
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--n-500);
}.pp-pub .header{
  /* 하단 — 나의 정보 수정 */
}.pp-pub .header .header-userpop-edit{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--n-100);
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
}.pp-pub .header .header-userpop-edit .ico{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--n-500);
}.pp-pub .header .header-userpop-edit:hover{
  background: var(--n-40);
}.pp-pub .header{
  /* 아이디(이름) — user 아이콘 18 + 15-M */
}.pp-pub .header .header-id{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
}.pp-pub .header .header-id .ico{
  width: 18px;
  height: 18px;
}.pp-pub .header{
  /* 잔여 시간 — time 아이콘 16 + 15-M */
}.pp-pub .header .header-time{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-600);
}.pp-pub .header{
  /* 공지사항 — megaphone 18 + 15-M */
}.pp-pub .header .header-notice{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
  white-space: nowrap;
}.pp-pub .header .header-notice::before{
  content: "";
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  border-radius: 6px;
  background: transparent;
  transition: background 0.15s;
}.pp-pub .header .header-notice:hover::before{
  background: var(--n-40);
}.pp-pub .header .header-notice .ico{
  width: 18px;
  height: 18px;
}.pp-pub .header{
  /* 정보 영역 구분선 */
}.pp-pub .header .header-line{
  flex: 0 0 auto;
  width: 1px;
  height: 12px;
  background: var(--n-300);
}.pp-pub .header{
  /* 역할 뱃지 (대표파트너) — P-100 배경 · radius 6 · 13-SB Primary */
}.pp-pub .header .role-badge{
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--p-100);
  color: var(--color-point);
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
}.pp-pub .header{
  /* 우측 유틸 버튼 (회원가입/로그인/로그아웃) — 알약 .btn-light, 폭 고정 */
}.pp-pub .header .header-util{
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  margin-left: auto;
}.pp-pub .header .header-info + .header-util{
  margin-left: 20px;
}.pp-pub .header .header-btn{
  padding: 11px 14px;
}.pp-pub .header .header-btn--signup, .pp-pub .header .header-btn--logout{
  width: 100px;
}.pp-pub .header .header-btn--login{
  width: 87px;
}.pp-pub .header .ico{
  display: inline-flex;
  align-items: center;
}

/* 로고만 헤더 (type=logo) — 회원가입 등 pre-login 화면용. 본문 배경과 동일 + 무보더. */.pp-pub .header--logo{
  background: var(--n-50);
  border-bottom: 0;
}

/**
 * 푸터
 */.pp-pub .footer{
  padding: 25px 0;
  background: #fff;
  border-top: 1px solid var(--color-bd-light-2);
}.pp-pub .footer .inner{
  display: flex;
  align-items: center;
}.pp-pub .footer .footer-info{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--text-02);
}.pp-pub .footer .footer-info li{
  position: relative;
}.pp-pub .footer .footer-info li + li::before{
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-bd-light);
}.pp-pub .footer .footer-links{
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/**
 * 섹션 / 카드 / 안내 박스 (수치는 1x 이미지 기준 근사값).
 */
/* 흰색 카드 패널 */.pp-pub .card{
  padding: 32px;
  background: #fff;
  border-radius: 14px;
}

/* 사이드 영역 블록 */.pp-pub .side-block + .side-block{
  margin-top: 40px;
}.pp-pub .side-title{
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: var(--color-text-black);
}

/* 안내 박스 (불릿 리스트) */.pp-pub .guide-list{
  margin-top: 10px;
  padding: 20px;
  background: #fff;
  border-radius: 14px;
}.pp-pub .guide-list li{
  position: relative;
  padding-left: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}.pp-pub .guide-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--text-02);
}.pp-pub .guide-list li + li{
  margin-top: 2px;
}

/**
 * 그리드 시스템 — 토큰/믹스인 필요 시 `@use '../common/variables'`·`'../common/mixins'`.
 */
/**
 * 버튼 — @Guide_Component. .btn + 변형(-primary/-secondary/-line/-fill/…) + 사이즈 + .btn-block.
 * 상태: 기본 / :hover / 비활성(:disabled, .is-disabled). 색은 팔레트 토큰.
 */.pp-pub .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}.pp-pub .btn:disabled, .pp-pub .btn.is-disabled{
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary (보라 채움) */.pp-pub .btn-primary{
  height: 50px;
  background: var(--color-point);
  color: #fff;
  font-size: 16px;
  line-height: 24px;
}.pp-pub .btn-primary:hover{
  background: var(--p-700);
}.pp-pub .btn-primary:disabled, .pp-pub .btn-primary.is-disabled{
  background: var(--n-200);
  color: var(--n-400);
}

/* Secondary (연보라 채움) */.pp-pub .btn-secondary{
  height: 50px;
  background: var(--p-100);
  color: var(--color-point);
  font-size: 16px;
  line-height: 24px;
}.pp-pub .btn-secondary:hover{
  background: var(--p-200);
}.pp-pub .btn-secondary:disabled, .pp-pub .btn-secondary.is-disabled{
  background: var(--n-200);
  color: var(--n-400);
}

/* Basic_Line (흰 배경 + 회색 테두리) */.pp-pub .btn-line{
  min-width: 80px;
  background: #fff;
  border-color: var(--n-500);
  color: var(--n-900);
  font-weight: 600;
}.pp-pub .btn-line:hover{
  background: var(--n-50);
  border-color: var(--n-500);
}.pp-pub .btn-line:disabled, .pp-pub .btn-line.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}

/* Line_Danger (흰 배경 + 빨강 테두리/글자) — 반려·삭제 등 */.pp-pub .btn-line-danger{
  min-width: 80px;
  background: #fff;
  border-color: var(--color-error);
  color: var(--color-error);
  font-weight: 600;
}.pp-pub .btn-line-danger:hover{
  background: var(--r-100);
  border-color: var(--color-error);
}.pp-pub .btn-line-danger:disabled, .pp-pub .btn-line-danger.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}

/* Basic_Fill (다크 채움) */.pp-pub .btn-fill{
  min-width: 80px;
  background: var(--n-800);
  color: #fff;
  font-weight: 600;
}.pp-pub .btn-fill:hover{
  background: var(--n-900);
}.pp-pub .btn-fill:disabled, .pp-pub .btn-fill.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}

/* Basic_Tertiary (연회색 채움) */.pp-pub .btn-tertiary{
  min-width: 80px;
  background: var(--n-50);
  color: var(--n-900);
  font-weight: 600;
}.pp-pub .btn-tertiary:hover{
  background: var(--n-100);
}.pp-pub .btn-tertiary:disabled, .pp-pub .btn-tertiary.is-disabled{
  background: var(--n-200);
  color: var(--n-400);
}

/* Basic_Round (알약형 + 아이콘) */.pp-pub .btn-round{
  gap: 4px;
  border-radius: 50px;
  background: #fff;
  border-color: var(--n-300);
  color: var(--n-900);
}.pp-pub .btn-round:hover{
  background: var(--n-50);
  border-color: var(--n-300);
}.pp-pub .btn-round:disabled, .pp-pub .btn-round.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}

/* Filter (44×44 정사각 아이콘 버튼) */.pp-pub .btn-filter{
  width: 44px;
  height: 44px;
  min-width: 0;
  padding: 0;
}.pp-pub .btn-filter .ico{
  width: 20px;
  height: 20px;
}.pp-pub .btn-filter{
  /* 멀티컬러 아이콘(엑셀 등)은 <img class="ico-img"> */
}.pp-pub .btn-filter .ico-img{
  width: 24px;
  height: 24px;
}.pp-pub .btn-filter{
  /* 검색 (보라 채움) */
}.pp-pub .btn-filter.btn-filter--search{
  background: var(--color-point);
  color: #fff;
  /* Figma 실측: 44 버튼에 돋보기 16.2 */
}.pp-pub .btn-filter.btn-filter--search .ico{
  width: 16px;
  height: 16px;
}.pp-pub .btn-filter.btn-filter--search:hover{
  background: var(--p-700);
}.pp-pub .btn-filter.btn-filter--search:disabled, .pp-pub .btn-filter.btn-filter--search.is-disabled{
  background: var(--n-200);
  color: var(--n-400);
}.pp-pub .btn-filter{
  /* 엑셀 (흰 배경 + 그린 테두리) */
}.pp-pub .btn-filter.btn-filter--excel{
  background: #fff;
  border-color: var(--g-600);
  color: var(--g-600);
}.pp-pub .btn-filter.btn-filter--excel:hover{
  background: var(--g-50);
}.pp-pub .btn-filter.btn-filter--excel:disabled, .pp-pub .btn-filter.btn-filter--excel.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
  opacity: 0.5;
}

/* Text 버튼 (배경 없음) */.pp-pub .btn-text{
  height: auto;
  min-width: 0;
  padding: 0;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--n-600);
}.pp-pub .btn-text:hover{
  text-decoration: underline;
}.pp-pub .btn-text:disabled, .pp-pub .btn-text.is-disabled{
  color: var(--n-300);
  text-decoration: none;
}

/* button/text_line — 항상 밑줄 텍스트 버튼. (.btn-text 는 hover 때만 밑줄이라 별개) */.pp-pub .btn-text-line{
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  font-weight: var(--fw-regular);
  color: var(--n-600);
  text-decoration: underline;
}.pp-pub .btn-text-line:hover{
  color: var(--n-700);
}.pp-pub .btn-text-line:disabled, .pp-pub .btn-text-line.is-disabled{
  color: var(--n-300);
}

/* button/round_light — 연한 알약 버튼. 흰 배경·N-300 테두리·N-900·아이콘+텍스트. */.pp-pub .btn-light{
  gap: 4px;
  border-radius: 50px;
  background: #fff;
  border-color: var(--n-300);
  color: var(--n-900);
}.pp-pub .btn-light:hover{
  background: var(--n-50);
  border-color: var(--n-300);
}.pp-pub .btn-light:disabled, .pp-pub .btn-light.is-disabled{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}

/* Large 사이즈 모디파이어 — 높이만 50 (글자는 각 변형 유지) */.pp-pub .btn-lg{
  height: 50px;
}.pp-pub .btn-sm{
  height: auto;
  min-width: 70px;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* button/small — 작은 라인 버튼(탈퇴 등). (.btn-sm 는 범용 크기 모디파이어라 별개) */.pp-pub .btn-small{
  height: auto;
  min-width: auto;
  padding: 5px 12px;
  border-color: var(--n-300);
  border-radius: 6px;
  background: #fff;
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--text-02);
}.pp-pub .btn-small:hover{
  border-color: var(--n-400);
}.pp-pub .btn-block{
  display: flex;
  width: 100%;
}

/**
 * 폼 요소 (라벨 / input / select / 그룹 / 드롭다운) — @Guide_Component.
 * basic 44h / Large 50h · radius 10 · border N-200 · hover/focus/disabled/error 상태.
 */
/* 폼 행 */.pp-pub .form-row + .form-row{
  margin-top: 20px;
}

/* 라벨 */.pp-pub .form-label{
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  color: var(--n-900);
}.pp-pub .form-label .req{
  color: var(--color-point);
}

/* 인풋 (basic 44h) */.pp-pub .input{
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .input::placeholder{
  color: var(--n-400);
}.pp-pub .input:hover:not(:disabled, .pp-pub [readonly], .pp-pub :focus){
  border-color: var(--p-400);
}.pp-pub .input:focus{
  outline: none;
  border-color: var(--color-point);
}.pp-pub .input:disabled, .pp-pub .input[readonly]{
  background: var(--n-100);
  border-color: var(--n-200);
  cursor: not-allowed;
}.pp-pub .input{
  /* 에러 */
}.pp-pub .input.is-error{
  border-color: var(--color-error);
}

/* Large 사이즈 (50h · Body/16-R) */.pp-pub .input-lg{
  height: 50px;
  font-size: 16px;
  line-height: 24px;
}

/* 텍스트에어리어 (@Guide_Component) — 흰 박스 + <textarea> + 우하단 글자수 카운터.
 * border N-200 / focus Primary / radius 10 / 높이 140 */.pp-pub .textarea{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 140px;
  padding: 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s;
}.pp-pub .textarea:focus-within{
  border-color: var(--color-point);
}.pp-pub .textarea.is-error{
  border-color: var(--color-error);
}.pp-pub .textarea:has(.textarea-field:disabled){
  background: var(--n-100);
  cursor: not-allowed;
}.pp-pub .textarea-field{
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  resize: none;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .textarea-field::placeholder{
  color: var(--n-400);
}.pp-pub .textarea-field:focus{
  outline: none;
}.pp-pub .textarea-field:disabled{
  cursor: not-allowed;
}

/* 글자수 카운터 — 우측 정렬. 현재값 N-800(medium) / 구분·최대 N-500 */.pp-pub .textarea-count{
  flex: 0 0 auto;
  align-self: flex-end;
  font-size: 12px;
  line-height: 18px;
  color: var(--n-500);
}.pp-pub .textarea-count b{
  font-weight: var(--fw-medium);
  color: var(--n-800);
}

/* 인풋 + 아이콘 (Input + Img, @Guide_Component) — 흰 박스 좌측 아이콘 + input. h44 */.pp-pub .input-icon{
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s;
}.pp-pub .input-icon:hover:not(:focus-within){
  border-color: var(--p-400);
}.pp-pub .input-icon:focus-within{
  border-color: var(--color-point);
}.pp-pub .input-icon.is-error{
  border-color: var(--color-error);
}.pp-pub .input-icon .ico{
  flex: 0 0 auto;
  color: var(--n-900);
}.pp-pub .input-icon input{
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .input-icon input::placeholder{
  color: var(--n-400);
}.pp-pub .input-icon input:focus{
  outline: none;
}

/* 리사이즈 인풋 (input/basic type=Resize Handle, CAMS) — 세로 확장 입력 + 우하단 커스텀 핸들(18, N-200) */.pp-pub .input-resize{
  position: relative;
  width: 100%;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.15s;
}.pp-pub .input-resize:hover:not(:focus-within){
  border-color: var(--p-400);
}.pp-pub .input-resize:focus-within{
  border-color: var(--color-point);
}.pp-pub .input-resize.is-error{
  border-color: var(--color-error);
}.pp-pub .input-resize-field{
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 24px 11px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  resize: vertical;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .input-resize-field::placeholder{
  color: var(--n-400);
}.pp-pub .input-resize-field:focus{
  outline: none;
}.pp-pub .input-resize-field:disabled{
  cursor: not-allowed;
}.pp-pub .input-resize-field::-webkit-resizer{
  display: none;
}

/* 우하단 커스텀 핸들 — Figma pr/py 3 인셋, 색 #DBDDE0(N-200) */.pp-pub .input-resize-handle{
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  color: var(--n-200);
  pointer-events: none;
}

/* 셀렉트 (basic 44h) */.pp-pub .select{
  width: 100%;
  height: 44px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background-color: #fff;
  background-image: url("/img/icons/line/arrow_down.svg");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
  appearance: none;
  cursor: pointer;
}.pp-pub .select:hover:not(:disabled){
  border-color: var(--p-400);
}.pp-pub .select:focus{
  outline: none;
  border-color: var(--color-point);
}.pp-pub .select:disabled{
  background-color: var(--n-100);
  border-color: var(--n-200);
  color: var(--n-400);
  cursor: not-allowed;
}

/* 인풋 + 버튼 그룹 */.pp-pub .input-group{
  display: flex;
  gap: 8px;
}.pp-pub .input-group .input, .pp-pub .input-group .select, .pp-pub .input-group .select-box{
  flex: 1 1 auto;
}.pp-pub .input-group .btn{
  flex: 0 0 auto;
  height: 44px;
}

/* 제출 버튼 영역 */.pp-pub .form-submit{
  margin-top: 32px;
}

/* 커스텀 셀렉트 (조립형) — native <select> 로는 드롭다운/옵션을 디자인대로 못 살려 트리거+패널 조립.
 * 동작: .is-open 토글 / 옵션 클릭 → .is-active + 값 반영 (_common.js) */.pp-pub .select-box{
  position: relative;
  width: 100%;
}.pp-pub .select-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--n-200);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
  text-align: left;
  cursor: pointer;
  /* ▼ 화살표 — 정식 arrow_down 아이콘(.ico 시스템과 동일 소스·크기). 색 = currentcolor */
}.pp-pub .select-trigger::after{
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_down.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_down.svg") center/contain no-repeat;
  transition: transform 0.15s;
}.pp-pub .select-value{
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}.pp-pub .select-value.is-placeholder{
  color: var(--n-400);
}

/* 상태 */.pp-pub .select-box:not(.is-disabled) .select-trigger:hover{
  border-color: var(--p-400);
}.pp-pub .select-box.is-open .select-trigger{
  border-color: var(--color-point);
}.pp-pub .select-box.is-open .select-trigger::after{
  transform: rotate(180deg);
}.pp-pub .select-box.is-disabled .select-trigger{
  background: var(--n-100);
  border-color: var(--n-200);
  color: var(--n-400);
  cursor: not-allowed;
}

/* 셀렉트 드롭다운 패널 — .select-box 안에선 트리거 아래 팝오버, 단독으로도 사용 */.pp-pub .select-dropdown{
  width: 100%;
  border: 1px solid var(--n-400);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}.pp-pub .select-box .select-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 20;
  display: none;
}.pp-pub .select-box.is-open .select-dropdown{
  display: block;
}.pp-pub .select-option{
  display: flex;
  align-items: center;
  padding: 12px;
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
  cursor: pointer;
}.pp-pub .select-option + .select-option{
  border-top: 1px solid var(--n-200);
}.pp-pub .select-option:hover, .pp-pub .select-option.is-active{
  background: var(--n-50);
}

/* Small 사이즈 (@[OP/PP] selectbox/small) — 30px · 14-M · radius 6 · 컴팩트 필터용.
 * 기본 select 와 색 체계 다름(hover 배경 N-50 / 열림 P-100·P-400 / disabled N-200).
 * 폭은 내용에 맞춤(fit-content), 드롭다운은 트리거 스펙에 비례. */.pp-pub .select-box--sm{
  width: fit-content;
}.pp-pub .select-box--sm .select-trigger{
  justify-content: flex-start;
  width: auto;
  gap: 4px;
  height: 30px;
  padding: 0 6px 0 12px;
  border-color: var(--n-300);
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--n-600);
}.pp-pub .select-box--sm .select-value{
  flex: 0 1 auto;
}.pp-pub .select-box--sm:not(.is-disabled) .select-trigger:hover{
  background: var(--n-50);
  border-color: var(--n-300);
}.pp-pub .select-box--sm.is-open .select-trigger{
  background: var(--p-100);
  border-color: var(--p-400);
  color: var(--color-point);
}.pp-pub .select-box--sm.is-disabled .select-trigger{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--n-400);
}.pp-pub .select-box--sm .select-dropdown{
  right: 0;
  left: auto;
  width: max-content;
  min-width: 100%;
  padding: 4px;
  border: 1px solid var(--p-400);
  border-radius: 6px;
  box-shadow: 0 0 2px rgba(181, 181, 181, 0.24);
}.pp-pub .select-box--sm .select-option{
  justify-content: flex-start;
  height: 32px;
  padding: 0 30px 0 8px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--n-900);
}.pp-pub .select-box--sm .select-option + .select-option{
  border-top: 0;
}.pp-pub .select-box--sm .select-option:hover, .pp-pub .select-box--sm .select-option.is-active{
  background: var(--p-50);
  color: var(--db-700);
}

/**
 * 체크박스 / 라디오 (커스텀) — 박스 18px · 선택 Primary · 비활성 N-100.
 * 체크 ✓ = Figma 벡터 mask(색=배경색으로 상태 제어) / 라디오 점 = 8px 원(mask 미사용).
 * 마크업: <label class="check[ check--radio]"><input><span class="check-box"><span class="check-text">.
 */.pp-pub .check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  /* 네이티브 input 숨김(접근성 유지) */
}.pp-pub .check input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}.pp-pub .check .check-box{
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--n-300);
  border-radius: 4px;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}.pp-pub .check{
  /* 표식(✓ 또는 점) 공통 — 정중앙. 모양/크기는 체크·라디오에서 각각 */
}.pp-pub .check .check-box::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}.pp-pub .check .check-text{
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .check input:disabled ~ .check-text{
  color: var(--n-400);
}.pp-pub .check:has(input:disabled){
  cursor: not-allowed;
}

/* 체크박스 ✓ — Figma 벡터 mask(색=배경색), 미선택에도 연회색 상시노출 */.pp-pub .check:not(.check--radio) .check-box::after{
  width: 9px;
  height: 7px;
  background-color: var(--n-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7'%3E%3Cpath d='M0.5 2.92L3.35 6.5L8.5 0.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7'%3E%3Cpath d='M0.5 2.92L3.35 6.5L8.5 0.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}.pp-pub .check:not(.check--radio){
  /* 선택 — Primary 채움 + 흰 ✓ */
}.pp-pub .check:not(.check--radio) input:checked ~ .check-box{
  border-color: var(--color-point);
  background: var(--color-point);
}.pp-pub .check:not(.check--radio) input:checked ~ .check-box::after{
  background-color: #fff;
}.pp-pub .check:not(.check--radio){
  /* 비활성 미선택 — N-100 배경 + ✓ 숨김 */
}.pp-pub .check:not(.check--radio) input:disabled ~ .check-box{
  background: var(--n-100);
  border-color: var(--n-300);
}.pp-pub .check:not(.check--radio) input:disabled ~ .check-box::after{
  opacity: 0;
}.pp-pub .check:not(.check--radio){
  /* 비활성 + 선택 — 회색(N-400) ✓ */
}.pp-pub .check:not(.check--radio) input:disabled:checked ~ .check-box{
  background: var(--n-100);
  border-color: var(--n-300);
}.pp-pub .check:not(.check--radio) input:disabled:checked ~ .check-box::after{
  opacity: 1;
  background-color: var(--n-400);
}

/* 라디오 — 원형 + 내부 점 8px. 미선택에도 연회색(N-300) 점 상시 노출 */.pp-pub .check--radio .check-box{
  border-radius: 50%;
}.pp-pub .check--radio .check-box::after{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--n-300);
}.pp-pub .check--radio{
  /* 선택 — 테두리 Primary, 배경 흰색 유지 + Primary 점 */
}.pp-pub .check--radio input:checked ~ .check-box{
  border-color: var(--color-point);
  background: #fff;
}.pp-pub .check--radio input:checked ~ .check-box::after{
  background: var(--color-point);
}.pp-pub .check--radio{
  /* 비활성 미선택 — N-100 배경 + 점 숨김 */
}.pp-pub .check--radio input:disabled ~ .check-box{
  background: var(--n-100);
  border-color: var(--n-300);
}.pp-pub .check--radio input:disabled ~ .check-box::after{
  opacity: 0;
}.pp-pub .check--radio{
  /* 비활성 + 선택 — 회색 점(N-400) */
}.pp-pub .check--radio input:disabled:checked ~ .check-box{
  background: var(--n-100);
  border-color: var(--n-300);
}.pp-pub .check--radio input:disabled:checked ~ .check-box::after{
  opacity: 1;
  background: var(--n-400);
}

/**
 * 아이콘 — CSS mask + currentColor. 크기 16/20/24.
 * 베이스 .ico 는 박스만, 배경/마스크는 .ico-{name} 에서 부여(인라인 <svg class="ico"> 배경 방지).
 */
/* class → 파일명(figma 레이어명) */
/* fill 세트(단색) — line 과 동일 mask 시스템, fill/ 폴더 */.pp-pub .ico{
  display: inline-block;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* 크기 모디파이어 */.pp-pub .ico-20{
  width: 20px;
  height: 20px;
}.pp-pub .ico-24{
  width: 24px;
  height: 24px;
}.pp-pub .ico-user{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/user.svg") center/contain no-repeat;
          mask: url("/img/icons/line/user.svg") center/contain no-repeat;
}.pp-pub .ico-login{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/login.svg") center/contain no-repeat;
          mask: url("/img/icons/line/login.svg") center/contain no-repeat;
}.pp-pub .ico-logout{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/logout.svg") center/contain no-repeat;
          mask: url("/img/icons/line/logout.svg") center/contain no-repeat;
}.pp-pub .ico-search{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/search.svg") center/contain no-repeat;
          mask: url("/img/icons/line/search.svg") center/contain no-repeat;
}.pp-pub .ico-refresh{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_refresh.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_refresh.svg") center/contain no-repeat;
}.pp-pub .ico-time{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/time.svg") center/contain no-repeat;
          mask: url("/img/icons/line/time.svg") center/contain no-repeat;
}.pp-pub .ico-guide-info{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/guide_info.svg") center/contain no-repeat;
          mask: url("/img/icons/line/guide_info.svg") center/contain no-repeat;
}.pp-pub .ico-calendar{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/calendar.svg") center/contain no-repeat;
          mask: url("/img/icons/line/calendar.svg") center/contain no-repeat;
}.pp-pub .ico-email{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/email.svg") center/contain no-repeat;
          mask: url("/img/icons/line/email.svg") center/contain no-repeat;
}.pp-pub .ico-file{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/file.svg") center/contain no-repeat;
          mask: url("/img/icons/line/file.svg") center/contain no-repeat;
}.pp-pub .ico-contents-show{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/contents_show.svg") center/contain no-repeat;
          mask: url("/img/icons/line/contents_show.svg") center/contain no-repeat;
}.pp-pub .ico-contents-hide{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/contents_hide.svg") center/contain no-repeat;
          mask: url("/img/icons/line/contents_hide.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-up{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_up.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_up.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-down{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_down.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_down.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-left{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_left.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_left.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-right{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_right.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_right.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-up-bold{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_up_blod.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_up_blod.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-down-bold{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_down_blod.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_down_blod.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-left-double{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_left_double.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_left_double.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-right-double{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_right_double.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_right_double.svg") center/contain no-repeat;
}.pp-pub .ico-close-s{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/close_s.svg") center/contain no-repeat;
          mask: url("/img/icons/line/close_s.svg") center/contain no-repeat;
}.pp-pub .ico-close-s-bold{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/close_s_bold.svg") center/contain no-repeat;
          mask: url("/img/icons/line/close_s_bold.svg") center/contain no-repeat;
}.pp-pub .ico-company{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/company.svg") center/contain no-repeat;
          mask: url("/img/icons/line/company.svg") center/contain no-repeat;
}.pp-pub .ico-success{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/success.svg") center/contain no-repeat;
          mask: url("/img/icons/line/success.svg") center/contain no-repeat;
}.pp-pub .ico-noti{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/noti.svg") center/contain no-repeat;
          mask: url("/img/icons/line/noti.svg") center/contain no-repeat;
}.pp-pub .ico-resize-handle{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/resize_handle.svg") center/contain no-repeat;
          mask: url("/img/icons/line/resize_handle.svg") center/contain no-repeat;
}.pp-pub .ico-plus{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/plus.svg") center/contain no-repeat;
          mask: url("/img/icons/line/plus.svg") center/contain no-repeat;
}.pp-pub .ico-minus{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/minus.svg") center/contain no-repeat;
          mask: url("/img/icons/line/minus.svg") center/contain no-repeat;
}.pp-pub .ico-tree-plus{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/tree_plus.svg") center/contain no-repeat;
          mask: url("/img/icons/line/tree_plus.svg") center/contain no-repeat;
}.pp-pub .ico-tree-minus{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/tree_minus.svg") center/contain no-repeat;
          mask: url("/img/icons/line/tree_minus.svg") center/contain no-repeat;
}.pp-pub .ico-delete{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/delete.svg") center/contain no-repeat;
          mask: url("/img/icons/line/delete.svg") center/contain no-repeat;
}.pp-pub .ico-file-delete{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/file_delete.svg") center/contain no-repeat;
          mask: url("/img/icons/line/file_delete.svg") center/contain no-repeat;
}.pp-pub .ico-guide-book{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/guide_book.svg") center/contain no-repeat;
          mask: url("/img/icons/line/guide_book.svg") center/contain no-repeat;
}.pp-pub .ico-megaphone{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/megaphone.svg") center/contain no-repeat;
          mask: url("/img/icons/line/megaphone.svg") center/contain no-repeat;
}.pp-pub .ico-home{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/home.svg") center/contain no-repeat;
          mask: url("/img/icons/line/home.svg") center/contain no-repeat;
}.pp-pub .ico-menu-file{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_file.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_file.svg") center/contain no-repeat;
}.pp-pub .ico-menu-kms{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_KMS.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_KMS.svg") center/contain no-repeat;
}.pp-pub .ico-menu-card{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_card.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_card.svg") center/contain no-repeat;
}.pp-pub .ico-menu-key{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_key.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_key.svg") center/contain no-repeat;
}.pp-pub .ico-menu-user{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_user.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_user.svg") center/contain no-repeat;
}.pp-pub .ico-menu-statistics{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_statistics.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_statistics.svg") center/contain no-repeat;
}.pp-pub .ico-menu-cert{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_certificationinfo.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_certificationinfo.svg") center/contain no-repeat;
}.pp-pub .ico-menu-operation{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_operation.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_operation.svg") center/contain no-repeat;
}.pp-pub .ico-menu-setting{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_setting.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_setting.svg") center/contain no-repeat;
}.pp-pub .ico-menu-contents{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_contents.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_contents.svg") center/contain no-repeat;
}.pp-pub .ico-card{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_card.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_card.svg") center/contain no-repeat;
}.pp-pub .ico-key{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_key.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_key.svg") center/contain no-repeat;
}.pp-pub .ico-statistics{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_statistics.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_statistics.svg") center/contain no-repeat;
}.pp-pub .ico-certificationinfo{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_certificationinfo.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_certificationinfo.svg") center/contain no-repeat;
}.pp-pub .ico-setting{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_setting.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_setting.svg") center/contain no-repeat;
}.pp-pub .ico-kms{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_KMS.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_KMS.svg") center/contain no-repeat;
}.pp-pub .ico-contents{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_contents.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_contents.svg") center/contain no-repeat;
}.pp-pub .ico-operation{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/icon_operation.svg") center/contain no-repeat;
          mask: url("/img/icons/line/icon_operation.svg") center/contain no-repeat;
}.pp-pub .ico-close{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/close_s.svg") center/contain no-repeat;
          mask: url("/img/icons/line/close_s.svg") center/contain no-repeat;
}.pp-pub .ico-close-bold{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/close_s_bold.svg") center/contain no-repeat;
          mask: url("/img/icons/line/close_s_bold.svg") center/contain no-repeat;
}.pp-pub .ico-deleted-items{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/file_delete.svg") center/contain no-repeat;
          mask: url("/img/icons/line/file_delete.svg") center/contain no-repeat;
}.pp-pub .ico-arrow-o-right{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_o_right.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_o_right.svg") center/contain no-repeat;
}.pp-pub .ico-certified{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/fill/certified.svg") center/contain no-repeat;
          mask: url("/img/icons/fill/certified.svg") center/contain no-repeat;
}.pp-pub .ico-guide-info-fill{
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/fill/guide_info.svg") center/contain no-repeat;
          mask: url("/img/icons/fill/guide_info.svg") center/contain no-repeat;
}

/* other 세트(멀티컬러: 엑셀 등) — mask 불가 → 색 보존 SVG 를 <img> 로 */.pp-pub .ico-img{
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  object-fit: contain;
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 검색 필터 바 (목록 공통) — @Guide_grid W1368.
 * 구성: [조건 select] [기간 date~date] [키워드] [검색] | [엑셀].
 */.pp-pub .search-box{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 14px;
}

/* 날짜 입력 필드(우측 달력 아이콘) — 재사용 */.pp-pub .f-date{
  position: relative;
}.pp-pub .f-date .input{
  padding-right: 40px;
}.pp-pub .f-date .ico-calendar{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--color-text-black);
  pointer-events: none;
}

/* 날짜 범위 래퍼(시작 ~ 종료) — 재사용 */.pp-pub .f-period{
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 기간 구분 "-" */.pp-pub .date-sep{
  color: var(--n-900);
}

/* 필터 바 레이아웃(폭 배분) */.pp-pub .search-bar{
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
}.pp-pub .search-bar .f-select{
  flex: 0 0 120px;
}.pp-pub .search-bar .f-period{
  flex: 0 0 auto;
}.pp-pub .search-bar .f-date{
  flex: 0 0 140px;
}.pp-pub .search-bar .f-keyword{
  flex: 1 1 auto;
}

/* 검색버튼과 엑셀버튼 사이 세로 구분선 (1×18) */.pp-pub .filter-divider{
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: var(--color-bd-light);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * PP 테이블 (공통) — @Guide_Data Table. 2종:
 *  ① List Table (.table / .table-board) — 목록형(thead P-100 밴드 + 흰 행)
 *  ② Data Table (.info-table) — 정의형(상세). [라벨 th | 값 td] 그리드.
 */.pp-pub .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}.pp-pub .table th, .pp-pub .table td{
  padding: 15px 10px;
  font-size: 15px;
  line-height: 22px;
  text-align: center;
  vertical-align: middle;
}.pp-pub .table thead th{
  background: var(--p-100);
  color: var(--text-02);
  font-weight: var(--fw-semibold);
}.pp-pub .table{
  /* 상단 모서리 라운드 — 실제 상단(첫 줄)만. 그룹헤더 2줄째 셀엔 미적용 */
}.pp-pub .table thead tr:first-child th:first-child{
  border-top-left-radius: 20px;
}.pp-pub .table thead tr:first-child th:last-child{
  border-top-right-radius: 20px;
}.pp-pub .table{
  /* 그룹 헤더(2줄 thead) — 서브행 높이 38(패딩 8) + 컬럼 세로선(#dbdde0=--n-200) + 그룹 제목 하단선.
     세로선은 Figma "TH 2줄부터 라인" → 2단 헤더에만 적용(1단 헤더 미적용·OP 동일). */
}.pp-pub .table thead:has(tr + tr) th{
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
  border-right: 1px solid var(--n-200);
}.pp-pub .table{
  /* 표 우측 끝 컬럼만 세로선 제거 = 1행의 마지막 th.
     2행(그룹 하위: 이름/ID 등)의 마지막 th 는 내부 컬럼이라 세로선 유지 → 경계선 끊김 방지.
     (Figma는 그룹셀 테두리가 전체 높이로 내려와 연결됨. HTML 표는 그룹셀이 1행만 차지해 2행 셀에 테두리 필요) */
}.pp-pub .table thead:has(tr + tr) tr:first-child th:last-child{
  border-right: 0;
}.pp-pub .table thead:has(tr + tr) tr:first-child th[colspan]{
  border-bottom: 1px solid var(--n-200);
}.pp-pub .table{
  /* 행 전체 hover 강조 — Figma N-40 #F8F9FA (OP·PP 공통) */
}.pp-pub .table tbody tr{
  background: #fff;
  transition: background 0.12s;
}.pp-pub .table tbody tr:hover{
  background: var(--n-40);
}.pp-pub .table tbody td{
  border-bottom: 1px solid var(--color-bd-light-2);
  color: var(--color-text-black);
}.pp-pub .table{
  /* 하단 모서리 라운드(모든 표) — 마지막 행 하단선 제거 + 좌우 모서리 radius 20.
     rowspan 첫 컬럼 표(예: state-noti)는 페이지에서 좌하단만 보정. */
}.pp-pub .table tbody tr:last-child td{
  border-bottom: 0;
}.pp-pub .table tbody tr:last-child td:first-child{
  border-bottom-left-radius: 20px;
}.pp-pub .table tbody tr:last-child td:last-child{
  border-bottom-right-radius: 20px;
}

/* 게시판형: 제목 좌측 정렬 + 행 전체가 선택영역(hover 는 기본 .table 공통 처리) */.pp-pub .table-board .td-title{
  text-align: left;
}.pp-pub .table-board{
  /* 행 전체가 클릭 영역(클릭 시 상세 이동은 _common.js) */
}.pp-pub .table-board tbody tr{
  cursor: pointer;
}

/**
 * ② Data Table (정의형/상세) — .info-table
 * thead 없이 각 행이 [라벨 th | 값 td] 쌍(페이지에 따라 2쌍/3쌍). 라벨 th = P-100·N-600, 값 td = N-900.
 * 열 폭/쌍 개수 등 레이아웃은 페이지 css(colgroup·table-layout)에서 지정.
 */.pp-pub .info-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}.pp-pub .info-table th, .pp-pub .info-table td{
  padding: 15px 10px;
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-bd-light-2);
}.pp-pub .info-table tr:first-child th, .pp-pub .info-table tr:first-child td{
  border-top: 1px solid var(--color-bd-light-2);
}.pp-pub .info-table th{
  width: 140px;
  background: var(--p-100);
  color: var(--text-02);
  font-weight: var(--fw-semibold);
  /* 필수 입력 표시 — 라벨 뒤 Primary 별표 (Figma table_th_title: 라벨 N-600 + '*' Primary, gap4) */
}.pp-pub .info-table th .req{
  margin-left: 2px;
  color: var(--color-point);
}.pp-pub .info-table td{
  background: #fff;
  color: var(--color-text-black);
}.pp-pub .info-table{
  /* 버튼(44px)/셀렉트 들어가는 셀 — 세로패딩 축소로 행 높이 52 유지 */
}.pp-pub .info-table td:has(.td-with-btn){
  padding-top: 4px;
  padding-bottom: 4px;
}.pp-pub .info-table{
  /* textarea 등 세로로 긴 값 행 — 라벨·값 상단 정렬 (Figma items-start) */
}.pp-pub .info-table tr:has(.textarea) th, .pp-pub .info-table tr:has(.textarea) td{
  vertical-align: top;
}

/* 상태/TRID 등 값 행: 값(셀렉트박스·텍스트) + [변경] 버튼 우측 끝 */.pp-pub .td-with-btn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  /* 셀렉트박스가 값 영역을 채움(Figma: 상태 = 셀렉트 + 변경) */
}.pp-pub .td-with-btn .select-box{
  flex: 1 1 auto;
  min-width: 0;
}

/* ID 셀 — 텍스트 + 마스킹 토글(눈 아이콘). 목록/상세 공통 */.pp-pub .td-id .td-id-inner{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}.pp-pub .td-id .id-mask-toggle{
  display: inline-flex;
  color: var(--text-04);
  cursor: pointer;
}.pp-pub .td-id .id-mask-toggle:hover{
  color: var(--text-02);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 관리 목록 페이지 공통 레이아웃 (목록형 화면)
 * 페이지 헤더 · 검색 필터 그리드 · 테이블 툴바 · 가로스크롤 래퍼. 목록/폼/테이블은 공통 모듈 재사용.
 */
/* 페이지 헤더 (브레드크럼 + 타이틀 + 설명) */.pp-pub .page-head{
  margin-bottom: 24px;
}

/* Breadcrumb (@Guide_Component 910:70133) — 홈 › depth › 현재페이지.
   depth 14-R N-600(hover DB-500 밑줄) / 현재 14-SB N-900. 홈·구분자 아이콘 회색. */.pp-pub .breadcrumb{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--n-600);
}.pp-pub .breadcrumb .breadcrumb-home{
  display: inline-flex;
  align-items: center;
}.pp-pub .breadcrumb .ico{
  width: 16px;
  height: 16px;
  color: var(--n-500);
}.pp-pub .breadcrumb a:not(.breadcrumb-home){
  color: var(--n-600);
}.pp-pub .breadcrumb a:not(.breadcrumb-home):hover{
  color: var(--db-500);
  text-decoration: underline;
}.pp-pub .breadcrumb .here{
  color: var(--n-900);
  font-weight: var(--fw-semibold);
}

/* .page-title(h1)은 공통 modules/_page.scss 사용 */.pp-pub .page-desc{
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}

/* 목록 헤더: 타이틀(좌) + Breadcrumb(우, 같은 줄) — Figma @[PP] 공지사항 */.pp-pub .list-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}.pp-pub .list-head .page-title{
  margin-bottom: 0;
}

/* 결과 건수 (총 N건) — 숫자만 Primary SemiBold, 나머지 N-900 */.pp-pub .list-toolbar{
  margin-bottom: 10px;
}.pp-pub .list-count{
  font-size: 15px;
  line-height: 22px;
  color: var(--n-900);
}.pp-pub .list-count b{
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}

/* 고정 공지 행: 순번 대신 확성기 18 + 제목 Primary SemiBold — Figma @[PP] 공지사항 */.pp-pub .table-board .is-notice .ico-megaphone{
  width: 18px;
  height: 18px;
  color: var(--n-900);
}.pp-pub .table-board .is-notice .td-title a{
  color: var(--color-point);
  font-weight: var(--fw-semibold);
}

/* 검색 필터 (.card 흰 패널 재사용 + 라벨 그리드) */.pp-pub .filter-card{
  margin-bottom: 24px;
}

/* 라벨 위 / 입력 아래 형태의 3열 그리드 */.pp-pub .filter-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 20px;
}.pp-pub .field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}.pp-pub .field > label{
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}.pp-pub .filter-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 테이블 툴바 (건수 + 우측 액션 버튼) */.pp-pub .table-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}.pp-pub .table-toolbar .count{
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}.pp-pub .table-toolbar .count b{
  color: var(--color-point);
  font-weight: var(--fw-bold);
}

/* 가로 스크롤 래퍼 */.pp-pub .table-wrap{
  width: 100%;
  overflow-x: auto;
}

/* 목록 테이블 셀 보정 */.pp-pub .table .num{
  color: var(--text-02);
}.pp-pub .table .left{
  text-align: left;
}.pp-pub .table{
  /* 상세 진입 셀(클릭 영역 강조) */
}.pp-pub .table .cell-link{
  color: var(--color-point);
  cursor: pointer;
}.pp-pub .table .cell-link:hover{
  text-decoration: underline;
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 뱃지 (구분/처리 상태) — @[PP] Status. 아웃라인 알약(흰 배경 + 컬러 테두리·글자).
 * px7 py1 · 13-SemiBold · radius 50. 색/타이포는 토큰 사용.
 */.pp-pub .badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: 50px;
  background: #fff;
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
}

/* 초록 — 신청·등록 */.pp-pub .badge-apply, .pp-pub .badge-registration{
  color: var(--g-500);
  border-color: var(--g-500);
}

/* 남파랑 — 접수 */.pp-pub .badge-receipt{
  color: var(--b-600);
  border-color: var(--b-600);
}

/* 빨강 — 반려·사용중지·탈퇴. badge-suspend = 별칭(사용중지) */.pp-pub .badge-return, .pp-pub .badge-stop, .pp-pub .badge-suspend, .pp-pub .badge-withdraw{
  color: var(--r-500);
  border-color: var(--r-500);
}

/* 파랑 — 사용·이메일 발송. badge-active = 별칭(사용) */.pp-pub .badge-use, .pp-pub .badge-active, .pp-pub .badge-email{
  color: var(--b-500);
  border-color: var(--b-500);
}

/* 회색 — 전체·대기·미설정·취소 */.pp-pub .badge-all, .pp-pub .badge-wait, .pp-pub .badge-notset, .pp-pub .badge-cancel{
  color: var(--n-700);
  border-color: var(--n-700);
}

/* 보라 (Primary) — 파트너·승인·처리완료·적용완료·활성화 */.pp-pub .badge-partner, .pp-pub .badge-approval, .pp-pub .badge-complete-process, .pp-pub .badge-complete-apply, .pp-pub .badge-activation{
  color: var(--color-point);
  border-color: var(--color-point);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 드롭다운 메뉴 (List / List_menu) — @Guide_Component. 액션 리스트, 트리거 표출은 사용처 JS.
 * 셀렉트박스 스몰 드롭다운(.select-box--sm)과 동일 톤(P-400 테두리·P-50 hover).
 */.pp-pub .menu{
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  min-width: 95px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--p-400);
  border-radius: 6px;
  box-shadow: 0 0 2px rgba(181, 181, 181, 0.24);
}.pp-pub .menu-item{
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--n-900);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
}.pp-pub .menu-item:hover{
  background: var(--p-50);
  color: var(--db-700);
}.pp-pub .menu-item:disabled, .pp-pub .menu-item.is-disabled{
  background: none;
  color: var(--n-400);
  cursor: default;
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 페이지네이션 (목록 공통) — @공지사항 목록(Figma).
 * 활성 = 검정 원(N-900) 흰 글자 / 비활성 N-600 / 다음 = 더블 화살표 아이콘.
 */.pp-pub .pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}.pp-pub .pagination a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}.pp-pub .pagination .is-active{
  background: var(--color-text-black);
  color: #fff;
  font-weight: var(--fw-bold);
}.pp-pub .pagination .page-next{
  color: var(--text-02);
}.pp-pub .pagination .page-next .ico{
  width: 16px;
  height: 16px;
}

/**
 * 탭 메뉴 — @Guide_Component. .tab > .tab-item(.is-active).
 * 상태: default(하단 1px N-300) / hover(배경 N-50) / select(하단 2px Primary).
 */.pp-pub .tab{
  display: flex;
  width: 100%;
}.pp-pub .tab-item{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid var(--n-300);
  font-size: 16px;
  line-height: 24px;
  color: var(--n-600);
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}.pp-pub .tab-item:hover{
  background: var(--n-50);
}.pp-pub .tab-item.is-active{
  border-bottom: 2px solid var(--color-point);
  font-weight: 600;
  color: var(--n-900);
}

/**
 * 스텝/진행 단계 (미구현). 필요 시 ../common/variables·mixins 를 @use 로 추가.
 */
/**
 * 아코디언 (FAQ) — 열림 시 .accordion-item 에 .is-open 토글(JS).
 */.pp-pub .accordion{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}.pp-pub .accordion-item{
  background: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  transition: background 0.2s, border-color 0.2s;
}.pp-pub .accordion-head{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  text-align: left;
}.pp-pub .accordion-head .q{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--color-bg-tranparent);
  color: var(--color-point);
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}.pp-pub .accordion-head .accordion-title{
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--color-text-black);
}.pp-pub .accordion-head{
  /* 화살표 — arrow_down_blod 아이콘(Figma 16×16). 펼침 시 180° 회전(↑) */
}.pp-pub .accordion-head .ico-arrow{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  -webkit-mask: url("/img/icons/line/arrow_down_blod.svg") center/contain no-repeat;
          mask: url("/img/icons/line/arrow_down_blod.svg") center/contain no-repeat;
  color: var(--text-03);
  transition: transform 0.2s;
}.pp-pub .accordion-body{
  display: none;
  padding: 10px 20px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  color: var(--color-text-default);
}

/* 열림 상태 — 연보라 카드 + Primary 보더 + Q 채움 */.pp-pub .accordion-item.is-open{
  background: var(--p-100);
  border-color: var(--color-point);
}.pp-pub .accordion-item.is-open .accordion-head{
  padding-bottom: 0;
}.pp-pub .accordion-item.is-open .q{
  background: var(--color-point);
  color: #fff;
}.pp-pub .accordion-item.is-open .accordion-title{
  font-weight: 700;
}.pp-pub .accordion-item.is-open .accordion-body{
  display: block;
}.pp-pub .accordion-item.is-open .ico-arrow{
  color: var(--n-900);
  transform: rotate(180deg);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 모달/팝업 (공통) — 오버레이 + 박스(head/body/foot) + 폼 헬퍼.
 * 열닫기는 _common.js 의 openModal / closeModal.
 */.pp-pub .modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.4);
}.pp-pub .modal-box{
  display: flex;
  flex-direction: column;
  width: 520px;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}.pp-pub .modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-bd-light-2);
}.pp-pub .modal-head h2{
  font-size: 18px;
  line-height: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-text-black);
}.pp-pub .modal-close{
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-03);
  cursor: pointer;
}.pp-pub .modal-close:hover{
  color: var(--color-text-black);
}.pp-pub .modal-body{
  flex: 1 1 auto;
  padding: 24px;
  overflow-y: auto;
  /* 모달 폼 라벨(공통 .form-label 미사용 — 여기서 통일) */
}.pp-pub .modal-body label{
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  color: var(--n-900);
}.pp-pub .modal-body{
  /* 파일 input 은 기본 렌더 유지(높이 44 강제 X) */
}.pp-pub .modal-body input[type=file]{
  font-size: 14px;
  line-height: 20px;
  color: var(--text-02);
}.pp-pub .modal-foot{
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--color-bd-light-2);
}

/* 2열 폼 행 */.pp-pub .form-row.two{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* 필수 표시 · 부가 설명 */.pp-pub .req{
  color: var(--color-point);
}.pp-pub .muted{
  color: var(--text-03);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 팝업 (공용) — @Guide_UI > Popup. 오버레이/열닫기는 _modal.scss + _common.js 재사용.
 * 구성: .popup > .popup-head + .popup-body + .popup-foot. 버튼은 공통 .btn(-primary/-secondary=50h).
 */
/* 박스 — 오버레이(.modal-overlay) 안 중앙 배치 */.pp-pub .popup{
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
}

/* 폼형(입력/목록) 넓은 폭 */.pp-pub .popup--wide{
  width: 440px;
}

/* 제목(popup_title) — 가운데 Bold 16, 하단 N-100 라인. 위 2모서리만 14 라운딩(아래 0) */.pp-pub .popup-head{
  display: flex;
  align-items: center;
  padding: 13px 16px;
  background: #fff;
  border-bottom: 1px solid var(--color-bd-light-2);
  border-radius: 14px 14px 0 0;
}.pp-pub .popup-head h2{
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: var(--fw-bold);
  color: var(--n-900);
  text-align: center;
}

/* 제목 + 닫기(X) 변형 — X 폭만큼 좌측 패딩(제목 가운데 유지) */.pp-pub .popup-head--btn{
  padding-left: 36px;
}.pp-pub .popup-close{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  background: none;
  color: var(--n-900);
  cursor: pointer;
}.pp-pub .popup-close .ico{
  width: 20px;
  height: 20px;
}

/* 내용(contents) — 상하 30 좌우 20, 최소높이 150(짧으면 세로중앙)
 * safe center: 내용이 넘치면 상단정렬로 안전 폴백(긴 폼 팝업 상단 잘림 방지) */.pp-pub .popup-body{
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: safe center;
  min-height: 150px;
  padding: 30px 20px;
  overflow-y: auto;
}

/* 알림형 내용 — (success 등)아이콘 + 안내문: 가운데, gap 16 */.pp-pub .popup-msg{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
  text-align: center;
}.pp-pub .popup-msg-icon{
  width: 40px;
  height: 40px;
  color: var(--p-600);
}

/* 버튼(popup_btn) — 상단 라인 없음, gap 16, 하단 20 / 버튼 2등분(.btn-primary·-secondary=50h) */.pp-pub .popup-foot{
  display: flex;
  gap: 16px;
  padding: 0 20px 20px;
  background: #fff;
  border-radius: 0 0 14px 14px;
}.pp-pub .popup-foot .btn{
  flex: 1 1 0;
}

/* 오류 메시지(error_message) — R-50 배경 박스 + 아이콘 + 안내(R-500 13-M) */.pp-pub .error-msg{
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 16px;
  background: var(--r-50);
  font-size: 13px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

/* 인라인 변형 — 입력 하단 필드 오류 등(배경/패딩 없이 아이콘+텍스트만) */.pp-pub .error-msg--plain{
  align-items: flex-start;
  padding: 0;
  background: none;
}

/* 폼형 팝업 본문 — 안내문구 + 입력요소(좌측 정렬, gap 16) */.pp-pub .popup-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}.pp-pub .popup-form-guide{
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-medium);
  color: var(--n-900);
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 툴팁 — @Guide_Component. 흰 말풍선 + P-700 테두리 + 꼬리(beak). 14-M · N-700 · radius 6.
 * 변형: .tooltip--top(꼬리 아래) [기본] / .tooltip--bottom(꼬리 위). 좌표는 사용처에서 지정.
 */.pp-pub .tooltip{
  position: relative;
  display: inline-block;
  max-width: 270px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--p-700);
  border-radius: 6px;
  box-shadow: 0 4px 5px rgba(66, 51, 203, 0.1);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-medium);
  color: var(--n-700);
  white-space: normal;
  /* 꼬리(beak) — 45° 회전 사각형에서 테두리 2변만 보이게(흰 채움으로 말풍선 테두리와 연결) */
}.pp-pub .tooltip::after{
  content: "";
  position: absolute;
  left: 24px;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid var(--p-700);
  transform: rotate(45deg);
}

/* 상단형: 대상 위 → 꼬리 아래(우·하 변만 노출 = 아래를 가리킴) */.pp-pub .tooltip--top::after{
  bottom: -6px;
  border-top: 0;
  border-left: 0;
}

/* 하단형: 대상 아래 → 꼬리 위(좌·상 변만 노출 = 위를 가리킴) */.pp-pub .tooltip--bottom::after{
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}

/**
 * 헤더 / GNB (로그아웃/로그인 상태 공통)
 */
/**
 * 페이지 공통 요소 — @[OP+PP] Guide_Layout. 타이틀 3종:
 *   page-title 28-B / contents-title 20-B / group-title (Primary 바 + 15-SB, --fold 접이식)
 */
/* 페이지 타이틀 (Figma page-title / Property 1=Default) */.pp-pub .page-title{
  margin-bottom: 28px;
  font-size: 28px;
  line-height: 40px;
  font-weight: var(--fw-bold);
  color: var(--color-text-black);
}

/* 타이틀 + 설명문구 (Figma page-title / Property 1=Title+Text) */.pp-pub .page-head{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 28px;
}.pp-pub .page-head .page-title{
  margin-bottom: 0;
}.pp-pub .page-title-desc{
  font-size: 15px;
  line-height: 22px;
  color: var(--text-02);
}

/* 콘텐츠 타이틀 (Figma contents_title) */.pp-pub .contents-title{
  font-size: 20px;
  line-height: 30px;
  font-weight: var(--fw-bold);
  color: var(--color-text-black);
}

/* 그룹 타이틀 (Figma Group_title) — 좌측 3×12 Primary 바 + 15-SB */.pp-pub .group-title{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-black);
}.pp-pub .group-title::before{
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 12px;
  background: var(--color-point);
}.pp-pub .group-title-text{
  flex: 1 1 auto;
  min-width: 0;
}

/* 접이식 변형 (Figma Group_title / Property 1=폴딩) — 우측 arrow_down.
   열림 시 .is-open 으로 화살표 180° (토글 동작은 페이지/JS 담당) */.pp-pub .group-title--fold{
  width: 100%;
  padding-right: 14px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}.pp-pub .group-title--fold .ico{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--color-text-black);
  transition: transform 0.15s;
}.pp-pub .group-title--fold.is-open .ico{
  transform: rotate(180deg);
}

/* flatpickr 기본 스타일(벤더) — 테마 오버라이드는 modules/_datepicker.scss */.pp-pub .flatpickr-calendar{
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08);
}.pp-pub .flatpickr-calendar.open, .pp-pub .flatpickr-calendar.inline{
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}.pp-pub .flatpickr-calendar.open{
  display: inline-block;
  z-index: 99999;
}.pp-pub .flatpickr-calendar.animate.open{
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}.pp-pub .flatpickr-calendar.inline{
  display: block;
  position: relative;
  top: 2px;
}.pp-pub .flatpickr-calendar.static{
  position: absolute;
  top: calc(100% + 2px);
}.pp-pub .flatpickr-calendar.static.open{
  z-index: 999;
  display: block;
}.pp-pub .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){
  box-shadow: none !important;
}.pp-pub .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}.pp-pub .flatpickr-calendar .hasWeeks .dayContainer, .pp-pub .flatpickr-calendar .hasTime .dayContainer{
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}.pp-pub .flatpickr-calendar .hasWeeks .dayContainer{
  border-left: 0;
}.pp-pub .flatpickr-calendar.hasTime .flatpickr-time{
  height: 40px;
  border-top: 1px solid #e6e6e6;
}.pp-pub .flatpickr-calendar.noCalendar.hasTime .flatpickr-time{
  height: auto;
}.pp-pub .flatpickr-calendar:before, .pp-pub .flatpickr-calendar:after{
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  left: 22px;
}.pp-pub .flatpickr-calendar.rightMost:before, .pp-pub .flatpickr-calendar.arrowRight:before, .pp-pub .flatpickr-calendar.rightMost:after, .pp-pub .flatpickr-calendar.arrowRight:after{
  left: auto;
  right: 22px;
}.pp-pub .flatpickr-calendar.arrowCenter:before, .pp-pub .flatpickr-calendar.arrowCenter:after{
  left: 50%;
  right: 50%;
}.pp-pub .flatpickr-calendar:before{
  border-width: 5px;
  margin: 0 -5px;
}.pp-pub .flatpickr-calendar:after{
  border-width: 4px;
  margin: 0 -4px;
}.pp-pub .flatpickr-calendar.arrowTop:before, .pp-pub .flatpickr-calendar.arrowTop:after{
  bottom: 100%;
}.pp-pub .flatpickr-calendar.arrowTop:before{
  border-bottom-color: #e6e6e6;
}.pp-pub .flatpickr-calendar.arrowTop:after{
  border-bottom-color: #fff;
}.pp-pub .flatpickr-calendar.arrowBottom:before, .pp-pub .flatpickr-calendar.arrowBottom:after{
  top: 100%;
}.pp-pub .flatpickr-calendar.arrowBottom:before{
  border-top-color: #e6e6e6;
}.pp-pub .flatpickr-calendar.arrowBottom:after{
  border-top-color: #fff;
}.pp-pub .flatpickr-calendar:focus{
  outline: 0;
}.pp-pub .flatpickr-wrapper{
  position: relative;
  display: inline-block;
}.pp-pub .flatpickr-months{
  display: flex;
}.pp-pub .flatpickr-months .flatpickr-month{
  background: transparent;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  flex: 1;
}.pp-pub .flatpickr-months .flatpickr-prev-month, .pp-pub .flatpickr-months .flatpickr-next-month{
  -webkit-user-select: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: rgba(0, 0, 0, 0.9);
  fill: rgba(0, 0, 0, 0.9);
}.pp-pub .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .pp-pub .flatpickr-months .flatpickr-next-month.flatpickr-disabled{
  display: none;
}.pp-pub .flatpickr-months .flatpickr-prev-month i, .pp-pub .flatpickr-months .flatpickr-next-month i{
  position: relative;
}.pp-pub .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .pp-pub .flatpickr-months .flatpickr-next-month.flatpickr-prev-month{
  /*
      /*rtl:begin:ignore*/
  /*
      */
  left: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/.pp-pub .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .pp-pub .flatpickr-months .flatpickr-next-month.flatpickr-next-month{
  /*
      /*rtl:begin:ignore*/
  /*
      */
  right: 0;
  /*
      /*rtl:end:ignore*/
  /*
      */
}

/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/.pp-pub .flatpickr-months .flatpickr-prev-month:hover, .pp-pub .flatpickr-months .flatpickr-next-month:hover{
  color: #959ea9;
}.pp-pub .flatpickr-months .flatpickr-prev-month:hover svg, .pp-pub .flatpickr-months .flatpickr-next-month:hover svg{
  fill: #f64747;
}.pp-pub .flatpickr-months .flatpickr-prev-month svg, .pp-pub .flatpickr-months .flatpickr-next-month svg{
  width: 14px;
  height: 14px;
}.pp-pub .flatpickr-months .flatpickr-prev-month svg path, .pp-pub .flatpickr-months .flatpickr-next-month svg path{
  transition: fill 0.1s;
  fill: inherit;
}.pp-pub .numInputWrapper{
  position: relative;
  height: auto;
}.pp-pub .numInputWrapper input, .pp-pub .numInputWrapper span{
  display: inline-block;
}.pp-pub .numInputWrapper input{
  width: 100%;
}.pp-pub .numInputWrapper input::-ms-clear{
  display: none;
}.pp-pub .numInputWrapper input::-webkit-outer-spin-button, .pp-pub .numInputWrapper input::-webkit-inner-spin-button{
  margin: 0;
  -webkit-appearance: none;
}.pp-pub .numInputWrapper span{
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(57, 57, 57, 0.15);
  box-sizing: border-box;
}.pp-pub .numInputWrapper span:hover{
  background: rgba(0, 0, 0, 0.1);
}.pp-pub .numInputWrapper span:active{
  background: rgba(0, 0, 0, 0.2);
}.pp-pub .numInputWrapper span:after{
  display: block;
  content: "";
  position: absolute;
}.pp-pub .numInputWrapper span.arrowUp{
  top: 0;
  border-bottom: 0;
}.pp-pub .numInputWrapper span.arrowUp:after{
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(57, 57, 57, 0.6);
  top: 26%;
}.pp-pub .numInputWrapper span.arrowDown{
  top: 50%;
}.pp-pub .numInputWrapper span.arrowDown:after{
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(57, 57, 57, 0.6);
  top: 40%;
}.pp-pub .numInputWrapper span svg{
  width: inherit;
  height: auto;
}.pp-pub .numInputWrapper span svg path{
  fill: rgba(0, 0, 0, 0.5);
}.pp-pub .numInputWrapper:hover{
  background: rgba(0, 0, 0, 0.05);
}.pp-pub .numInputWrapper:hover span{
  opacity: 1;
}.pp-pub .flatpickr-current-month{
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}.pp-pub .flatpickr-current-month span.cur-month{
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}.pp-pub .flatpickr-current-month span.cur-month:hover{
  background: rgba(0, 0, 0, 0.05);
}.pp-pub .flatpickr-current-month .numInputWrapper{
  width: 6ch;
  width: 7ch\0 ;
  display: inline-block;
}.pp-pub .flatpickr-current-month .numInputWrapper span.arrowUp:after{
  border-bottom-color: rgba(0, 0, 0, 0.9);
}.pp-pub .flatpickr-current-month .numInputWrapper span.arrowDown:after{
  border-top-color: rgba(0, 0, 0, 0.9);
}.pp-pub .flatpickr-current-month input.cur-year{
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  appearance: textfield;
}.pp-pub .flatpickr-current-month input.cur-year:focus{
  outline: 0;
}.pp-pub .flatpickr-current-month input.cur-year[disabled], .pp-pub .flatpickr-current-month input.cur-year[disabled]:hover{
  font-size: 100%;
  color: rgba(0, 0, 0, 0.5);
  background: transparent;
  pointer-events: none;
}.pp-pub .flatpickr-current-month .flatpickr-monthDropdown-months{
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}.pp-pub .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .pp-pub .flatpickr-current-month .flatpickr-monthDropdown-months:active{
  outline: none;
}.pp-pub .flatpickr-current-month .flatpickr-monthDropdown-months:hover{
  background: rgba(0, 0, 0, 0.05);
}.pp-pub .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{
  background-color: transparent;
  outline: none;
  padding: 0;
}.pp-pub .flatpickr-weekdays{
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}.pp-pub .flatpickr-weekdays .flatpickr-weekdaycontainer{
  display: flex;
  flex: 1;
}.pp-pub span.flatpickr-weekday{
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0, 0, 0, 0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1;
  font-weight: bolder;
}.pp-pub .dayContainer, .pp-pub .flatpickr-weeks{
  padding: 1px 0 0 0;
}.pp-pub .flatpickr-days{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}.pp-pub .flatpickr-days:focus{
  outline: 0;
}.pp-pub .dayContainer{
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}.pp-pub .dayContainer + .dayContainer{
  box-shadow: -1px 0 0 #e6e6e6;
}.pp-pub .flatpickr-day{
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #393939;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}.pp-pub .flatpickr-day.inRange, .pp-pub .flatpickr-day.prevMonthDay.inRange, .pp-pub .flatpickr-day.nextMonthDay.inRange, .pp-pub .flatpickr-day.today.inRange, .pp-pub .flatpickr-day.prevMonthDay.today.inRange, .pp-pub .flatpickr-day.nextMonthDay.today.inRange, .pp-pub .flatpickr-day:hover, .pp-pub .flatpickr-day.prevMonthDay:hover, .pp-pub .flatpickr-day.nextMonthDay:hover, .pp-pub .flatpickr-day:focus, .pp-pub .flatpickr-day.prevMonthDay:focus, .pp-pub .flatpickr-day.nextMonthDay:focus{
  cursor: pointer;
  outline: 0;
  background: #e6e6e6;
  border-color: #e6e6e6;
}.pp-pub .flatpickr-day.today{
  border-color: #959ea9;
}.pp-pub .flatpickr-day.today:hover, .pp-pub .flatpickr-day.today:focus{
  border-color: #959ea9;
  background: #959ea9;
  color: #fff;
}.pp-pub .flatpickr-day.selected, .pp-pub .flatpickr-day.startRange, .pp-pub .flatpickr-day.endRange, .pp-pub .flatpickr-day.selected.inRange, .pp-pub .flatpickr-day.startRange.inRange, .pp-pub .flatpickr-day.endRange.inRange, .pp-pub .flatpickr-day.selected:focus, .pp-pub .flatpickr-day.startRange:focus, .pp-pub .flatpickr-day.endRange:focus, .pp-pub .flatpickr-day.selected:hover, .pp-pub .flatpickr-day.startRange:hover, .pp-pub .flatpickr-day.endRange:hover, .pp-pub .flatpickr-day.selected.prevMonthDay, .pp-pub .flatpickr-day.startRange.prevMonthDay, .pp-pub .flatpickr-day.endRange.prevMonthDay, .pp-pub .flatpickr-day.selected.nextMonthDay, .pp-pub .flatpickr-day.startRange.nextMonthDay, .pp-pub .flatpickr-day.endRange.nextMonthDay{
  background: #569ff7;
  box-shadow: none;
  color: #fff;
  border-color: #569ff7;
}.pp-pub .flatpickr-day.selected.startRange, .pp-pub .flatpickr-day.startRange.startRange, .pp-pub .flatpickr-day.endRange.startRange{
  border-radius: 50px 0 0 50px;
}.pp-pub .flatpickr-day.selected.endRange, .pp-pub .flatpickr-day.startRange.endRange, .pp-pub .flatpickr-day.endRange.endRange{
  border-radius: 0 50px 50px 0;
}.pp-pub .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .pp-pub .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .pp-pub .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
  box-shadow: -10px 0 0 #569ff7;
}.pp-pub .flatpickr-day.selected.startRange.endRange, .pp-pub .flatpickr-day.startRange.startRange.endRange, .pp-pub .flatpickr-day.endRange.startRange.endRange{
  border-radius: 50px;
}.pp-pub .flatpickr-day.inRange{
  border-radius: 0;
  box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}.pp-pub .flatpickr-day.flatpickr-disabled, .pp-pub .flatpickr-day.flatpickr-disabled:hover, .pp-pub .flatpickr-day.prevMonthDay, .pp-pub .flatpickr-day.nextMonthDay, .pp-pub .flatpickr-day.notAllowed, .pp-pub .flatpickr-day.notAllowed.prevMonthDay, .pp-pub .flatpickr-day.notAllowed.nextMonthDay{
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  border-color: transparent;
  cursor: default;
}.pp-pub .flatpickr-day.flatpickr-disabled, .pp-pub .flatpickr-day.flatpickr-disabled:hover{
  cursor: not-allowed;
  color: rgba(57, 57, 57, 0.1);
}.pp-pub .flatpickr-day.week.selected{
  border-radius: 0;
  box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
}.pp-pub .flatpickr-day.hidden{
  visibility: hidden;
}.pp-pub .rangeMode .flatpickr-day{
  margin-top: 1px;
}.pp-pub .flatpickr-weekwrapper{
  float: left;
}.pp-pub .flatpickr-weekwrapper .flatpickr-weeks{
  padding: 0 12px;
  box-shadow: 1px 0 0 #e6e6e6;
}.pp-pub .flatpickr-weekwrapper .flatpickr-weekday{
  float: none;
  width: 100%;
  line-height: 28px;
}.pp-pub .flatpickr-weekwrapper span.flatpickr-day, .pp-pub .flatpickr-weekwrapper span.flatpickr-day:hover{
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(57, 57, 57, 0.3);
  background: transparent;
  cursor: default;
  border: none;
}.pp-pub .flatpickr-innerContainer{
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}.pp-pub .flatpickr-rContainer{
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}.pp-pub .flatpickr-time{
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}.pp-pub .flatpickr-time:after{
  content: "";
  display: table;
  clear: both;
}.pp-pub .flatpickr-time .numInputWrapper{
  flex: 1;
  width: 40%;
  height: 40px;
  float: left;
}.pp-pub .flatpickr-time .numInputWrapper span.arrowUp:after{
  border-bottom-color: #393939;
}.pp-pub .flatpickr-time .numInputWrapper span.arrowDown:after{
  border-top-color: #393939;
}.pp-pub .flatpickr-time.hasSeconds .numInputWrapper{
  width: 26%;
}.pp-pub .flatpickr-time.time24hr .numInputWrapper{
  width: 49%;
}.pp-pub .flatpickr-time input{
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #393939;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  appearance: textfield;
}.pp-pub .flatpickr-time input.flatpickr-hour{
  font-weight: bold;
}.pp-pub .flatpickr-time input.flatpickr-minute, .pp-pub .flatpickr-time input.flatpickr-second{
  font-weight: 400;
}.pp-pub .flatpickr-time input:focus{
  outline: 0;
  border: 0;
}.pp-pub .flatpickr-time .flatpickr-time-separator, .pp-pub .flatpickr-time .flatpickr-am-pm{
  height: inherit;
  float: left;
  line-height: inherit;
  color: #393939;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
  user-select: none;
  align-self: center;
}.pp-pub .flatpickr-time .flatpickr-am-pm{
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}.pp-pub .flatpickr-time input:hover, .pp-pub .flatpickr-time .flatpickr-am-pm:hover, .pp-pub .flatpickr-time input:focus, .pp-pub .flatpickr-time .flatpickr-am-pm:focus{
  background: #eee;
}.pp-pub .flatpickr-input[readonly]{
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/**
 * 날짜피커(flatpickr) 테마 — 벤더 하드코딩 색/폰트를 전부 토큰으로 덮음.
 * 기하값(그림자/라운드/여백)은 관례대로 px.
 */
/* flatpickr 부착 시 input이 readonly 되어 .input[readonly] 회색이 먹는 것 방지.
   날짜칸은 달력을 여는 활성 요소이므로 흰색 + 커서 포인터. */.pp-pub .input.flatpickr-input{
  background: #fff;
  cursor: pointer;
}.pp-pub .input.flatpickr-input:hover{
  border-color: var(--p-400);
}

/* 컨테이너(카드형 팝오버) — 좌우 패딩 16 확보 위해 폭 342 */.pp-pub .flatpickr-calendar{
  width: 342px;
  padding: 8px 16px 12px;
  border: 1px solid var(--color-bd-light);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-family: var(--font-base);
}

/* 이전/다음 달 화살표 — 위치 안쪽 + 색 토큰화 */.pp-pub .flatpickr-months .flatpickr-prev-month{
  left: 36px;
}.pp-pub .flatpickr-months .flatpickr-next-month{
  right: 36px;
}.pp-pub .flatpickr-months .flatpickr-prev-month svg, .pp-pub .flatpickr-months .flatpickr-next-month svg{
  fill: var(--text-02);
}.pp-pub .flatpickr-months .flatpickr-prev-month:hover svg, .pp-pub .flatpickr-months .flatpickr-next-month:hover svg{
  fill: var(--color-point);
}

/* 월/연도 헤더 "2026 6월" — 정중앙, 연도 스피너/선택 제거 */.pp-pub .flatpickr-current-month{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0;
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--color-text-black);
  /* 연도(numInputWrapper) — 월 앞 + 선택기능 제거 */
}.pp-pub .flatpickr-current-month .numInputWrapper{
  order: -1;
  width: 4ch;
  pointer-events: none;
}.pp-pub .flatpickr-current-month .numInputWrapper span.arrowUp, .pp-pub .flatpickr-current-month .numInputWrapper span.arrowDown{
  display: none;
}.pp-pub .flatpickr-current-month input.cur-year{
  width: 100%;
  height: 22px;
  padding: 0;
  line-height: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-text-black);
  text-align: right;
  vertical-align: middle;
  pointer-events: none;
}.pp-pub .flatpickr-current-month .cur-month{
  height: 22px;
  margin: 0;
  line-height: 22px;
  font-weight: var(--fw-bold);
  vertical-align: middle;
}

/* 요일 헤더 */.pp-pub .flatpickr-weekday{
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-03);
}

/* 날짜 셀(기본) */.pp-pub .flatpickr-day{
  font-size: var(--fs-14);
  color: var(--color-text-black);
}.pp-pub .flatpickr-day:hover, .pp-pub .flatpickr-day:focus{
  background: var(--n-50);
  border-color: var(--n-50);
}

/* 전/다음 달·비활성 = 흐리게 */.pp-pub .flatpickr-day.prevMonthDay, .pp-pub .flatpickr-day.nextMonthDay, .pp-pub .flatpickr-day.flatpickr-disabled{
  color: var(--n-300);
}.pp-pub .flatpickr-day.flatpickr-disabled:hover{
  background: transparent;
}

/* 선택일 / 기간 양끝 = Primary 보라(꽉 찬 원) */.pp-pub .flatpickr-day.selected, .pp-pub .flatpickr-day.startRange, .pp-pub .flatpickr-day.endRange, .pp-pub .flatpickr-day.selected:hover, .pp-pub .flatpickr-day.startRange:hover, .pp-pub .flatpickr-day.endRange:hover, .pp-pub .flatpickr-day.selected:focus, .pp-pub .flatpickr-day.startRange:focus, .pp-pub .flatpickr-day.endRange:focus{
  background: var(--color-point);
  border-color: var(--color-point);
  color: #fff;
}

/* 선택일이 전/다음 달 칸에 걸릴 때도 벤더 파랑(#569ff7) 대신 보라 */.pp-pub .flatpickr-day.selected.prevMonthDay, .pp-pub .flatpickr-day.selected.nextMonthDay, .pp-pub .flatpickr-day.startRange.prevMonthDay, .pp-pub .flatpickr-day.startRange.nextMonthDay, .pp-pub .flatpickr-day.endRange.prevMonthDay, .pp-pub .flatpickr-day.endRange.nextMonthDay{
  background: var(--color-point);
  border-color: var(--color-point);
  color: #fff;
}

/* 기간 중간 = 연보라 (벤더 파랑 box-shadow 연결선도 토큰으로) */.pp-pub .flatpickr-day.inRange{
  background: var(--p-100);
  border-color: var(--p-100);
  box-shadow: -5px 0 0 var(--p-100), 5px 0 0 var(--p-100);
}.pp-pub .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .pp-pub .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .pp-pub .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){
  box-shadow: -10px 0 0 var(--color-point);
}.pp-pub .flatpickr-day.week.selected{
  box-shadow: -5px 0 0 var(--color-point), 5px 0 0 var(--color-point);
}

/* 오늘 = 회색 fill(꽉 찬 원). 선택일과 겹치면 보라(selected)가 우선 */.pp-pub .flatpickr-day.today:not(.selected){
  background: var(--n-100);
  border-color: var(--n-100);
  color: var(--color-text-black);
}.pp-pub .flatpickr-day.today:not(.selected):hover, .pp-pub .flatpickr-day.today:not(.selected):focus{
  background: var(--n-200);
  border-color: var(--n-200);
  color: var(--color-text-black);
}