/* [E-16] ============================================================ page-noti */

:root {
  --nt-w-no:    clamp(56px, 3.646vw, 70px);    /* 1열(번호/구분) 70 고정 */
  --nt-gap-15:  clamp(10px, .78125vw, 15px);   /* 좌측 그룹 gap 15 */
  --nt-row-h:   clamp(88px, 5.729vw, 110px);   /* 행 높이 110 */
  --nt-row-pad: clamp(16px, 1.5625vw, 30px);   /* 행 padding 30 */
  --nt-ctrl-h:  clamp(48px, 3.125vw, 60px);    /* select / input 높이 60 */
  --nt-btn:     clamp(40px, 2.604vw, 50px);    /* 페이지 버튼 50 */
  --nt-line:    #dddddd;                        /* 시안 테두리 = --line */
  --nt-hover:   #eeeeee;                        /* 페이지 버튼 hover (시안 88:1181) */
  --nt-row-hover: #fafafa;                      /* 행 hover · spec 모션 후보 */
}

/* ============================================================
   visual 88:868 (1920x400 · bg #e35457 · py100 · container 1600 pr100)
   ============================================================ */
.nv {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--brand-cta); color: var(--white);
  min-height: clamp(180px, 20.83vw, 400px);
  display: flex; align-items: center;
}
/* 88:879 — 좌측 세로 중앙 · opacity .7 (렌더 자산은 480x400) */
.nv__bg {
  /* 시안: absolute · left 0 · 480×500 · 세로 중앙 · opacity .70.
     세로 중앙을 transform 으로 잡으면 [data-parallax] 의 transform 이 그걸 덮는다 —
     transform 을 쓰지 않는 auto-margin 중앙 정렬로 둔다. */
  position: absolute; left: 0; top: 0; bottom: 0; margin-block: auto;
  width: clamp(160px, 25vw, 480px); height: clamp(167px, 26.04vw, 500px);
  object-fit: cover; object-position: left center;
  opacity: .7; z-index: 0; pointer-events: none;
}
.nv__inner {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
  padding-right: calc(var(--gutter) + clamp(0px, 5.21vw, 100px));   /* 88:869 pr-100 */
}
.nv__text {                                   /* 88:870 · column · items-start · gap 30 */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--gap-md); min-width: 0;
}
.nv__title {                                  /* 88:871 Bold 76 / lh 1.0 / #fff */
  font-size: clamp(26px, 3.958vw, 76px); line-height: 1;
  font-weight: 700; white-space: nowrap;
}
.nv__char { flex: 0 0 auto; width: clamp(92px, 9.479vw, 182px); height: auto; }
.nv-sh--img .nv-sh__in img { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .nv-sh--sq2, .nv-sh--p2 { display: none; }   /* 마스코트 좌측과 겹친다 */
}
@media (max-width: 768px) {                     /* spec 반응형 의도: 768 이하 장식 4개 숨김 */
}
@media (max-width: 479px) {
  .nv__char { display: none; }
  .nv__bg { opacity: .4; }
  .nv__inner { padding-right: var(--gutter); }
}

/* ============================================================
   container 88:884 — py150 · gap70 · items-center · bg #ffffff
   ============================================================ */
.nt-body { background: var(--white); }
.nt-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-xl);          /* 70 @1920 */
}

/* ---- title 88:886 (column · items-center · gap 30) ---- */
.nt-title {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-md); text-align: center; max-width: 100%;
}
.nt-title__mark { width: clamp(40px, 2.656vw, 51px); height: auto; }   /* 88:887 51x50 */
.nt-title__h {                                    /* 88:888 Bold 60 / lh 1.4 / #000 */
  font-size: clamp(26px, 3.125vw, 60px); line-height: 1.4;
  font-weight: 700; color: var(--ink); white-space: nowrap;
}
.nt-title__lead p {                               /* 88:889 Medium 22 / lh 1.8 / #222 */
  font-size: clamp(14px, 1.1458vw, 22px); line-height: 1.8;
  font-weight: 500; color: var(--ink-2);
  white-space: pre;                               /* 시안: 2줄 강제 개행 · 1행 끝 공백 1칸 보존 */
}

/* ============================================================
   content 88:1118 — w 1400 · column · items-center · gap 20
   ============================================================ */
.nt-content {
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--gap-sm);           /* 20 @1920 */
}

/* ---- top 88:1119 — 총건수 + 검색 (h60 · justify-between) ---- */
.nt-top {
  position: relative; z-index: 2;
  width: 100%; min-height: var(--nt-ctrl-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap-md);
}
.nt-count {                                       /* 88:1120 · 18 / lh1.0 / #000 */
  font-size: clamp(14px, .9375vw, 18px); line-height: 1; color: var(--ink);
  white-space: nowrap;
}
.nt-count span   { font-weight: 500; }            /* "총 " Medium */
.nt-count strong { font-weight: 700; }            /* "35개" Bold */

/* ---- 검색 88:1121 (505x60 · gap 5) ---- */
.nt-search { display: flex; align-items: center; gap: 5px; height: var(--nt-ctrl-h); }

/* select 88:1122 — 모바일: 네이티브 · 769+ : 커스텀 UI (option 높이 통일) */
.nt-select {                                      /* 88:1122 · pad20 · r6 · 옵션 "제목 + 내용" 폭 */
  flex: none;
  width: clamp(140px, 9.375vw, 180px); height: 100%;
  background-color: var(--white); color: var(--ink);
  border: 1px solid var(--nt-line); border-radius: var(--r-sm);
  padding-block: var(--optical-y) 0;
  padding-inline: clamp(12px, 1.04vw, 20px) clamp(34px, 2.6vw, 50px);
  box-sizing: border-box;
  font-size: clamp(14px, .9375vw, 18px); font-weight: 500; line-height: 1;
  appearance: none; -webkit-appearance: none;
  background-image: url("../assets/img/88-1124.webp");   /* 88:1124 weui:arrow-filled 22x11 */
  background-repeat: no-repeat;
  background-position: right clamp(12px, 1.04vw, 20px) center;
  background-size: clamp(14px, 1.146vw, 22px) auto;
  cursor: pointer;
  transition: border-color var(--mo-fast) var(--ease-out), box-shadow var(--mo-fast) var(--ease-out);
}
.nt-select:hover { border-color: #bbbbbb; }
.nt-select:focus { border-color: var(--brand-cta); box-shadow: 0 0 0 3px rgba(227, 84, 87, .15); outline: none; }

@media (min-width: 769px) {
  .nt-select-ui {
    position: relative; z-index: 3;
    flex: none;
    width: clamp(140px, 9.375vw, 180px);
    height: 100%;
  }
  .nt-select-ui.is-open { z-index: 10; }
  .nt-select__native {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
  }
  .nt-select__trigger {
    display: block;
    width: 100%; height: 100%;
    background-color: var(--white); color: var(--ink);
    border: 1px solid var(--nt-line); border-radius: var(--r-sm);
    padding-block: var(--optical-y) 0;
    padding-inline: clamp(12px, 1.04vw, 20px) clamp(34px, 2.6vw, 50px);
    box-sizing: border-box;
    font: inherit;
    font-size: clamp(14px, .9375vw, 18px); font-weight: 500; line-height: 1;
    text-align: left; white-space: nowrap;
    background-image: url("../assets/img/88-1124.webp");
    background-repeat: no-repeat;
    background-position: right clamp(12px, 1.04vw, 20px) center;
    background-size: clamp(14px, 1.146vw, 22px) auto;
    cursor: pointer;
    transition: border-color var(--mo-fast) var(--ease-out), box-shadow var(--mo-fast) var(--ease-out);
  }
  .nt-select__trigger:hover { border-color: #bbbbbb; }
  .nt-select__trigger:focus { border-color: var(--brand-cta); box-shadow: 0 0 0 3px rgba(227, 84, 87, .15); outline: none; }
  .nt-select-ui.is-open .nt-select__trigger {
    border-color: var(--brand-cta);
    box-shadow: 0 0 0 3px rgba(227, 84, 87, .15);
  }
  .nt-select__menu {
    position: absolute; z-index: 1;
    top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: 4px 0; list-style: none;
    background: var(--white);
    border: 1px solid var(--nt-line); border-radius: var(--r-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
  }
  .nt-select__menu[hidden] { display: none; }
  .nt-select__option {
    display: flex; align-items: center;
    min-height: 40px;
    padding: 0 clamp(12px, 1.04vw, 20px);
    padding-top: var(--optical-y);
    box-sizing: border-box;
    font-size: clamp(14px, .9375vw, 18px); font-weight: 500; line-height: 1;
    white-space: nowrap; cursor: pointer;
    transition: background-color var(--mo-fast) var(--ease-out), color var(--mo-fast) var(--ease-out);
  }
  .nt-select__option:hover,
  .nt-select__option.is-selected { background: #fff1f1; color: var(--brand-cta); }
}

.nt-search__box { position: relative; display: block; flex: none;
                  width: 350px; height: 100%; }
.nt-input {                                       /* 88:1126 350x60 · pad 18/20 · r6 */
  width: 100%; height: 100%;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--nt-line); border-radius: var(--r-sm);
  padding-block: var(--optical-y) 0;
  padding-inline: clamp(12px, 1.04vw, 20px) clamp(40px, 3.13vw, 56px);
  box-sizing: border-box;
  font-size: clamp(14px, .9375vw, 18px); font-weight: 500; line-height: 1;
  transition: border-color var(--mo-fast) var(--ease-out), box-shadow var(--mo-fast) var(--ease-out);
}
/* 시안 88:1127 의 placeholder 색은 #000000 이다 (미해상 ② · 임의로 회색화하지 않는다) */
.nt-input::placeholder { color: var(--ink); opacity: 1; }
.nt-input:hover { border-color: #bbbbbb; }
.nt-input:focus { border-color: var(--brand-cta); box-shadow: 0 0 0 3px rgba(227, 84, 87, .15); outline: none; }
.nt-input::-webkit-search-cancel-button { display: none; }
.nt-search__btn {
  position: absolute; right: clamp(10px, 1.04vw, 20px); top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: clamp(20px, 1.25vw, 24px); height: clamp(20px, 1.25vw, 24px);
  transition: transform var(--mo-fast) var(--ease-back);
}
.nt-search__btn img { width: 100%; height: auto; }
.nt-search__btn:hover { transform: scale(1.04); }

/* ============================================================
   list 88:1130 — border-top 2px #000 · 5행 · 각 행 border-bottom 1px #ddd
   ============================================================ */
.nt-list-wrap { width: 100%; }
.nt-list { width: 100%; border-top: 2px solid var(--ink); }
.nt-row { border-bottom: 1px solid var(--nt-line); }

.nt-row__a {
  display: flex; align-items: center; gap: var(--nt-gap-15);
  min-height: var(--nt-row-h); padding: 0 var(--nt-row-pad);
  transition: background-color .2s var(--ease-out);
}
.nt-row__a:hover { background: var(--nt-row-hover); }
.nt-row__a:hover .nt-row__title { color: var(--brand-cta); }

.nt-row__no {                                     /* 1열 70px 고정 */
  flex: none; width: var(--nt-w-no);
  display: flex; align-items: center; justify-content: center;
}
.nt-row__no--num {                                /* 행 4·5 · Medium 16 / #555 */
  font-size: clamp(13px, .8333vw, 16px); line-height: 1; font-weight: 500;
  color: var(--ink-3); text-align: center;
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-badge {                                       /* 88:1135 · pad 8/20 · r100 · Bold 16 / #222 */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px clamp(12px, 1.04vw, 20px); padding-top: calc(8px + var(--optical-y));
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  font-size: clamp(13px, .8333vw, 16px); line-height: 1; font-weight: 700;
  color: var(--ink-2); white-space: nowrap;
}
.nt-row__title {                                  /* Medium 18 / lh1.0 / #222 / nowrap */
  min-width: 0;
  font-size: clamp(15px, .9375vw, 18px); line-height: 1.3; font-weight: 500;
  color: var(--ink-2);
  padding-top: var(--optical-y);
  box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s var(--ease-out);
}
.nt-row__ico { flex: none; width: clamp(22px, 1.5625vw, 30px); height: auto; }  /* 88:1137 30x30 */
.nt-row__date {                                   /* Medium 16 / lh1.0 / #555 */
  flex: none; margin-left: auto;
  font-size: clamp(13px, .8333vw, 16px); line-height: 1; font-weight: 500;
  color: var(--ink-3); white-space: nowrap;
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-row__br { display: none; }                    /* 모바일 줄바꿈용 (기본 없음) */

/* ============================================================
   pagenation 88:1167 — pt30 · gap4 · 그룹 내부 gap10
   ============================================================ */
.nt-page {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding-top: var(--gap-md);                     /* 30 @1920 */
  flex-wrap: wrap;
}
.nt-page__grp { display: flex; align-items: center; gap: clamp(6px, .52vw, 10px); }
.nt-page__arrow {
  display: grid; place-items: center;
  width: clamp(20px, 1.25vw, 24px); height: clamp(20px, 1.25vw, 24px);
  transition: transform var(--mo-fast) var(--ease-back), opacity var(--mo-fast) var(--ease-out);
}
.nt-page__arrow img { width: 100%; height: auto; }
.nt-page__arrow--flip img { transform: scaleX(-1); }   /* 88:1189 그룹은 시안에서 180° 반전 */
.nt-page__arrow:hover { transform: scale(1.18); }

.nt-page__num {
  display: grid; place-items: center;
  width: var(--nt-btn); height: var(--nt-btn);
  border-radius: 50%;
  font-size: clamp(13px, .8333vw, 16px); line-height: 1; font-weight: 500;
  color: var(--ink-2);
  padding-top: var(--optical-y);
  box-sizing: border-box;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              transform var(--mo-fast) var(--ease-back);
}
/* 시안 88:1181 "2" 의 #eeeeee 는 hover 상태로 표기되어 있다 → :hover 로 옮긴다 */
.nt-page__num:hover { background: var(--nt-hover); }
.nt-page__num.is-current { background: var(--footer-bg); color: var(--white); }  /* 88:1179 #111 */
.nt-page__num.is-current:hover { background: var(--footer-bg); transform: none; }

/* ============================================================
   view — 공지 상세 (시안 미정의 · 목록 톤 추론)
   ============================================================ */
.nt-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nt-view__head {
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--nt-line);
  padding: clamp(24px, 2.083vw, 40px) var(--nt-row-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
.nt-view__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}
.nt-view__meta .nt-badge {
  align-items: flex-end;
  padding-block: calc(8px + var(--optical-y)) 8px;
  box-sizing: border-box;
}
.nt-view__date {
  font-size: clamp(13px, .8333vw, 16px);
  line-height: 1;
  font-weight: 500;
  color: var(--ink-3);
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-view__title {
  font-size: clamp(20px, 1.5625vw, 30px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-view__body {
  padding: clamp(28px, 2.604vw, 50px) var(--nt-row-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  font-size: clamp(15px, .9375vw, 18px);
  line-height: 1.8;
  font-weight: 500;
  color: var(--ink-2);
}
.nt-view__h {
  font-size: clamp(17px, 1.1458vw, 22px);
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink);
  margin-top: var(--gap-xs);
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-view__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 1.25em;
}
.nt-view__list li { list-style: disc; }
.nt-view__contact a {
  color: var(--brand-cta);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--mo-fast) var(--ease-out);
}
.nt-view__contact a:hover { color: var(--brand); }
.nt-view__sign {
  margin-top: var(--gap-xs);
  color: var(--ink);
}
.nt-view__files {
  border-top: 1px solid var(--nt-line);
  padding: clamp(20px, 1.5625vw, 30px) var(--nt-row-pad);
}
.nt-view__file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nt-view__file {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: clamp(14px, .9375vw, 18px);
  font-weight: 500;
  color: var(--ink-2);
  transition: color .2s var(--ease-out);
}
.nt-view__file:hover { color: var(--brand-cta); }
.nt-view__file img {
  width: clamp(22px, 1.5625vw, 30px);
  height: auto;
  flex: none;
}
.nt-view__file > span {
  padding-top: var(--optical-y);
  box-sizing: border-box;
  align-self: flex-end;
}
.nt-view__file-size {
  color: var(--ink-3);
  font-size: clamp(13px, .8333vw, 16px);
}
.nt-view__nav {
  border-top: 1px solid var(--nt-line);
  display: flex;
  flex-direction: column;
}
.nt-view__adj {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  padding: clamp(16px, 1.25vw, 24px) var(--nt-row-pad);
  border-bottom: 1px solid var(--nt-line);
  transition: background-color .2s var(--ease-out);
}
.nt-view__adj:hover { background: var(--nt-row-hover); }
.nt-view__adj-label {
  flex: none;
  width: var(--nt-w-no);
  font-size: clamp(13px, .8333vw, 16px);
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
  padding-top: var(--optical-y);
  box-sizing: border-box;
}
.nt-view__adj-title {
  min-width: 0;
  flex: 1 1 auto;
  font-size: clamp(14px, .9375vw, 18px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: var(--optical-y);
  box-sizing: border-box;
  transition: color .2s var(--ease-out);
}
.nt-view__adj:hover .nt-view__adj-title { color: var(--brand-cta); }
.nt-view__actions {
  display: flex;
  justify-content: center;
  padding: var(--gap-lg) var(--nt-row-pad) 0;
}

/* ============================================================
   반응형 (spec 반응형 의도 + 추론)
   ============================================================ */
/* 1280 — content 1400 → 화면 폭 - 거터. 행 padding 30→24 는 clamp 가 처리한다. */

@media (max-width: 1023px) {
  .nt-title__lead p { white-space: normal; }
}

/* 768 — top 2행 접힘 · 행 높이 auto(min 88) · 날짜를 제목 아래로 */
@media (max-width: 768px) {
  .nt-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .nt-search { width: 100%; }
  .nt-select {
    width: 130px;
    padding-inline: 10px 34px;
    background-position: right 10px center;
    background-size: 14px auto;
  }
  .nt-search__box { width: auto; flex: 1 1 auto; }

  .nt-row__a { flex-wrap: wrap; align-items: center;
               min-height: 88px; padding: 18px var(--nt-row-pad); row-gap: 8px; }
  .nt-row__no    { order: 1; width: auto; min-width: 56px; justify-content: flex-start; }
  /* flex-basis 0 + max-content 상한: 아이콘이 제목과 같은 줄에 붙어 남는다 */
  .nt-row__title { order: 2; flex: 1 1 0; max-width: max-content; white-space: normal;
                   display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                   overflow: hidden; }
  .nt-row__ico   { order: 3; }
  .nt-row__br    { order: 4; display: block; flex-basis: 100%; height: 0; }
  /* 날짜는 제목 아래(1열 폭만큼 들여쓰기) */
  .nt-row__date  { order: 5; margin-left: calc(56px + var(--nt-gap-15)); }
}

/* 400 — 검색 select · input 세로 100% */
@media (max-width: 400px) {
  .nt-search {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    gap: 8px;
  }
  .nt-select {
    width: 100%;
    height: var(--nt-ctrl-h);
  }
  .nt-search__box {
    width: 100%;
    flex: none;
    height: var(--nt-ctrl-h);
  }
}

/* 480 — 행 1행: [구분] … [날짜] / 2행: [제목] [아이콘] */
@media (max-width: 479px) {
  .nt-row__no   { order: 1; }
  .nt-row__date { order: 2; margin-left: auto; }
  .nt-row__br   { order: 3; }
  .nt-row__title{ order: 4; }
  .nt-row__ico  { order: 5; align-self: flex-start; }

  .nt-page { gap: 2px; }
  .nt-page__grp { gap: 4px; }

  .nt-view__adj { flex-wrap: wrap; row-gap: 8px; }
  .nt-view__adj-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---- 장식 도형 4개 — 시안 get_design_context 실측 (중심 % + 회전) ---- */
.nv-sh--sq1 { left: 90.97%; top: 62.65%; --rot: 30.26deg; --c: #ffda75; }
.nv-sh--sq2 { left: 72.93%; top: 60.8%; --rot: -53.01deg; --c: #12deab; }
.nv-sh--p1 { left: 93.13%; top: 26.52%; --rot: -30.46deg; }
.nv-sh--p2 { left: 70.75%; top: 24.36%; --rot: 34.74deg; }