@charset "utf-8";

/* header */
.l-header { border-bottom: 1px solid #CDD1D5; }
.header__utility { width: 100%; background: #F8F8F8; height: 40px;}
.header__utility .l-container {  justify-content: flex-end;  gap: 12px; }

.header__utility-item { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; padding: 0 2px;}
.header__utility-item span { color: #1E2124; }
.header__utility-item a { color: #000; }

.btn-font { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }

.header__brand {  width: 100%; height: 88px; }
.header__brand .l-container { justify-content: space-between; }
.logo a { display: flex; align-items: center; gap: 20px;}

.gnb { height: 100%;}
.gnb__list { display: flex; align-items: center; height: 100%; gap: 20px;}
.gnb__item { display: flex; align-items: center; height: 100%; padding: 0 16px; border-bottom: 4px solid transparent; font-size: 1.25rem; font-weight: 700; line-height: 1.5; transition: border-bottom-color var(--transition-base); }
.gnb__item a { transition: color var(--transition-base);}

.gnb__item.is-active, .gnb__item:hover { border-bottom-color: #009C67;}
.gnb__item.is-active a, .gnb__item:hover a { color: #169e70;}

.header__util { display: flex; align-items: center;}
.header__util-item a { display: flex; height: 56px; flex-direction: column; align-items: center; gap: 4px; padding: 4px 12px 0; font-weight: 700; font-size: 0.875rem; color: #1E2124; line-height: 1.5; border-radius: 8px; transition: var(--transition-base);  }
.header__util-item a:hover { background: #f2f2f2;}

/* main */
#main_content { border-bottom: 1px solid #cdd1d5; padding: 40px 0; flex: 1 0 auto; }
.section-visual,
.section-service { max-width: 1280px; margin: 0 auto; }

.section-visual { display: flex; gap: 25px; margin-bottom: 36px;}
.visual { position: relative; flex: 1 0 0; height: 460px; overflow: hidden; border-radius: 20px; background: #e6f7ff; }

.visual__track,
.visual__track .slick-list,
.visual__track .slick-track {  height: 100%; }

.visual__item { position: relative; height: 460px; }
.visual__item a { display: block; width: 100%; height: 100%; }
.visual__item a:focus-visible { outline: 3px solid #ffbf47; outline-offset: -3px; }
.visual__bg { display: block; width: 100%; height: 100%; object-fit: cover; }


.visual__control {  position: absolute; right: 20px;  bottom: 20px;  z-index: 5;  display: flex;  align-items: center;  gap: 6px;}
.visual__nav {  display: flex; align-items: center;  gap: 12px;  height: 36px;  padding: 0 16px;  border-radius: 60px;  background: rgba(30, 35, 45, 0.6);}

.visual__arrow {  width: 7px; display: flex; align-items: center; }
.visual__counter {  display: flex; align-items: center;  gap: 8px;  color: #fff;  font-size: 0.875rem;}
.visual__counter-divider { display: inline-block;  width: 1.5px;  height: 11px;  background: rgba(255, 255, 255, 0.6);transform: rotate(20deg);}
.visual__play { display: flex;  align-items: center;  justify-content: center;  width: 36px; height: 36px;  border-radius: 50%;  background: rgba(30, 35, 45, 0.6); }

.notice { position: relative; flex: 0 0 365px;  width: 365px;  height: 460px;  overflow: hidden;  border-radius: 20px;  background: #e5ebf7;}

.notice__track,
.notice__track .slick-list,
.notice__track .slick-track { height: 100%; }

.notice__item { height: 460px; }
.notice__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.notice__caption { position: absolute; left: 0px; right: 0px; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; background: rgba(30, 35, 45, 0.8); }
.notice__label { color: #fff; font-weight: 700; font-size: 1.125rem; }

.notice__indicator { display: flex; align-items: center; gap: 12px; }

.notice__dots .slick-dots { position: static; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.notice__dots .slick-dots li { display: flex; }
.notice__dots .slick-dots li button { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); font-size: 0; transition: background var(--transition-base); }

.notice__dots .slick-dots li.slick-active button { background: transparent; border: 3px solid #fff; }
.notice__dots .slick-dots li.slick-active button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(30, 35, 45, 0.8);
  transform: translate(-50%, -50%);
}

.notice__play { display: flex; align-items: center; justify-content: center;  }

/* ===== section-service ===== */
.section-service { display: flex; gap: 24px;}
.service__left {  display: flex;  flex: 0 0 380px;  flex-direction: column; gap: 24px;  width: 380px; }

/* 영상뉴스(video-card) */
.video-card { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 28px; padding: 40px 24px; border-radius: 20px; background: #169e70; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); color: #fff; }

.video-card__label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; font-size: 1.375rem; }
.video-card__icon { position: relative; width: 65px; height: 52px; }
.video-card__icon img { position: absolute; }
.video-card__icon-shadow { left: -0.4px; top: 35.6px; }
.video-card__icon-main { left: 0; top: 0; width: 65px; height: 49px; }

.video-card__thumb { width: 100%; overflow: hidden; border-radius: 12px; background: #5e5e5e; }
.video-card__thumb video { display: block; width: 100%; aspect-ratio: 239.75 / 131; object-fit: cover; background: #000; }

.video-card__txt { font-size: 1.0625rem; text-align: center; font-weight: 600; }
.video-card__txt strong { font-weight: 800; }

/* 수급보고 달력(calendar-card) */
.calendar-card { display: flex; flex: 1; flex-direction: column; border-radius:  20px 25px 25px; background: #009c67; }
.calendar-card__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; }
.calendar-card__title { font-weight: 700; font-size: 1.25rem; color: #fff; }

.calendar__nav { display: flex; align-items: center; gap: 8px; }
.calendar__nav-btn { display: flex; border-radius: 50%; transition: opacity var(--transition-base); }
.calendar__nav-btn:hover { opacity: 0.8; }
.calendar__nav-btn:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.calendar__month { font-weight: 500; font-size: 1.125rem; color: #fff; }

.calendar { display: flex; flex: 1; flex-direction: column; border-top: 0; border-radius: 20px; background: #fff; border-right: 1px solid #CDD1D5; border-left: 1px solid #CDD1D5; border-bottom: 1px solid #CDD1D5; }

.calendar__weekdays,
.calendar__dates,
.calendar__events { display: grid; grid-template-columns: repeat(7, 1fr); }

.calendar__weekdays { border-radius: 20px; background: #f5f5f5; }
.calendar__weekdays li { padding: 12px 0; font-weight: 600; font-size: 0.875rem; color: #444; text-align: center; }

.calendar__row { min-height: 60px; }

.calendar__dates { justify-items: center; padding-top: 2px; list-style: none; }
.calendar__dates li { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 500; font-size: 0.9375rem; color: #111; }
.calendar__dates li.is-today { border: 1px dashed #686868; }

.calendar__weekdays .is-sun,
.calendar__dates .is-sun { color: #ef0000; }
.calendar__weekdays .is-sat,
.calendar__dates .is-sat { color: #0685cd; }

/* 월 첫날의 시작 요일 */
.calendar__dates > [data-col="2"] { grid-column-start: 2; }
.calendar__dates > [data-col="3"] { grid-column-start: 3; }
.calendar__dates > [data-col="4"] { grid-column-start: 4; }
.calendar__dates > [data-col="5"] { grid-column-start: 5; }
.calendar__dates > [data-col="6"] { grid-column-start: 6; }
.calendar__dates > [data-col="7"] { grid-column-start: 7; }

/* dense 배치: 같은 칸에 먼저 놓인 바(주간보고)가 있으면 다음 줄로 내려감 */
.calendar__events { grid-auto-flow: row dense; grid-auto-rows: minmax(15px, auto); row-gap: 1px; margin-top: 1px; }

.calendar__bar { display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0 2px; overflow: hidden; border-left: 3px solid; border-radius: 3px; white-space: nowrap; }
.calendar__bar--weekly { padding: 0 3px 0 5px; border-left-color: #169e70; background: #f1f9e7; font-weight: 500; font-size: 0.65625rem; color: #06845a; }
.calendar__bar--monthly { border-left-color: #0685cd; background: #eef2ff; font-weight: 600; font-size: 0.6875rem; color: #006fb1; letter-spacing: -0.05em; }

.calendar__events > [data-col="1"] { grid-column-start: 1; }
.calendar__events > [data-col="2"] { grid-column-start: 2; }
.calendar__events > [data-col="3"] { grid-column-start: 3; }
.calendar__events > [data-col="4"] { grid-column-start: 4; }
.calendar__events > [data-col="5"] { grid-column-start: 5; }
.calendar__events > [data-col="6"] { grid-column-start: 6; }
.calendar__events > [data-col="7"] { grid-column-start: 7; }
.calendar__events > [data-span="2"] { grid-column-end: span 2; }
.calendar__events > [data-span="3"] { grid-column-end: span 3; }
.calendar__events > [data-span="4"] { grid-column-end: span 4; }
.calendar__events > [data-span="5"] { grid-column-end: span 5; }
.calendar__events > [data-span="6"] { grid-column-end: span 6; }
.calendar__events > [data-span="7"] { grid-column-end: span 7; }

.calendar__legend { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 14px; min-height: 52px; padding: 0 24px; border-top: 1px solid #cdd1d5; }
.calendar__legend-item { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.75rem; }
.calendar__legend-item::before { content: ""; flex: none; }
.calendar__legend-item--weekly { color: #06845a; }
.calendar__legend-item--weekly::before { width: 14px; height: 10px; border-left: 3px solid #169e70; border-radius: 2px; background: #f1f9e7; }
.calendar__legend-item--monthly { color: #006fb1; }
.calendar__legend-item--monthly::before { width: 14px; height: 10px; border-left: 3px solid #0685cd; border-radius: 2px; background: #eef2ff; }
.calendar__legend-item--today { color: #444; }
.calendar__legend-item--today::before { width: 10px; height: 10px; border: 1px dashed #686868; border-radius: 3px; }

.download-bar { display: flex;  align-items: center; justify-content: space-between; gap: 16px;  padding: 25px 32px;  border: 1px solid #cacaca;  border-radius: 20px;  background: #fff; color: inherit; text-decoration: none; transition: background var(--transition-base);}
.download-bar:hover { background: #f7f7f7; }
.download-bar:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.download-bar__txt { font-weight: 700; font-size: 1.125rem;}
.download-bar__btn { display: flex; align-items: center; justify-content: center; width: 36px;  height: 36px; border-radius: 12px; background: #525762; }

@keyframes download-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.download-bar:hover .download-bar__btn img,
.download-bar:focus-visible .download-bar__btn img {
  animation: download-bounce 0.6s ease-in-out infinite;
}

.service__right { display: flex; flex: 1;  flex-direction: column; gap: 24px;  min-width: 0;}
.guide-cards { display: flex;  gap: 24px;}
.guide-card { flex: 1; }

.guide-card a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; height: 100%; padding: 32px; border-radius: 20px; background: #f0f3ec; color: inherit; text-align: center; text-decoration: none; transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
.guide-card a:hover { background: #e6ece0; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08); }
.guide-card a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.guide-card__icon {  width: 120px;  height: 120px;  object-fit: contain;}

.guide-card__title { margin-bottom: 10px; }
.guide-card__desc { font-weight: 500; font-size: 0.9375rem; color: #444;}

.board-row { display: flex; gap: 24px; }
.board-notice { flex: 1 1 0; min-width: 0; }

.board__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 10px; }
.board__title,
.guide-card__title { font-weight: 700; font-size: 1.375rem; }
.board__title { color: #222; }

.link-more { display: flex; align-items: center; gap: 5px; font-weight: 500; font-size: 0.9375rem; color: #444; }
.link-more img { transition: transform var(--transition-base); }
.link-more:hover img,
.link-more:focus-visible img { transform: translateX(3px); }

.board__list { display: flex; flex-direction: column; gap: 14px;  }

.board__item-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; color: inherit; text-decoration: none; border-radius: 4px; transition: background var(--transition-base); }

.board__item-txt { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; font-size: 1.0625rem; }
.board__item-title { display: block; width: 326px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.board__dot { display: inline-block; flex: none; width: 4.3px; height: 4.3px; border-radius: 50%; background: #6d6d6d;}
.board__date { font-size: 0.875rem; color: #333;}

.board-side { display: flex; flex: 1 1 0; min-width: 0; gap: 14px; height: 180px; }

.card-dealer,
.card-kakao { position: relative; flex: 1; padding: 24px 24px 20px; border-radius: 20px; background: #f5f5f5; transition: background var(--transition-base); }

.card-dealer:hover,
.card-kakao:hover { background: #ececec; }

.card-dealer:focus-visible,
.card-kakao:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }

.card__inner { position: relative; width: 100%; height: 100%;}

.card__title { margin-bottom: 4px; font-weight: 700; font-size: 1.1875rem;}
.card__desc { font-weight: 600; font-size: 0.875rem; color: #444; }
.card__icon { position: absolute; right: 0; bottom: 0; width: 70px; height: 70px;  border-radius: 12px; background: #fff; object-fit: contain; }

.quick-menu { position: fixed; right: 195px; bottom: 44px; z-index: 100; }
.quick-menu__link { display: flex; flex-direction: column; align-items: center; }
.quick-menu__txt {  margin-top: -25px; padding: 4px 9px;  border-radius: 30px;  background: #313131; color: #fff;  font-weight: 600;  font-size: 0.9375rem;  line-height: 1.5; }

/* footer */
.l-footer { background: #f4f4f4; border-bottom: 1px solid #cdd1d5;}
.footer__top  { display: flex; align-items: center; justify-content: space-between; height: 70px; border-bottom: 1px solid #ccc; padding: 12px 0;}

.footer__policy a { font-weight: 700; font-size: 1rem ; color: #169e70; line-height: 1.5;} 

.footer__related { position: relative; height: 100%;}
.footer__related-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 234px; height: 100%; border-radius: 12px; padding: 0 24px; background-color: #fff; font-size: 0.9375rem; color: #222;}
.footer__related-toggle:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.footer__related-icon {  transition: transform var(--transition-base);}
.footer__related-toggle:hover .footer__related-icon,
.footer__related-toggle[aria-expanded="true"] .footer__related-icon { transform: rotate(45deg);}

.footer__related-list { position: absolute;  right: 0;  bottom: calc(100% + 8px);  width: 100%;  padding: 8px 0;  border-radius: 12px;  border: 1px solid #cdd1d5;  background: #fff;  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);  opacity: 0;  visibility: hidden;  transform: translateY(6px);  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);}
.footer__related-list.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.footer__related-list a { display: block ; padding: 10px 24px;  font-size: 0.9375rem;  color: #333; transition: var(--transition-base); }
.footer__related-list a:hover,
.footer__related-list a:focus-visible {  background: #f2f2f2; }

.footer__info { display: flex; align-items: flex-start; gap: 60px; padding: 12px 0;}
.footer__logo { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.footer__logo span { color: #525258;  font-size: 1.0625rem; font-weight: 700; line-height: 1.1; }

.footer__address { flex: 1; color: #444;  font-size: 1rem;  line-height: 1.5; }
.footer__address-sub { display: flex; align-items: center; font-size: 0.9375rem ; font-weight: 300; gap: 12px;}
.copyright { font-weight: 300; margin-top: 12px;}

.footer__tel { display: flex;  align-items: center;  gap: 12px; }
.footer__tel-num {  font-weight: 700;  font-size: 1.875rem;  color: #333; line-height: 1.5; }
.footer__tel-label { font-weight: 600; font-size: 0.9375rem; color: #444; }

/* ===== sub layout (서브페이지 공통) ===== */
.sub-layout { display: flex; align-items: stretch; gap: 40px; width: 100%; max-width: 1280px; margin: 0 auto; }

.lnb {  width: 220px;   overflow: hidden; border-radius: 20px;  padding-bottom: -10px; position: relative; align-self: flex-start; }
.lnb::before { content: ""; width: 100%; height: 70%; position: absolute; left: 0; top: 0; background: #169e70; z-index: -1;}

.lnb__title { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 80px; overflow: hidden;  background: #169e70; color: #fff; font-weight: 900; font-size: 1.25rem; }
.lnb__title::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 128px; height: 96px; background: url("../images/public/lnb-deco.svg") no-repeat center / contain; transform: translate(calc(-50% + 59px), calc(-50% + 8px)); pointer-events: none; }

.lnb__list { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 22px 20px; border: 1px solid #cdd1d5; border-radius: 20px; background: #fff; }
.lnb__item { width: 100%; }

.lnb__item > a { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 10px; border-bottom: 1px solid #e0e0e0; font-weight: 500; font-size: 1rem; color: #1b1b1b; transition: color var(--transition-base), border-color var(--transition-base); }

.lnb__arrow { flex: none; width: 8px; height: 8px; opacity: 0; transition: opacity var(--transition-base), transform var(--transition-base); }
.lnb__item:not(:has(> .lnb__sublist)) .lnb__arrow { display: none; }
.lnb__item.is-active > a .lnb__arrow,
.lnb__item > a:hover .lnb__arrow,
.lnb__item > a:focus-visible .lnb__arrow { opacity: 1; }
.lnb__item > a[aria-expanded="true"] .lnb__arrow { transform: rotate(90deg); }
.lnb__item.is-active > a,
.lnb__item > a:hover,
.lnb__item > a:focus-visible { border-bottom-color: #169e70; font-weight: 700; color: #169e70; }

.content { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 30px; min-width: 0; word-break: keep-all;}
.content__title { width: 100%; font-weight: 700; font-size: 1.625rem; line-height: 1.2; color: #323232; }
.content__body { width: 100%; gap: 30px; display: flex; flex-direction: column;  }

/* ===== 인사말(greeting) ===== */
.greeting-hero { position: relative; display: flex; align-items: center; width: 100%; padding: 60px 40px; border-radius: 20px; background: #f8f8f8; overflow: hidden; }
.greeting-hero__text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.greeting-hero__hello { font-weight: 700; font-size: 1.625rem; line-height: 1.2; color: #169e70; }
.greeting-hero__welcome { font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: #111; }
.greeting-hero__img { position: absolute; width: 320px; bottom: 0; right: 50px; }

.greeting-article { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.greeting-quote { padding-left: 24px; border-left: 2px solid #363636; font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: #111; }
.greeting-text { font-size: 1.0625rem; line-height: 1.5; color: #333; }
.greeting-text strong { font-weight: 600; color: #06845a; }

.greeting-closing { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.greeting-divider { width: 100%; height: 1px; background: #e0e0e0; }
.greeting-thanks { font-weight: 700; font-size: 1.25rem; color: #111; }

/* ===== 수급보고시스템 소개(intro) ===== */
.section-head { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.section-head__row { display: flex; align-items: center; gap: 12px; }
.section-head__accent { flex: none; width: 4px; height: 22px; background: #169e70; }
.section-head__title { flex: 1 1 0; min-width: 0; font-weight: 700; font-size: 1.5rem; color: #111; }
.section-head__divider { width: 100%; height: 1px; background: #cdd1d5; }

.intro-sec { display: flex; flex-direction: column; gap: 20px; width: 100%; }

.item { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.item__lead { display: flex; align-items: center; gap: 10px; width: 100%; }
.item__marker { position: relative; flex: none; width: 10px; height: 24px; }
.item__marker::before { content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #169e70; }
.item__lead-text { flex: 1; font-weight: 500; font-size: 1.0625rem;  color: #111; }

.note { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 18px 20px; border-radius: 8px; background: #f5f5f5; font-size: 0.9375rem; color: #444; }
.note ul { display: flex; flex-direction: column; gap: 5px; list-style: none; }
.note li { position: relative; padding-left: 14px; }
.note li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: #444; }
/* 주의사항(경고) 색상 variant - 기존 .caution 컨테이너를 흡수 */
.note--warning { border: 1px solid #f0d9b0; background: #fff6e8; }

.btn-attach { align-self: flex-start;  padding: 11px 18px; border: 1px solid #dcdcdf; border-radius: 5px; background: #fff; font-weight: 600; font-size: 0.9375rem; color: #0685cd; transition: background var(--transition-base); }
.btn-attach:hover,
.btn-attach:focus-visible { background: #f2f2f2; }

.intro-figure { width: 100%; }
.intro-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* ===== 보고제도 안내 - 수급거래상황 보고체계(report-flow) ===== */
.report-flow { position: relative; width: 100%; height: 688px; }

.flow__entity-box { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; border-radius: 10px; background: #edf4d9; font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: #54661f; }

.flow__item-row { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; border-radius: 6px; font-size: 0.9375rem; line-height: 1.3; }
.flow__item-row--strong { background: #e1eddd; font-weight: 700; color: #444; }
.flow__item-row--plain { background: #f3f5f0; font-weight: 400; color: #444; }

.flow__merge-chip { position: absolute; display: flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 8px; background: #4b5563; font-weight: 700; font-size: 0.9375rem; color: #fff; white-space: nowrap; width: 64px;}

.flow__arrow { position: absolute; display: flex; align-items: center; }
.flow__arrow img { display: block; width: 100%; height: auto; }

.flow__freq-label { position: absolute; text-align: center; font-weight: 700; font-size: 0.9375rem; color: #444; }
.flow__freq-label--weekly { color: #e1483a; }

.flow__dest-box { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 12px; border-radius: 10px; background: #169e70; font-weight: 700; font-size: 1rem; line-height: 1.3; color: #fff; }
.flow__dest-box--muted { background: #eef0f2; border: 1px solid #c7ccd1; color: #444; }

/* report-flow 좌표(보고주체 10개) */
.report-flow .flow-pos-1  { left: 0;     top: 7px;    width: 360px; height: 174px; }
.report-flow .flow-pos-2  { left: 0;     top: 191px;  width: 360px; height: 86px; }
.report-flow .flow-pos-3  { left: 0;     top: 287px;  width: 360px; height: 42px; }
.report-flow .flow-pos-4  { left: 0;     top: 339px;  width: 140px; height: 86px; }
.report-flow .flow-pos-5  { left: 144px; top: 339px;  width: 216px; height: 42px; }
.report-flow .flow-pos-6  { left: 144px; top: 383px;  width: 216px; height: 42px; }
.report-flow .flow-pos-7  { left: 0;     top: 435px;  width: 360px; height: 42px; }
.report-flow .flow-pos-8  { left: 0;     top: 487px;  width: 360px; height: 86px; }
.report-flow .flow-pos-9  { left: 0;     top: 583px;  width: 360px; height: 42px; }
.report-flow .flow-pos-10 { left: 0;     top: 635px;  width: 360px; height: 53px; }

/* report-flow 좌표(보고대상 품목 14개) */
.report-flow .flow-pos-11 { left: 372px; top: 7px;    width: 280px; height: 42px; }
.report-flow .flow-pos-12 { left: 372px; top: 51px;   width: 280px; height: 42px; }
.report-flow .flow-pos-13 { left: 372px; top: 95px;   width: 280px; height: 42px; }
.report-flow .flow-pos-14 { left: 372px; top: 139px;  width: 280px; height: 42px; }
.report-flow .flow-pos-15 { left: 372px; top: 191px;  width: 280px; height: 42px; }
.report-flow .flow-pos-16 { left: 372px; top: 235px;  width: 280px; height: 42px; }
.report-flow .flow-pos-17 { left: 372px; top: 287px;  width: 280px; height: 42px; }
.report-flow .flow-pos-18 { left: 372px; top: 339px;  width: 280px; height: 42px; }
.report-flow .flow-pos-19 { left: 372px; top: 383px;  width: 280px; height: 42px; }
.report-flow .flow-pos-20 { left: 372px; top: 435px;  width: 280px; height: 42px; }
.report-flow .flow-pos-21 { left: 372px; top: 487px;  width: 280px; height: 42px; }
.report-flow .flow-pos-22 { left: 372px; top: 531px;  width: 280px; height: 42px; }
.report-flow .flow-pos-23 { left: 372px; top: 583px;  width: 280px; height: 42px; }
.report-flow .flow-pos-24 { left: 372px; top: 635px;  width: 280px; height: 53px; }

/* report-flow 좌표(공사/협회 병합칩 3개) */
.report-flow .flow-pos-25 { left: 700px; top: 79px; }
.report-flow .flow-pos-26 { left: 700px; top: 241px; }
.report-flow .flow-pos-27 { left: 700px; top: 389px; }

/* report-flow 좌표(병합 지점 진입 화살표+매월 라벨 6개) */
.report-flow .flow-pos-28 { left: 656px; top: 86px;  width: 40px; }
.report-flow .flow-pos-29 { left: 656px; top: 248px; width: 40px; }
.report-flow .flow-pos-30 { left: 656px; top: 396px; width: 40px; }
.report-flow .flow-pos-31 { left: 656px; top: 66px;  width: 40px; }
.report-flow .flow-pos-32 { left: 656px; top: 228px; width: 40px; }
.report-flow .flow-pos-33 { left: 656px; top: 376px; width: 40px; }

/* report-flow 좌표(병합 지점 이탈 화살표+매월 라벨 8개) */
.report-flow .flow-pos-34 { left: 768px; top: 64px;  width: 92px; }
.report-flow .flow-pos-35 { left: 768px; top: 108px; width: 92px; }
.report-flow .flow-pos-36 { left: 768px; top: 248px; width: 92px; }
.report-flow .flow-pos-37 { left: 768px; top: 396px; width: 92px; }
.report-flow .flow-pos-38 { left: 789px; top: 44px;  width: 50px; }
.report-flow .flow-pos-39 { left: 789px; top: 88px;  width: 50px; }
.report-flow .flow-pos-40 { left: 789px; top: 228px; width: 50px; }
.report-flow .flow-pos-41 { left: 789px; top: 376px; width: 50px; }

/* report-flow 좌표(보고주체→수신기관 직결 화살표+매주/매월 라벨 20개) */
.report-flow .flow-pos-42 { left: 660px; top: 20px;  width: 200px; }
.report-flow .flow-pos-43 { left: 660px; top: 152px; width: 200px; }
.report-flow .flow-pos-44 { left: 660px; top: 204px; width: 200px; }
.report-flow .flow-pos-45 { left: 660px; top: 300px; width: 200px; }
.report-flow .flow-pos-46 { left: 660px; top: 352px; width: 200px; }
.report-flow .flow-pos-47 { left: 660px; top: 448px; width: 200px; }
.report-flow .flow-pos-48 { left: 660px; top: 500px; width: 200px; }
.report-flow .flow-pos-49 { left: 660px; top: 544px; width: 200px; }
.report-flow .flow-pos-50 { left: 660px; top: 596px; width: 200px; }
.report-flow .flow-pos-51 { left: 660px; top: 648px; width: 200px; }
.report-flow .flow-pos-52 { left: 724px; top: 0;      width: 60px; }
.report-flow .flow-pos-53 { left: 724px; top: 132px;  width: 60px; }
.report-flow .flow-pos-54 { left: 724px; top: 184px;  width: 60px; }
.report-flow .flow-pos-55 { left: 724px; top: 280px;  width: 60px; }
.report-flow .flow-pos-56 { left: 724px; top: 332px;  width: 60px; }
.report-flow .flow-pos-57 { left: 724px; top: 428px;  width: 60px; }
.report-flow .flow-pos-58 { left: 724px; top: 480px;  width: 60px; }
.report-flow .flow-pos-59 { left: 724px; top: 524px;  width: 60px; }
.report-flow .flow-pos-60 { left: 724px; top: 576px;  width: 60px; }
.report-flow .flow-pos-61 { left: 724px; top: 635.5px; width: 60px; }

/* report-flow 좌표(수신기관 3개) */
.report-flow .flow-pos-62 { left: 868px; top: 7px;   width: 152px; height: 124px; }
.report-flow .flow-pos-63 { left: 868px; top: 139px; width: 152px; height: 42px; }
.report-flow .flow-pos-64 { left: 868px; top: 191px; width: 152px; height: 497px; }

/* ===== 보고제도 안내 - 보고 방법 안내(report-cards) ===== */
.report-cards { display: flex; gap: 20px; align-items: stretch; width: 100%; }
.report-card { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border-radius: 12px; background: #f8f8f8; }
.report-card__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 80px; height: 80px; border-radius: 50%; background: #fff; }
.report-card__icon img { width: 40px; height: 40px; }
.report-card__title { font-weight: 700; font-size: 1.25rem; color: #111; text-align: center; }
.report-card__desc { width: 100%; max-width: 282px; font-size: 1rem; color: #333; text-align: center; font-weight: 500; }

@media (max-width: 767px) {
  .report-cards { flex-direction: column; }
}

/* ===== 문의처(contact) ===== */
.contact-card { display: flex; flex-direction: column; gap: 28px; width: 100%; padding: 36px; border: 1px solid #cdd1d5; border-radius: 20px; background: #fff; }
.contact-card__head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; }
.contact-card__icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 20px; background: #f0f3ec; }
.contact-card__icon img { width: 40px; height: auto; }
.contact-card__title { font-weight: 700; font-size: 1.5rem; color: #111; }
.contact-card__desc { font-size: 1.0625rem; color: #444; }
.contact-card__divider { width: 100%; height: 1px; background: #e0e0e0; }

.contact-info { display: flex; align-items: center; gap: 20px; width: 100%; }
.contact-info__row { display: flex; flex: 1 1 0; align-items: center; gap: 12px; min-width: 0; }
.contact-info__label { flex: none; width: 84px; font-weight: 600; font-size: 0.9375rem; color: #444; white-space: nowrap; }
.contact-info__value--tel { font-weight: 700; font-size: 2rem; color: #169e70; white-space: nowrap; }
.contact-info__value--fax { font-weight: 500; font-size: 1.5rem; color: #333; white-space: nowrap; }
.contact-info__hours { flex: none; display: flex; align-items: center; padding: 7px 20px; border-radius: 20px; background: #f1f9e7; font-weight: 500; font-size: 0.9375rem; color: #06845a; white-space: nowrap; }

/* ===== 회원가입 안내(join) ===== */
.join-notice { display: flex; flex-direction: column; width: 100%; padding: 36px; border: 1px solid #cdd1d5; border-radius: 20px; background: #fff; }
.join-notice__info { display: flex; gap: 30px; align-items: flex-start; width: 100%; }
.join-notice__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; padding: 20px; border-radius: 20px; background: #f0f3ec; }
.join-notice__icon img { width: 40px; height: 40px; }
.join-notice__body { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.join-notice__title { font-weight: 700; font-size: 1.375rem; color: #111; }
.join-notice__list { display: flex; flex-direction: column; gap: 12px; font-size: 1.0625rem; line-height: 1.2; color: #444; }

.step { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.step__head { display: flex; align-items: center; gap: 12px; width: 100%; padding-bottom: 14px; border-bottom: 1px solid #cdd1d5; }
.step__badge { flex: none; display: flex; align-items: center; padding: 6px 16px; border-radius: 100px; background: #169e70; font-weight: 700; font-size: 0.9375rem; color: #fff; }
.step__title { font-weight: 700; font-size: 1.5rem; color: #111; }

.block { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.block__title { display: flex; align-items: center; gap: 10px; width: 100%; }
.block__title::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #169e70; }
.block__title-text { font-weight: 700; font-size: 1.25rem; color: #111; }

.lead { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.lead::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: #169E70; }
.lead-text { flex: 1; font-size: 1.0625rem;  color: #333; }

.figure { display: flex; align-items: center; justify-content: center; width: 100%; padding: 24px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f8f8f8; }
.figure img { display: block; max-width: 100%; height: auto; }

.caution__badge { align-self: flex-start; padding: 4px 12px; border-radius: 100px; background: #a55a00; font-weight: 700; font-size: 0.9375rem; color: #fff; }
.caution-text { line-height: 1.2; color: #333; }

.num-item { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.num-label { font-weight: 500; font-size: 1.0625rem; color: #333; }
.num-item__body { display: flex; flex-direction: column; gap: 14px; width: 100%; padding-left: 20px; border-left: 2px solid #e0e0e0; }
.sub-label { font-weight: 600; font-size: 0.9375rem; color: #06845a; }

.docs { display: flex; flex-direction: column; width: 100%; border: 1px solid #cdd1d5; border-radius: 8px; background: #fff; font-size: 0.9375rem; line-height: 1.2; }
.docs__row { display: flex; gap: 20px; padding: 16px 20px; border-top: 1px solid #e0e0e0; }
.docs__row:first-child { border-top: 0; }
.docs__label { flex: none; width: 88px; font-weight: 600; color: #111; }
.docs__value { flex: 1; font-weight: 400; color: #444; }
.docs__value.is-link { color: #0685cd; font-weight: 600; }

.join-contact { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; padding: 20px 24px; border-radius: 12px; background: #f5f5f5; }
.join-contact__group { display: flex; align-items: center; gap: 36px; }
.join-contact__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 20px; background: #fff; }
.join-contact__icon img { width: 40px; height: 40px; }
.join-contact__text { display: flex; align-items: center; gap: 10px; }
.join-contact__label { font-weight: 700; font-size: 1.25rem; color: #111; }
.join-contact__team { font-weight: 500; font-size: 1.0625rem; color: #333; }
.join-contact__divider { flex: none; width: 1px; height: 25px; background: #cdd1d5; }
.join-contact__info { display: flex; align-items: center; gap: 20px; }
.join-contact__tel { font-weight: 700; font-size: 1.875rem; color: #169e70; }
.join-contact__fax { font-size: 1.0625rem; color: #444; }

/* ===== 알림마당 - 문서 미리보기 캐러셀(doc-carousel) ===== */
.doc-carousel { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.doc-carousel__arrow { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #cfcfcf; border-radius: 20px; background: #fff; cursor: pointer; transition: background var(--transition-base), opacity var(--transition-base); }
.doc-carousel__arrow:hover, .doc-carousel__arrow:focus-visible { background: #f2f2f2; }
.doc-carousel__arrow:disabled { opacity: 0.4; cursor: default; background: #fff; }
.doc-carousel__arrow img { width: 18px; height: 18px; }

/* 뷰어 박스는 .figure 재사용 - 캐러셀 좌우 화살표와 한 줄에 놓이므로 폭만 콘텐츠에 맞게 재정의 */
.doc-carousel .figure { width: auto; }
.doc-carousel__main { width: 500px; max-width: 100%; }
.doc-carousel__slide img { display: block; width: 100%; height: auto; border-radius: 4px; }

.doc-carousel__counter { width: 100%; font-weight: 500; font-size: 0.9375rem; color: #444; text-align: center; }

.doc-carousel__thumbs { display: flex; gap: 8px; width: 100%; overflow-x: auto; justify-content: center; }
.doc-carousel__thumb { flex: none; width: 56px; height: 79px; padding: 0; border: 1px solid #e0e0e0; border-radius: 4px; overflow: hidden; background: none; cursor: pointer; opacity: 0.55; transition: opacity var(--transition-base), border-color var(--transition-base); }
.doc-carousel__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.doc-carousel__thumb.is-active { border: 2px solid #169e70; opacity: 1; }

/* ===== 알림마당 - 보도자료(press) ===== */
.press-body { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.press-text { font-size: 1.0625rem; line-height: 1.6; color: #333; }

.press-body .note p:first-child { font-weight: 500; }

.figure-row { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 100%; }
.figure-row__caption { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.figure-row__accent { width: 28px; height: 3px; border-radius: 2px; background: #169e70; }
.figure-row__title { font-weight: 700; font-size: 1rem; color: #333; }
.figure-row img { display: block; max-width: 100%; height: auto; }

/* ===== 알림마당 - 유통질서 확립 안내(order) ===== */
.content__body--framed { gap: 24px; padding: 20px 0; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf; }

.block__title-ref { font-weight: 400; font-size: 0.9375rem; color: #0685cd; }

.order-table { width: 100%; border: 1px solid #cfcfcf; border-radius: 10px; border-spacing: 0; overflow: hidden; }
.order-table th,
.order-table td { padding: 14px 16px; font-size: 0.9375rem; color: #333; }
.order-table thead th { background: #f0f0f0; font-weight: 700; text-align: center; }
.order-table tbody th {  text-align: left; border-top: 1px solid #e0e0e0; font-weight: 400;}
.order-table tbody td { text-align: center; line-height: 1.6;  border-top: 1px solid #e0e0e0; }

.order-table--notice tbody th { text-align: center; font-weight: 700; }
.order-table--notice tbody td { text-align: left; }

.order-footnote { width: 100%; font-size: 0.9375rem; line-height: 1.6; color: #444; }

.caution-list__badge { align-self: flex-start; padding: 4px 10px; border-radius: 4px; background: #313131; font-weight: 700; font-size: 0.9375rem; color: #fff; }
.caution-list__note { display: block; margin-top: 4px; font-size: 0.9375rem; color: #444; }

/* ===== 알림마당 - 거래상황기록부 작성방법(record) ===== */
.note__item { font-size: 1rem; }
.note__sub { font-size: 0.9375rem; color: #444; }

.note-list { display: flex; flex-direction: column; gap: 10px; width: 100%; font-size: 1rem; color: #333; }

.step-num-head { display: flex; align-items: center; gap: 12px; width: 100%; }
.step-num-head__badge { display: flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: #169e70; font-weight: 700; font-size: 1rem; color: #fff; }
.step-num-head__title { font-weight: 700; font-size: 1.25rem; color: #111; }

/* ===== 지원사업 안내 - 전산보고 지원사업 안내(support) ===== */
.btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; }

.btn-attach--primary { border-color: transparent; background: #169e70; color: #fff; }
.btn-attach--primary:hover, .btn-attach--primary:focus-visible { background: #0d8a5f; }

.spec-table { display: flex; flex-direction: column; width: 100%; border: 1px solid #cdd1d5; border-radius: 8px; overflow: hidden; background: #fff; }
.spec-table__row { display: flex; align-items: stretch; width: 100%; border-top: 1px solid #e0e0e0; }
.spec-table__row:first-child { border-top: 0; }
.spec-table__th { flex: none; display: flex; align-items: center; width: 170px; padding: 18px 20px; background: #f1f9e7; font-weight: 600; font-size: 0.9375rem; color: #333; }
.spec-table__td { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center;  padding: 18px 20px; min-width: 0; font-size: 0.9375rem; line-height: 1.5; color: #444; }

.flow-steps { display: flex; align-items: center; gap: 12px; width: 100%; }
.flow-step { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 16px 12px; border: 1px solid #e0e0e0; border-radius: 10px; background: #f8f8f8; height: 100%; }
.flow-step__no { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #169e70; font-weight: 700; font-size: 0.875rem; color: #fff; }
.flow-step__title { width: 100%; font-weight: 700; font-size: 0.875rem; line-height: 1.4; color: #111; text-align: center; }
.flow-step__divider { width: 100%; height: 1px; background: #e0e0e0; }
.flow-step__desc { width: 100%; font-size: 0.75rem; line-height: 1.4; color: #444; text-align: center; }
.flow-step__arrow { flex: none; width: 14px; height: 14px; }

.info-cards { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.info-cards__row { display: flex; gap: 24px; width: 100%; }
.info-card { display: flex; flex: 1 1 0; flex-direction: column; gap: 12px; min-width: 0; padding: 24px; border: 1px solid #e0e0e0; border-radius: 12px; background: #fff; }
.info-card__desc { font-size: 0.9375rem; color: #444; }

.note__row { display: flex; gap: 16px; width: 100%; }
.note__row-label { flex: none; width: 72px; font-weight: 600; color: #333; }

.submit-group { display: flex; flex-direction: column; gap: 16px; width: 100%; }

.text-accent { color: #06845a;  }
.text-link { color: #0685cd; }

/* ===== 수급보고시스템 소개 - 별표 첨부 팝업(system-intro-popup) ===== */
.popup-doc { display: flex; flex-direction: column; gap: 24px; max-width: 1280px; margin: 0 auto; padding: 40px 0 40px; word-break: keep-all; }

.popup-doc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 2px solid #169e70; }
.popup-doc__heading { display: flex; flex-direction: column; gap: 8px; }
.popup-doc__tag { font-weight: 500; font-size: 0.9375rem; color: #0685cd; }
.popup-doc__title { font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: #111; }
.popup-doc__title-sub { margin-left: 8px; font-weight: 500; font-size: 1rem; color: #444444; }

.popup-doc__close { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -4px -4px 0 0; border-radius: 50%; transition: background var(--transition-base); }
.popup-doc__close img { width: 16px; height: 16px; }
.popup-doc__close:hover, .popup-doc__close:focus-visible { background: #f2f2f2; }

.popup-doc__table-scroll { width: 100%; max-height: 620px; overflow: auto; border: 1px solid #cfcfcf; border-radius: 10px; }
.popup-doc__table-scroll .order-table { border: 0; border-radius: 0; }
.popup-doc__table-scroll .order-table thead th { position: sticky; top: 0; z-index: 1; }

.order-table--attach th[scope="rowgroup"] { background: #eef7f2; font-weight: 700; font-size: 0.9375rem; color: #0d8a5f; text-align: left; }
.order-table--attach tbody td:first-child { text-align: left; }
.order-table--attach tbody td { line-height: 1.5; }

.popup-doc__note-title { font-weight: 700; color: #111; }
.popup-doc__note p { line-height: 1.6; }

.popup-doc__foot { display: flex; justify-content: center; }
.btn-popup-close { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 11px 24px; border: 1px solid #cdd1d5; border-radius: 5px; background: #fff; font-weight: 600; font-size: 0.9375rem; color: #444444; transition: background var(--transition-base); }
.btn-popup-close:hover, .btn-popup-close:focus-visible { background: #f2f2f2; }