/*
TABLE OF CONTENTS | 목차
1) UI Tokens | 공통 UI 토큰
2) Utilities | 유틸리티 클래스
3) Actions | 버튼 및 액션 요소
4) Typography Helpers | 타이포그래피 헬퍼
5) Board Components | 게시판 공통 컴포넌트
6) Interaction Helpers | 상호작용 접근성 헬퍼
7) Visual Helpers | 시각 보조 요소
8) Status Helpers | 상태 표현 클래스
9) Reduced Motion | 모션 최소화 대응
MAINTENANCE NOTES | 유지보수 메모
- 클래스 네이밍은 ui-* 접두사 유지(페이지 전용 스타일과 충돌 방지)
- data-ui-* 훅 변경 시 js/ui.js 및 html data 속성을 함께 수정
*/

/* 1) UI Tokens | 공통 UI 토큰 */
/* 역할: 색상/간격/트랜지션 토큰을 중앙 관리 */
:root {
    --color-bg: #282828;
    --color-surface: #000;
    --color-text: #fff;
    --color-text-muted: #8a8a8a;
    --color-accent: #7cd1ff;
    --color-warning: #fabf00;
    --color-border-muted: rgba(255, 255, 255, 0.2);

    --radius-pill: 999px;
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --easing-base: ease;

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
}

/* 2) Utilities | 유틸리티 클래스 */
/* 의존: 접근성 보조 클래스(u-visually-hidden, ui-skip-link)를 공통 사용 */
.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ui-skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--color-warning);
    color: #000;
    font-weight: 700;
    border: 0;
}

.ui-skip-link:focus,
.ui-skip-link:focus-visible {
    top: var(--space-md);
    left: var(--space-md);
    width: auto;
    height: auto;
    padding: var(--space-sm) var(--space-md);
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}

/* 3) Actions | 버튼 및 액션 요소 */
/* 유지보수: 버튼 기본 스타일 변경 시 서브/메인 공통 CTA 영향 확인 */
.ui-btn {
    display: inline-block;
    padding: 0.896em 3.063em;
    background: #000;
    color: #fff;
    font-size: 1.333em;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transition: background-color var(--duration-base) var(--easing-base), color var(--duration-base) var(--easing-base);
}

.ui-btn:is(:hover, :focus, :focus-visible) {
    background-color: var(--color-warning);
    color: #000;
}

/* 4) Typography Helpers | 타이포그래피 헬퍼 */
/* 역할: 섹션 제목 계층을 통일해 페이지 간 일관성 유지 */
.ui-heading-xl,
.section-title,
.page-title {
    font-family: "GmarketSans";
    font-size: 3.556em;
    font-weight: 700;
    line-height: 1;
}

.ui-heading-md,
.section-subtitle {
    font-family: "GmarketSans";
    font-size: 1.778em;
    font-weight: 700;
    line-height: 1;
}

/* 5) Board Components | 게시판 공통 컴포넌트 */
/* Board Helpers | 게시판 공통 목록 버튼 UI */
/* 역할: 게시판 상세 하단 목록 버튼 링크 스타일을 공통화합니다. */
.ui-board-footer {
    text-align: center;
    padding: 1.333em 0;
    margin-top: 5em;
    border-top: 1px solid #dedede;
}

.ui-board-list-link {
    display: inline-block;
    color: #000;
    line-height: 3.111;
    padding: 0 2.444em;
    background: #e9e9e9;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ui-board-list-link:is(:hover, :focus, :focus-visible) {
    background: #000;
    color: #fff;
}

/* Board Post Helpers | 전시 제외 게시판 상세 공통 UI */
/* 역할: 일반 게시판 상세의 헤더/본문/첨부파일 영역 기본 레이아웃을 제공합니다. */
.ui-board-post {
    color: #000;
    background: #fff;
    margin-top: 5.556em;
}

.ui-board-post-header {
    padding: 1.778em 1.389em 0.889em;
    border-bottom: 1px solid #4a4a4a;
}

.ui-board-post-title {
    font-size: 1.333em;
    line-height: 1.333;
    color: #050505;
}

.ui-board-post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.889em;
    line-height: 2;
    color: #919191;
    margin-top: 1em;
}

.ui-board-post-meta-view {
    display: inline-flex;
    align-items: center;
    gap: 0.563em;
}

.ui-board-post-meta-icon {
    width: 1.25em;
    height: 1.25em;
}

.ui-board-post-content {
    color: #000;
    padding: 0 1.333em;
}

.ui-board-post-body {
    font-size: 0.889em;
    line-height: 2;
    margin-top: 2em;
}

.ui-board-post-body img {
    display: block;
    width: 69.444%;
    margin: 0 auto;
}

.ui-board-post-body--editor {
    font-size: 1rem;
    line-height: 1.6;
}

.ui-board-post-body--editor :where(b, strong) {
    font-weight: 700 !important;
}

.ui-board-post-body--editor :where(iframe, video, embed, object, table) {
    max-width: 100%;
}

.ui-board-post-body--editor :where(ul, ol) {
    padding-left: 1.5em;
}

.ui-board-post-body--editor ul {
    list-style: disc;
}

.ui-board-post-body--editor ol {
    list-style: decimal;
}

.ui-board-post-body--editor :where(ul, ol, table, blockquote) {
    margin: 1em 0;
}

.ui-board-post-body--editor table {
    width: auto;
    border-collapse: collapse;
}

.ui-board-post-body--editor :where(th, td) {
    vertical-align: top;
}

.ui-board-post-files {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    padding: 1em 0;
}

.ui-board-post-file-item > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    line-height: 2;
    color: #919191;
}

.ui-board-post-file-item > a:hover,
.ui-board-post-file-item > a:focus {
    text-decoration: underline;
}

.ui-board-post-file-icon {
    display: block;
    flex: none;
    width: 1.5em;
    height: 1.5em;
}

.ui-board-post-meta-icon path,
.ui-board-post-file-icon path {
    fill: currentColor;
}

/* Event Card Helpers | 이벤트 카드 공통 UI */
/* 역할: 홈/이벤트 목록 카드의 공통 레이아웃과 인터랙션 규칙을 재사용합니다. */
.ui-event-grid {
    display: grid;
    column-gap: 0.889em;
    row-gap: 3.444em;
}

.ui-event-card-link {
    display: block;
}

.ui-event-thumb {
    overflow: hidden;
    aspect-ratio: 49 / 36;
}

.ui-event-thumb > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.ui-event-meta {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin-top: 1.333em;
}

.ui-event-state {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.ui-event-state::after {
    content: "";
    width: 2px;
    height: 0.951em;
    margin: 0 0.778em 0 0.889em;
    background: #777;
}

.ui-event-period {
    color: #8a8a8a;
    font-size: 0.889em;
    font-weight: 500;
}

.ui-event-title {
    min-height: 2.728em;
    font-size: 1.222em;
    line-height: 1.364;
    margin-top: 0.727em;
    word-break: break-all;
    overflow-wrap: break-word;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.ui-event-card-link:is(:hover, :focus, :focus-visible) .ui-event-thumb > img {
    transform: scale(1.1);
}

/* Board Controls | 게시판 목록 하단 컨트롤 UI */
/* 역할: 페이지네이션/검색 UI를 페이지 타입과 분리된 공통 컴포넌트로 제공합니다. */
.ui-board-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8a8a8a;
    gap: 0.5em;
    margin-top: 3.556em;
}

.ui-board-pagination-item {
    display: flex;
}

.ui-board-pagination-item.is-hidden {
    display: none;
}

.ui-board-pagination-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.556em;
    line-height: 1.556em;
    border-radius: 999px;
    color: #8a8a8a;
    transition: color 0.2s ease;
}

.ui-board-pagination-link:is(:hover, :focus, :focus-visible) {
    color: #fff;
}

.ui-board-pagination-link svg path {
    fill: currentColor;
    transition: fill 0.2s ease;
}

.ui-board-pagination-link-nav svg {
    width: 100%;
    height: auto;
}

.ui-board-pagination-link-page {
    font-size: 1em;
    font-weight: 500;
}

.ui-board-pagination-link-page:is(.is-current, [aria-current="page"]) {
    color: #fff;
}

.ui-board-pagination-link[aria-disabled="true"] {
    opacity: 0.35;
    pointer-events: none;
}

.ui-board-search {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    padding: 0.889em 1.333em;
    background-color: #1e1e1e;
    border: 2px solid #353535;
    border-radius: 600px;
    margin: 2.222em auto 0 auto;
    position: relative;
    overflow: hidden;
}

.ui-board-search-input {
    width: calc(100% - 1.778em);
    line-height: 1.778;
    padding: 0 0.444em;
    color: #919191;
    background: transparent;
    border: none;
}

.ui-board-search-input::placeholder {
    color: #353535;
}

.ui-board-search-input:focus,
.ui-board-search-input:focus-visible {
    outline: none;
}

.ui-board-search-button {
    width: 1.778em;
    height: 1.778em;
}

/* Board Table List | 게시판 표형 목록 컴포넌트 */
/* 역할: 제목/날짜 2열 구조를 가진 게시판 목록 테이블 스타일을 공통 제공합니다. */
.ui-board-list-table,
.notice-list-board {
    margin-top: 5.556em;
}

.ui-board-list-head,
.notice-list-head {
    display: flex;
    font-size: 0.889em;
    line-height: 2;
    text-align: center;
    padding: 1em 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #4a4a4a;
}

.ui-board-list-head-title,
.notice-list-head-title {
    width: 75%;
}

.ui-board-list-head-date,
.notice-list-head-date {
    width: 25%;
}

.ui-board-list-row,
.notice-list-row {
    border-bottom: 1px solid #4a4a4a;
}

.ui-board-list-table .ui-board-list-link {
    color: inherit;
    line-height: inherit;
    padding: 0;
    background: transparent;
    border-radius: 0;
    transition: none;
}

.ui-board-list-table .ui-board-list-link,
.notice-list-link {
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ui-board-list-table .ui-board-list-link::before,
.notice-list-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s ease;
    z-index: 0;
    pointer-events: none;
}

.ui-board-list-table .ui-board-list-link::after,
.notice-list-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.333em;
    width: 1.333em;
    height: 1.333em;
    background: var(--ui-ico-rightarrow-url, url("/img/ui/ico_rightarrow.svg")) no-repeat center / contain;
    opacity: 0;
    transform: translate(-0.444em, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 2;
    pointer-events: none;
}

.ui-board-list-table .ui-board-list-link > *,
.notice-list-link > * {
    position: relative;
    z-index: 1;
}

.ui-board-list-table .ui-board-list-link:is(:hover, :focus, :focus-visible),
.notice-list-link:is(:hover, :focus, :focus-visible) {
    color: inherit;
    background: transparent;
    outline: none;
}

.ui-board-list-table .ui-board-list-link:is(:hover, :focus, :focus-visible)::before,
.notice-list-link:is(:hover, :focus, :focus-visible)::before {
    transform: scaleX(1);
}

.ui-board-list-table .ui-board-list-link:is(:hover, :focus, :focus-visible)::after,
.notice-list-link:is(:hover, :focus, :focus-visible)::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.ui-board-list-title,
.notice-list-title {
    width: 75%;
    font-size: 1.222em;
    line-height: 1.455;
    padding: 1.046em 1.136em 1.091em;
}

.ui-board-list-date,
.notice-list-date {
    width: 25%;
    font-size: 0.889em;
    text-align: center;
    color: #919191;
}

/* 6) Interaction Helpers | 상호작용 접근성 헬퍼 */
/* 의존: 키보드 포커스 표시와 hover-fill 데이터 훅이 연결됨 */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

[data-ui-hover-fill] {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --ui-hover-fill-color: #000;
    --ui-hover-fill-duration: var(--duration-base);
    --ui-hover-fill-ease: var(--easing-base);
}

[data-ui-hover-fill]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--ui-hover-fill-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ui-hover-fill-duration) var(--ui-hover-fill-ease);
    pointer-events: none;
}

[data-ui-hover-fill] > * {
    position: relative;
    z-index: 1;
}

[data-ui-hover-fill]:hover::before,
[data-ui-hover-fill]:focus-within::before {
    transform: scaleX(1);
}

/* 7) Visual Helpers | 시각 보조 요소 */
/* 의존: ui.js가 .ui-underline-line 및 관련 CSS 변수 값을 동적으로 주입 */
.ui-icon-link,
.ui-link-arrow {
    width: 0.821em;
    height: 0.821em;
}

[data-ui-underline-lines] .ui-underline-text {
    --ui-underline-resolved-duration: var(--ui-underline-duration, 0.36s);
    display: inline;
    word-break: keep-all;
    overflow-wrap: normal;
}

.ui-underline-line {
    display: inline;
    padding-bottom: 0.08em;
    word-break: keep-all;
    overflow-wrap: normal;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 0 1px;
    transition: background-size var(--ui-underline-resolved-duration) var(--easing-base);
    transition-delay: var(--ui-underline-line-delay-out, 0s);
}

[data-ui-underline-lines]:is(:hover, :focus, :focus-visible) .ui-underline-line {
    background-position: left 100%;
    background-size: 100% 1px;
    transition-delay: var(--ui-underline-line-delay-in, 0s);
}

/* 8) Status Helpers | 상태 표현 클래스 */
/* 역할: 진행상태(예정/진행중/종료) 컬러 표현을 공통화 */
.ui-status-upcoming,
.ui-status--upcoming {
    color: var(--color-warning);
}

.ui-status-ongoing,
.ui-status--ongoing {
    color: var(--color-accent);
}

.ui-status-ended,
.ui-status--ended {
    color: var(--color-text-muted);
}

/* 9) Reduced Motion | 모션 최소화 대응 */
/* 유지보수: 버튼/언더라인 등의 transition 비활성화로 접근성 요구 대응 */
@media (prefers-reduced-motion: reduce) {
    .ui-btn,
    [data-ui-hover-fill]::before,
    .ui-underline-line,
    .ui-event-thumb > img {
        transition: none;
    }
}


/* 반응형 */
@media all and (max-width: 1279px) {
    .ui-btn {
        font-size: 1.143em;
    }
}

@media all and (max-width: 1023px) {
    .ui-btn {
        font-size: 1.333em;
    }

    .ui-board-list-head, 
    .notice-list-head {
        display: none;
    }

    .ui-board-list-table, 
    .notice-list-board {
        border-top: 1px solid #fff;
    }

    .ui-board-list-table .ui-board-list-link, 
    .notice-list-link {
        flex-flow: column wrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .ui-board-list-table .ui-board-list-link, 
    .notice-list-link {
        padding: 1.667em 1.5em 1.444em;
    }

    .ui-board-list-title, 
    .notice-list-title {
        width: 100%;
        height: 1.455em;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        white-space: nowrap;
        padding: 0;
    }

    .ui-board-list-date, 
    .notice-list-date {
        width: 100%;
        line-height: 2;
        margin-top: 1.313em;
        text-align: left;
    }

    .ui-board-post {
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    .ui-board-post-header {
        width: 92.286%;
        padding: 2.222em 0 1.111em;
        margin: 0 auto;
    }

    .ui-board-post-title {
        line-height: 1.333;
    }

    .ui-board-post-content {
        padding: 0;
        width: 92.286%;
        margin: 0 auto;
    }

    .ui-board-post-body {
        margin-top: 2.5em;
    }

    .ui-board-post-body img {
        width: 100%;
    }

    .ui-board-post-files {
        padding: 1.167em 0;
    }

    .ui-board-footer {
        padding: 1.712em 0 4.722em 0;
        margin-top: 2.222em;
    }

    .ui-board-list-link {
        width: 100%;
        border-radius: 0;
    }

    .ui-board-pagination {
        gap: 0.611em;
        margin-top: 2.778em;
    }

    .ui-board-pagination-link-page {
        font-size: 1.389em;
    }

    .ui-board-search {
        width: 58.824%;
        margin-top: 2.056em;
    }
}

.hd_pops_con {
    max-width: 80vw;
    height: auto !important;
}

.hd_pops_con_image_only {
    line-height: 0;
    font-size: 0;
}

.hd_pops_con_image_only p,
.hd_pops_con_image_only div,
.hd_pops_con_image_only figure {
    margin: 0;
    padding: 0;
}

.hd_pops_con_image_only br {
    display: none;
}

.hd_pops_con_image_only img {
    display: block;
}