/*
 * site-polish.css (v2)
 * WICT 공모전 사이트 — UI 결함 수정 + 시각 고도화 오버레이
 *
 * v1 피드백 반영:
 *  - 기존 애니메이션(rotateme, alltuchtopdown, box-shadow 등)을 절대 약화/제거하지 않는다.
 *  - "무난하게 정돈"이 아니라, 실제로 어긋난 지점만 정확히 고친다.
 *  - 게시판/폼 마크업, id, class 구조는 그대로 둔다. CSS만 더 늦게 로드해서 값을 보정한다.
 *
 * 목차
 *  1. 버튼 — 텍스트 완전 중앙 정렬 + 높이/line-height/padding 통일
 *  2. 제목 — 불필요한 2줄 방지 (clamp + keep-all)
 *  3. 게시판 목록 — 제목·상태·작성일·조회수 한 줄 배치 복구, PC 폰트 크기 절제
 *  4. 헤더 — 메뉴/CTA 수직 정렬 보정
 *  5. 시각적 고도화 — Hero 배경 레이어드 모션(기존 유지 + 추가), CTA hover 강화
 *  6. 다운로드 요소 — 아이콘/화살표 hover 움직임
 *  7. Q&A — 질문·답변 연결 시각화
 *  8. 일정(Timeline) — 진행선 순차 활성화 지원 스타일
 *  9. 카드 tilt 효과 지원 스타일
 * 10. 모션 유틸리티 (reveal, 방향 차등)
 */

:root{
    --brand-primary: var(--contest-primary, #5c46e8);
    --brand-primary-dark: #4732c7;
    --brand-dark: var(--contest-dark, #15143a);
    --brand-line: var(--contest-line, #e8e9f3);
    --brand-soft: var(--contest-soft, #f5f6ff);
}

/* ========== 1. 버튼 중앙 정렬 + 통일 ========== */
/* inline-flex로 바꾸면 padding 값이 무엇이든, 내부에 장식용 span/i가 있든
   가로·세로 중앙 정렬이 항상 보장된다. 기존 hover 확장 애니메이션(.btn span)은
   position:absolute라 flex 전환의 영향을 받지 않으므로 그대로 유지된다. */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 0 30px;
    line-height: 1.2;
    text-align: center;
}
.btn i{ margin-right: 6px; line-height: 1; }
.header-action .header-btn .btn{
    min-height: 46px;
    padding: 0 24px;
    font-size: 14px;
}
.banner-btn .btn{
    min-height: 58px;
    padding: 0 32px;
}
.contest-apply-frame-head > a,
.contest-primary-button,
.contest-action-button,
.contest-small-button,
.contest-download-btn,
.contest-direct-form-body .lp-submit-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.contest-action-button{ min-height: 56px; }
.contest-small-button{ min-height: 42px; padding: 0 17px; }

/* 헤더 CTA와 내비게이션의 수직 중심을 명시적으로 맞춘다 */
.menu-nav{ align-items: center; }
.navbar-wrap{ align-items: center; }
.header-action{ display: flex; align-items: center; }
.header-action .header-btn{ display: flex; align-items: center; }

/* ========== 2. 제목 2줄 방지 ========== */
.contest-hero .banner-content .title{
    font-size: clamp(30px, 3.6vw, 54px);
    word-break: keep-all;
    letter-spacing: -.01em;
}
.contest-page-hero h1,
.contest-overview-hero h1,
.wict-board-visual h1{
    font-size: clamp(26px, 3vw, 40px);
    word-break: keep-all;
    letter-spacing: -.01em;
}
#bo_v_title{
    word-break: keep-all !important;
}
.contest-section-copy h2,
.contest-overview-section h2{
    word-break: keep-all;
}

/* ========== 3. 게시판 목록 한 줄 배치 복구 ========== */
/* wict-row-main 내부는 원래 subject(위)/meta(아래) 2줄 구조였다.
   markup은 그대로 두고, flex row로 바꿔 제목+메타를 같은 줄에 둔다. */
.wict-row-main{
    display: flex;
    align-items: baseline;
    gap: 18px;
    min-width: 0;
}
.wict-subject{
    flex: 1 1 auto;
    min-width: 0;
}
.wict-meta{
    flex: 0 0 auto;
    margin-top: 0 !important;
    white-space: nowrap;
}
@media (max-width: 767px){
    /* 모바일은 기존처럼 2줄이 오히려 읽기 편하므로 되돌린다 */
    .wict-row-main{ flex-direction: column; align-items: flex-start; gap: 4px; }
    .wict-meta{ margin-top: 5px !important; }
}

/* PC 화면에서 목록 텍스트가 과도하게 크지 않도록 상한을 둔다 (모바일은 별도 손대지 않음) */
@media (min-width: 768px){
    .contest-notice-list li a{ font-size: 15px; }
    .contest-notice-list time{ font-size: 13px; }
    .wict-subject{ font-size: 16px; }
}

/* ========== 4. 헤더 정렬 세부 보정 ========== */
.navbar-wrap ul li a{
    display: flex;
    align-items: center;
}

/* 콘텐츠 페이지(_page_bootstrap.php 공통 hero/body)의 컨테이너 폭을
   게시판(wict-board-shell)·콘텐츠 스킨(#ctt)·overview.php(contest-overview-inner)와
   동일한 1170px 기준선으로 맞춘다. 부트스트랩 기본 .container 자체는 건드리지 않고
   이 페이지 래퍼 안에서만 폭을 재정의한다(좌우 기준선 통일). */
.contest-page-hero > .container,
.contest-page-body > .container{
    max-width: 1170px;
}

/* ========== 5. 시각적 고도화 — Hero ========== */
/* 기존 rotateme / alltuchtopdown 애니메이션(main.js가 트리거)은 절대 건드리지 않는다.
   여기서는 그 위에 "느린 레이어드 움직임"을 하나 더 추가만 한다. */
.contest-hero-art{ position: relative; }
.contest-hero-art .shape-1{ animation: wictFloatSlow 7s ease-in-out infinite; }
.contest-hero-art .shape-4{ animation: wictFloatSlow 9s ease-in-out infinite reverse; }
@keyframes wictFloatSlow{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-14px); }
}
.contest-badge{
    animation: wictBadgeIn 600ms var(--ease-standard, ease) both;
}
@keyframes wictBadgeIn{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: translateY(0); }
}

/* CTA hover 강화 — 그림자와 살짝의 상승만, 과하지 않게 */
.btn{
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.btn:hover{
    transform: translateY(-2px);
}
.contest-apply-tab,
.contest-feature,
.contest-quick-grid a{
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

/* 마우스 위치 기반 tilt 효과를 위한 준비(실제 rotate 값은 site-motion.js가 인라인으로 설정) */
.tilt-card{
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 120ms ease-out, box-shadow 220ms ease;
}

/* ========== 6. 다운로드 요소 hover 움직임 ========== */
.contest-download-list a,
.contest-download-item .contest-small-button,
.contest-download-btn{
    position: relative;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.contest-download-list a:hover,
.contest-download-item:hover .contest-small-button,
.contest-download-btn:hover{
    transform: translateX(3px);
    border-color: var(--brand-primary);
}
.contest-download-list a::after{
    content: '\f019';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
    color: var(--brand-primary);
    transition: transform 200ms ease;
}
.contest-download-list a:hover::after{
    transform: translateY(3px);
}
.contest-small-button i,
.contest-download-btn i{
    transition: transform 200ms ease;
}
.contest-small-button:hover i,
.contest-download-btn:hover i{
    transform: translateX(3px);
}

/* ========== 7. Q&A 질문-답변 시각적 연결 ========== */
/* site-motion.js가 뷰 페이지에서 질문 콘텐츠와 답변 패널이 모두 존재할 때만
   두 요소를 감싸는 .wict-qa-thread 래퍼를 "삽입"하는 게 아니라
   두 요소 사이에 커넥터 전용 엘리먼트 하나만 추가한다(id/기능 요소 아님, 순수 장식). */
.wict-qa-connector{
    position: relative;
    width: 2px;
    margin: 0 auto;
    height: 28px;
    background: linear-gradient(var(--brand-line), var(--brand-primary));
}
.wict-answer-item{
    position: relative;
    border-left: 3px solid var(--brand-primary);
}
.wict-answer-badge{
    box-shadow: 0 6px 16px rgba(92,70,232,.28);
}

/* ========== 8. 일정 Timeline 순차 활성화 ========== */
.contest-process-grid{
    position: relative;
}
.contest-step{
    transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}
.contest-step.is-active{
    border-color: var(--brand-primary);
    box-shadow: 0 14px 34px rgba(92,70,232,.16);
}
.contest-step.is-active span{
    background: var(--brand-primary-dark);
}
.contest-step:not(:last-child):after{
    transition: color 400ms ease;
}
.contest-step.is-active:not(:last-child):after{
    color: var(--brand-primary);
}

/* contest-schedule-item(overview.php 인라인 스타일 페이지)에도 동일한 활성 표시를 제공 */
.contest-schedule-item{
    transition: border-color 300ms ease, box-shadow 300ms ease;
}
.contest-schedule-item.is-active{
    border-color: var(--brand-primary);
    box-shadow: 0 14px 30px rgba(92,70,232,.12);
}

/* ========== 9. tilt 카드 지원 (features) ========== */
.contest-feature{ transform-style: preserve-3d; }

/* ========== 10. 모션 유틸리티 — 방향 차등 ========== */
.reveal{ opacity: 0; transition: opacity var(--dur-section, 520ms) var(--ease-standard, ease), transform var(--dur-section, 520ms) var(--ease-standard, ease); }
.reveal-up{ transform: translateY(18px); }
.reveal-left{ transform: translateX(-22px); }
.reveal-right{ transform: translateX(22px); }
.reveal-scale{ transform: scale(.94); }
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; transition: none; }
    .contest-hero-art .shape-1,
    .contest-hero-art .shape-4,
    .contest-badge{ animation: none; }
    .tilt-card{ transition: none; }
}