@charset "utf-8";
/* 2026 K예술영재 프로젝트 — main.css (메인 페이지 전용) */
/* 시안 1 메인 (WBS 11.4, 2026-10-23 — 시안 docs/private/v2/ref1/mock1-main.png): 흰 머리 아래 표지 → 흐르는 글자 띠 → 소개 → 지그재그 여정 → 모집 띠 → 소식.
   흰 바탕 · 검정 글자 · 회색 설명 · 노랑(머리글 낙서 · 낱말 밑줄 · 점선 끝 점)만 쓴다. 청록 · 금색 · 산호는 쓰지 않는다.
   작은 머리글(.kick) · 고리 화살표 링크(.lnk) · 낱말 밑줄(.mark) · 손그림(assets/img/doodles.svg)은 common.css 「시안1 공통 부품」 */

:root{
  /* 주소는 이 파일(assets/css/) 기준 → url("../img/hero1.jpg"). 사진 출처는 docs/decisions.md 2절 */
  /* 기본 사진 없음 (2026-11-04 WBS 17.8) — 사진은 모두 관리자 페이지에서 올린 것(data/posts.json hero · photos)만 보인다.
     사진을 뺀 자리는 비워 둔다. 예전 기본 사진 파일은 assets/img/real/(preview4와 같음)에 남아 있다 */
  --img-hero-dance:var(--none); --img-hero-music:var(--none); --img-hero-art:var(--none); --img-hero-trad:var(--none);
  --img-p4:var(--none);
  --img-step1:var(--none); --img-step2:var(--none); --img-step3:var(--none);
}

/* 메인 본문 폭 — 1440 화면에서 1290(양쪽 75px), 화면이 좁아지면 양쪽 여백만 줄인다 */
.mn-in{position:relative;width:min(1290px,calc(100% - 150px));margin:0 auto}
.mn-in .lnk:focus-visible,.mn-nw-list a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}

/* ============ 표지 ============ */
/* 흰 머리(--hd, 늘 흰색 · common.css) 아래부터. 높이 = 화면 − 머리(최소 560 · 최대 900). 표지 아래 흐르는 글자 띠는 2026-10-28 차장님 피드백으로 뺌 */
#hero{position:relative;margin-top:var(--hd);height:clamp(560px,calc(100vh - var(--hd)),900px);overflow:hidden;background:#111}
@supports (height:100svh){ #hero{height:clamp(560px,calc(100svh - var(--hd)),900px)} }
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.slide.on{opacity:1}
#hero.wait .slide{opacity:0}   /* 사진 목록을 받기 전 (main.js) — 기본 사진이 올린 사진으로 바뀌며 깜박이지 않게 */
/* 사진 움직임 (#hero 첫 요소가 숨김 제목 h2라 nth-child 대신 nth-of-type) — 홀수 장은 크게 → 원래(축소), 짝수 장은 원래 → 크게(확대). 크기는 1.08, 시간은 8s를 바꾸면 된다.
   #hero.ready는 main.js가 첫 화면을 그린 뒤 붙여서 첫 장도 움직이며 시작한다. */
.slide::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.08);transition:transform 8s linear}
.slide:nth-of-type(even)::before{transform:scale(1)}
#hero.ready .slide.on::before{transform:scale(1)}
#hero.ready .slide.on:nth-of-type(even)::before{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){ .slide::before{transition:none} }
/* 2.5D 입체 효과 (관리자 페이지에서 켠 칸, main.js addDepth) — 누끼(.fg)를 사진 위에 겹쳐 배경은 1 → 1.06, 인물은 1 → 1.14로 키운다.
   커진 인물이 원래 윤곽을 덮으므로 배경을 고칠 필요가 없다. 켠 칸은 번갈아 하지 않고 늘 다가오며, 중심(--org)은 main.js가 인물 영역 가운데로 정한다.
   크기를 바꾸면 admin.css의 미리보기도 맞출 것 (2026-10-15 사용자 결정: 세기 하나로 고정) */
.slide .fg{position:absolute;inset:0;background-size:cover;background-position:center}
.slide.pz::before,.slide.pz:nth-of-type(even)::before,.slide.pz .fg{transform:scale(1);transform-origin:var(--org,center);transition:transform 8s cubic-bezier(.25,.1,.25,1)}
#hero.ready .slide.pz.on::before,#hero.ready .slide.pz.on:nth-of-type(even)::before{transform:scale(1.06)}
#hero.ready .slide.pz.on .fg{transform:scale(1.14)}
@media(prefers-reduced-motion:reduce){ #hero .slide.pz::before,#hero .slide.pz .fg{transform:none!important;transition:none} }
/* 동영상 칸 (2안, main.js prep) — 대기 사진(첫 장면)은 움직이지 않고, 영상이 재생되기 시작하면 그 위로 서서히 보인다. 어두운 덧칠(::after)은 영상 위에 그대로 */
.slide .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.slide .vid.on{opacity:1}
#hero .slide.vd::before,#hero.ready .slide.vd.on::before{transform:none;transition:none}
/* 세로 화면(휴대폰 등)은 사진 가운데만 보이므로, 표지 사진 규칙(주인공은 가운데~오른쪽)에 맞춰 62% 지점을 중심으로 (2026-10-14 사용자 결정) */
@media(max-aspect-ratio:1/1){ .slide::before,.slide .fg{background-position:62% center} .slide .vid{object-position:62% center} }
.s-dance::before{background-image:var(--img-hero-dance),linear-gradient(160deg,#4a4a4a,#1c1c1c)}
.s-music::before{background-image:var(--img-hero-music),linear-gradient(160deg,#4a4a4a,#1c1c1c)}
.s-art::before{background-image:var(--img-hero-art),linear-gradient(160deg,#4a4a4a,#1c1c1c)}
.s-trad::before{background-image:var(--img-hero-trad),linear-gradient(160deg,#4a4a4a,#1c1c1c)}
/* 표지 덧칠 — 왼쪽(제목 · 분야 목록)에서 오른쪽으로 옅어지는 어둠 + 위 · 아래 살짝 (시안 값) */
.slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,0) 45%),
             linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 65%,rgba(0,0,0,.45))}
/* 글 — 왼쪽 위 제목 · 설명 · 단추, 왼쪽 아래 분야 목록, 오른쪽 아래 주최 · 주관 로고 */
.hero-in{position:relative;z-index:5;height:100%;color:#fff}
.hero-in .mn-in{height:100%}
.mn-tt{position:absolute;left:0;top:72px}
.h-title{margin-top:8px;font-size:58px;font-weight:700;line-height:1.15;letter-spacing:-.045em}
.mn-sub{margin-top:14px;font-size:16px;line-height:1.6;opacity:.9;letter-spacing:-.02em}
.mn-more{display:inline-flex;align-items:center;gap:8px;margin-top:30px;padding:7px 16px 7px 18px;border:1.5px solid #fff;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.02em;transition:background .3s,color .3s}
.mn-more:hover,.mn-more:focus-visible{background:#fff;color:var(--ink)}
.mn-more:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* 분야 넘김 목록 (main.js가 단추를 만든다) — 작은 번호 + 이름, 지금 분야만 크게 굵게 */
.h-tabs{position:absolute;left:0;bottom:60px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.h-tabs[hidden]{display:none}
.h-tabs button{display:flex;align-items:baseline;gap:10px;padding:0;background:none;border:0;font:inherit;font-size:15px;font-weight:500;line-height:1.3;
  color:#fff;opacity:.75;cursor:pointer;letter-spacing:-.02em;white-space:nowrap;transition:opacity .3s}
.h-tabs button small{width:16px;font-size:10px;font-weight:600;opacity:.8;letter-spacing:0}
.h-tabs button:hover{opacity:1}
.h-tabs button.on{font-size:30px;font-weight:700;opacity:1;margin-bottom:4px}
.h-tabs button:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* 주최 · 주관 + 흰색 기관 로고 (10.13 파일 · alt 그대로) */
.h-logos{position:absolute;right:0;bottom:60px;display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600}
.h-lg{display:flex;align-items:center;gap:10px;white-space:nowrap}
.h-lg b{font-weight:600}
.h-lg img{display:block;width:auto}
.h-lg .lg-mcst{height:26px}
.h-lg .lg-kniga{height:24px}   /* 주관 로고 KRIGA(이름 글자 포함, 2026-10-23 교체) */

/* ============ 소개 ============ */
#about{padding:150px 0 120px;background:#fff}
.mn-ab{display:grid;grid-template-columns:minmax(0,650fr) minmax(0,560fr);gap:80px;align-items:start}
.mn-lead{font-size:44px;font-weight:700;line-height:1.35;letter-spacing:-.05em}
.mn-ab-tx p{font-size:17px;line-height:1.85;color:var(--gray);letter-spacing:-.02em}
.mn-ab-tx p + p{margin-top:12px}
.mn-ab-tx .lnk{margin-top:32px}

/* ============ 여정 — 지그재그 세 단계 ============ */
/* 큰 사진(1440에서 747×420) + 글. 1 · 3은 사진 왼쪽, 2는 사진 오른쪽(.mn-r). 사진 폭은 비율(747 : 501)로 줄어든다 */
#journey{padding:20px 0 140px;background:#fff}
.mn-step{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,747fr) minmax(0,501fr);column-gap:42px;align-items:start}
.mn-step + .mn-step{margin-top:90px}
.mn-r{grid-template-columns:minmax(0,501fr) minmax(0,747fr)}
.mn-r .mn-ph{order:2}
.mn-r .mn-tx{justify-self:end;width:min(360px,100%);margin-right:6px}
.mn-ph{display:block;aspect-ratio:747/420;overflow:hidden;background:#F4F2EC}
.mn-ph i{display:block;width:100%;height:100%;background-size:cover;background-position:var(--photo-pos,center);transition:transform .8s cubic-bezier(.22,1,.36,1)}
/* --photo · --photo-pos: 관리자 페이지 「사이트 사진」에서 바꾼 사진 · 위치 (photos.js, WBS 15). 없으면 기본 사진 */
.mn-jy > div:nth-of-type(1) .mn-ph i{background-image:var(--photo,var(--img-step1))}
.mn-jy > div:nth-of-type(2) .mn-ph i{background-image:var(--photo,var(--img-step2));background-position:var(--photo-pos,center 30%)}
.mn-jy > div:nth-of-type(3) .mn-ph i{background-image:var(--photo,var(--img-step3));background-position:var(--photo-pos,center 70%)}
.mn-ph:hover i,.mn-step:focus-within .mn-ph i{transform:scale(1.04)}
.mn-tx{padding-top:10px}
.mn-tx h3{margin-top:12px;font-size:32px;font-weight:700;line-height:1.3;letter-spacing:-.045em}
.mn-tx h3 span{display:block;font-weight:500;color:var(--gray-lt)}
.mn-tx p{margin-top:22px;font-size:16px;line-height:1.7;color:#333;letter-spacing:-.02em}
.mn-tx .lnk{margin-top:22px;font-size:20px}
/* 손그림 점선 길 — 시안 좌표(1290 × 1440 여정 칸)의 한 부분을 그 자리에 놓고 칸에 맞춰 늘린다. 선 굵기 · 점선 · 끝 점은 늘어나도 그대로 */
.mn-path{position:absolute;z-index:0;overflow:visible;pointer-events:none}
.mn-path-1{left:66.279%;top:22.222%;width:29.845%;height:13.194%}
.mn-path-2{left:15.116%;top:56.944%;width:30.233%;height:13.889%}
.mn-path path{fill:none;stroke:var(--dash);stroke-width:4px;stroke-dasharray:10 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mn-path .mn-dot{stroke:var(--yel);stroke-width:18px;stroke-dasharray:none}

/* ============ 모집 띠 — 사진 + 흰 반투명 판 ============ */
#recruit{height:430px;background:#222 var(--photo,var(--img-p4)) var(--photo-pos,center 35%)/cover no-repeat}
#recruit .mn-in{height:100%}
.mn-rc-pn{position:absolute;right:0;top:50px;bottom:50px;display:flex;flex-direction:column;align-items:flex-start;width:min(645px,100%);padding:48px 52px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .mn-rc-pn{background:rgba(255,255,255,.96)} }   /* 뒤 흐림을 못 쓰면 더 하얗게 */
.mn-rc-pn h2{margin-top:14px;font-size:30px;font-weight:700;line-height:1.35;letter-spacing:-.045em}
.mn-rc-pn p{margin-top:16px;font-size:15px;line-height:1.7;color:#333;letter-spacing:-.02em}
.mn-rc-pn .lnk{margin-top:auto;font-size:17px}

/* ============ 소식 ============ */
#news{padding:130px 0 150px;background:#fff}
.mn-nw{display:grid;grid-template-columns:330px minmax(0,1fr);gap:60px;align-items:start}
.mn-nw-hd{display:flex;flex-direction:column;align-items:flex-start}
.mn-nw-hd h2{margin-top:12px;font-size:32px;font-weight:700;letter-spacing:-.045em}
.mn-nw-hd .lnk{margin-top:20px;font-size:17px}
/* 소식 줄 — board.js의 공지 · 언론홍보 줄(.cat 언론사 · .t 제목 · .ext 새 창 · .d 날짜) 앞에 main.js가 분류(.kind)를 붙인다 */
.mn-nw-list{border-top:2px solid var(--ink)}
.mn-nw-list li a{display:flex;align-items:center;gap:20px;padding:24px 4px;border-bottom:1px solid var(--line-lt);font-size:17px;font-weight:500;letter-spacing:-.02em}
.mn-nw-list li a.empty{cursor:pointer}   /* 내용 없는 공지: 반응은 같고 이동만 없음 */
.mn-nw-list li a:hover .t{text-decoration:underline;text-underline-offset:4px}
.mn-nw-list .kind{flex:0 0 90px;font-size:13px;font-weight:700;color:var(--ink)}
.mn-nw-list .cat{flex:none;margin-right:-10px;font-size:14px;font-weight:400;color:var(--gray-lt)}   /* 언론홍보: 언론사를 제목 앞에 (decisions.md 4절) */
.mn-nw-list .t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mn-nw-list .ext{flex:none;margin-left:-14px;font-size:13px;color:var(--gray-lt)}
.mn-nw-list .d{flex:0 0 70px;margin-left:auto;text-align:right;font-size:14px;font-weight:400;color:var(--gray-lt)}
.mn-nw-list .bd-msg{border-top:0;padding:48px 0;font-size:16px}

/* ============ 크기별 ============ */
@media(max-width:1100px){
  .mn-in{width:calc(100% - 80px)}
  .h-title{font-size:48px}
  #about{padding:110px 0 90px}
  .mn-ab{grid-template-columns:minmax(0,1fr);gap:36px}
  .mn-lead{font-size:38px}
  /* 769~1100: 지그재그 유지, 사진 55% · 글 45%, 점선 숨김 */
  .mn-step{grid-template-columns:minmax(0,55fr) minmax(0,45fr);column-gap:32px}
  .mn-r{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
  .mn-r .mn-tx{width:100%;margin-right:0;justify-self:stretch}
  .mn-step + .mn-step{margin-top:70px}
  .mn-tx{padding-top:0}
  .mn-tx h3{font-size:26px}
  .mn-tx p{margin-top:16px;font-size:15px}
  .mn-tx p br{display:none}
  .mn-tx .lnk{margin-top:16px;font-size:18px}
  .mn-path{display:none}
  #journey{padding-bottom:110px}
  #news{padding:100px 0 120px}
  .mn-nw{grid-template-columns:240px minmax(0,1fr);gap:40px}
}
@media(max-width:768px){
  .mn-in{width:calc(100% - 40px)}
  /* 표지: 제목 36px, 로고 한 줄 위 · 분야 목록 아래 가로 한 줄 */
  .mn-tt{top:48px;right:0}
  .h-title{font-size:36px}
  .mn-sub{font-size:15px}
  .mn-sub br{display:none}
  .mn-more{margin-top:24px}
  .h-tabs{right:0;bottom:30px;flex-direction:row;align-items:baseline;gap:18px;overflow-x:auto;scrollbar-width:none}
  .h-tabs::-webkit-scrollbar{display:none}
  .h-tabs button{gap:5px}
  .h-tabs button small{width:auto}
  .h-tabs button.on{font-size:15px;margin-bottom:0}
  .h-logos{left:0;right:auto;bottom:74px;gap:10px 18px;font-size:12px;flex-wrap:wrap;max-width:100%}   /* 주관 로고가 길어져(KRIGA) 좁으면 두 줄 */
  .h-lg{gap:8px}
  .h-lg .lg-mcst{height:22px}
  .h-lg .lg-kniga{height:19px}
  /* 소개 */
  #about{padding:80px 0 64px}
  .mn-lead{font-size:30px}
  .mn-ab-tx p{font-size:16px}
  /* 여정: 사진 위 · 글 아래로 쌓기 */
  #journey{padding:0 0 80px}
  .mn-step,.mn-r{grid-template-columns:minmax(0,1fr)}
  .mn-r .mn-ph{order:0}
  .mn-ph{aspect-ratio:auto;height:240px}
  .mn-tx{padding-top:22px}
  .mn-step + .mn-step{margin-top:56px}
  /* 모집 띠: 사진(220) 아래로 흰 판이 이어진다 */
  #recruit{height:auto;background:#fff}
  #recruit::before{content:"";display:block;height:220px;background:#222 var(--photo,var(--img-p4)) var(--photo-pos,center 35%)/cover no-repeat}
  #recruit.photo-focus{box-shadow:none}   /* 사진 자리 표시는 사진 칸(::before)에만 — common.css */
  .mn-rc-pn{position:static;width:auto;padding:36px 0 8px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mn-rc-pn h2{font-size:26px}
  .mn-rc-pn .lnk{margin-top:24px}
  /* 소식: 분류 · 날짜를 제목 위 한 줄로 */
  #news{padding:72px 0 96px}
  .mn-nw{grid-template-columns:minmax(0,1fr);gap:28px}
  .mn-nw-list li a{flex-wrap:wrap;align-items:baseline;gap:6px 10px;padding:18px 2px}
  .mn-nw-list .kind{flex:1 0 calc(100% - 60px);order:1}   /* 분류 + 날짜(MM.DD)가 첫 줄을 채워 언론사 · 제목은 다음 줄로 */
  .mn-nw-list .d{flex:none;order:2;text-align:right}
  .mn-nw-list .cat{order:3;margin-right:0}
  .mn-nw-list .t{order:4;flex:1 1 0;min-width:60%;white-space:normal;font-size:16px}
  .mn-nw-list .ext{order:5;margin-left:0}
}