/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/* 헤더 로고 - style.css의 강제 height(25px/32px)를 해제하여 업로드한 실제 이미지 비율대로 표시.
   과도하게 큰 이미지가 업로드되어 헤더가 깨지는 것만 max-height로 방지.
   PC(992px 이상)의 흰색 메뉴 바는 .gnb-bg:after 가 고정 80px 로 그리는 별도 배경.
   * 주의: header-inner 에 align-items:center 를 쓰면 안 됨.
     PC에서 gnb 메뉴에 마우스오버 시 .gnb-dep-2(위치:relative)의 높이가
     JS(app.js)로 동적으로 커지는데, align-items:center 는 그 순간마다
     행 전체 높이를 다시 계산해 로고/로그인/검색 아이콘까지 아래로 밀려나게 만듦.
     대신 56px 로고가 80px 바 안에 고정적으로 오도록 margin을 정적으로 계산해서 고정함
     (메뉴가 열리고 닫혀도 절대 움직이지 않음) */
.header-logo a img {height:auto;max-height:60px;width:auto;max-width:100%}
@media (min-width:992px){
	.header-logo {margin:12px 0}
	.header-logo a img {max-height:56px}
}

/* 하단(footer) 로고 - 동일하게 style.css의 강제 height(25px/30px) 해제.
   footer 는 header 와 달리 고정 높이 배경이 없어 overflow 위험은 없지만,
   PC(992px 이상)에서 footer-logo 와 footer-menu 가 같은 flex 행에 있으므로
   로고가 커져도 서로 어색하게 늘어나지 않도록 세로 중앙 정렬을 함께 적용함 */
.footer-top .footer-logo a img {height:auto;max-height:48px;width:auto;max-width:100%}
@media (min-width:992px){
	.footer-top {align-items:center}
	.footer-top .footer-logo a img {max-height:52px}
}

/* 헤더 로고 우측 유튜브 아이콘.
   header-inner 는 header-logo-group 과 gnb-wrap 두 그룹을 space-between 으로
   양끝 정렬하므로, 로고와 유튜브 아이콘을 header-logo-group 으로 묶어 항상
   붙어있게 함(header-inner 에 직접 놓으면 두 그룹 사이 중간으로 벌어져 버림).
   header-inner 자체의 정렬(align-items)은 위 경고대로 절대 건드리지 않지만,
   기본값인 align-items:stretch 때문에 header-inner 의 각 flex 아이템(=
   header-logo-group, gnb-wrap)은 그 행에서 가장 키가 큰 아이템 높이만큼
   자동으로 늘어남. gnb 메뉴 hover 시 .gnb-dep-2 가 높이를 키우면 gnb-wrap 이
   커지고, header-logo-group 도 같이 늘어나 버리는데, 이때 header-logo-group
   자체에 align-items:center 만 있으면 "늘어난 높이" 기준으로 내부 로고/아이콘을
   다시 세로 중앙정렬하면서 아래로 밀려 내려가 보임. align-self:flex-start 로
   header-logo-group 을 행의 늘어난 높이와 무관하게 항상 위쪽에 고정시켜서
   내부 align-items:center 가 "늘어나지 않은 원래 높이" 기준으로만 동작하게 함
   (메뉴가 열리고 닫혀도 로고/아이콘이 절대 움직이지 않음) */
.header-logo-group {display:flex;align-items:center;align-self:flex-start}
.header-youtube-link {display:flex;align-items:center;justify-content:center;margin-left:14px;color:#ff0000;font-size:22px;text-decoration:none}
.header-youtube-link:hover {color:#cc0000}
/* 인스타그램 아이콘 - 실제 인스타그램 앱/favicon 아이콘처럼 둥근 사각형
   그라데이션 배경(노랑→주황→분홍→보라) 위에 흰색 카메라 아이콘을 올림.
   박스 크기(width/height)는 유튜브 아이콘의 렌더 크기(font-size 22px/26px)와
   동일하게 맞춰서 두 아이콘이 나란히 같은 크기로 보이도록 함 */
.header-instagram-link {display:flex;align-items:center;justify-content:center;margin-left:14px;width:22px;height:22px;border-radius:6px;background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);color:#fff;font-size:16px;text-decoration:none}
.header-instagram-link:hover {opacity:.85}
@media (min-width:992px){
	.header-youtube-link {margin-left:20px;font-size:26px}
	.header-instagram-link {margin-left:20px;width:26px;height:26px;border-radius:7px;font-size:18px}
}