/* 2026-10 디자인 고도화 레이어
   style.css → agency.css → selected.css 위에 마지막으로 얹는 정리용 스타일.
   1) 타이포그래피  2) 메인 히어로  3) 버튼·링크  4) 영상 라이브러리  5) 페이지별 여백 */

/* 1) 타이포그래피 ─ Pretendard 가변 폰트로 실제 굵기 사용(기존: Regular 1종 + 가짜 볼드) */
body{font-family:"Pretendard Variable",Pretendard,DrPediSans,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;letter-spacing:-.02em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,li,strong,b,dd,dt,figcaption{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4{letter-spacing:-.035em}
.hero h1,.agency-hero h1,.subhero h1,.section h2,.agency-section h2,.selected-hero h1,.franchise-entry h2,.film-heading h2,.brand-scene h2,.closing h2{letter-spacing:-.04em}
.eyebrow{font-weight:600;letter-spacing:.16em}
input,select,textarea,button{font-family:inherit}

/* 2) 메인 히어로 ─ PC에서 제목이 사진 위로 넘어가던 문제 해결 */
@media(min-width:761px){
  .selected-hero .hero-copy{width:58%}
  .selected-hero h1{font-size:clamp(44px,3.9vw,62px);line-height:1.24;font-weight:700}
  .selected-hero .hero-desc{font-size:18px;color:#3d5257}
  .selected-hero .eyebrow{display:block;font-size:12px;margin-bottom:28px}
  .selected-hero .hero-media-slide{left:46%;width:54%}
  .selected-hero .hero-art:after{background:linear-gradient(90deg,#fafbfc 40%,#fafbfcd0 47%,#fafbfc00 62%)}
}
@media(min-width:761px) and (max-width:1100px){
  .selected-hero .hero-copy{width:70%}
  .selected-hero h1{font-size:46px}
  .selected-hero .hero-media-slide{left:50%;width:50%}
  .selected-hero .hero-art:after{background:linear-gradient(90deg,#fafbfc 48%,#fafbfcd0 56%,#fafbfc00 72%)}
}

/* 3) 버튼·링크 ─ 상태 변화를 분명하게 */
.button,.text-link,.youtube-channels button,.youtube-pagination button{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}
.button:active{transform:translateY(1px)}
.text-link:hover{color:var(--teal)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* 4) 영상 라이브러리 */
.youtube-library{box-shadow:0 0 0 100vmax #f5f4ef;clip-path:inset(0 -100vmax)}
.youtube-channels{gap:8px;margin-bottom:20px}
.youtube-channels button{background:#fff;border-color:#dde4e2;border-radius:2px;padding:10px 18px;min-height:44px;font-size:15px;font-weight:500;color:#2c4448}
.youtube-channels button:hover{border-color:var(--teal);color:var(--teal)}
.youtube-channels button[aria-pressed=true]{background:var(--deep);border-color:var(--deep);color:#fff}
.youtube-channels span{font-variant-numeric:tabular-nums}
.youtube-tools input,.youtube-tools select{border-color:#dde4e2;border-radius:2px}
.youtube-tools input:focus,.youtube-tools select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px #007b8722}
.youtube-grid{gap:40px 24px}
.youtube-thumbnail{border-radius:4px;background:#0b3338;isolation:isolate}
.youtube-thumbnail img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.youtube-thumbnail .video-play{width:54px;height:54px;background:#fffffff2;color:var(--teal);font-size:15px;padding-left:3px;box-shadow:0 8px 24px #00141826;transition:background-color .2s,color .2s,transform .2s;z-index:2}
.youtube-launch:hover .video-play{background:var(--teal);color:#fff;transform:translate(-50%,-50%) scale(1.06)}
.youtube-kind{top:12px;left:12px;right:auto;bottom:auto;background:#ffffffeb;color:var(--deep);font-size:11px;font-weight:600;letter-spacing:.02em;padding:3px 8px;border-radius:2px;z-index:2}
.is-vertical .youtube-kind{background:var(--teal);color:#fff}
/* 쇼츠: 검은 여백 대신 흐린 배경 + 세로 화면만 잘라서 표시 */
.is-vertical .youtube-thumbnail .youtube-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(2.5);filter:blur(14px) brightness(.55) saturate(1.15);z-index:-1}
.youtube-launch:hover .youtube-thumbnail .youtube-backdrop{transform:scale(2.6)}
.is-vertical .youtube-thumbnail img:not(.youtube-backdrop){display:block;width:75%;height:100%;margin:0 auto;object-fit:cover;clip-path:inset(0 29% round 3px)}
.youtube-meta{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.08em}
.youtube-launch strong{font-size:17px;font-weight:600;line-height:1.5;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#1b2f33}
.youtube-launch:hover strong{color:var(--teal)}
.youtube-watch{margin-top:12px;color:#7a8a87}
.youtube-pagination button{background:#fff;border-color:#dde4e2;min-width:96px}
.youtube-pagination button:not(:disabled):hover{border-color:var(--teal);color:var(--teal)}
.youtube-pagination [data-youtube-page]{font-variant-numeric:tabular-nums;min-width:48px;text-align:center}
.youtube-more{display:none}
/* 메인: 미리보기 6개 + 자료실 연결 (검색·페이지 이동은 자료실에서) */
.selected-home .youtube-tools,.selected-home .youtube-pagination{display:none}
.selected-home .youtube-channels{margin-bottom:32px}
.selected-home .youtube-more{display:flex;justify-content:center;align-items:center;gap:10px;width:max-content;margin:48px auto 0;padding:15px 28px;min-height:52px;border:1px solid var(--deep);color:var(--deep);font-size:15px;font-weight:600;transition:background-color .2s,color .2s}
.selected-home .youtube-more:hover{background:var(--deep);color:#fff}
.selected-home .youtube-note{text-align:center}

@media(max-width:760px){
  .youtube-channels{flex-wrap:nowrap;overflow-x:auto;margin:0 -24px 16px;padding:0 24px;scrollbar-width:none}
  .youtube-channels::-webkit-scrollbar{display:none}
  .youtube-channels button{flex:none;font-size:14px;padding:10px 14px}
  .youtube-tools{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center}
  .youtube-tools label:first-child{grid-column:1/-1}
  .youtube-tools label{font-size:12px}
  .youtube-tools p{margin:0;font-size:13px;text-align:right;align-self:end;padding-bottom:12px}
  /* 메인: 가로로 넘겨보는 카드 (세로 스크롤 약 4,000px 감소) */
  .selected-home .youtube-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 6px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .selected-home .youtube-grid::-webkit-scrollbar{display:none}
  .selected-home .youtube-card{scroll-snap-align:start}
  .selected-home .youtube-launch strong{font-size:16px}
  .selected-home .youtube-more{width:100%;margin-top:32px}
}
@media(max-width:600px){
  /* 자료실: 2열 썸네일 목록 */
  .youtube-grid{grid-template-columns:1fr 1fr;gap:28px 12px}
  .youtube-meta{margin-top:10px;font-size:10px}
  .youtube-launch strong{font-size:14px;line-height:1.5;margin-top:4px}
  .youtube-watch{display:none}
  .youtube-thumbnail .video-play{width:38px;height:38px;font-size:12px}
  .youtube-kind{top:8px;left:8px;font-size:10px;padding:2px 6px}
  .youtube-pagination button{min-width:0}
}

/* 5) 페이지별 여백 정리 */
.page-directory .subhero+.section{padding-top:56px}
@media(max-width:760px){.page-directory .subhero+.section{padding-top:36px}}