/* ============================================================
   최재성® — 서브페이지 컴포넌트 (work / projects / about / contact)
   style.css 의 토큰·유틸을 그대로 사용. 이 파일은 서브페이지에서만 로드.
   ============================================================ */

/* 페이지 진입 시 상단 여백(고정 topbar 아래) */
.page { padding-top: clamp(6.5rem, 12vh, 9rem); }

/* ---------- 공통 마스트헤드(페이지 상단 타이틀) ---------- */
.masthead { padding: clamp(2rem, 6vh, 5rem) var(--pad) clamp(2.5rem, 7vh, 5rem); border-bottom: 1px solid var(--line); }
.masthead__eyebrow { margin-bottom: 1.5rem; }
.masthead__title { font-family: var(--display); font-weight: 800; font-size: clamp(3rem, 13vw, 12rem); line-height: 0.86; letter-spacing: -0.03em; text-transform: uppercase; }
.masthead__title em { color: var(--accent); }
.masthead__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(1.5rem, 4vh, 3rem); }
.masthead__meta p { max-width: 46ch; color: var(--muted); font-size: clamp(1rem, 2vw, 1.25rem); }
.masthead__meta p strong { color: var(--fg); font-weight: 500; }

/* ---------- 이미지 플레이스홀더(파일명 표기) ----------
   실제 이미지 준비 시 .ph 를 <img src="..."> 로 교체하면 됩니다. */
.ph { position: relative; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #17171c 0%, #101014 60%, #1c1c22 100%);
  border: 1px dashed rgba(240,239,233,0.16); border-radius: 6px; }
.ph::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 20% 10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%); }
.ph__name { position: relative; z-index: 1; color: var(--muted); font-size: 0.72rem; padding: 0.4rem 0.7rem; text-align: center; }
.ph__dim { position: absolute; left: 0.8rem; bottom: 0.7rem; z-index: 1; color: rgba(240,239,233,0.35); font-size: 0.62rem; }
.ph--wide { aspect-ratio: 16/9; }
.ph--full { aspect-ratio: 21/9; }
.ph--tall { aspect-ratio: 3/4; }
.ph--sq { aspect-ratio: 1/1; }
.ph--phone { aspect-ratio: 9/17; }

/* ============================================================ WORK — 아카이브 리스트 */
.archive { padding: 0 0 clamp(4rem,10vh,8rem); }
.arow { position: relative; display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 1.5rem 2rem;
  align-items: center; padding: clamp(1.4rem,3.5vh,2.4rem) var(--pad); border-bottom: 1px solid var(--line);
  transition: background .45s var(--ease), color .45s var(--ease); }
.arow:first-child { border-top: 1px solid var(--line); }
.arow:hover { background: var(--fg); color: #0d0d0f; }
.arow:hover .mono { color: #0d0d0f; }
.arow:hover .arow__thumb { opacity: 1; transform: translateY(-50%) scale(1); }
.arow__no { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; }
.arow:hover .arow__no { color: #0d0d0f; }
.arow__main { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.arow__name { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem, 5.5vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.arow__tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.arow__tags span { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); }
.arow:hover .arow__tags span { border-color: rgba(13,13,15,0.25); color: rgba(13,13,15,0.7); }
.arow__side { display: flex; align-items: center; gap: 2.5rem; }
.arow__year { font-family: var(--mono); font-size: 0.8rem; }
.arow__cat { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; color: var(--muted); }
.arow:hover .arow__cat { color: rgba(13,13,15,0.7); }
.arow__go { font-family: var(--display); font-weight: 700; font-size: 1.4rem; opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .4s; }
.arow:hover .arow__go { opacity: 1; transform: translateX(0); }
/* 호버 시 뜨는 썸네일(데스크톱) */
.arow__thumb { position: absolute; right: clamp(6rem, 22vw, 16rem); top: 50%; width: 220px; z-index: 3;
  opacity: 0; transform: translateY(-50%) scale(0.9); transition: opacity .4s var(--ease), transform .4s var(--ease); pointer-events: none; }
.arow__thumb .ph { aspect-ratio: 4/3; }
@media (max-width: 900px) {
  .arow { grid-template-columns: 3rem 1fr; }
  .arow__side { grid-column: 2; gap: 1.25rem; }
  .arow__thumb { display: none; }
}
@media (max-width: 520px) { .arow__cat { display: none; } }

/* ============================================================ PROJECTS — 케이스 스터디 */
.case { border-bottom: 1px solid var(--line); padding: clamp(4rem,10vh,8rem) var(--pad); scroll-margin-top: 5rem; }
.case:nth-child(even) { background: var(--surface); }
.case__head { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: clamp(2rem,5vh,3.5rem); }
.case__idx { color: var(--accent); }
.case__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 10vw, 8rem); line-height: 0.9; letter-spacing: -0.02em; text-transform: uppercase; }
.case__sub { color: var(--muted); font-size: clamp(1rem,2vw,1.25rem); max-width: 52ch; }
.case__facts { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.case__fact { display: flex; flex-direction: column; gap: 0.35rem; }
.case__fact dt { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; color: var(--muted); }
.case__fact dd { font-size: 0.98rem; }
.case__cover { margin: clamp(2rem,5vh,3.5rem) 0; }
.case__cover .ph { aspect-ratio: 16/9; }
/* 문제/해결 2단 */
.case__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,4vw,3rem); margin: clamp(2rem,5vh,3.5rem) 0; }
.case__col h4 { font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem; }
.case__col p { color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
@media (max-width: 720px) { .case__cols { grid-template-columns: 1fr; gap: 1.5rem; } }
/* 갤러리 */
.case__gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.75rem,1.5vw,1.25rem); }
.case__gallery .g { grid-column: span 6; }
.case__gallery .g--full { grid-column: span 12; }
.case__gallery .g--4 { grid-column: span 4; }
.case__gallery .g--8 { grid-column: span 8; }
@media (max-width: 720px) { .case__gallery .g, .case__gallery .g--4, .case__gallery .g--8 { grid-column: span 12; } }
.case__foot { margin-top: clamp(2rem,5vh,3rem); display: flex; gap: 1rem; flex-wrap: wrap; }

/* prev / next 네비 */
.pager { display: flex; justify-content: space-between; gap: 1rem; padding: clamp(2.5rem,6vh,4rem) var(--pad); }
.pager a { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,3vw,2rem); display: flex; flex-direction: column; gap: 0.3rem; }
.pager a .mono { font-size: 0.65rem; }
.pager a:last-child { text-align: right; }
.pager a:hover { color: var(--accent); }

/* ============================================================ ABOUT */
/* 스택형: 대형 타이틀 상단 + 와이드 인물 밴드(풀블리드) + 하단 리드·메타 */
.about-hero { padding: clamp(2rem,5vh,4rem) var(--pad) clamp(3rem,7vh,5rem); border-bottom: 1px solid var(--line); }
.about-hero__eyebrow { margin-bottom: 1.5rem; }
.about-hero__title { font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 10.5vw, 9rem); line-height: 1.04; letter-spacing: -0.03em; word-break: keep-all; }
.about-hero__title em { color: var(--accent); }
.about-hero__band { position: relative; margin: clamp(2rem,5vh,3.5rem) calc(var(--pad) * -1) 0; height: clamp(300px, 48vh, 540px); }
.about-hero__band .ph { width: 100%; height: 100%; border-radius: 0; border-left: 0; border-right: 0; }
.about-hero__foot { display: flex; flex-direction: column; gap: clamp(1.75rem,4.5vh,2.75rem); margin-top: clamp(2rem,5vh,3.5rem); }
.about-hero__foot .lead { color: var(--muted); font-size: clamp(1.05rem,2.2vw,1.4rem); max-width: 46ch; }
.about-hero__foot .lead strong { color: var(--fg); font-weight: 500; }
.about-hero__foot .about-meta { margin-top: 0; padding-top: clamp(1.25rem,3vh,1.75rem); border-top: 1px solid var(--line); }
.about-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; }
.about-meta div { display: flex; flex-direction: column; gap: 0.3rem; }
.about-meta dt { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; color: var(--muted); }
.about-meta dd { font-size: 0.95rem; }
@media (max-width: 720px) { .about-hero__band { height: clamp(240px, 40vh, 380px); } }

/* 스킬 바 */
.skills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 4rem; }
.skill { border-top: 1px solid var(--line); padding-top: 1rem; }
.skill__row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; }
.skill__name { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.skill__lv { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.skill__bar { height: 3px; background: var(--line); position: relative; overflow: hidden; }
.skill__bar i { position: absolute; inset: 0 auto 0 0; width: var(--v,70%); background: var(--accent); transform-origin: left; }
@media (max-width: 640px) { .skills { grid-template-columns: 1fr; } }

/* 성향 / 강점 카드 */
.persona { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.persona__card { border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.5rem,3vw,2.25rem); }
.persona__card .k { font-family: var(--mono); font-size: 0.65rem; text-transform: uppercase; color: var(--accent); }
.persona__card h4 { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem,2.6vw,1.9rem); margin: 0.8rem 0 0.6rem; }
.persona__card p { color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 800px) { .persona { grid-template-columns: 1fr; } }

/* 공통: 섹션 라벨 헤더(서브페이지 내부 구획) */
.block { padding: clamp(3.5rem,8vh,7rem) var(--pad); border-bottom: 1px solid var(--line); }
.block__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: clamp(2rem,5vh,3.5rem); flex-wrap: wrap; }
.block__title { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 7vw, 5rem); text-transform: uppercase; line-height: 1; }

/* ============================================================ CONTACT 페이지 */
.contactp { padding: clamp(2rem,6vh,5rem) var(--pad) clamp(4rem,9vh,7rem); }
.contactp__big { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 9vw, 8rem); line-height: 0.95; letter-spacing: -0.02em; }
.contactp__big em { color: var(--accent); }
.contactp__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem,5vw,4rem); margin-top: clamp(2.5rem,6vh,4.5rem); }
@media (max-width: 820px) { .contactp__grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea { background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--fg);
  font-family: var(--sans); font-size: 1.05rem; padding: 0.6rem 0; transition: border-color .3s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 110px; }
.contact-info { display: flex; flex-direction: column; gap: 1.75rem; }
.contact-info--row { flex-direction: row; flex-wrap: wrap; gap: clamp(2rem,6vw,5rem); margin-top: clamp(2.5rem,6vh,4.5rem); }
@media (max-width: 640px) { .contact-info--row { flex-direction: column; gap: 1.75rem; } }
.contact-info__item .mono { display: block; margin-bottom: 0.4rem; }
.contact-info__item a, .contact-info__item span { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,2.4vw,1.5rem); }
.contact-info__item a:hover { color: var(--accent); }
.contact-info__socials { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; }

/* ============================================================ 서브페이지 컴팩트 푸터 */
.pagefoot { border-top: 1px solid var(--line); padding: clamp(3rem,7vh,5rem) var(--pad) 2rem; }
.pagefoot__cta { font-family: var(--display); font-weight: 800; font-size: clamp(2rem,7vw,5.5rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.pagefoot__cta a:hover { color: var(--accent); }
.pagefoot__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem,5vh,3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pagefoot__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pagefoot__nav a:hover { color: var(--accent); }

/* 진입 리빌(pages.js) */
.reveal { opacity: 0; transform: translateY(28px); }
.gsap-ready .reveal { will-change: opacity, transform; }
.reveal.in-view { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }