/* ===================================
   Layout System
   Synced with: docs/design-system.md
   =================================== */

br.m-only{
  display:none;
}
@media (max-width: 767px) {
  br.m-only{
    display:block;
  }
}

/* 헤더,푸터, 페이지 헤더 */
.header-inner,
.footer-inner,
.page-header-inner,
.section-inner{
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.section-inner{max-width: var(--container-max);}

.page-header {
  position: relative;
  padding-top: var(--page-header-padding-top);
  padding-bottom: var(--space-4);
  background-image: var(--page-header-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  height: var(--page-header-height);
}

/* Page-Specific Background Images */
.page-about .page-header { background-image: url(../img/award.jpg); }
.page-rules .page-header { background-image: url(../img/award4.jpg); }
.page-submit .page-header { background-image: url(../img/slide1.jpg); }
.page-winners-list .page-header, 
.page-winners-view .page-header, 
.page-winners-list-board .page-header { background-image: url(../img/slide2.jpg); }
.page-board-list .page-header, 
.page-board-view .page-header, 
.page-board-write .page-header { background-image: url(../img/slide4.jpg); }
.page-mypage .page-header, 
.page-mypage-edit .page-header,
.page-mypage-password .page-header,
.page-receipt-and-confirmation .page-header,
.page-login .page-header, 
.page-signup .page-header,
.page-terms .page-header,
.page-privacy .page-header { background-image: url(../img/award.jpg); }

/* Dimming Overlay */
.page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.5);
  pointer-events: none;
  z-index: 0;
}


/* --- Main Content --- */
main {
  min-height: calc(100vh - var(--header-height));
  animation: pageLoad 0.6s ease-out forwards;
}

@keyframes pageLoad {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

section{
  position:relative;
  padding:var(--space-10) 0;
}

section::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1280px;
  height: 1px;
  z-index: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 100%);
}

section:last-child::after {
  display:none!important;
}


/* --- Background Line Pattern --- */

/* 핀 라인 핀 레드 패턴 — ::before 독립 레이어 */
.line-red-pattern {
  position: relative;
}

.line-red-pattern::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 400vh;
  background-image: url(../img/line-pin-red.svg);
  background-repeat: no-repeat;
  background-size: 50vw;
  background-position: 70vw 20vh;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transform: translateY(var(--parallax-y, 0));
}

/* 콘텐츠가 배경 위에 표시되도록 */
.line-red-pattern > * {
  position: relative;
  z-index: 1;
}

/* Portrait(세로): width < height — 높이 기준 150vh */
@media (orientation: portrait) {
  .line-red-pattern::before {
    background-size: auto 100vh;
    background-position: 50vw 10vh;
    height: 160vh;
  }
}

/* --- Header --- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: var(--border-width) solid transparent;
  z-index: 1000;
  padding: var(--space-4) 0;
  transition: background 0.3s var(--easing-default),
              border-color 0.3s var(--easing-default),
              backdrop-filter 0.3s var(--easing-default),
              padding 0.3s var(--easing-default);
}

/* 스크롤 시 헤더 — 반투명 검정 + 블러 + 패딩 축소 */
#site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom-color: var(--color-border);
  padding: var(--space-1) 0;
}

#site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header Left — 로고 + GNB 가로 배치 */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

/* Logo — 2개 이미지 전환 */
#site-header .logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#site-header .logo img {
  transition: opacity 0.3s var(--easing-default),
              width 0.3s var(--easing-default),
              height 0.3s var(--easing-default);
}

#site-header .logo .logo-full {
  height: 55px;
  width: auto;
  opacity: 1;
}

#site-header .logo .logo-pin {
  height: 40px;
  width: auto;
  opacity: 0;
  width: 0;
  overflow: hidden;
  display:none;
}

/* 스크롤 시 로고 전환 — full 축소 + pin 표시 */
#site-header.is-scrolled .logo .logo-full {
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}

#site-header.is-scrolled .logo .logo-pin {
  opacity: 1;
  width: auto;
  display: block;
}

/* Logo Text — 스크롤 시 핀 마크 옆에 표시 */
#site-header .logo .logo-text {
  font-family: var(--font-secondary);
  font-weight: 800;
  font-size: clamp(22px, 1.2vw, 18px);
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  opacity: 0;
  max-width: 0;
  transition: opacity 0.3s var(--easing-default),
              max-width 0.3s var(--easing-default),
              margin 0.3s var(--easing-default);
              display:none;
}

#site-header.is-scrolled .logo .logo-text {
  opacity: 1;
  max-width: 270px;
  margin-left: var(--space-2);
  display: block;
  transition: opacity 0.3s var(--easing-default),
              max-width 0.3s var(--easing-default),
              margin 0.3s var(--easing-default);
}

/* GNB */
#gnb ul {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

#gnb a {
  font-family: var(--font-secondary);
  font-size: var(--type-body-size);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--easing-default);
  white-space: nowrap;
}

#gnb a:hover {
  color: var(--color-primary);
}

/* Utility Nav — 우측, GNB 동일 폰트/색상, 좁은 간격 */
#util-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

#util-nav a {
  font-family: var(--font-secondary);
  font-size: var(--type-body-size);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--easing-default);
  white-space: nowrap;
}

#util-nav a:hover {
  color: var(--color-text-secondary);
}

/* 언어 badge — 기본 badge-awarded 스타일 사용 */
#util-nav .badge {
  vertical-align: middle;
}
#util-nav .badge:hover{
  background-color: var(--color-primary-hover);
}

/* Mobile Toggle — 포인트 컬러 */
#menuToggle {
  display: none;
  font-size: 28px;
  color: var(--color-primary);
  padding: var(--space-2);
}

/* --- Mobile Overlay (디밍) --- */
#menuOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--easing-default),
              visibility var(--duration-normal) var(--easing-default);
}

#menuOverlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* --- Mobile Slide Menu --- */
#slideMenu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--color-bg-secondary);
  border-left: var(--border-width) solid var(--color-border);
  z-index: 2000;
  transform: translateX(100%);
  /* 닫힘: 반동 없이 부드럽게 슬라이드 아웃 */
  transition: transform 400ms var(--easing-out);
  overflow-y: auto;
}

#slideMenu.is-active {
  transform: translateX(0);
  /* 열림: 반동 이징으로 튜어나옴 */
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.slide-menu-content {
  padding: var(--space-9) var(--space-6);
}

#slideMenu nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

#slideMenu nav a {
  font-family: var(--font-secondary);
  font-size: var(--type-content-subheading-size);
  font-weight: var(--type-content-subheading-weight);
  letter-spacing: var(--tracking-tight);
  display: block;
  transition: color var(--duration-fast) var(--easing-default);
}

#slideMenu nav a:hover {
  color: var(--color-primary);
}

#menuClose {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 24px;
  color: var(--color-text-secondary);
  padding: var(--space-2);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 300ms var(--easing-default);
}

/* 메뉴 열릴 때 닫기 버튼 반동으로 나타남 */
#slideMenu.is-active #menuClose {
  opacity: 1;
  transform: scale(1);
}

/* --- Scroll to Top --- */
#scrollTopWrap {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 100;
  height: 0;
}

#scrollTopBtn {
  position: relative;
  top: 50px;
  width: 48px;
  height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  min-width: 0;
}

#scrollTopBtn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#scrollTopBtn svg {
  flex-shrink: 0;
}

/* --- Footer --- */
#site-footer {
  position:relative;
  background: var(--color-bg-secondary);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-8) 0 var(--space-6);
  margin-top: var(--space-10);
}

#site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-7);
}

/* Footer Left — 링크 + 조직정보 세로 배치 */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}

/* 법적 링크 / 네비게이션 — 각 nav 내부 ul 가로 배치 */
.footer-left nav ul {
  display: flex;
  gap: var(--space-5);
}

/* Footer Right — 로고 + 저작권 세로 배치 */
.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-5);
  flex-shrink: 0;
}

/* Footer Logo */
.footer-logo img {
  height: 60px;
  width: auto;
}

/* Footer Sections */
#site-footer nav,
#site-footer address {
  font-style: normal;
}

#site-footer a,
#site-footer p,
#site-footer li {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}

#site-footer a:hover {
  color: var(--color-primary);
}

/* Copyright */
.copyright {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin: 0;
  text-align: right;
}

/* --- Responsive: PC (1024px) --- */
@media (max-width: 1140px) {
  /* Header: always scrolled state */
  #site-header {
    background: rgba(10, 10, 10, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom-color: var(--color-border);
    padding: var(--space-1) 0;
  }

  /* Logo: always pin + text */
  #site-header .logo .logo-full {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  #site-header .logo .logo-pin {
    opacity: 1;
    width: auto;
    display:block;
  }
  #site-header .logo .logo-text {
    opacity: 1;
    max-width: 250px;
    margin-left: var(--space-2);
    display:block;
    
        font-weight: 700;
        letter-spacing: -0.03em;
  }

  #gnb {
    display: none;
  }

  #util-nav {
    display: none;
  }

  #menuToggle {
    display: block;
  }

  /* Language badge max-width */
  #slideMenu .badge {
    max-width: 60px;
    text-align: center;
  }

  #site-footer {
    margin-top: var(--space-9);
  }
}

/* --- Responsive: Tablet (768px) --- */
@media (max-width: 768px) {
  #site-footer {
    margin-top: var(--space-8);
  }

  .footer-left nav ul {
    flex-wrap: wrap;
  }
}

/* --- Responsive: Mobile (640px) --- */
@media (max-width: 640px) {
  #site-footer {
    margin-top: var(--space-7);
  }

  #site-footer .footer-inner {
    flex-direction: column;
    gap: var(--space-6);
  }

  .footer-right {
    align-items: flex-start;
  }

  .copyright {
    text-align: left;
  }
}



 /* ── Article Style 1 ── */
.article-style1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
.article-style1 > article {
border-color: rgba(255, 255, 255, 0.4);
    border-style: solid;
    border-width: 1px 0;
    padding: var(--space-8) var(--space-6);
    background: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 2px black;
}
@media (max-width: 767px) {
  .article-style1 {
    grid-template-columns: repeat(1, 1fr)!important;
    column-gap: 0;
  }
  .article-style1,
  .article-style2 {
    row-gap: var(--space-4) !important;
  }
}  
 

/* ── Article Style 2 ── */
.article-style2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}
.article-style2 > article {
border-color: rgba(255, 255, 255, 0.4);
    border-style: solid;
    border-width: 1px 0;
    padding: var(--space-5) var(--space-6);
    background: rgba(0, 0, 0, 0.4);
    text-shadow: 0 0 2px black;
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.article-style2 > article > h4{flex:1; margin:0;}
.article-style2 > article > p{flex:3;}

@media (max-width: 767px) {
  .article-style2 > article {
    flex-direction: column;
    align-items: flex-start;
    gap:var(--space-2);
  }
}  




/* ── Article Style 3 AAA── */

.article-style3 {
  display: grid;
  grid-template-columns: 1fr 3fr;
    align-items: center;
  gap: var(--space-6);
}
.article-style3 > article {
    padding: var(--space-8) var(--space-6);
    text-shadow: 0 0 2px black;
    gap: var(--space-4);
    align-items: center;
}
.article-style3 > article > h4{flex:1; margin:0;}
.article-style3 > article > p{flex:3;}

@media (max-width: 767px) {
  .article-style3 > article {
    flex-direction: column;
    align-items: flex-start;
    gap:var(--space-2);
  }
}  



/* Article background reverse */

    .article-style-rev>article {
      background: var(--ds-glass-bg);
    }


/* Table style 1 */
.table-wrap{margin-bottom: var(--space-7);}
.table-wrap table{width: 100%; border-top: 1px solid rgba(255,255,255,0.4);}
.table-wrap table th,
.table-wrap table td{
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding: var(--space-4);
  text-align: left;
}
.table-wrap table th{background: rgba(255,255,255,0.15); width:240px;}

.table-wrap table th>*:first-child,.table-wrap table td>*:first-child,
li:first-child>*:first-child{margin-top:0!important;}
.table-wrap table th>*:last-child,.table-wrap table td>*:last-child,li:last-child>*:last-child{margin-bottom:0!important;}


@media(max-width:767px){
  .table-wrap{overflow-x:auto;}
  .table-wrap table th{width:100px; min-width:100px;}
}