.lfr-layout-structure-item-container {padding: 0;} .lfr-layout-structure-item-row {overflow: hidden;} .portlet-borderless .portlet-content {padding: 0;}.lfr-layout-structure-item-4588f452-aa60-1944-2afd-a3ed56c6ede5 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-4588f452-aa60-1944-2afd-a3ed56c6ede5) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-c45df82d-ceb4-a418-6669-d661db884f4f {
font-size: 25px !important;
font-weight: 800 !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-b979043b-e8da-89fb-814a-c8d73338d7e4 {
border-color: #33333300 !important;
padding-top: var(--spacer-3,1rem) !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}.lfr-layout-structure-item-bf8368c4-8ae9-c934-e456-8a50949a1ed7 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-43aa4b83-12b4-e84c-7104-c2831741f00f {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-0e3d9192-819b-4785-fdf4-70b3d20031e8 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-0e3d9192-819b-4785-fdf4-70b3d20031e8) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-f074c1a7-0fd2-eaba-036d-bda0410e385d {
border-color: #33333300 !important;
padding-top: var(--spacer-3,1rem) !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}.lfr-layout-structure-item-0e47f28e-d6de-d1e3-bd9a-d2036fdc9c3e {
background-color: #FFFFFF00 !important;
display: none !important;
}
/* =========================================================
   ✅ Home 상단 컨테이너 (유튜브 + 포토갤러리)
   - 스크롤바: 포토갤러리 “바깥 아래(컨텐츠 안 가림)”
   - track(이동영역 선) 완전 제거
   - thumb: 두께 +40%, 길이 -20%(CSS scaleX)
   ========================================================= */

.home-hero-gradient{
  position: relative;

  --hero-radius: 26px;
  --hero-pad: 18px;

  --grad-x: 0;

  border-radius: var(--hero-radius);
  padding: var(--hero-pad);

  background: linear-gradient(
    135deg,
    #1f5fbf 0%,
    #2f7edb 30%,
    #3f8bd6 55%,
    #5fa7c8 75%,
    #7db8c4 100%
  );

  background-size: 200% 200%;
  background-position: calc(var(--grad-x) * 1%) 50%;

  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);

  overflow: visible;
  box-sizing: border-box;
}

.home-hero-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}

.home-hero-gradient > *{
  position: relative;
  z-index: 1;
}

.home-hero-gradient .row{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--hero-pad);
  margin: 0 !important;
}

.home-hero-gradient .row > [class*="col"],
.home-hero-gradient .row > .col{
  min-width: 0;
  padding: 0 !important;
}

@media (max-width: 991.98px){
  .home-hero-gradient .row{
    flex-wrap: wrap;
  }
}

.home-hero-gradient .home-hero-video,
.home-hero-gradient .home-photo-strip{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
  margin: 0 !important;
}

.home-hero-video iframe,
.home-hero-video video{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
}

.home-hero-gradient h1,
.home-hero-gradient h2,
.home-hero-gradient h3,
.home-hero-gradient p{
  margin-top: 0;
}

/* =========================================================
   ✅ 스크롤바 위치/사이즈 조정(컨텐츠 안 가림)
   ========================================================= */

.home-hero-gradient .home-photo-strip{
  position: relative;
  padding-bottom: 26px;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar{
  position: absolute;
  left: 0;
  right: 0;

  bottom: 4px;
  height: 22px;

  z-index: 30;
  pointer-events: auto;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-track{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%);

  background: transparent !important;
  border-radius: 999px;
}

.home-hero-gradient .home-photo-strip:hover .dssc-scrollbar-track{
  background: transparent !important;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  position: absolute;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%);

  width: 90px;
  left: 0;

  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  cursor: grab;
}

/* 길이 -20% */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  transform: translateY(-50%) scaleX(0.80);
  transform-origin: left center;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb.is-dragging{
  cursor: grabbing;
}.lfr-layout-structure-item-7196da39-9c08-00f9-3ef9-dcdb6961d0a7 {
border-color: #33333300 !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}.lfr-layout-structure-item-ac7f2d44-f77a-b52d-d62b-36eaa898661c {
display: none !important;
}
.lfr-layout-structure-item-eca753e1-2038-c901-7bef-c1c33ce351fc {
background-color: #D45050 !important;
}
/* =========================================================
   ✅ Home 상단 컨테이너 (유튜브 + 포토갤러리)
   - 스크롤바: 포토갤러리 “바깥 아래(컨텐츠 안 가림)”
   - track(이동영역 선) 완전 제거
   - thumb: 두께 +40%, 길이 -20%
   - 붙이는 곳: 컨테이너 프래그먼트 Custom CSS
   - class: home-hero-gradient
   ========================================================= */

.home-hero-gradient{
  position: relative;

  --hero-radius: 26px;
  --hero-pad: 18px;

  --grad-x: 0;

  border-radius: var(--hero-radius);
  padding: var(--hero-pad);

  background: linear-gradient(
    135deg,
    #1f5fbf 0%,
    #2f7edb 30%,
    #3f8bd6 55%,
    #5fa7c8 75%,
    #7db8c4 100%
  );

  background-size: 200% 200%;
  background-position: calc(var(--grad-x) * 1%) 50%;

  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);

  overflow: visible;
  box-sizing: border-box;
}

.home-hero-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}

.home-hero-gradient > *{
  position: relative;
  z-index: 1;
}

.home-hero-gradient .row{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--hero-pad);
  margin: 0 !important;
}

.home-hero-gradient .row > [class*="col"],
.home-hero-gradient .row > .col{
  min-width: 0;
  padding: 0 !important;
}

@media (max-width: 991.98px){
  .home-hero-gradient .row{
    flex-wrap: wrap;
  }
}

.home-hero-gradient .home-hero-video,
.home-hero-gradient .home-photo-strip{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
  margin: 0 !important;
}

.home-hero-video iframe,
.home-hero-video video{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
}

.home-hero-gradient h1,
.home-hero-gradient h2,
.home-hero-gradient h3,
.home-hero-gradient p{
  margin-top: 0;
}

/* 포토갤러리 박스: 스크롤바 자리 확보 */
.home-hero-gradient .home-photo-strip{
  position: relative;
  padding-bottom: 26px;
}

/* 스크롤바 컨테이너 */
.home-hero-gradient .home-photo-strip .dssc-scrollbar{
  position: absolute;
  left: 0;   /* JS가 px로 조정 */
  right: 0;  /* JS가 px로 조정 */

  bottom: 4px;
  height: 22px;

  z-index: 30;
  pointer-events: auto;
}

/* track 완전 투명 */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-track{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 9.1px; /* 6.5 * 1.4 */
  transform: translateY(-50%);

  background: transparent !important;
  border-radius: 999px;
}

.home-hero-gradient .home-photo-strip:hover .dssc-scrollbar-track{
  background: transparent !important;
}

/* thumb */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  position: absolute;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%) scaleX(0.80);
  transform-origin: left center;

  width: 90px; /* JS가 계산해 덮어씀 */
  left: 0;

  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  cursor: grab;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb.is-dragging{
  cursor: grabbing;
}.lfr-layout-structure-item-72f78aab-2e9a-65d2-bd9c-08f716ae9895 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-61cfff4f-36ac-94fc-9a41-c3edb70ffed3 {
background-color: #FFFFFF00 !important;
display: none !important;
}
/* =========================================================
   ✅ Home 상단 컨테이너 (유튜브 + 포토갤러리)
   - 스크롤바: 포토갤러리 “바깥 아래(컨텐츠 안 가림)”
   - track(이동영역 선) 완전 제거
   - thumb: 두께 +40%, 길이 -20%(CSS scaleX)
   ========================================================= */

.home-hero-gradient{
  position: relative;

  --hero-radius: 26px;
  --hero-pad: 18px;

  --grad-x: 0;

  border-radius: var(--hero-radius);
  padding: var(--hero-pad);

  background: linear-gradient(
    135deg,
    #1f5fbf 0%,
    #2f7edb 30%,
    #3f8bd6 55%,
    #5fa7c8 75%,
    #7db8c4 100%
  );

  background-size: 200% 200%;
  background-position: calc(var(--grad-x) * 1%) 50%;

  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);

  overflow: visible;
  box-sizing: border-box;
}

.home-hero-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}

.home-hero-gradient > *{
  position: relative;
  z-index: 1;
}

.home-hero-gradient .row{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--hero-pad);
  margin: 0 !important;
}

.home-hero-gradient .row > [class*="col"],
.home-hero-gradient .row > .col{
  min-width: 0;
  padding: 0 !important;
}

@media (max-width: 991.98px){
  .home-hero-gradient .row{
    flex-wrap: wrap;
  }
}

.home-hero-gradient .home-hero-video,
.home-hero-gradient .home-photo-strip{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
  margin: 0 !important;
}

.home-hero-video iframe,
.home-hero-video video{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
}

.home-hero-gradient h1,
.home-hero-gradient h2,
.home-hero-gradient h3,
.home-hero-gradient p{
  margin-top: 0;
}

/* =========================================================
   ✅ 스크롤바 위치/사이즈 조정(컨텐츠 안 가림)
   ========================================================= */

.home-hero-gradient .home-photo-strip{
  position: relative;
  padding-bottom: 26px;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar{
  position: absolute;
  left: 0;
  right: 0;

  bottom: 4px;
  height: 22px;

  z-index: 30;
  pointer-events: auto;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-track{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%);

  background: transparent !important;
  border-radius: 999px;
}

.home-hero-gradient .home-photo-strip:hover .dssc-scrollbar-track{
  background: transparent !important;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  position: absolute;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%);

  width: 90px;
  left: 0;

  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  cursor: grab;
}

/* 길이 -20% */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  transform: translateY(-50%) scaleX(0.80);
  transform-origin: left center;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb.is-dragging{
  cursor: grabbing;
}.lfr-layout-structure-item-0b320728-3754-f9f5-f0fc-762ff7df2060 {
display: none !important;
}
.lfr-layout-structure-item-0fe499d4-c4ab-3d53-1e0a-91e84b37b7e1 {
display: none !important;
}
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157 {
font-weight: 600 !important;
}
/* =========================================================
   DKU Clone Notice (LEFT) - CSS ONLY - FINAL
   대상:
   - 복제본 공지사항 컨테이너 프레그먼트에 class = dku-board-underline-clone-notice
   - 포틀릿 인스턴스는 왼쪽(공지사항) qzuh 만 타겟
   효과:
   - 글머리 기호(•)
   - 제목 1줄 말줄임
   - 호버 시 파란 글씨 + 형광펜 밑줄(좌->우)
   - 카드형 메타/요약 숨김
   - 최근 4개만 표시
   ========================================================= */

/* 0) 스코프 + 변수 (원본과 절대 섞이지 않게 스코프 고정) */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_{
  --dku-list-font-size: 19px;            /* 18~22px 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 블루 */
  --dku-hl-alpha: 0.22;
  --dku-hl-alpha-strong: 0.30;
  --dku-hl-h: 0.62em;
  --dku-hl-pos: 82%;
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 한 항목 래퍼(카드형): 간격 + 불필요 margin 제거 */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.asset-abstract.mb-5{
  margin-bottom: 0 !important;
  padding: 0.55rem 0 !important;
}

/* 2) 최근 4개만 표시 */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.portlet-body > .asset-abstract.mb-5:nth-of-type(n + 5){
  display: none !important;
}

/* 3) 메타/요약 숨김(리스트처럼 보이게) */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.metadata-author,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.asset-user-info,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.date-info,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.asset-content,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.asset-summary,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.autofit-row,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
.autofit-col{
  display: none !important;
}

/* 4) 제목 링크(확정): a.asset-title.d-inline
      - 글머리 기호 + 한줄 말줄임 + 형광펜 밑줄 준비 */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
a.asset-title.d-inline{
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 한 줄 말줄임이 "확실히" 되게 */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-decoration: none !important;
  color: inherit !important;

  /* 글머리 기호 공간 */
  position: relative !important;
  padding-left: 1.15em !important;

  /* 형광펜 밑줄(숨김 상태) */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 5) 글머리 기호(•) */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
a.asset-title.d-inline::before{
  content: "•" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;

  /* 글씨와 같은 라인에 자연스럽게 */
  line-height: inherit !important;
  opacity: 0.85 !important;
}

/* 6) 호버/포커스: 형광펜 밑줄 좌->우 + 글씨 파란색 */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
a.asset-title.d-inline:hover,
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
a.asset-title.d-inline:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;

  background-size: 100% var(--dku-hl-h) !important;
  color: rgb(var(--dku-hl-rgb)) !important;
}

/* 7) 키보드 포커스 */
.lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
a.asset-title.d-inline:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 8) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-34e3023f-2149-820c-b89f-3cc3ed1d8157.dku-board-underline-clone-notice
  #p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_qzuh_
  a.asset-title.d-inline{
    transition: none !important;
  }
}.lfr-layout-structure-item-46e0cfdb-e771-13d4-8d68-03f6a4fcbc66 {
width: 350px !important;
}
.lfr-layout-structure-item-b9d0c832-b8a9-8a74-d242-1c040ba6e505 {
background-color: #00639C !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-2 (확대 제거 버전)
   ================================ */

.dssc-card-2{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-2::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-2:hover{
  filter: brightness(1.13);
  transform: translateY(-6px);
  box-shadow:
    0 20px 38px rgba(0,0,0,0.22),
    inset 0 0 20px rgba(255,255,255,0.25);
}

.dssc-card-2:hover::before{
  opacity: 1;
  animation: dssc-swirl-2 6s linear infinite;
}

.dssc-card-2:active{
  transform: translateY(-2px);
  box-shadow:
    inset 9px 9px 18px rgba(0,0,0,0.26),
    inset -9px -9px 18px rgba(255,255,255,0.32);
}

.dssc-card-2:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-2{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-411c506e-68a2-819e-0061-178cb49cbe24 {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-3dcc4f07-9e89-84d7-3171-e853d37675fc {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-2e8eb0b3-9c34-a3dc-135a-4020066e40cb {
display: none !important;
}
.lfr-layout-structure-item-7aba3613-0362-25c8-60ec-7b525ad7824d {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-6a32560f-c6e5-1ec6-7807-3dc8465b5ec2 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-6a32560f-c6e5-1ec6-7807-3dc8465b5ec2) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-1ab99984-f330-1c57-2aa1-4bf21eac70e6 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-e2bc4555-e240-70ad-8fe2-12fad8fe096d {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-e2bc4555-e240-70ad-8fe2-12fad8fe096d) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-37db014d-d2b5-787f-6ebc-31b58ab9a738 {
display: none !important;
}
.lfr-layout-structure-item-0f4a12e5-e0d8-a796-6a33-77909eab2aa2 {
background-color: #0197E8 !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-4 (확대 제거 버전)
   ================================ */

.dssc-card-4{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

/* 리퀴드 하이라이트 */
.dssc-card-4::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.28) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 호버 → 밝아짐 + 살짝 위로만 이동 */
.dssc-card-4:hover{
  filter: brightness(1.15);
  transform: translateY(-6px);   /* scale 제거 */
  box-shadow:
    0 20px 40px rgba(0,0,0,0.22),
    inset 0 0 20px rgba(255,255,255,0.25);
}

.dssc-card-4:hover::before{
  opacity: 1;
  animation: dssc-swirl-4 7s linear infinite;
}

/* 클릭 → 쫀득 눌림 (확대 없이 압축 느낌만) */
.dssc-card-4:active{
  transform: translateY(-2px);  /* scale 제거 */
  box-shadow:
    inset 10px 10px 20px rgba(0,0,0,0.28),
    inset -10px -10px 20px rgba(255,255,255,0.35);
  transition: transform 0.1s ease;
}

/* 버튼 눌러도 카드 눌림 */
.dssc-card-4:has(button:active){
  transform: translateY(-2px);
}

/* 소용돌이 */
@keyframes dssc-swirl-4{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-46cf2311-ef09-59ca-b290-50993fd855e1 {
display: none !important;
}
.lfr-layout-structure-item-4983bb57-3d91-51dc-c52a-c42ea92b707a {
font-family: Pretendard, sans-serif !important;
padding-left: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-657450d6-086d-85cf-83a4-fc83bf716231 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-5f44eba3-2c91-80d6-5a54-c49a475ce1ed {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-a47d4e77-9213-2bde-b8ca-06ab93e3cc2b {
border-color: #33333300 !important;
padding-top: var(--spacer-3,1rem) !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}.lfr-layout-structure-item-a87e77e1-9d27-17dc-d531-7191978dbe0c {
font-family: Pretendard, sans-serif !important;
}
.lfr-layout-structure-item-1faa4a69-0605-27e0-e7cc-1bd1e4c25e17 {
border-color: #33333300 !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}.lfr-layout-structure-item-1a2c6b9e-e566-b93f-1ede-3c357ced833e {
display: none !important;
}
.lfr-layout-structure-item-03cf876f-295a-f3e5-66ff-174cba89c49e {
background-color: #00639C !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-2 (확대 제거 버전)
   ================================ */

.dssc-card-2{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-2::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-2:hover{
  filter: brightness(1.13);
  transform: translateY(-6px);
  box-shadow:
    0 20px 38px rgba(0,0,0,0.22),
    inset 0 0 20px rgba(255,255,255,0.25);
}

.dssc-card-2:hover::before{
  opacity: 1;
  animation: dssc-swirl-2 6s linear infinite;
}

.dssc-card-2:active{
  transform: translateY(-2px);
  box-shadow:
    inset 9px 9px 18px rgba(0,0,0,0.26),
    inset -9px -9px 18px rgba(255,255,255,0.32);
}

.dssc-card-2:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-2{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-a588efa8-e88d-8e51-90c3-bc51e7562dea {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-0173a171-2c21-4a07-64d1-84f88f2cd8b8 {
display: none !important;
}
.lfr-layout-structure-item-796f0b55-846b-e559-7eff-e09517a656c9 {
font-family: Pretendard, sans-serif !important;
padding-left: var(--spacer-4,1.5rem) !important;
}
.lfr-layout-structure-item-7d0c977a-b9a5-2db9-2579-df31e8f58294 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-67401f76-d909-ea19-e509-562569c7f24b {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-faf770eb-b4ee-24a7-8104-239d2c94bbcd {
height: 100px !important;
width: 283px !important;
}
/* ================================
   DSSC 카드 내부 + 아이콘 리디자인
   다른 버튼에 영향 없음
   ================================ */

/* 카드 안의 버튼만 타겟 */
.dssc-card-1 .btn,
.dssc-card-2 .btn,
.dssc-card-3 .btn,
.dssc-card-4 .btn{

  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 0;          /* 기존 + 숨김 */
  color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}

/* + 모양 직접 생성 (세련된 얇은 라인) */
.dssc-card-1 .btn::before,
.dssc-card-2 .btn::before,
.dssc-card-3 .btn::before,
.dssc-card-4 .btn::before{

  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: #ffffff;
}

.dssc-card-1 .btn::after,
.dssc-card-2 .btn::after,
.dssc-card-3 .btn::after,
.dssc-card-4 .btn::after{

  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: #ffffff;
}

/* 호버 시 부드러운 회전 + 밝기 */
.dssc-card-1 .btn:hover,
.dssc-card-2 .btn:hover,
.dssc-card-3 .btn:hover,
.dssc-card-4 .btn:hover{

  background: rgba(255,255,255,0.25);
  transform: rotate(90deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}.lfr-layout-structure-item-32c8b08a-0510-26c8-50d2-b0b9d673114c {
display: none !important;
height: 290px !important;
}
/* =====================================================
   DSSC Banner Flicker Fix v2 (안전 패치)
   - 구조 변경 없음
   - display 로직 유지
   - move-right 전환 한 프레임 노출 차단
   ===================================================== */

/* 1. 캐러셀 GPU 고정 */
#bbqh-carouselInner,
#bbqh-carouselInner .carousel-item{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* 2. 기본 슬라이드 상태 */
#bbqh-carouselInner .carousel-item{
  transition: transform 0.6s ease, opacity 0.2s ease;
}

/* 3. move-right 붙는 순간 잠깐 opacity 0으로 잠금 */
#bbqh-carouselInner .carousel-item.move-right:not(.active){
  opacity: 0;
}

/* 4. 실제 이동 시작 시 보이게 */
#bbqh-carouselInner .carousel-item.move-right.active,
#bbqh-carouselInner .carousel-item.active{
  opacity: 1;
}

/* 5. background white 번쩍임 방지 */
#bbqh-carouselInner .carousel-item .item-box{
  background-color: transparent !important;
}

/* ======================================================
   DSSC Banner Flicker Fix - lp-slides animation patch
   ====================================================== */

/* 1. GPU 레이어 고정 */
.lp-slides .carousel-item{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* 2. 애니메이션 시작 전 프레임 제거 */
.lp-slides .carousel-item.move-right,
.lp-slides .carousel-item.move-left,
.lp-slides .carousel-item.active.move-right,
.lp-slides .carousel-item.active.move-left{
  animation-fill-mode: both !important;
}

/* 3. opacity 전환 제거 (번쩍임 원인 차단) */
.lp-slides .carousel-item{
  transition: none !important;
}

/* 4. 기본 opacity 유지 강제 */
.lp-slides .carousel-item.active,
.lp-slides .carousel-item.move-right,
.lp-slides .carousel-item.move-left{
  opacity: 1 !important;
}.lfr-layout-structure-item-855c67d6-c8c2-9f88-b1db-fc1b97bd32d1 {
background-color: #34558B !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-1 (확대 제거 버전)
   ================================ */

.dssc-card-1{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-1::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-1:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);   /* scale 제거 */
  box-shadow:
    0 18px 35px rgba(0,0,0,0.2),
    inset 0 0 18px rgba(255,255,255,0.25);
}

.dssc-card-1:hover::before{
  opacity: 1;
  animation: dssc-swirl-1 6s linear infinite;
}

.dssc-card-1:active{
  transform: translateY(-2px);   /* scale 제거 */
  box-shadow:
    inset 8px 8px 18px rgba(0,0,0,0.25),
    inset -8px -8px 18px rgba(255,255,255,0.3);
}

.dssc-card-1:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-1{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-77802fd8-0fc7-9425-07e1-70f7becb9bb0 {
font-size: 25px !important;
font-weight: 800 !important;
padding-left: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96 {
font-weight: 600 !important;
}
/* =========================================================
   DKU 게시판 전시 CSS (최종)
   - 공지사항(fxzi) 4개 제한
   - 리스트 글씨 크기 고정 (18~22px)
   - 평상시 밑줄 없음 / 호버 시 형광펜 밑줄 드로우
   - 테마/포틀릿 내부 style 강제값(height, display 등)까지 눌러서 "확실히" 적용
   ========================================================= */

/* 글씨/밑줄 전역 변수 */
:root{
  --dku-list-font-size: 19px;            /* 18~22px로 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 트랜디 블루 */
  --dku-hl-alpha: 0.22;                  /* 평상시(숨김 상태) */
  --dku-hl-alpha-strong: 0.30;           /* 호버 시 */
  --dku-hl-h: 0.62em;                    /* 형광펜 두께 */
  --dku-hl-pos: 82%;                     /* 텍스트 아래 위치 */
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 공지사항(fxzi) 최근 4개만 표시 */
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_fxzi_
.lp-display-view-type6 .dv-list > .list-item:nth-child(n + 6){
  display: none !important;
}

/* 2) 리스트 아이템 간격 */
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
.lp-display-view-type6 .dv-list .list-item{
  padding: 0.55rem 0 !important;
}

/* 3) 링크(제목) 글씨 크기 + 한줄 + 말줄임 + 스마트 형광펜 밑줄 */
/*    포틀릿 내부 <style>가 강해서, 여기서는 "특이성" + "!important"로 전부 덮어씀 */
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
.lp-display-view-type6 .dv-list .list-item > a.item-title{
  /* 글씨 크기/줄간격 */
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 테마가 박아둔 height 강제 해제 */
  height: auto !important;

  /* 한 줄 + 말줄임 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 테마가 display:-webkit-box를 걸어둔 것 무력화 */
  display: inline-block !important;
  max-width: 100% !important;

  /* 테마 라인클램프 흔적 무력화 */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  /* 기본 밑줄 제거 */
  text-decoration: none !important;

  /* 평상시 밑줄(형광펜) 숨김 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 4) 호버 시에만 형광펜 밑줄이 쫙 그어짐 */
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
.lp-display-view-type6 .dv-list .list-item > a.item-title:hover,
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;
  background-size: 100% var(--dku-hl-h) !important;
}

/* 5) 접근성(키보드 포커스) */
.lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 6) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-712ad4b0-9d57-55df-7716-b5331d335e96
  .lp-display-view-type6 .dv-list .list-item > a.item-title{
    transition: none !important;
  }
}.lfr-layout-structure-item-dca51a46-b6db-d0b2-046a-47edbc75a8e5 {
padding-left: var(--spacer-3,1rem) !important;
}
/* =========================================================
   ✅ 포토 갤러리(자산발행인)
   - 3:2 썸네일 + 군더더기 제거
   - ✅ 맨 오른쪽 끝 “여백(end gap)” 추가
   - ✅ 페이드는 JS가 mask-image를 직접 갱신 (CSS에서 끄지 않음!)
   - ✅ 블러는 ::before/::after 오버레이(박스 느낌 제거 버전)
   - ✅ Liferay 구조가 달라도 가로 스트립 유지(후보 wrapper까지 flex 강제)
   - 붙이는 곳: 자산발행인(포토갤러리) 프래그먼트 Custom CSS
   - class: home-photo-strip
   ========================================================= */

.home-photo-strip{
  position: relative;

  /* ✅ 기본 페이드 폭(베이스) */
  --fade-w: 200px;

  /* ✅ 오른쪽 끝 여백 */
  --end-gap: 30px;

  --thumb-w: 270px;
  --thumb-h: 180px;
  --thumb-r: 14px;

  /* ✅ 블러 최대값(원하면 여기만 조절) */
  --blur-max: 12px;

  /* JS가 실시간으로 넣는 값(기본 0) */
  --blur-w-l: 0px;
  --blur-w-r: 0px;
  --blur-a-l: 0;
  --blur-a-r: 0;

  /* 오버레이가 라운드 밖으로 삐져나가지 않게 */
  overflow: hidden;
}

/* =========================================================
   ✅ 블러 오버레이(좌/우) - 박스 느낌 제거 버전
   - "필름"을 아주 약하게 + 마스크로 가장자리만 남김
   - border-radius: inherit로 라운드 일치
   ========================================================= */

/* ✅ 왼쪽 블러 */
.home-photo-strip::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: var(--blur-w-l);
  height: 100%;

  pointer-events: none;
  z-index: 25;

  opacity: var(--blur-a-l);

  border-radius: inherit;

  -webkit-backdrop-filter: blur(var(--blur-max)) saturate(110%);
  backdrop-filter: blur(var(--blur-max)) saturate(110%);

  /* ✅ “박스” 원인 줄이기: 아주 약한 필름(거의 0) */
  background: rgba(0,0,0,0.001);

  /* ✅ 경계가 선처럼 보이지 않게 완만한 감쇠 */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
}

/* ✅ 오른쪽 블러 */
.home-photo-strip::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: var(--blur-w-r);
  height: 100%;

  pointer-events: none;
  z-index: 25;

  opacity: var(--blur-a-r);

  border-radius: inherit;

  -webkit-backdrop-filter: blur(var(--blur-max)) saturate(110%);
  backdrop-filter: blur(var(--blur-max)) saturate(110%);

  background: rgba(0,0,0,0.001);

  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
}

/* =========================================================
   ✅ (핵심) 가로 스트립 유지
   - portlet-body가 아니어도(환경별 wrapper) flex/overflow 강제
   - ⚠️ mask-image는 JS가 쓰므로 절대 끄지 않음
   ========================================================= */

/* 기본 스크롤 컨테이너 */
.home-photo-strip .portlet-body{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding: 18px 0 0 0 !important;
  padding-right: var(--end-gap) !important;

  align-items: flex-start !important;
  -webkit-overflow-scrolling: touch;

  margin: 0 !important;

  transform: translateZ(0);
  will-change: transform;

  scrollbar-width: none !important;
}

/* 환경별 wrapper 후보(여기가 실제 스크롤 컨테이너인 경우가 있음) */
.home-photo-strip .portlet-content,
.home-photo-strip .portlet-content-container,
.home-photo-strip .portlet-body .portlet-content,
.home-photo-strip .portlet-body .portlet-content-container{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding-right: var(--end-gap) !important;

  align-items: flex-start !important;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none !important;
}

/* 웹킷 스크롤바 숨김 */
.home-photo-strip .portlet-body::-webkit-scrollbar,
.home-photo-strip .portlet-content::-webkit-scrollbar,
.home-photo-strip .portlet-content-container::-webkit-scrollbar{
  height: 0px !important;
}

/* 첫 카드 왼쪽 여백(유지) */
.home-photo-strip .asset-abstract:first-child{
  margin-left: 10px !important;
}

/* =========================================================
   ✅ 군더더기 제거 + 3:2 썸네일 고정
   ========================================================= */

/* 내부 마진/패딩 제거 */
.home-photo-strip .asset-content,
.home-photo-strip .asset-content.mb-3,
.home-photo-strip .asset-summary,
.home-photo-strip .asset-summary-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* 카드류 기본 흰 배경 제거 */
.home-photo-strip .asset-abstract,
.home-photo-strip .asset-summary .card,
.home-photo-strip .asset-summary .card-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 카드(아이템) */
.home-photo-strip .asset-abstract{
  flex: 0 0 auto !important;
  width: var(--thumb-w) !important;
  margin: 0 !important;

  position: relative;
  border-radius: var(--thumb-r) !important;
  cursor: pointer;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms;
  will-change: transform;
}

/* 썸네일(270×180) */
.home-photo-strip .asset-summary .cover-image{
  width: var(--thumb-w) !important;
  height: var(--thumb-h) !important;
  border-radius: var(--thumb-r) !important;

  background-size: cover !important;
  background-position: center !important;

  margin: 0 !important;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms;
}

/* aspect-ratio 트릭 제거 */
.home-photo-strip .asset-summary .cover-image::before{
  content: none !important;
}

/* 제목/메타 숨김(군더더기 제거) */
.home-photo-strip p.component-title.h4,
.home-photo-strip .asset-title,
.home-photo-strip .asset-title a,
.home-photo-strip .metadata-author,
.home-photo-strip .metadata-entry,
.home-photo-strip .asset-summary .metadata,
.home-photo-strip .asset-summary .autofit-row,
.home-photo-strip .asset-summary .autofit-col,
.home-photo-strip .asset-summary .sticker{
  display: none !important;
}

/* Hover / Active */
.home-photo-strip .asset-abstract:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.home-photo-strip .asset-abstract:hover .asset-summary .cover-image{
  transform: scale(1.02);
}
.home-photo-strip .asset-abstract:active{
  transform: translateY(-4px) scale(0.98);
  filter: brightness(1.05);
}
.home-photo-strip .asset-abstract:active .asset-summary .cover-image{
  transform: scale(0.99);
}

/* 클릭 flash */
.home-photo-strip .asset-abstract::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--thumb-r);
  background: rgba(255,255,255,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.home-photo-strip .asset-abstract:active::after{
  opacity: 1;
}

/* 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce){
  .home-photo-strip .asset-abstract,
  .home-photo-strip .asset-summary .cover-image{
    transition: none !important;
  }
}.lfr-layout-structure-item-7b91a679-a5ba-a820-1cd9-b755d1b80700 {
display: none !important;
}
.lfr-layout-structure-item-cb6abf67-52e1-4e2e-ca0c-c747ad020c27 {
background-color: #3177CC !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-3 (확대 제거 버전)
   ================================ */

.dssc-card-3{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-3::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.27) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-3:hover{
  filter: brightness(1.14);
  transform: translateY(-6px);
  box-shadow:
    0 22px 40px rgba(0,0,0,0.23),
    inset 0 0 22px rgba(255,255,255,0.28);
}

.dssc-card-3:hover::before{
  opacity: 1;
  animation: dssc-swirl-3 6s linear infinite;
}

.dssc-card-3:active{
  transform: translateY(-2px);
  box-shadow:
    inset 10px 10px 20px rgba(0,0,0,0.28),
    inset -10px -10px 20px rgba(255,255,255,0.35);
}

.dssc-card-3:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-3{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-6ef214f0-196c-f016-715e-c54eda99c55e {
font-family: Pretendard, sans-serif !important;
}
.lfr-layout-structure-item-740515db-21af-e2bb-5f6b-556353b9339e {
display: none !important;
}
.lfr-layout-structure-item-478b5f89-280e-4068-d53f-022a28039155 {
display: none !important;
}
.lfr-layout-structure-item-65b6cb47-33a1-07ed-ccf3-032a9f6deda3 {
padding-left: var(--spacer-3,1rem) !important;
}
/* =========================================================
   ✅ 포토 갤러리(자산발행인)
   - 3:2 썸네일 + 군더더기 제거
   - ✅ 맨 오른쪽 끝 “여백(end gap)” 추가
   - ✅ 페이드는 JS가 mask-image를 직접 갱신 (CSS에서 끄지 않음!)
   - ✅ 블러는 ::before/::after 오버레이(박스 느낌 제거 버전)
   - ✅ Liferay 구조가 달라도 가로 스트립 유지(후보 wrapper까지 flex 강제)
   - 붙이는 곳: 자산발행인(포토갤러리) 프래그먼트 Custom CSS
   - class: home-photo-strip
   ========================================================= */

.home-photo-strip{
  position: relative;

  /* ✅ 기본 페이드 폭(베이스) */
  --fade-w: 200px;

  /* ✅ 오른쪽 끝 여백 */
  --end-gap: 30px;

  --thumb-w: 270px;
  --thumb-h: 180px;
  --thumb-r: 14px;

  /* ✅ 블러 최대값(원하면 여기만 조절) */
  --blur-max: 12px;

  /* JS가 실시간으로 넣는 값(기본 0) */
  --blur-w-l: 0px;
  --blur-w-r: 0px;
  --blur-a-l: 0;
  --blur-a-r: 0;

  /* 오버레이가 라운드 밖으로 삐져나가지 않게 */
  overflow: hidden;
}

/* =========================================================
   ✅ 블러 오버레이(좌/우) - 박스 느낌 제거 버전
   - "필름"을 아주 약하게 + 마스크로 가장자리만 남김
   - border-radius: inherit로 라운드 일치
   ========================================================= */

/* ✅ 왼쪽 블러 */
.home-photo-strip::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: var(--blur-w-l);
  height: 100%;

  pointer-events: none;
  z-index: 25;

  opacity: var(--blur-a-l);

  border-radius: inherit;

  -webkit-backdrop-filter: blur(var(--blur-max)) saturate(110%);
  backdrop-filter: blur(var(--blur-max)) saturate(110%);

  /* ✅ “박스” 원인 줄이기: 아주 약한 필름(거의 0) */
  background: rgba(0,0,0,0.001);

  /* ✅ 경계가 선처럼 보이지 않게 완만한 감쇠 */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
}

/* ✅ 오른쪽 블러 */
.home-photo-strip::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: var(--blur-w-r);
  height: 100%;

  pointer-events: none;
  z-index: 25;

  opacity: var(--blur-a-r);

  border-radius: inherit;

  -webkit-backdrop-filter: blur(var(--blur-max)) saturate(110%);
  backdrop-filter: blur(var(--blur-max)) saturate(110%);

  background: rgba(0,0,0,0.001);

  -webkit-mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
  mask-image: linear-gradient(
    to left,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 30%,
    rgba(0,0,0,0.35) 70%,
    rgba(0,0,0,0.00) 100%
  );
}

/* =========================================================
   ✅ (핵심) 가로 스트립 유지
   - portlet-body가 아니어도(환경별 wrapper) flex/overflow 강제
   - ⚠️ mask-image는 JS가 쓰므로 절대 끄지 않음
   ========================================================= */

/* 기본 스크롤 컨테이너 */
.home-photo-strip .portlet-body{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding: 18px 0 0 0 !important;
  padding-right: var(--end-gap) !important;

  align-items: flex-start !important;
  -webkit-overflow-scrolling: touch;

  margin: 0 !important;

  transform: translateZ(0);
  will-change: transform;

  scrollbar-width: none !important;
}

/* 환경별 wrapper 후보(여기가 실제 스크롤 컨테이너인 경우가 있음) */
.home-photo-strip .portlet-content,
.home-photo-strip .portlet-content-container,
.home-photo-strip .portlet-body .portlet-content,
.home-photo-strip .portlet-body .portlet-content-container{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding-right: var(--end-gap) !important;

  align-items: flex-start !important;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none !important;
}

/* 웹킷 스크롤바 숨김 */
.home-photo-strip .portlet-body::-webkit-scrollbar,
.home-photo-strip .portlet-content::-webkit-scrollbar,
.home-photo-strip .portlet-content-container::-webkit-scrollbar{
  height: 0px !important;
}

/* 첫 카드 왼쪽 여백(유지) */
.home-photo-strip .asset-abstract:first-child{
  margin-left: 10px !important;
}

/* =========================================================
   ✅ 군더더기 제거 + 3:2 썸네일 고정
   ========================================================= */

/* 내부 마진/패딩 제거 */
.home-photo-strip .asset-content,
.home-photo-strip .asset-content.mb-3,
.home-photo-strip .asset-summary,
.home-photo-strip .asset-summary-content{
  margin: 0 !important;
  padding: 0 !important;
}

/* 카드류 기본 흰 배경 제거 */
.home-photo-strip .asset-abstract,
.home-photo-strip .asset-summary .card,
.home-photo-strip .asset-summary .card-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 카드(아이템) */
.home-photo-strip .asset-abstract{
  flex: 0 0 auto !important;
  width: var(--thumb-w) !important;
  margin: 0 !important;

  position: relative;
  border-radius: var(--thumb-r) !important;
  cursor: pointer;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              box-shadow 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms;
  will-change: transform;
}

/* 썸네일(270×180) */
.home-photo-strip .asset-summary .cover-image{
  width: var(--thumb-w) !important;
  height: var(--thumb-h) !important;
  border-radius: var(--thumb-r) !important;

  background-size: cover !important;
  background-position: center !important;

  margin: 0 !important;

  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              filter 220ms;
}

/* aspect-ratio 트릭 제거 */
.home-photo-strip .asset-summary .cover-image::before{
  content: none !important;
}

/* 제목/메타 숨김(군더더기 제거) */
.home-photo-strip p.component-title.h4,
.home-photo-strip .asset-title,
.home-photo-strip .asset-title a,
.home-photo-strip .metadata-author,
.home-photo-strip .metadata-entry,
.home-photo-strip .asset-summary .metadata,
.home-photo-strip .asset-summary .autofit-row,
.home-photo-strip .asset-summary .autofit-col,
.home-photo-strip .asset-summary .sticker{
  display: none !important;
}

/* Hover / Active */
.home-photo-strip .asset-abstract:hover{
  transform: translateY(-8px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}
.home-photo-strip .asset-abstract:hover .asset-summary .cover-image{
  transform: scale(1.02);
}
.home-photo-strip .asset-abstract:active{
  transform: translateY(-4px) scale(0.98);
  filter: brightness(1.05);
}
.home-photo-strip .asset-abstract:active .asset-summary .cover-image{
  transform: scale(0.99);
}

/* 클릭 flash */
.home-photo-strip .asset-abstract::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--thumb-r);
  background: rgba(255,255,255,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.home-photo-strip .asset-abstract:active::after{
  opacity: 1;
}

/* 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce){
  .home-photo-strip .asset-abstract,
  .home-photo-strip .asset-summary .cover-image{
    transition: none !important;
  }
}.lfr-layout-structure-item-e482d737-32ab-db2f-e111-1133154c51eb {
font-size: 25px !important;
font-weight: 800 !important;
padding-left: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-68ddf085-c234-eec4-fc13-691eea561864 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
/* =========================================================
   ✅ 포토 갤러리 – 안정판 (페이드 + 자연스러운 블러 + 스크롤텔링)
   - 페이드(마스크): strip에 적용 (깜빡임 최소)
   - 블러: 박스처럼 보이지 않게 그라데이션 + opacity를 wl/wr에 연동
   - 스크롤텔링: 카드가 대부분 보일 때 “작게 → 위로 → 커짐” (양방향)
   ========================================================= */

.home-photo-strip{
  position: relative;

  --fade-w: 160px;      /* 블러 오버레이 폭(시각적 폭) */
  --dssc-wl: 0px;       /* JS가 갱신 */
  --dssc-wr: 0px;       /* JS가 갱신 */

  --dssc-rise: 28px;    /* 등장 시 위로 올라오는 정도(더 크게) */

  overflow: hidden;
  border-radius: inherit;

  /* GPU 레이어 고정 */
  transform: translateZ(0);
}

/* =========================================================
   ✅ 페이드(마스크) – strip에만 적용
   ========================================================= */

.home-photo-strip{
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.10) calc(var(--dssc-wl) * 0.25),
    rgba(0,0,0,0.35) calc(var(--dssc-wl) * 0.60),
    rgba(0,0,0,1) var(--dssc-wl),
    rgba(0,0,0,1) calc(100% - var(--dssc-wr)),
    rgba(0,0,0,0.35) calc(100% - (var(--dssc-wr) * 0.60)),
    rgba(0,0,0,0.10) calc(100% - (var(--dssc-wr) * 0.25)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.10) calc(var(--dssc-wl) * 0.25),
    rgba(0,0,0,0.35) calc(var(--dssc-wl) * 0.60),
    rgba(0,0,0,1) var(--dssc-wl),
    rgba(0,0,0,1) calc(100% - var(--dssc-wr)),
    rgba(0,0,0,0.35) calc(100% - (var(--dssc-wr) * 0.60)),
    rgba(0,0,0,0.10) calc(100% - (var(--dssc-wr) * 0.25)),
    rgba(0,0,0,0) 100%
  );
}

/* =========================================================
   ✅ 고급 블러 – “박스” 안 보이게: 그라데이션 + wl/wr 기반 opacity
   - 블러 조금 더 강하게
   ========================================================= */

.home-photo-strip::before,
.home-photo-strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:var(--fade-w);
  pointer-events:none;

  /* 가장자리만 부드럽게 뭉개는 고급 블러 */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);

  /* 합성 안정 */
  transform: translateZ(0);
  will-change: opacity;

  /* 모서리 튀는 느낌 완화 */
  border-radius: inherit;
}

.home-photo-strip::before{
  left:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.10) 42%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: clamp(0, calc(var(--dssc-wl) / var(--fade-w)), 1);
}

.home-photo-strip::after{
  right:0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.10) 42%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: clamp(0, calc(var(--dssc-wr) / var(--fade-w)), 1);
}

/* =========================================================
   ✅ 스크롤텔링 (양방향)
   - 카드가 “대부분 보일 때” 더 강하게: 작게 시작 → 위로 → 커짐
   - 초기 1회 로드시 “전부 동시에 올라오는 느낌”을 줄이기 위해
     ready 전에는 transition을 끔
   ========================================================= */

.home-photo-strip .asset-abstract{
  --dssc-pop: 0;

  opacity: var(--dssc-pop);

  transform:
    translate3d(0, calc((1 - var(--dssc-pop)) * var(--dssc-rise)), 0)
    scale(calc(0.88 + (var(--dssc-pop) * 0.18)));

  will-change: transform, opacity;
}

/* ready 이후에만 부드럽게 변하도록 */
.home-photo-strip.dssc-fx-ready .asset-abstract{
  transition: transform 180ms ease, opacity 180ms ease;
}
.lfr-layout-structure-item-09091c84-b55d-0b2f-8f50-75a1f8e7aaf6 {
font-family: Pretendard, sans-serif !important;
}
.lfr-layout-structure-item-17e43915-eb65-100a-5552-f44784ecb8e3 {
display: none !important;
}
.lfr-layout-structure-item-190337e3-edeb-ccb6-368c-9b95b9ed7945 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-711d7a13-4430-d9ef-6f03-a3a9f36e1bd9 {
background-color: #3177CC !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-3 (확대 제거 버전)
   ================================ */

.dssc-card-3{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-3::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.27) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-3:hover{
  filter: brightness(1.14);
  transform: translateY(-6px);
  box-shadow:
    0 22px 40px rgba(0,0,0,0.23),
    inset 0 0 22px rgba(255,255,255,0.28);
}

.dssc-card-3:hover::before{
  opacity: 1;
  animation: dssc-swirl-3 6s linear infinite;
}

.dssc-card-3:active{
  transform: translateY(-2px);
  box-shadow:
    inset 10px 10px 20px rgba(0,0,0,0.28),
    inset -10px -10px 20px rgba(255,255,255,0.35);
}

.dssc-card-3:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-3{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-a8c9e0ca-e74d-a255-0b7e-835b9a6dd088 {
font-family: Pretendard, sans-serif !important;
}
.lfr-layout-structure-item-c219e40c-a397-aa12-9587-003fc58a93a0 {
height: 290px !important;
overflow: auto !important;
}
.lfr-layout-structure-item-3832f11c-c099-7f83-25c5-d39b0a9f20ac {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-3832f11c-c099-7f83-25c5-d39b0a9f20ac) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-b264e84c-cb4e-fe90-7ca0-44cab00d6a8f {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-b264e84c-cb4e-fe90-7ca0-44cab00d6a8f) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-acaf0d42-5593-aac7-3e9a-dbb273988731 {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-acaf0d42-5593-aac7-3e9a-dbb273988731) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-4756dba2-a57b-f457-ac35-5fa323ab99fb {
background-position: 50% 50%; background-repeat:no-repeat; background-size: cover; background-image: var(--lfr-background-image-4756dba2-a57b-f457-ac35-5fa323ab99fb) !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-49af2fd8-1c08-4549-eb6d-9a06db83d1bf {
display: none !important;
}
.lfr-layout-structure-item-29f8ed96-09a4-3a81-e55a-4b9c0e8d6dce {
background-color: #0197E8 !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-4 (확대 제거 버전)
   ================================ */

.dssc-card-4{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

/* 리퀴드 하이라이트 */
.dssc-card-4::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.28) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 호버 → 밝아짐 + 살짝 위로만 이동 */
.dssc-card-4:hover{
  filter: brightness(1.15);
  transform: translateY(-6px);   /* scale 제거 */
  box-shadow:
    0 20px 40px rgba(0,0,0,0.22),
    inset 0 0 20px rgba(255,255,255,0.25);
}

.dssc-card-4:hover::before{
  opacity: 1;
  animation: dssc-swirl-4 7s linear infinite;
}

/* 클릭 → 쫀득 눌림 (확대 없이 압축 느낌만) */
.dssc-card-4:active{
  transform: translateY(-2px);  /* scale 제거 */
  box-shadow:
    inset 10px 10px 20px rgba(0,0,0,0.28),
    inset -10px -10px 20px rgba(255,255,255,0.35);
  transition: transform 0.1s ease;
}

/* 버튼 눌러도 카드 눌림 */
.dssc-card-4:has(button:active){
  transform: translateY(-2px);
}

/* 소용돌이 */
@keyframes dssc-swirl-4{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-95c0bb53-8a68-ec7e-9155-e032002ae2cd {
border-color: #33333300 !important;
padding-top: var(--spacer-3,1rem) !important;
}
/* =========================================
   유튜브 영상: 모서리 18px 통일 및 테두리 완벽 제거
   ========================================= */

/* 1) 최상위 컨테이너: 배경색 잔상 제거 및 곡률 설정 */
.aspect-ratio.video,
.video-container {
  border-radius: 18px !important; /* 👈 곡률 18px로 변경 */
  overflow: hidden !important;
  border: none !important;
  background: transparent !important; /* 배경색 비침 방지 */
  
  /* 브라우저 렌더링 시 모서리 흰 선 방지 */
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* 2) 범인(iframe): 테두리 강제 제거 및 부모 크기 밀착 */
.video-container iframe {
  border: 0 !important;
  border-radius: 18px !important;
  outline: none !important;
  box-shadow: none !important;
  
  /* 미세하게 어긋나는 여백 방지 */
  display: block !important;
  margin: 0 !important;
}

/* 3) 유튜브 썸네일 오버레이 테두리 제거 */
.ytp-cued-thumbnail-overlay-image {
  border: none !important;
  border-radius: 18px !important;
  background-clip: padding-box !important;
}/* =====================================================
   DSSC Banner Flicker Fix v2 (안전 패치)
   - 구조 변경 없음
   - display 로직 유지
   - move-right 전환 한 프레임 노출 차단
   ===================================================== */

/* 1. 캐러셀 GPU 고정 */
#bbqh-carouselInner,
#bbqh-carouselInner .carousel-item{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* 2. 기본 슬라이드 상태 */
#bbqh-carouselInner .carousel-item{
  transition: transform 0.6s ease, opacity 0.2s ease;
}

/* 3. move-right 붙는 순간 잠깐 opacity 0으로 잠금 */
#bbqh-carouselInner .carousel-item.move-right:not(.active){
  opacity: 0;
}

/* 4. 실제 이동 시작 시 보이게 */
#bbqh-carouselInner .carousel-item.move-right.active,
#bbqh-carouselInner .carousel-item.active{
  opacity: 1;
}

/* 5. background white 번쩍임 방지 */
#bbqh-carouselInner .carousel-item .item-box{
  background-color: transparent !important;
}

/* ======================================================
   DSSC Banner Flicker Fix - lp-slides animation patch
   ====================================================== */

/* 1. GPU 레이어 고정 */
.lp-slides .carousel-item{
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* 2. 애니메이션 시작 전 프레임 제거 */
.lp-slides .carousel-item.move-right,
.lp-slides .carousel-item.move-left,
.lp-slides .carousel-item.active.move-right,
.lp-slides .carousel-item.active.move-left{
  animation-fill-mode: both !important;
}

/* 3. opacity 전환 제거 (번쩍임 원인 차단) */
.lp-slides .carousel-item{
  transition: none !important;
}

/* 4. 기본 opacity 유지 강제 */
.lp-slides .carousel-item.active,
.lp-slides .carousel-item.move-right,
.lp-slides .carousel-item.move-left{
  opacity: 1 !important;
}.lfr-layout-structure-item-bf3da9ae-ae30-d1cb-12fb-58e0d4e45211 {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-f64bbc90-db34-2525-59d1-a98957697c14 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-9368f902-41bd-aea7-bf33-306ef7566b43 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-ce554688-9b6a-b3a5-549e-3b9efb78e2f9 {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-03e1a025-e091-7259-24ea-655813eb9d88 {
background-color: #D45050 !important;
}
/* =========================================================
   ✅ Home 상단 컨테이너 (유튜브 + 포토갤러리)
   - 스크롤바: 포토갤러리 “바깥 아래(컨텐츠 안 가림)”
   - track(이동영역 선) 완전 제거
   - thumb: 두께 +40%, 길이 -20%
   - 붙이는 곳: 컨테이너 프래그먼트 Custom CSS
   - class: home-hero-gradient
   ========================================================= */

.home-hero-gradient{
  position: relative;

  --hero-radius: 26px;
  --hero-pad: 18px;

  --grad-x: 0;

  border-radius: var(--hero-radius);
  padding: var(--hero-pad);

  background: linear-gradient(
    135deg,
    #1f5fbf 0%,
    #2f7edb 30%,
    #3f8bd6 55%,
    #5fa7c8 75%,
    #7db8c4 100%
  );

  background-size: 200% 200%;
  background-position: calc(var(--grad-x) * 1%) 50%;

  border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);

  overflow: visible;
  box-sizing: border-box;
}

.home-hero-gradient::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.22), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}

.home-hero-gradient > *{
  position: relative;
  z-index: 1;
}

.home-hero-gradient .row{
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: var(--hero-pad);
  margin: 0 !important;
}

.home-hero-gradient .row > [class*="col"],
.home-hero-gradient .row > .col{
  min-width: 0;
  padding: 0 !important;
}

@media (max-width: 991.98px){
  .home-hero-gradient .row{
    flex-wrap: wrap;
  }
}

.home-hero-gradient .home-hero-video,
.home-hero-gradient .home-photo-strip{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
  margin: 0 !important;
}

.home-hero-video iframe,
.home-hero-video video{
  border-radius: calc(var(--hero-radius) - var(--hero-pad));
  overflow: hidden;
}

.home-hero-gradient h1,
.home-hero-gradient h2,
.home-hero-gradient h3,
.home-hero-gradient p{
  margin-top: 0;
}

/* 포토갤러리 박스: 스크롤바 자리 확보 */
.home-hero-gradient .home-photo-strip{
  position: relative;
  padding-bottom: 26px;
}

/* 스크롤바 컨테이너 */
.home-hero-gradient .home-photo-strip .dssc-scrollbar{
  position: absolute;
  left: 0;   /* JS가 px로 조정 */
  right: 0;  /* JS가 px로 조정 */

  bottom: 4px;
  height: 22px;

  z-index: 30;
  pointer-events: auto;
}

/* track 완전 투명 */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-track{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;

  height: 9.1px; /* 6.5 * 1.4 */
  transform: translateY(-50%);

  background: transparent !important;
  border-radius: 999px;
}

.home-hero-gradient .home-photo-strip:hover .dssc-scrollbar-track{
  background: transparent !important;
}

/* thumb */
.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb{
  position: absolute;
  top: 50%;

  height: 9.1px;
  transform: translateY(-50%) scaleX(0.80);
  transform-origin: left center;

  width: 90px; /* JS가 계산해 덮어씀 */
  left: 0;

  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  cursor: grab;
}

.home-hero-gradient .home-photo-strip .dssc-scrollbar-thumb.is-dragging{
  cursor: grabbing;
}.lfr-layout-structure-item-cff7dfbc-58f2-e79f-49a3-d25f06be186d {
display: none !important;
height: 290px !important;
}
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d {
font-weight: 600 !important;
}
/* =========================================================
   DKU 게시판 전시 CSS (최종)
   - 공지사항(fxzi) 4개 제한
   - 리스트 글씨 크기 고정 (18~22px)
   - 평상시 밑줄 없음 / 호버 시 형광펜 밑줄 드로우
   - 테마/포틀릿 내부 style 강제값(height, display 등)까지 눌러서 "확실히" 적용
   ========================================================= */

/* 글씨/밑줄 전역 변수 */
:root{
  --dku-list-font-size: 19px;            /* 18~22px로 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 트랜디 블루 */
  --dku-hl-alpha: 0.22;                  /* 평상시(숨김 상태) */
  --dku-hl-alpha-strong: 0.30;           /* 호버 시 */
  --dku-hl-h: 0.62em;                    /* 형광펜 두께 */
  --dku-hl-pos: 82%;                     /* 텍스트 아래 위치 */
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 공지사항(fxzi) 최근 4개만 표시 */
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_fxzi_
.lp-display-view-type6 .dv-list > .list-item:nth-child(n + 6){
  display: none !important;
}

/* 2) 리스트 아이템 간격 */
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
.lp-display-view-type6 .dv-list .list-item{
  padding: 0.55rem 0 !important;
}

/* 3) 링크(제목) 글씨 크기 + 한줄 + 말줄임 + 스마트 형광펜 밑줄 */
/*    포틀릿 내부 <style>가 강해서, 여기서는 "특이성" + "!important"로 전부 덮어씀 */
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
.lp-display-view-type6 .dv-list .list-item > a.item-title{
  /* 글씨 크기/줄간격 */
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 테마가 박아둔 height 강제 해제 */
  height: auto !important;

  /* 한 줄 + 말줄임 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 테마가 display:-webkit-box를 걸어둔 것 무력화 */
  display: inline-block !important;
  max-width: 100% !important;

  /* 테마 라인클램프 흔적 무력화 */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  /* 기본 밑줄 제거 */
  text-decoration: none !important;

  /* 평상시 밑줄(형광펜) 숨김 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 4) 호버 시에만 형광펜 밑줄이 쫙 그어짐 */
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
.lp-display-view-type6 .dv-list .list-item > a.item-title:hover,
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;
  background-size: 100% var(--dku-hl-h) !important;
}

/* 5) 접근성(키보드 포커스) */
.lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 6) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-34f4579d-48e2-2288-a81c-a5d2eeb7042d
  .lp-display-view-type6 .dv-list .list-item > a.item-title{
    transition: none !important;
  }
}.lfr-layout-structure-item-0f848d82-976a-d021-c32c-5b349b0f2d8f {
height: 290px !important;
overflow: auto !important;
}
.lfr-layout-structure-item-f69a2b33-8c4f-802a-9adf-198aebdd45d4 {
display: none !important;
}
.lfr-layout-structure-item-4505efb5-d7d2-5a47-3633-8a5de0ff1658 {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-27b6269f-af07-f1f6-8008-1bd5b1fb5bc1 {
background-color: #34558B !important;
border-color: #FFFFFF00 !important;
height: 283px !important;
margin-top: var(--spacer-3,1rem) !important;
color: var(--tone-medium) !important;
width: 283px !important;
}
/* ================================
   dssc-card-1 (확대 제거 버전)
   ================================ */

.dssc-card-1{
  position: relative;
  overflow: hidden;
  cursor: pointer;

  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);

  transition:
    transform 0.4s ease,
    filter 0.35s ease,
    box-shadow 0.35s ease;
}

.dssc-card-1::before{
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.25) 0%,
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.dssc-card-1:hover{
  filter: brightness(1.12);
  transform: translateY(-6px);   /* scale 제거 */
  box-shadow:
    0 18px 35px rgba(0,0,0,0.2),
    inset 0 0 18px rgba(255,255,255,0.25);
}

.dssc-card-1:hover::before{
  opacity: 1;
  animation: dssc-swirl-1 6s linear infinite;
}

.dssc-card-1:active{
  transform: translateY(-2px);   /* scale 제거 */
  box-shadow:
    inset 8px 8px 18px rgba(0,0,0,0.25),
    inset -8px -8px 18px rgba(255,255,255,0.3);
}

.dssc-card-1:has(button:active){
  transform: translateY(-2px);
}

@keyframes dssc-swirl-1{
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}.lfr-layout-structure-item-039ac916-8297-7d18-3b75-8ee8f9611d1d {
font-size: 30px !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--body-bg) !important;
}
.lfr-layout-structure-item-46d751a9-081a-b389-fbd7-f897de155504 {
height: 100px !important;
width: 283px !important;
}
/* ================================
   DSSC 카드 내부 + 아이콘 리디자인
   다른 버튼에 영향 없음
   ================================ */

/* 카드 안의 버튼만 타겟 */
.dssc-card-1 .btn,
.dssc-card-2 .btn,
.dssc-card-3 .btn,
.dssc-card-4 .btn{

  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;

  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.15);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  font-size: 0;          /* 기존 + 숨김 */
  color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}

/* + 모양 직접 생성 (세련된 얇은 라인) */
.dssc-card-1 .btn::before,
.dssc-card-2 .btn::before,
.dssc-card-3 .btn::before,
.dssc-card-4 .btn::before{

  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: #ffffff;
}

.dssc-card-1 .btn::after,
.dssc-card-2 .btn::after,
.dssc-card-3 .btn::after,
.dssc-card-4 .btn::after{

  content: "";
  position: absolute;
  width: 2px;
  height: 14px;
  background: #ffffff;
}

/* 호버 시 부드러운 회전 + 밝기 */
.dssc-card-1 .btn:hover,
.dssc-card-2 .btn:hover,
.dssc-card-3 .btn:hover,
.dssc-card-4 .btn:hover{

  background: rgba(255,255,255,0.25);
  transform: rotate(90deg);
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944 {
font-weight: 600 !important;
}
/* =========================================================
   DKU 게시판 전시 CSS (취업게시판 jnih 최종)
   - 공지사항(fxzi) 코드와 "동일 규칙/동일 효과"로 복제
   - 최근 4개 제한
   - 리스트 글씨 크기 고정 (18~22px)
   - 평상시 밑줄 없음 / 호버 시 형광펜 밑줄 드로우
   - 밑줄 시 글자색도 블루로 변경 (공지사항과 동일하게)
   - 다른 동일 프래그먼트와 섞이지 않게: .lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944 + 포틀릿 ID로 이중 스코프
   ========================================================= */

/* 글씨/밑줄 전역 변수 (프래그먼트 범위로 제한) */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944{
  --dku-list-font-size: 19px;            /* 18~22px로 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 트랜디 블루 */
  --dku-hl-alpha: 0.22;                  /* 평상시(숨김 상태) */
  --dku-hl-alpha-strong: 0.30;           /* 호버 시 */
  --dku-hl-h: 0.62em;                    /* 형광펜 두께 */
  --dku-hl-pos: 82%;                     /* 텍스트 아래 위치 */
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 취업게시판(jnih) 최근 4개만 표시 (공지사항 코드와 동일 규칙) */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list > .list-item:nth-child(n + 6){
  display: none !important;
}

/* 2) 리스트 아이템 간격 */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item{
  padding: 0.55rem 0 !important;
}

/* 3) 링크(제목) 글씨 크기 + 한줄 + 말줄임 + 스마트 형광펜 밑줄 */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title{
  /* 글씨 크기/줄간격 */
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 테마가 박아둔 height 강제 해제 */
  height: auto !important;

  /* 한 줄 + 말줄임 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 테마가 display:-webkit-box를 걸어둔 것 무력화 */
  display: inline-block !important;
  max-width: 100% !important;

  /* 테마 라인클램프 흔적 무력화 */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  /* 기본 밑줄 제거 */
  text-decoration: none !important;

  /* 기본 글자색 유지(호버에서만 블루로 바뀜) */
  color: inherit !important;

  /* 평상시 밑줄(형광펜) 숨김 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 4) 호버/포커스 시 형광펜 밑줄 + 글자색 블루 */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:hover,
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;
  background-size: 100% var(--dku-hl-h) !important;

  /* 밑줄 시 글자도 블루로 */
  color: rgb(var(--dku-hl-rgb)) !important;
}

/* 5) 접근성(키보드 포커스) */
.lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 6) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-a9def11e-5ac9-168c-c1a5-02605c3a3944
  #p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
  .lp-display-view-type6 .dv-list .list-item > a.item-title{
    transition: none !important;
  }
}.lfr-layout-structure-item-909786c8-5db8-1b7b-41bd-96e5a52fc944 {
width: 350px !important;
}
.lfr-layout-structure-item-3f4bbf75-6aea-d0af-38cc-a924091f045d {
font-size: 25px !important;
font-weight: 800 !important;
color: var(--body-bg) !important;
}
/* =========================================================
   ✅ 포토 갤러리 – 안정판 (페이드 + 자연스러운 블러 + 스크롤텔링)
   - 페이드(마스크): strip에 적용 (깜빡임 최소)
   - 블러: 박스처럼 보이지 않게 그라데이션 + opacity를 wl/wr에 연동
   - 스크롤텔링: 카드가 대부분 보일 때 “작게 → 위로 → 커짐” (양방향)
   ========================================================= */

.home-photo-strip{
  position: relative;

  --fade-w: 160px;      /* 블러 오버레이 폭(시각적 폭) */
  --dssc-wl: 0px;       /* JS가 갱신 */
  --dssc-wr: 0px;       /* JS가 갱신 */

  --dssc-rise: 28px;    /* 등장 시 위로 올라오는 정도(더 크게) */

  overflow: hidden;
  border-radius: inherit;

  /* GPU 레이어 고정 */
  transform: translateZ(0);
}

/* =========================================================
   ✅ 페이드(마스크) – strip에만 적용
   ========================================================= */

.home-photo-strip{
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.10) calc(var(--dssc-wl) * 0.25),
    rgba(0,0,0,0.35) calc(var(--dssc-wl) * 0.60),
    rgba(0,0,0,1) var(--dssc-wl),
    rgba(0,0,0,1) calc(100% - var(--dssc-wr)),
    rgba(0,0,0,0.35) calc(100% - (var(--dssc-wr) * 0.60)),
    rgba(0,0,0,0.10) calc(100% - (var(--dssc-wr) * 0.25)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0.10) calc(var(--dssc-wl) * 0.25),
    rgba(0,0,0,0.35) calc(var(--dssc-wl) * 0.60),
    rgba(0,0,0,1) var(--dssc-wl),
    rgba(0,0,0,1) calc(100% - var(--dssc-wr)),
    rgba(0,0,0,0.35) calc(100% - (var(--dssc-wr) * 0.60)),
    rgba(0,0,0,0.10) calc(100% - (var(--dssc-wr) * 0.25)),
    rgba(0,0,0,0) 100%
  );
}

/* =========================================================
   ✅ 고급 블러 – “박스” 안 보이게: 그라데이션 + wl/wr 기반 opacity
   - 블러 조금 더 강하게
   ========================================================= */

.home-photo-strip::before,
.home-photo-strip::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:var(--fade-w);
  pointer-events:none;

  /* 가장자리만 부드럽게 뭉개는 고급 블러 */
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);

  /* 합성 안정 */
  transform: translateZ(0);
  will-change: opacity;

  /* 모서리 튀는 느낌 완화 */
  border-radius: inherit;
}

.home-photo-strip::before{
  left:0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.10) 42%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: clamp(0, calc(var(--dssc-wl) / var(--fade-w)), 1);
}

.home-photo-strip::after{
  right:0;
  background: linear-gradient(
    to left,
    rgba(255,255,255,0.20) 0%,
    rgba(255,255,255,0.10) 42%,
    rgba(255,255,255,0.00) 100%
  );
  opacity: clamp(0, calc(var(--dssc-wr) / var(--fade-w)), 1);
}

/* =========================================================
   ✅ 스크롤텔링 (양방향)
   - 카드가 “대부분 보일 때” 더 강하게: 작게 시작 → 위로 → 커짐
   - 초기 1회 로드시 “전부 동시에 올라오는 느낌”을 줄이기 위해
     ready 전에는 transition을 끔
   ========================================================= */

.home-photo-strip .asset-abstract{
  --dssc-pop: 0;

  opacity: var(--dssc-pop);

  transform:
    translate3d(0, calc((1 - var(--dssc-pop)) * var(--dssc-rise)), 0)
    scale(calc(0.88 + (var(--dssc-pop) * 0.18)));

  will-change: transform, opacity;
}

/* ready 이후에만 부드럽게 변하도록 */
.home-photo-strip.dssc-fx-ready .asset-abstract{
  transition: transform 180ms ease, opacity 180ms ease;
}
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13 {
font-weight: 600 !important;
}
/* =========================================================
   DKU 게시판 전시 CSS (최종)
   - 공지사항(fxzi) 4개 제한
   - 리스트 글씨 크기 고정 (18~22px)
   - 평상시 밑줄 없음 / 호버 시 형광펜 밑줄 드로우
   - 테마/포틀릿 내부 style 강제값(height, display 등)까지 눌러서 "확실히" 적용
   ========================================================= */

/* 글씨/밑줄 전역 변수 */
:root{
  --dku-list-font-size: 19px;            /* 18~22px로 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 트랜디 블루 */
  --dku-hl-alpha: 0.22;                  /* 평상시(숨김 상태) */
  --dku-hl-alpha-strong: 0.30;           /* 호버 시 */
  --dku-hl-h: 0.62em;                    /* 형광펜 두께 */
  --dku-hl-pos: 82%;                     /* 텍스트 아래 위치 */
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 공지사항(fxzi) 최근 4개만 표시 */
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_fxzi_
.lp-display-view-type6 .dv-list > .list-item:nth-child(n + 6){
  display: none !important;
}

/* 2) 리스트 아이템 간격 */
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
.lp-display-view-type6 .dv-list .list-item{
  padding: 0.55rem 0 !important;
}

/* 3) 링크(제목) 글씨 크기 + 한줄 + 말줄임 + 스마트 형광펜 밑줄 */
/*    포틀릿 내부 <style>가 강해서, 여기서는 "특이성" + "!important"로 전부 덮어씀 */
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
.lp-display-view-type6 .dv-list .list-item > a.item-title{
  /* 글씨 크기/줄간격 */
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 테마가 박아둔 height 강제 해제 */
  height: auto !important;

  /* 한 줄 + 말줄임 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 테마가 display:-webkit-box를 걸어둔 것 무력화 */
  display: inline-block !important;
  max-width: 100% !important;

  /* 테마 라인클램프 흔적 무력화 */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  /* 기본 밑줄 제거 */
  text-decoration: none !important;

  /* 평상시 밑줄(형광펜) 숨김 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 4) 호버 시에만 형광펜 밑줄이 쫙 그어짐 */
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
.lp-display-view-type6 .dv-list .list-item > a.item-title:hover,
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;
  background-size: 100% var(--dku-hl-h) !important;
}

/* 5) 접근성(키보드 포커스) */
.lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 6) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-ae3ba52f-e250-412a-4998-9b74b1024d13
  .lp-display-view-type6 .dv-list .list-item > a.item-title{
    transition: none !important;
  }
}.lfr-layout-structure-item-f621b6d8-195d-24ba-13e0-9420f6311bed {
height: 100px !important;
width: 283px !important;
}
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4 {
font-weight: 600 !important;
}
/* =========================================================
   DKU 게시판 전시 CSS (취업게시판 jnih 최종)
   - 공지사항(fxzi) 코드와 "동일 규칙/동일 효과"로 복제
   - 최근 4개 제한
   - 리스트 글씨 크기 고정 (18~22px)
   - 평상시 밑줄 없음 / 호버 시 형광펜 밑줄 드로우
   - 밑줄 시 글자색도 블루로 변경 (공지사항과 동일하게)
   - 다른 동일 프래그먼트와 섞이지 않게: .lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4 + 포틀릿 ID로 이중 스코프
   ========================================================= */

/* 글씨/밑줄 전역 변수 (프래그먼트 범위로 제한) */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4{
  --dku-list-font-size: 19px;            /* 18~22px로 조절 */
  --dku-list-line-height: 1.55;

  --dku-hl-rgb: 24, 95, 191;             /* 트랜디 블루 */
  --dku-hl-alpha: 0.22;                  /* 평상시(숨김 상태) */
  --dku-hl-alpha-strong: 0.30;           /* 호버 시 */
  --dku-hl-h: 0.62em;                    /* 형광펜 두께 */
  --dku-hl-pos: 82%;                     /* 텍스트 아래 위치 */
  --dku-hl-dur: 0.42s;
  --dku-hl-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 1) 취업게시판(jnih) 최근 4개만 표시 (공지사항 코드와 동일 규칙) */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list > .list-item:nth-child(n + 6){
  display: none !important;
}

/* 2) 리스트 아이템 간격 */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item{
  padding: 0.55rem 0 !important;
}

/* 3) 링크(제목) 글씨 크기 + 한줄 + 말줄임 + 스마트 형광펜 밑줄 */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title{
  /* 글씨 크기/줄간격 */
  font-size: var(--dku-list-font-size) !important;
  line-height: var(--dku-list-line-height) !important;

  /* 테마가 박아둔 height 강제 해제 */
  height: auto !important;

  /* 한 줄 + 말줄임 */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 테마가 display:-webkit-box를 걸어둔 것 무력화 */
  display: inline-block !important;
  max-width: 100% !important;

  /* 테마 라인클램프 흔적 무력화 */
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;

  /* 기본 밑줄 제거 */
  text-decoration: none !important;

  /* 기본 글자색 유지(호버에서만 블루로 바뀜) */
  color: inherit !important;

  /* 평상시 밑줄(형광펜) 숨김 */
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha)) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-position: 0 var(--dku-hl-pos) !important;
  background-size: 0% var(--dku-hl-h) !important;

  transition:
    background-size var(--dku-hl-dur) var(--dku-hl-ease),
    background-image 0.18s ease,
    color 0.18s ease !important;

  outline: none !important;
}

/* 4) 호버/포커스 시 형광펜 밑줄 + 글자색 블루 */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:hover,
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  background-image: linear-gradient(
    90deg,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 0%,
    rgba(var(--dku-hl-rgb), calc(var(--dku-hl-alpha-strong) + 0.10)) 45%,
    rgba(var(--dku-hl-rgb), var(--dku-hl-alpha-strong)) 100%
  ) !important;
  background-size: 100% var(--dku-hl-h) !important;

  /* 밑줄 시 글자도 블루로 */
  color: rgb(var(--dku-hl-rgb)) !important;
}

/* 5) 접근성(키보드 포커스) */
.lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
#p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
.lp-display-view-type6 .dv-list .list-item > a.item-title:focus-visible{
  outline: 2px solid rgba(var(--dku-hl-rgb), 0.24) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

/* 6) 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
  .lfr-layout-structure-item-20664281-8b42-3470-d074-d0f1f9e55cb4
  #p_p_id_com_liferay_asset_publisher_web_portlet_AssetPublisherPortlet_INSTANCE_jnih_
  .lp-display-view-type6 .dv-list .list-item > a.item-title{
    transition: none !important;
  }
}.lfr-layout-structure-item-343ecfa7-7f9e-592f-0c89-e6f37dc56ae6 {
padding-left: var(--spacer-3,1rem) !important;
padding-right: var(--spacer-3,1rem) !important;
color: var(--body-bg) !important;
}