/* ============================================================
   지붕공사코리아 · 사이트 공통 셸 (헤더 / 푸터 / 리셋)
   워드프레스 Sydney 테마 + 부트스트랩 의존을 걷어내고 새로 작성.
   지역 페이지·블로그도 이 파일 하나를 공유한다.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;            /* .rk-section 의 100vw 풀블리드 보정 */
  background: var(--rk-white, #ffffff);
  color: var(--rk-black, #17212b);
  font-family: var(--rk-font, Pretendard, "Noto Sans KR", sans-serif);
  line-height: 1.68;         /* 라이브(Sydney 테마) 값 */
  word-break: keep-all;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }

.rk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.rk-skip {
  position: absolute; top: -60px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--rk-orange, #D8F03A); color: #fff;
  font-weight: 700; text-decoration: none;
}
.rk-skip:focus { top: 12px; }

/* ------------------------------------------------------------ 헤더 */

.rk-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--rk-charcoal, #28303c);
  color: var(--rk-ivory, #f6f7f4);
}

.rk-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: min(calc(100% - 40px), 1240px);
  margin: 0 auto;
  min-height: 40px;
}

/* 브랜드는 이미지가 아니라 글자다. 예전에는 이름과 전화번호를 함께 그린
   818x50 PNG 였는데, 폭이 고정이라 좁은 화면에서 헤더를 밀어내 햄버거가
   화면 밖으로 나갔다. 글자로 두면 그 문제가 아예 없고 전화번호도 따로 뗀다. */
.rk-header__brand {
  display: flex; align-items: center; flex: 0 0 auto;
  text-decoration: none; color: var(--rk-white, #ffffff);
}
/* 로고는 심볼+글씨 조합(600x100). 예전 818x50 PNG 와 달리 전화번호가 박혀 있지 않아
   폭을 줄여도 읽힌다. 그래도 상한을 둬서 좁은 화면에서 헤더를 밀지 않게 한다. */
.rk-header__symbol {
  display: block; width: 28px; height: 28px; margin-right: 8px;
}
.rk-header__mark {
  display: block; width: auto; height: 26px;
  max-width: min(100%, 190px); object-fit: contain;
}
.rk-header__brand:hover { opacity: 0.82; }

.rk-header__nav { margin-left: auto; }
/* 자식 선택자여야 한다. .rk-header__nav ul 로 두면 하위 메뉴 ul 까지 flex 가 걸려
   .rk-nav__sub 의 display:none 을 특정도로 이겨버린다. 드롭다운이 늘 펼쳐져 있었다. */
.rk-header__nav > ul {
  display: flex; gap: clamp(14px, 1.9vw, 30px);
  margin: 0; padding: 0; list-style: none;
}
.rk-header__nav a {
  display: inline-block; padding: 14px 0;
  color: var(--rk-ivory, #f6f7f4);
  font-size: 13px; font-weight: 700; letter-spacing: -0.03em; text-decoration: none;
}
.rk-header__nav a:hover { color: var(--rk-orange, #D8F03A); }

/* 하위 메뉴. hover 만 걸면 키보드로 못 연다. focus-within 을 같이 건다. */
.rk-nav__has-sub { position: relative; }
.rk-nav__caret {
  display: inline-block; width: 0; height: 0; margin-left: 5px;
  border: 3px solid transparent; border-top-color: currentColor;
  transform: translateY(2px);
}
.rk-nav__sub {
  position: absolute; top: 100%; left: -14px; z-index: 10;
  display: none; min-width: 148px;
  margin: 0; padding: 6px 0; list-style: none;
  background: var(--rk-charcoal, #28303c);
  border-top: 2px solid var(--rk-orange, #D8F03A);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}
.rk-nav__has-sub:hover .rk-nav__sub,
.rk-nav__has-sub:focus-within .rk-nav__sub { display: block; }
.rk-nav__sub a { display: block; padding: 9px 16px; font-size: 13px; font-weight: 600; }

.rk-header__cta {
  flex: 0 0 auto; margin-left: clamp(14px, 2vw, 28px);
  padding: 8px 15px;
  background: var(--rk-orange, #D8F03A); color: var(--rk-white, #ffffff);
  font-size: 13px; font-weight: 800; letter-spacing: -0.03em; text-decoration: none;
  white-space: nowrap;
}
.rk-header__cta:hover { background: var(--rk-white, #ffffff); color: var(--rk-black, #17212b); }
.rk-header__cta-label {
  margin-right: 7px; padding-right: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.42);
  font-weight: 600; opacity: 0.9;
}
.rk-header__cta:hover .rk-header__cta-label { border-right-color: rgba(23, 33, 43, 0.3); }

/* 햄버거. 열리면 X 로 바뀐다. 안 그러면 어떻게 닫는지 알 수가 없다.

   막대 위치를 flex 로 잡지 않고 absolute 로 못박는다. <button> 에 걸린 display:flex 를
   무시하는 렌더러가 있는데(구형 안드로이드 WebView, 일부 인앱 브라우저), 그러면
   막대가 인라인으로 흘러 height 가 먹지 않아 **버튼은 눌리는데 줄은 안 보인다.**
   네이버 앱에서 정확히 그 증상이 나왔다. absolute 는 그 경로를 아예 없앤다.
   appearance 도 끈다. 버튼 기본 렌더링이 자식을 잘라먹는 엔진이 있다. */
.rk-header__toggle {
  display: none;
  position: relative;
  box-sizing: border-box;
  width: 34px; height: 34px; padding: 0;
  background: none; border: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.rk-header__toggle span:not(.rk-sr) {
  position: absolute; left: 6px;
  display: block; width: 22px; height: 2px;
  background-color: #f6f7f4;
  background-color: var(--rk-ivory, #f6f7f4);
  transition: transform 0.18s ease, opacity 0.14s ease;
  transform-origin: center;
}
.rk-header__toggle span:not(.rk-sr):nth-of-type(1) { top: 9px; }
.rk-header__toggle span:not(.rk-sr):nth-of-type(2) { top: 16px; }
.rk-header__toggle span:not(.rk-sr):nth-of-type(3) { top: 23px; }

.rk-header__toggle[aria-expanded="true"] span:not(.rk-sr):nth-of-type(1) {
  transform: translateY(7px) rotate(45deg);
}
.rk-header__toggle[aria-expanded="true"] span:not(.rk-sr):nth-of-type(2) {
  opacity: 0;
}
.rk-header__toggle[aria-expanded="true"] span:not(.rk-sr):nth-of-type(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .rk-header__toggle span:not(.rk-sr) { transition: none; }
}

.rk-header__mobile { border-top: 1px solid rgba(246, 247, 244, 0.18); }
.rk-header__mobile ul { margin: 0; padding: 6px 20px 14px; list-style: none; }
.rk-header__mobile a {
  display: block; padding: 11px 0;
  color: var(--rk-ivory, #f6f7f4);
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.rk-header__mobile-sub a {
  padding: 8px 0 8px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--rk-muted-light, rgba(246, 247, 244, 0.68));
}
.rk-header__mobile-tel a { color: var(--rk-orange, #D8F03A); }

@media (max-width: 1040px) {
  .rk-header__cta-label { display: none; }
}

@media (max-width: 900px) {
  .rk-header__inner { width: calc(100% - 24px); min-height: 52px; gap: 12px; }
  .rk-header__brand { flex: 0 1 auto; min-width: 0; }
  .rk-header__mark { height: 24px; max-width: min(100%, 168px); }
  .rk-header__nav { display: none; }
  .rk-header__cta { display: none; }        /* 모바일 메뉴 안에 전화 줄이 따로 있다 */
  .rk-header__toggle { display: block; flex: 0 0 auto; margin-left: auto; }
}

/* --------------------------------------- 시공사례 갤러리 (워프 위젯 대체) */

.rk-gallery__filters {
  display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center;
  margin: 0 0 clamp(28px, 3.5vw, 46px);
}
.rk-gallery__filter {
  padding: 8px 15px; background: none; border: 0; border-radius: 999px;
  color: var(--rk-muted-dark, rgba(23, 33, 43, 0.68));
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: -0.03em; cursor: pointer;
}
.rk-gallery__filter:hover { color: var(--rk-black, #17212b); }
.rk-gallery__filter[aria-current="true"] {
  background: var(--rk-black, #17212b); color: var(--rk-white, #ffffff);
}

.rk-gallery__grid {
  display: grid; gap: 4px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.rk-gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.rk-gallery__item[hidden] { display: none; }
.rk-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rk-gallery__item figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(23, 33, 43, 0.82));
  color: #fff; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: -0.03em;
  opacity: 0; transition: opacity 0.2s;
}
.rk-gallery__item:hover figcaption, .rk-gallery__item:focus-within figcaption { opacity: 1; }

@media (max-width: 900px) { .rk-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rk-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------- 시공사진 띠 (Elementor image-carousel 대체) ------------- */

.rk-marquee { overflow: hidden; width: 100%; padding: 6px 0; }
.rk-marquee__track { display: flex; width: max-content; animation: rk-marquee 46s linear infinite; }
.rk-marquee:hover .rk-marquee__track { animation-play-state: paused; }
.rk-marquee__row { display: flex; gap: 6px; margin: 0; padding: 0 3px 0 0; list-style: none; }
.rk-marquee__row img {
  display: block; width: 150px; height: 150px; object-fit: cover;
}
@keyframes rk-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rk-marquee__track { animation: none; }
  .rk-marquee { overflow-x: auto; }
}
@media (max-width: 560px) { .rk-marquee__row img { width: 110px; height: 110px; } }

/* ------------------------------------------------------------ 푸터 */

.rk-footer {
  background: var(--rk-charcoal, #28303c);
  color: var(--rk-ivory, #f6f7f4);
  font-size: 14px;
  overflow: hidden;              /* 워드마크가 넘칠 때 가로 스크롤이 생기지 않게 */
}

.rk-footer__inner {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  width: min(calc(100% - 40px), 1240px);
  margin: 0 auto;
  padding: clamp(52px, 6vw, 78px) 0 clamp(30px, 4vw, 44px);
}

.rk-footer h2 {
  margin: 0 0 18px;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--rk-muted-light, rgba(246, 247, 244, 0.68));
}
.rk-footer__col--about h2 {
  font-size: 17px; letter-spacing: -0.05em; text-transform: none;
  color: var(--rk-white, #ffffff);
}

.rk-footer ul { margin: 0; padding: 0; list-style: none; }
.rk-footer__links li + li { margin-top: 9px; }
.rk-footer a { color: inherit; text-decoration: none; }
.rk-footer a:hover { color: var(--rk-orange, #D8F03A); }

.rk-footer__contact li { display: flex; gap: 10px; align-items: baseline; }
.rk-footer__contact li + li { margin-top: 10px; }
.rk-footer__contact svg {
  flex: 0 0 13px; width: 13px; height: 13px;
  fill: var(--rk-orange, #D8F03A); transform: translateY(1px);
}

.rk-footer p { margin: 0; color: var(--rk-muted-light, rgba(246, 247, 244, 0.68)); line-height: 1.75; }
.rk-footer__hours { margin-top: 14px !important; font-size: 13px; }

/* ---- 대형 워드마크 -------------------------------------------------------
   글자 7자가 콘텐츠 폭을 꽉 채우도록 폭에서 크기를 역산한다.
   자간을 -0.045em 주므로 글자 하나가 차지하는 폭은 약 0.955em,
   7자면 6.685em. 그래서 font-size = 폭 / 6.685 다.
   글자 수가 바뀌면 --rk-wm-chars 만 고치면 된다. */
.rk-footer__wordmark {
  width: min(calc(100% - 40px), 1240px);
  margin: 0 auto;
}
.rk-footer__wordmark img {
  display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto;
}
/* 포지 워드마크는 800x200 이라 콘텐츠 폭에 꽉 채우면 310px 높이가 된다. 640px 로 막는다. */

/* 하단 한 줄: 저작권 왼쪽 · 사업자 정보 가운데 · 개인정보처리방침 오른쪽.
   1fr auto 1fr 이라 가운데 칸은 양옆 길이와 무관하게 진짜 가운데에 선다. */
.rk-footer__bottom {
  border-top: 1px solid rgba(246, 247, 244, 0.16);
  margin-top: clamp(26px, 3.5vw, 44px);
}
.rk-footer__bottom-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px 24px;
  width: min(calc(100% - 40px), 1240px);
  margin: 0 auto;
  padding: 20px 0 24px;
}
.rk-footer__copy { justify-self: start; }
.rk-footer__biz { justify-self: center; text-align: center; }
/* 맨 위로 버튼(fixed, 오른쪽 18px + 폭 40px)이 이 자리를 덮는다.
   버튼이 먹는 만큼 링크를 왼쪽으로 물린다. 가운데 칸은 건드리지 않는다. */
.rk-footer__legal { justify-self: end; padding-right: 70px; }

.rk-footer__bottom small,
.rk-footer__legal a {
  color: var(--rk-muted-light, rgba(246, 247, 244, 0.68));
  font-size: 13px; line-height: 1.6;
}
.rk-footer__biz { color: rgba(246, 247, 244, 0.46) !important; font-size: 12px !important; }
.rk-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rk-footer__legal a { font-weight: 700; }

@media (max-width: 980px) {
  .rk-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .rk-footer__inner { grid-template-columns: 1fr; width: calc(100% - 24px); }
  .rk-footer__bottom-inner {
    grid-template-columns: 1fr; width: calc(100% - 24px); gap: 10px;
  }
  .rk-footer__copy, .rk-footer__biz, .rk-footer__legal { justify-self: start; }
  .rk-footer__legal { padding-right: 0; }   /* 왼쪽 정렬이라 버튼과 안 겹친다 */
  .rk-footer__biz { text-align: left; }
  .rk-footer__wordmark { width: calc(100% - 24px); }
}

/* ------------------------------------------------------------ 맨 위로 */

.rk-totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: grid; width: 40px; height: 40px; place-items: center;
  background: var(--rk-charcoal, #28303c); color: var(--rk-ivory, #f6f7f4);
  font-size: 16px; text-decoration: none;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.rk-totop.is-on { opacity: 1; pointer-events: auto; }

@media print { .rk-header, .rk-totop { position: static; } }

/* ------------------------------------------------------------ 404 */

.rk-notfound { max-width: 720px; }
.rk-notfound__lead { margin: 12px 0 28px; color: var(--rk-sub, #68737d); line-height: 1.7; }
.rk-notfound__links {
  display: flex; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 0 32px; padding: 0; list-style: none;
}
.rk-notfound__links a {
  display: inline-block; padding: 9px 16px;
  background: var(--rk-white, #fff); border: 1px solid var(--rk-line, #e6ebef);
  color: var(--rk-ink, #171a1d); text-decoration: none; font-weight: 600;
}
.rk-notfound__links a:hover { border-color: var(--rk-charcoal, #28303c); }
.rk-notfound__tel {
  display: inline-block; padding: 14px 24px;
  background: var(--rk-orange, #D8F03A); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 18px;
}

/* (지코의 '워프 테마 파리티' h1 크기 강제 블록은 포지에서 뺐다 — h1:not(.site-title) 이 (0,1,1) 이라 페이지 h1 을 48px 로 눌렀다. 포지는 components.css 의 .pz-h1 과 페이지 CSS 가 정한다.) */

/* ------------------------------------------------------------ 약관 / 방침 */

.rk-legal { max-width: 780px; }
.rk-legal__title {
  margin: 0 0 26px;
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; letter-spacing: -0.05em;
  line-height: 1.18;
}
.rk-legal__lead {
  margin: 0 0 42px; padding-bottom: 30px;
  border-bottom: 1px solid var(--rk-line-dark, rgba(23, 33, 43, 0.28));
  font-size: 16px; color: var(--rk-muted-dark, rgba(23, 33, 43, 0.68));
}
.rk-legal h2 {
  margin: 40px 0 14px;
  font-size: 19px; font-weight: 800; letter-spacing: -0.045em;
}
.rk-legal p { margin: 0 0 14px; font-size: 15px; line-height: 1.85; }
.rk-legal ul { margin: 0 0 14px; padding-left: 20px; }
.rk-legal li { margin-bottom: 8px; font-size: 15px; line-height: 1.8; }
.rk-legal a { color: var(--rk-orange, #D8F03A); }
.rk-legal__contact { list-style: none; padding-left: 0; }
.rk-legal__date {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--rk-line-dark, rgba(23, 33, 43, 0.28));
  color: var(--rk-muted-dark, rgba(23, 33, 43, 0.68)); font-size: 14px;
}

/* ------------------------------------------------------------ 문의 폼
   메인 폼(.rk-home-inquiry)은 워프 마크업이라 home.css 가 Elementor 를 !important 로
   눌러가며 잡고 있다. 이건 우리가 새로 짠 마크업이라 그럴 필요가 없다.
   흰 카드라 밝은 배경에도 어두운 배경에도 얹힌다. */

/* 앵커로 뛰어들어오는 자리다. 여백이 없으면 sticky 헤더가 폼 머리를 덮는다. */
.rk-steel-form { margin-top: clamp(34px, 4vw, 56px); scroll-margin-top: 78px; }
.rk-inquiry { scroll-margin-top: 78px; }

.rk-inquiry {
  padding: clamp(26px, 4vw, 50px);
  background: var(--rk-white, #ffffff);
  color: var(--rk-black, #17212b);
}

.rk-inquiry__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--rk-black, #17212b);
}
.rk-inquiry__head p {
  margin: 0; color: var(--rk-orange, #D8F03A); font-size: 14px; font-weight: 700;
}
.rk-inquiry__head h3 {
  margin: 0; font-size: clamp(26px, 3.4vw, 44px); font-weight: 900;
  line-height: 1.1; letter-spacing: -0.06em;
}

.rk-inquiry__fields {
  display: grid; grid-template-columns: 0.65fr 1.35fr; gap: 12px; margin-top: 30px;
}
.rk-inquiry label { display: block; margin-bottom: 9px; font-size: 15px; font-weight: 700; }
.rk-inquiry input[type="tel"],
.rk-inquiry input[type="text"],
.rk-inquiry textarea {
  width: 100%; padding: 0 17px;
  border: 1px solid var(--rk-line-dark, rgba(23, 33, 43, 0.28));
  border-radius: 0; background: transparent;
  color: inherit; font: 700 16px/1 var(--rk-font, sans-serif);
}
.rk-inquiry input[type="tel"], .rk-inquiry input[type="text"] { height: 60px; }
.rk-inquiry textarea {
  min-height: 116px; padding: 16px 17px; line-height: 1.65; resize: vertical;
}
.rk-inquiry input:focus, .rk-inquiry textarea:focus {
  border-color: var(--rk-orange, #D8F03A); outline: 2px solid transparent;
}

.rk-inquiry__details { margin-top: 12px; }
.rk-inquiry__details label span {
  color: var(--rk-muted-dark, rgba(23, 33, 43, 0.68)); font-weight: 600;
}

.rk-inquiry__privacy { margin-top: 20px; }
.rk-inquiry__privacy > label {
  display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 14px; font-weight: 600;
}
.rk-inquiry__privacy input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0; accent-color: var(--rk-orange, #D8F03A);
}
.rk-inquiry__privacy details {
  margin-top: 12px; color: var(--rk-muted-dark, rgba(23, 33, 43, 0.68)); font-size: 12px;
}
.rk-inquiry__privacy summary { width: max-content; cursor: pointer; font-size: 13px; font-weight: 700; }
.rk-inquiry__privacy details div {
  margin-top: 12px; padding: 15px;
  border: 1px solid var(--rk-line-dark, rgba(23, 33, 43, 0.28));
}
.rk-inquiry__privacy details p { margin: 0 0 5px; }
.rk-inquiry__privacy details a { color: var(--rk-orange, #D8F03A); }

.rk-inquiry button[type="submit"] {
  margin-top: 24px; padding: 19px 30px;
  background: var(--rk-orange, #D8F03A); border: 0; color: var(--rk-white, #ffffff);
  font: 800 16px/1 var(--rk-font, sans-serif); letter-spacing: -0.03em; cursor: pointer;
}
.rk-inquiry button[type="submit"]:hover {
  background: var(--rk-black, #17212b);
}

@media (max-width: 720px) {
  .rk-inquiry__fields { grid-template-columns: 1fr; }
  .rk-inquiry__head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.rk-inquiry button[type="submit"]:disabled { background: var(--rk-muted-dark, rgba(23, 33, 43, 0.68)); cursor: progress; }

/* ------------------------------------------------------------ 헤더 변형
   body[data-header] 로 고른다. 셸 shell(header=...) 이 적어 내려준다.
     solid  (기본) 위의 스티키 단색 바. 블로그·랜딩·목록처럼 첫 화면이 글인 페이지
     glass  히어로 사진 위에 얹히는 유리 바. 첫 화면이 큰 사진인 홈·스틸방수 같은 페이지
   glass 는 fixed 라 본문이 헤더 밑으로 들어간다. 히어로가 화면을 채우니 상관없지만
   히어로 안 글은 padding-top 을 헤더 높이(64px)만큼 준다.
   스크롤하면 site.js 가 .is-scrolled 를 붙이고 바가 진해진다. */
.rk-header { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }

body[data-header="glass"] .rk-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: rgba(23, 33, 43, 0.12);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background 0.25s ease, border-color 0.25s ease;
}
body[data-header="glass"] .rk-header.is-scrolled {
  background: rgba(23, 33, 43, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* 블러를 못 하는 브라우저(구형 삼성 인터넷 등)는 처음부터 진한 바 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body[data-header="glass"] .rk-header { background: rgba(23, 33, 43, 0.86); }
}
body[data-header="glass"] .rk-header__mobile {
  background: rgba(23, 33, 43, 0.94);
}
body[data-header="glass"] .rk-nav__sub {
  background: rgba(23, 33, 43, 0.92);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}