/* ==================================================================
   을숙도 대지·생태예술 국제공모 — C안
   위젯 옵션으로 표현할 수 없는 부분만 담은 스타일시트

   색·서체·여백·테두리·모서리 반경은 전부 각 위젯의 «모양(Style)» 탭과
   Site Settings 의 글로벌 컬러에 들어 있습니다. 이 파일에는
   엘리멘터 옵션에 대응하는 컨트롤이 아예 없는 것만 남겼습니다.

   1) 스크롤 톤 전환 — CSS 변수와 1.5초 전환
   2) 반응형 자동 채움 그리드 repeat(auto-fill, minmax())
   3) 고정 비율 사진 (aspect-ratio + object-fit)
   4) 고정 헤더와 스크롤 시 숨김
   5) 히어로 제목 글자 조립
   6) 번호 매기는 목록 counter()
   7) 캘린더 12칸, 토스트, 원형 컷아웃의 후광
   8) 엘리멘터 기본값 중화

   여백 규칙 : 모든 값은 4px 배수. 4px 이하(헤어라인, 3px 간격)는 예외.
   ================================================================== */

/* ---------- 1. 톤 ----------
   글로벌 컬러가 이 변수를 가리키므로, 여기서 값이 바뀌면
   위젯의 모양 탭에서 지정한 색도 함께 반전됩니다. */
:root{
  --blue:#87CEEC;
  --brown:#502F1C;
  --cream:#F6F1E7;
  --ink:#17160F;

  --bg:#87CEEC;
  --fg:#17160F;
  --fg-2:#3F3A29;
  --rule:rgba(23,22,15,.30);
  --rule-2:rgba(23,22,15,.16);
  --card:rgba(255,255,255,.34);
  --halo:rgba(255,255,255,.72);
  --glow:rgba(80,47,28,.16);

  --f:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif;

  /* 토스트 폭 계산에만 쓰는 화면 좌우 여백 값입니다.
     섹션의 실제 좌우 여백과 최대 폭은 엘리멘터 컨테이너 설정이 정합니다. */
  --e:clamp(1.25rem,3.6vw,3.25rem);
}
:root[data-tone="brown"]{
  --bg:#502F1C;
  --fg:#F6F1E7;
  --fg-2:rgba(246,241,231,.86);
  --rule:rgba(246,241,231,.34);
  --rule-2:rgba(246,241,231,.18);
  --card:rgba(246,241,231,.13);
  --halo:rgba(246,241,231,.34);
  --glow:rgba(135,206,236,.16);
}

/* 글로벌 컬러 예비값.
   플러그인이 Site Settings 에 같은 값을 심으므로 보통은 덮어써집니다.
   Site Settings 가 비어 있어도 화면이 깨지지 않도록 남겨 둡니다. */
:root{
  --e-global-color-primary:#87CEEC;
  --e-global-color-secondary:#502F1C;
  --e-global-color-text:#17160F;
  --e-global-color-accent:#F6F1E7;
  --e-global-color-tonefg:var(--fg);
  --e-global-color-tonefg2:var(--fg-2);
  --e-global-color-tonebg:var(--bg);
  --e-global-color-tonerule:var(--rule);
  --e-global-color-tonerule2:var(--rule-2);
  --e-global-color-tonecard:var(--card);
}

/* ---------- 2. 엘리멘터 기본값 중화 ---------- */
.elementor *,.elementor *::before,.elementor *::after{box-sizing:border-box}
.elementor-widget:not(:last-child){margin-block-end:0}
.elementor-widget-container{margin:0}
/* 박스형 섹션은 안쪽에 .e-con-inner 를 하나 더 만듭니다.
   자식을 가리키는 규칙은 두 경우를 모두 받아야 합니다. */
.elementor :is(.e-con,.e-con-inner)>.elementor-widget{width:100%;max-width:100%}
.elementor .e-con{max-width:none}
.elementor-heading-title{margin:0;padding:0}
.elementor-widget-text-editor p{margin:0}
.elementor-widget-image img{display:block;max-width:100%;box-shadow:none}
.elementor-widget-image figure,.elementor-widget-image .elementor-image{margin:0}
.elementor-icon-list-items{margin:0;padding:0;list-style:none}
.elementor .elementor-button{line-height:inherit;text-decoration:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  transition:background-color .16s,color .16s,transform .16s}
.elementor .elementor-button-content-wrapper{display:contents}
.elementor .elementor-social-icon{border-radius:0}

/* ---------- 3. 문서 바탕 ---------- */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  transition:background-color 2s cubic-bezier(.4,0,.2,1),color 2s cubic-bezier(.4,0,.2,1);
  font-family:var(--f);
  word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.elementor a{color:inherit;text-decoration:none}
.elementor img{display:block;max-width:100%}
/* 초점 테두리 — 키보드(Tab)를 실제로 누른 뒤에만 그립니다.
   크롬은 tabindex 를 단 div·button 을 손가락으로 눌러도 :focus-visible 로 봅니다.
   그래서 누르는 곳마다 검은 네모가 남았습니다.
   data-kb 는 스크립트가 Tab 을 감지했을 때만 붙입니다(스크립트 13번).
   키보드 사용자에게는 그대로 보이므로 접근성은 유지됩니다. */
.elementor :focus-visible{outline:none}
:root[data-kb] .elementor :focus-visible{
  outline:2px solid var(--fg);outline-offset:3px;border-radius:2px}

/* 배경을 완전히 평평하게 두지 않기 위한 반사광 — 위젯 옵션 없음 */
.elementor .e-con.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block;
  background:
    radial-gradient(75% 55% at 16% 8%, var(--glow) 0%, transparent 66%),
    radial-gradient(70% 50% at 88% 82%, var(--glow) 0%, transparent 62%);
  transition:background 2s cubic-bezier(.4,0,.2,1)}

/* 선과 바탕도 배경과 같은 속도로 돈다 — 위젯 옵션에 전환 시간 컨트롤이 없음 */
.elementor .e-con,.elementor .elementor-widget,
.elementor .elementor-heading-title,.elementor .elementor-button,
.elementor .elementor-icon-list-text,.elementor .elementor-icon-list-icon i,
.elementor .elementor-counter-number-wrapper,.elementor .widget-image-caption,
.elementor .elementor-item,.elementor .elementor-social-icon{
  transition:border-color 2s cubic-bezier(.4,0,.2,1),
             background-color 2s cubic-bezier(.4,0,.2,1),
             color 2s cubic-bezier(.4,0,.2,1),
             box-shadow 2s cubic-bezier(.4,0,.2,1)}
.elementor .btnw .elementor-button,.chip:hover,.tag:hover{transition-duration:.16s}

/* ---------- 4. 인라인으로 놓여야 하는 위젯 ----------
   엘리멘터는 컨테이너의 자식 위젯을 100% 폭으로 만듭니다.
   칩·버튼·태그처럼 내용만큼만 차지해야 하는 것들만 되돌립니다. */
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.chip,
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.tag,
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.btnw,
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.skipw,
.elementor :is(.e-con.top,.e-con.topbar) .e-con-inner>.elementor-widget,
.elementor :is(.e-con.top,.e-con.topbar) .e-con-inner>.e-con,
.elementor :is(.e-con.top,.e-con.topbar)>.elementor-widget,
.elementor :is(.e-con.top,.e-con.topbar)>.e-con,
.elementor .e-con.foot-end>.elementor-widget,
.elementor .e-con.cal-key>.elementor-widget,
/* 섹션 머리 — 제목과 영문 라벨이 한 줄의 좌우 끝에 놓여야 합니다.
   위젯 기본 폭이 100% 라 제목이 줄 전체를 차지해 라벨이 아래로 밀렸습니다. */
.elementor .e-con.head>.elementor-widget,
.elementor .e-con.dlc>.elementor-widget{width:auto}
.elementor .e-con.hero-foot>.e-con,
.elementor .e-con.utils>.elementor-widget,
.elementor .e-con.chips>.elementor-widget,
.elementor .e-con.cta>.elementor-widget{width:auto}
.elementor .e-con.hero-l{max-width:34ch}
.chip{display:inline-flex;align-items:center}
.brand{overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap}

/* 로고 — 컬러 원본은 밝은 톤에서만 읽힙니다.
   갈색 구간에서는 흰색 단색으로 바꿉니다.
   크림/화이트 버전 SVG 를 받으면 이 필터 대신 파일을 바꾸는 편이 낫습니다. */
/* 로고 SVG 에는 width·height 속성이 없습니다. 그래서 브라우저가 파일을
   내려받아 viewBox 를 읽기 전까지 높이를 모르고, 다 받은 순간 헤더가
   덜컹 내려앉습니다(누적 레이아웃 이동). 비율을 미리 적어 두면 자리를
   잡아 놓고 기다립니다. 600 × 112.7 은 로고 파일의 viewBox 입니다. */
.logo img{height:auto;aspect-ratio:600/112.7;transition:filter 2s cubic-bezier(.4,0,.2,1)}
:root[data-tone="brown"] .logo img{filter:brightness(0) invert(1)}

/* ---------- 4-0. 아직 열지 않은 자리 ----------
   «전시 · 아카이브 · 게시판» 표의 각 줄이 메뉴의 도착지입니다(#selected · #archive · #notice).
   줄 하나만 화면 맨 위에 딱 붙으면 앞뒤 맥락이 잘려 보이므로 여유를 둡니다. */
.elementor .e-con.tr[id]{scroll-margin-top:var(--anchor-gap,96px)}
/* 메뉴가 가리키는 구역도 고정 헤더에 가리지 않게 여유를 둡니다.
   --anchor-gap 은 스크립트가 헤더 높이를 재서 넣습니다(스크립트 17번). */
.elementor .e-con[id]{scroll-margin-top:var(--anchor-gap,96px)}

/* 메뉴에서 아직 누를 수 없는 항목 — «전시(추후 오픈)» 처럼 자리만 있는 곳.
   눌러도 아무 데도 가지 않으므로 아예 눌리지 않게 하고 흐리게 둡니다. */
.nav .menu-item-mute>a,
.nav .menu-item-mute .elementor-item,
.popnav .menu-item-mute>a,
.popnav .menu-item-mute .elementor-item{pointer-events:none;cursor:default;opacity:.45}
.nav .menu-item-mute .elementor-item::after,
.popnav .menu-item-mute .elementor-item::after{content:none!important}

/* ---------- 4-1. 최대 폭 ----------
   이 스타일시트에는 최대 폭 규칙이 없습니다.
   헤더·히어로·본문 블록·푸터 컨테이너의 «레이아웃» 탭에서
   콘텐츠 너비 = 박스형 · 너비 = 1920px 로 잡혀 있습니다.
   숫자를 바꾸려면 엘리멘터에서 해당 섹션의 «너비» 칸만 고치면 되고,
   좌우 패딩도 «모양» 탭에서 평소대로 조절됩니다. */

/* ---------- 4-2. 히어로 배경 «퇴적되는 파도» ----------
   포스터 배경 텍스처를 스크립트가 캔버스에 다시 그립니다.
   캔버스는 히어로 컨테이너 맨 뒤에 깔리고, 내용은 그 위에 놓입니다.
   끄려면 히어로 컨테이너의 «고급 › 속성» 에서 data-wave 값을 off 로 바꿉니다. */
/* 첫 화면의 하늘색만 따로 씁니다.
   파도 캔버스는 갈색과 흰 점만 그리고 바탕은 비워 둡니다. 그래서 물결
   사이로 보이는 파랑은 그 «뒤» 의 색입니다. 여기에 색을 하나 깔면
   첫 화면만 바뀌고, 아래 본문 구간의 하늘색(--blue #87CEEC)은 그대로입니다.
   본문까지 함께 바꾸려면 이 줄을 지우고 맨 위 --blue 를 고치십시오. */
:root{ --hero-blue:#a4d0f1 }
.elementor .e-con.hero{background-color:var(--hero-blue)}

.elementor .e-con.hero>.hero-wave{position:absolute;inset:0;z-index:0;pointer-events:none}
.elementor .e-con.hero>.e-con-inner,
.elementor .e-con.hero>.elementor-widget,
.elementor .e-con.hero>.e-con{position:relative;z-index:1}

/* ---------- 4-3. 첫 화면 위쪽 어둠 ----------
   흰 글자(로고·KO·MENU·큰 제목)가 밝은 물결 위에서도 읽히게 하는 막입니다.

   이 스타일시트에는 «색» 이 없습니다. 엘리멘터의 배경 오버레이로 들어 있어서
   히어로 컨테이너 › 모양 › 배경 오버레이 에서 바로 고칩니다.
   여기 있는 것은 «쌓이는 순서» 뿐입니다.

   왜 순서를 손봐야 하는가 —
   엘리멘터는 컨테이너의 배경 오버레이를 ::before 로 그립니다. ::before 는
   자식보다 먼저 그려지므로, 그대로 두면 파도 캔버스가 막을 덮어 버립니다.
   파랑만 어두워지고 갈색 물결은 그대로여서 막이 있으나 마나 합니다.
   그래서 히어로에 쌓임 맥락을 만들고(isolation) 캔버스를 -1 층으로 내립니다.
     바탕색(하늘색) → 파도 캔버스(-1) → 배경 오버레이(0) → 글자(1)
   순서가 이렇게 되어야 막이 물결 위에 얹힙니다. */
.elementor .e-con.hero{isolation:isolate}
.elementor .e-con.hero>.hero-wave{z-index:-1!important}

/* WebGL 을 못 쓰는 환경에서는 움직이지 않는 근사 배경으로 대신합니다. */
/* ::before 는 엘리멘터 배경 오버레이가 씁니다. 대체 배경은 ::after 로 두고,
   캔버스와 같은 -1 층에 놓아 막이 그 위에 얹히게 합니다. */
.elementor .e-con.hero[data-wave-fallback]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.34;
  background:repeating-linear-gradient(97deg,
    rgba(98,46,18,.95) 0, rgba(98,46,18,0) 232px)}

/* 히어로 위에 떠 있는 동안의 헤더 — 크림색.
   히어로 배경이 포스터와 같은 진한 텍스처라 톤 색(검정)으로는 읽히지 않습니다.
   엘리멘터가 위젯에 넣는 규칙과 무게가 같아지지 않도록 .elementor 를 한 겹 더 얹습니다. */
/* 색은 낱낱의 글자가 아니라 «칸» 에 겁니다.
   낱낱에 걸면 a 는 받고 <i>(구분선)·<button>(화살표)는 못 받아
   혼자 다른 색이 됩니다 — 실제로 그랬습니다. */
:root[data-hero] .elementor .top .nav,
:root[data-hero] .elementor .top .lang,
:root[data-hero] .elementor .top .elementor-item,
:root[data-hero] .elementor .top .elementor-sub-item,
:root[data-hero] .elementor .top .elementor-menu-toggle,
:root[data-hero] .elementor .top .elementor-social-icon,
:root[data-hero] .elementor .top .lang a,
:root[data-hero] .elementor .top .lang i,
:root[data-hero] .elementor .top .navx,
:root[data-hero] .elementor .top .elementor-item:hover,
:root[data-hero] .elementor .top .elementor-item:focus,
:root[data-hero] .elementor .top .elementor-item.elementor-item-active,
:root[data-hero] .elementor .top .elementor-item.highlighted,
:root[data-hero] .elementor .top .elementor-sub-item:hover,
:root[data-hero] .elementor .top .elementor-sub-item:focus,
:root[data-hero] .elementor .top .elementor-sub-item.elementor-item-active,
:root[data-hero] .elementor .top .lang a:hover,
:root[data-hero] .elementor .top .navx:hover,
:root[data-hero] .elementor .top .menubtn,
:root[data-hero] .elementor .top .menubtn .elementor-button,
:root[data-hero] .elementor .top .menubtn .elementor-button:hover{color:var(--cream)!important}

/* 랜딩 헤더의 햄버거 버튼은 언제나 흰색(크림)입니다.
   이 헤더는 문서 맨 위에 얹혀 늘 히어로 텍스처 위에만 놓이므로
   톤 판정을 기다릴 필요가 없습니다.
   엘리멘터는 토글 색을 아이콘 «자기 자신» 에 넣기 때문에 부모에 색을 주는
   것만으로는 상속되지 않습니다. 아이콘 요소를 직접 가리킵니다.
   엘리멘터가 내보내는 규칙이
     .elementor-1234 .elementor-element.elementor-element-abcd .elementor-menu-toggle i
   형태(클래스 4개 + 요소 1개)라 무게가 같으면 나중에 실린 쪽이 이깁니다.
   확실히 넘어서도록 :root 와 .nav 를 한 겹씩 더 얹습니다.
   엘리멘터·테마·캐시 플러그인이 어떤 순서로 실려도 흔들리지 않도록
   여기서는 !important 로 못박습니다. 이 버튼은 늘 어두운 텍스처 위에만
   놓이므로 다른 색이 될 여지가 없습니다. */
:root .elementor .e-con.top .nav .elementor-menu-toggle,
:root .elementor .e-con.top .nav .elementor-menu-toggle i,
:root .elementor .e-con.top .nav .elementor-menu-toggle svg,
:root .elementor .e-con.top .nav .elementor-menu-toggle::before{color:var(--cream)!important}
:root .elementor .e-con.top .nav .elementor-menu-toggle svg{stroke:currentColor!important}
:root .elementor .e-con.top .nav .elementor-menu-toggle i::before{color:inherit!important}
/* 스크롤 헤더도 히어로 위에 있는 동안에는 같게 맞춥니다. */
:root[data-hero] .elementor .top .elementor-item::after{background:var(--cream)}
:root[data-hero] .elementor .logo img{filter:brightness(0) invert(1)}
:root[data-hero] .elementor .top .elementor-nav-menu--dropdown{background:var(--brown)}
:root[data-hero] .elementor .top .elementor-nav-menu--dropdown a{color:var(--cream)}

/* 첫 화면 헤더 뒤의 어둠은 스타일시트에 없습니다.
   엘리멘터 «헤더 — 랜딩» 컨테이너 › 모양 › 배경 오버레이 에 들어 있습니다.
   색·세기·그라데이션 위치를 그 화면에서 바로 고치십시오.

   아래 두 줄은 오버레이가 헤더 «내용 위» 를 덮지 않게 하는 안전장치입니다.
   엘리멘터 버전에 따라 오버레이를 ::before 로 그리기도 하고 별도 div 로
   그리기도 해서, 두 경우를 모두 뒤로 보냅니다. */
.elementor .e-con.top::before,
.elementor .e-con.top>.elementor-background-overlay{z-index:0;pointer-events:none}
.elementor .e-con.top>.e-con-inner,
.elementor .e-con.top>.elementor-widget,
.elementor .e-con.top>.e-con{position:relative;z-index:1}

/* 칩과 고스트 버튼에 어두운 판을 깝니다.
   테두리와 모서리 반경은 엘리멘터가 .elementor-widget-container 에 넣으므로
   판도 반드시 그 안쪽에 깔아야 합니다. 바깥 껍데기에 깔면
   모서리가 살아 있지 않아 각진 사각형이 비어져 나옵니다. */
#hero .chip>.elementor-widget-container{
  background:rgba(23,22,15,.46);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
/* 알약 높이 맞추기 — «D-76» 은 숫자만, 옆 알약은 한글이 섞여 있습니다.
   두 글자체의 글자 높이가 달라 알약 높이도 1~2px 어긋나 보였습니다.
   같은 줄의 알약을 같은 높이로 늘리고, 글자는 그 안에서 가운데에 둡니다. */
.elementor .e-con.chips{align-items:stretch}
.elementor .e-con.chips>.chip>.elementor-widget-container{
  display:flex;align-items:center;height:100%}
#hero .btnw--ghost .elementor-button{background:rgba(23,22,15,.46)}

/* ---------- 5. 두 겹 헤더 ----------
   비브톤과 같은 구조입니다. 위치 고정·배경 흐림·스크롤 반응은
   위젯 옵션으로 만들 수 없어 여기서 처리합니다.

   .top    랜딩 헤더 — 문서 맨 위에 얹혀 페이지와 함께 밀려 올라갑니다.
                      바탕도 선도 없습니다. 자리를 차지하지 않아 히어로가 화면 끝까지 갑니다.
   .topbar 스티키 헤더 — 화면에 고정. 평소에는 위로 접혀 있고,
                      스크롤을 올릴 때 반투명 바탕 + 배경 흐림으로 내려옵니다.

   바탕색은 톤을 따라갑니다. 히어로 위에서는 진한 텍스처를 덮도록 더 어둡습니다. */
/* 스크롤 헤더는 톤을 따라가지 않고 흰 바탕으로 고정합니다.
   글씨는 먹색이므로 어느 구간을 지나든 같은 모습입니다. */
:root{ --bar:rgba(255,255,255,.5); --bar-line:rgba(23,22,15,.14) }

.elementor .e-con.top{position:absolute;inset:0 0 auto 0;z-index:80}

/* 스크롤 헤더 안의 글자는 언제나 먹색(#17160F), 로고는 원본 컬러입니다.
   톤 전환과 히어로 규칙이 여기까지 오지 않도록 못박습니다. */
:root .elementor .e-con.topbar .elementor-item,
:root .elementor .e-con.topbar .elementor-menu-toggle,
:root .elementor .e-con.topbar .elementor-menu-toggle i,
:root .elementor .e-con.topbar .elementor-menu-toggle svg,
:root .elementor .e-con.topbar .lang,
:root .elementor .e-con.topbar .lang a,
:root .elementor .e-con.topbar .lang i,
:root .elementor .e-con.topbar .nav,
:root .elementor .e-con.topbar .elementor-sub-item,
:root .elementor .e-con.topbar .elementor-item:hover,
:root .elementor .e-con.topbar .elementor-item:focus,
:root .elementor .e-con.topbar .elementor-item.elementor-item-active,
:root .elementor .e-con.topbar .elementor-item.highlighted,
:root .elementor .e-con.topbar .elementor-sub-item:hover,
:root .elementor .e-con.topbar .elementor-sub-item:focus,
:root .elementor .e-con.topbar .lang a:hover,
:root .elementor .e-con.topbar .navx,
:root .elementor .e-con.topbar .menubtn,
:root .elementor .e-con.topbar .menubtn .elementor-button,
:root .elementor .e-con.topbar .menubtn .elementor-button:hover{color:var(--ink)!important}
:root .elementor .e-con.topbar .lang .trp-shortcode-switcher__wrapper{
  --text:var(--ink)!important; --text-hover:var(--ink)!important}
:root .elementor .e-con.topbar .elementor-item::after{background:var(--ink)}
:root .elementor .e-con.topbar .logo img{filter:none!important}
:root .elementor .e-con.topbar .elementor-nav-menu--dropdown{background:var(--cream)}
:root .elementor .e-con.topbar .elementor-nav-menu--dropdown a{color:var(--ink)}

.elementor .e-con.topbar{position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--bar);
  border-bottom:1px solid var(--bar-line);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transform:translateY(-110%);
  visibility:hidden;                     /* 접혀 있을 때 탭 이동에 걸리지 않게 */
  transition:transform .3s cubic-bezier(.4,0,.2,1),
             visibility 0s linear .3s,
             background-color .3s ease, border-color .3s ease}
.elementor .e-con.topbar[data-show]{
  transform:none;visibility:visible;
  transition:transform .3s cubic-bezier(.4,0,.2,1),
             visibility 0s,
             background-color .3s ease, border-color .3s ease}

/* ---------- 언어 전환 (비브톤과 같은 형태) ----------
   현재 언어만 보이고, 마우스를 올리면 아래로 크림색 패널이 열립니다.
   여닫는 동작은 TranslatePress 것을 그대로 씁니다. 우리는 겉모습만 바꿉니다.

   중요 — TranslatePress 3.3 의 새 스위처(v2)는 색·테두리·깃발 크기를
   스타일시트가 아니라 «인라인 CSS 변수» 로 요소에 직접 박아 넣습니다.
   (--bg, --text, --border, --flag-size …)
   인라인 값이라 보통의 규칙으로는 이길 수 없으므로, 같은 변수를
   !important 로 다시 정의하는 방식으로 넘겨받습니다.
   구조가 아니라 변수를 잡는 것이라 TranslatePress 설정을 무엇으로 두어도
   그대로 따라옵니다. 설정은 건드리지 않습니다.

   덧붙여 v2 는 --bg 를 흰색으로 박아 넣는데, 이것이 우리 톤 변수 --bg 와
   이름이 겹칩니다. 스위처 «안쪽» 에서만 겹치므로 다른 곳에는 영향이 없지만,
   이 안에서는 --bg 를 쓰지 마십시오. */
.lang .trp-shortcode-switcher__wrapper{
  --bg:transparent!important; --bg-hover:transparent!important;
  --text:var(--fg)!important;  --text-hover:var(--fg)!important;
  --border:0!important; --border-width:0!important; --border-color:transparent!important;
  --border-radius:0!important; --flag-size:0!important; --font-size:16px!important}
/* 히어로 위에서는 크림색 */
:root[data-hero] .elementor .top .lang .trp-shortcode-switcher__wrapper{
  --text:var(--cream)!important; --text-hover:var(--cream)!important}
.lang .trp-flag-image{display:none!important}
.lang .trp-current-language-item__wrapper>svg{display:none}      /* 화살표 */
.lang .trp-shortcode-switcher{padding:0!important;background:none!important;border:0!important}
/* v2 는 같은 스위처를 둘 그립니다. 자리를 잡아 주는 앵커와, 그 위에 겹쳐서
   실제로 열리는 오버레이입니다. 래퍼 폭이 벌어지면 둘이 어긋나 KO 가 두 개로
   보이므로, 래퍼를 내용만큼만 차지하게 두고 오버레이를 앵커 위에 못박습니다. */
/* inline-block 으로 두면 글꼴 내림선만큼 빈 줄 공간이 상자 아래에 붙어,
   가운데 정렬을 걸어도 글자가 2px 쯤 위로 뜹니다. flex 로 바꿔 없앱니다. */
.lang,.lang .elementor-widget-container,.lang .elementor-shortcode{
  display:flex;align-items:center;line-height:1}
/* KO / EN 은 스크립트가 새로 그립니다(스크립트 3-1 번).
   TranslatePress 가 그린 스위처는 판마다 마크업이 조금씩 달라, CSS 로
   접었다 폈다 하면 어떤 판에서는 통째로 사라졌습니다. 그래서 링크 주소와
   언어 코드만 읽어다가 우리 마크업으로 다시 그립니다.
   원래 스위처는 스크립트가 성공했을 때만 감춥니다(.lang[data-row]).
   실패하면 원래 모습 그대로 남으므로 «아무것도 안 보이는» 일은 없습니다. */
.lang .trp-shortcode-switcher__wrapper{position:relative;display:flex;align-items:center;width:auto}
.lang .trp-shortcode-switcher{display:flex;align-items:center}
.lang[data-row] .trp-shortcode-switcher__wrapper,
.lang[data-row] .trp-language-switcher{display:none!important}

.langrow{display:flex;align-items:center;line-height:1;white-space:nowrap}
.langrow a{font-family:var(--f);font-size:16px;font-weight:400;letter-spacing:.06em;
  line-height:1;text-transform:uppercase;color:inherit;opacity:.72;
  transition:opacity .16s}
.langrow a:hover,.langrow a:focus-visible{opacity:1}
.langrow a[aria-current="true"]{font-weight:700;opacity:1;cursor:default}
/* 구분선 «/» 도 글자와 같은 색·같은 진하기입니다 */
.langrow i{font-style:normal;margin:0 8px;opacity:1;color:inherit}

/* 크기와 두께는 !important 로 못박습니다.
   TranslatePress 는 자기 스타일시트를 우리 뒤에 싣기 때문에, 무게가 같으면
   그쪽이 이깁니다. 메뉴의 «MENU» 와 한 글자도 다르지 않아야 하는 값이라
   협상 여지를 두지 않습니다. */
.lang .trp-language-item-name{
  font-family:var(--f)!important;
  font-size:16px!important;font-weight:600!important;
  letter-spacing:.06em!important;line-height:1!important;
  text-transform:uppercase!important}
/* 구버전 TranslatePress(숏코드 스위처)를 쓰는 경우의 최소 정리 */
.lang .trp-language-switcher>div{padding:0;background:none;border:0}
.lang .trp-ls-shortcode-current-language a,
.lang .trp-ls-shortcode-language a{text-transform:uppercase}

/* 히어로 버튼 호버 — 엘리멘터 위젯 설정만으로는 테마·플러그인 순서에 따라
   밀릴 수 있어, 글자색까지 여기서 못박습니다. */
/* 히어로 버튼은 포스터 배색 고정입니다. 톤이 갈색으로 넘어가도
   글자색이 따라가 사라지는 일이 없도록 여기서도 못박습니다. */
#hero .btnw .elementor-button{background:var(--cream);color:var(--ink);border-color:var(--cream)}
#hero .btnw--ghost .elementor-button{background:transparent;color:var(--cream);border-color:var(--cream)}
#hero .btnw .elementor-button:hover,
#hero .btnw .elementor-button:focus-visible{
  background:var(--blue);color:var(--ink);border-color:var(--blue)}
#hero .btnw--ghost .elementor-button:hover,
#hero .btnw--ghost .elementor-button:focus-visible{
  background:var(--cream);color:var(--ink);border-color:var(--cream)}

.elementor :is(.e-con,.e-con-inner)>.elementor-widget.skipw{position:fixed;top:0;left:0;z-index:300;
  transform:translateY(-120%);transition:transform .16s}
.skipw:focus-within{transform:translateY(0)}

/* 내비게이션 — 밑줄 애니메이션과 모바일 토글 표시 */
.nav .elementor-nav-menu{gap:clamp(.75rem,1.8vw,2rem)}
.nav .elementor-item{position:relative}
.nav .elementor-item::after{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav .elementor-item:hover::after{transform:scaleX(1)}
/* ---------- 9. 메뉴 토글 — 아이콘 대신 «MENU» 글자 ----------
   엘리멘터 메뉴 위젯에는 토글을 글자로 바꾸는 옵션이 없어 여기서 만듭니다.
   두 언어에서 같은 낱말이라 번역 대상이 아닙니다.
   읽어 주는 프로그램을 위한 이름은 위젯이 넣는 숨김 글자가 그대로 맡습니다. */
.nav .elementor-menu-toggle i,
.nav .elementor-menu-toggle svg{display:none!important}
/* 언어 전환(KO)과 완전히 같은 조판이어야 합니다.
   값이 어긋나면 바로 눈에 띄므로 여기도 !important 로 못박습니다. */
.nav .elementor-menu-toggle.elementor-active::after{content:"\2715"!important;font-size:22px!important}
.nav .elementor-menu-toggle::after{
  content:"MENU";
  font-family:var(--f)!important;
  font-size:16px!important;font-weight:600!important;
  letter-spacing:.06em!important;line-height:1!important;
  text-transform:uppercase!important;color:inherit}

/* «MENU» 를 손가락으로 눌렀을 때 검은 네모가 생기던 문제.
   이 토글은 button 이 아니라 tabindex 를 단 div 라, 크롬은 손가락으로 눌러도
   «키보드로 옮겨 온 것» 으로 보고 초점 테두리를 그립니다.
   키보드(Tab)를 실제로 쓴 뒤에만 테두리를 보이게 합니다 —
   접근성은 그대로 두고 손가락 사용자에게만 안 보이게 하는 방법입니다. */

.nav .elementor-menu-toggle{background:none;border:0;cursor:pointer;
  /* 글자 폭만큼만 차지하되, 손가락이 닿는 높이는 44px 를 지킵니다. */
  width:auto;min-width:0;height:2.75rem;padding:0;
  align-items:center;justify-content:flex-end}
/* 좁은 화면에서 «MENU» 를 누르면 열리는 판.
   엘리멘터는 PC 의 하위 메뉴에도 같은 이름(elementor-nav-menu--dropdown)을 붙입니다.
   그래서 아래 규칙은 반드시 «토글 바로 뒤에 오는 것» 으로 좁혀야 합니다.
   좁히지 않으면 PC 하위 메뉴까지 오른쪽 끝(right:0)에 붙어 버립니다 — 실제로 그랬습니다. */
.nav .elementor-menu-toggle+.elementor-nav-menu--dropdown{display:none;position:absolute;right:0;top:100%;z-index:100;
  min-width:14rem;margin-top:var(--s3,.75rem);border:1.5px solid var(--fg);
  border-radius:1rem;overflow:hidden}
.nav .elementor-menu-toggle+.elementor-nav-menu--dropdown>.elementor-nav-menu{display:block}

/* 엘리멘터 JS 가 열 때 인라인 display 를 넣으므로 위 기본값은 방해가 되지 않습니다 */
.nav .elementor-menu-toggle.elementor-active+.elementor-nav-menu--dropdown{display:block}
.nav .elementor-nav-menu--dropdown .elementor-item::after{content:none}

/* ---------- PC 하위 메뉴 ----------
   부모 항목의 «가운데» 에 맞춰 열리고, 안의 글자도 가운데로 놓습니다.
   폭은 가장 긴 글자에 맞춰 잡습니다 — 고정 폭을 주면 «선정 작품» 이 접힙니다. */
.nav .elementor-nav-menu--main .menu-item-has-children{position:relative}
/* 자리는 스크립트가 재서 인라인으로 넣습니다(스크립트 15번).
   다만 스크립트가 돌지 않아도 맞아야 합니다 — 캐시가 옛 파일을 물고 있거나
   스크립트가 막히는 경우가 있습니다. 그래서 CSS 만으로도 같은 자리에 놓습니다.

   메뉴 항목의 좌우 여백이 0 이라 li 의 왼쪽 변 = 상위 글자의 왼쪽 변입니다.
   상자를 24px 왼쪽으로 보내면, 상자 안 여백 24px 과 상쇄되어
   하위 글자가 상위 글자와 정확히 한 줄에 섭니다.
   transform 은 쓰지 않습니다 — 엘리멘터 열림 동작이 같은 속성을 씁니다. */
.nav .elementor-nav-menu--main .sub-menu{
  position:absolute;top:100%;
  /* left 는 SmartMenus 가 부모 li 의 왼쪽에 맞춰 씁니다 — 다투지 않습니다.
     상자만 24px 왼콽으로 밀어, 안쪽 여백 24px 과 상쇄시킵니다.
     그러면 하위 글자가 상위 글자와 한 줄에 섭니다. */
  margin:0!important;margin-left:-24px!important;
  transform:none!important;
  width:max-content;min-width:9rem;
  /* 브라우저는 ul 왼쪽에 40px 을 기본으로 넣습니다. 그것이 남으면
     글자가 오른쪽으로 밀려 좌우 여백이 달라 보입니다.
     엘리멘터가 padding-inline-start 로 다시 넣는 판이 있어
     짧은 표기와 논리 속성을 함께 못박습니다. */
  padding:.5rem 0!important;padding-inline:0!important;
  text-align:left;
  /* 목록 점을 지웁니다 — 지우지 않으면 상자 왼쪽 밖에 ○ 가 줄줄이 남습니다 */
  list-style:none;
  border:1.5px solid var(--fg);border-radius:1rem;overflow:hidden}
.nav .elementor-nav-menu--main .sub-menu li{list-style:none!important;margin:0!important;padding:0!important}
/* 글자는 상자 왼쪽에서 정확히 24px — 다른 여백은 전부 0 으로 못박습니다 */
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item{
  padding-left:24px!important;padding-right:24px!important;
  margin:0!important;text-indent:0!important;
  font-size:16px!important;line-height:1.5!important}
/* 상자 폭은 가장 긴 항목 + 좌우 24px 씩 — 최소 폭을 두면 짧은 메뉴에서 오른쪽만 비어
   «박스 안 좌우 여백이 다르다» 가 됩니다. 엘리멘터 기본 min-width(12em) 도 함께 끕니다. */
.nav .elementor-nav-menu--main .sub-menu{min-width:0!important;width:max-content!important}
/* 판의 색은 톤에 맡기지 않고 못박습니다.
   공지사항(/notice)처럼 본문 섹션이 없는 페이지에서는 색 기준이 푸터(갈색)로 잡혀
   글자가 크림이 되는데, 판 배경은 엘리멘터 기본값(흰색)으로 남아
   «흰 판에 크림 글자» 가 되어 아무것도 보이지 않았습니다.
   갈색 판 · 크림 글자 · 크림 테두리 — 첫 화면에서 보시는 그 모습으로 통일합니다. */
.nav .elementor-nav-menu--main .sub-menu{
  background:var(--brown)!important;
  border-color:var(--cream)!important}
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item,
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus,
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.highlighted,
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.elementor-item-active{
  color:var(--cream)!important;background:transparent!important}
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item{
  display:block;text-align:left;justify-content:flex-start;
  padding:.7rem 1.5rem;white-space:nowrap}
.nav .elementor-nav-menu--main .sub-menu .elementor-sub-item::after{content:none}

/* 마우스를 올렸을 때 생기던 회색 판을 없앱니다.
   엘리멘터가 위젯 설정에서 배경색을 넣기도 하고, 테마가 넣기도 합니다.
   메뉴에서 움직이는 것은 밑줄 하나뿐입니다. */
.nav .elementor-item,
.nav .elementor-item:hover,
.nav .elementor-item:focus,
.nav .elementor-item.highlighted,
.nav .elementor-item.elementor-item-active,
.nav .elementor-sub-item,
.nav .elementor-sub-item:hover,
.nav .elementor-sub-item:focus,
.nav .elementor-sub-item.highlighted,
.nav .elementor-nav-menu li:hover,
.nav .elementor-nav-menu li:focus-within{background:transparent!important;
  box-shadow:none!important}

/* ---------- 메뉴 글자색 ----------
   마우스를 올렸다고 색이 변하지 않습니다. 헤더 1·2 모두 같습니다.
   움직이는 것은 글자 아래 밑줄뿐입니다. */
.nav .elementor-item,
.nav .elementor-item:hover,
.nav .elementor-item:focus,
.nav .elementor-item.highlighted,
.nav .elementor-item.elementor-item-active,
.nav .elementor-sub-item,
.nav .elementor-sub-item:hover,
.nav .elementor-sub-item:focus,
.nav .elementor-sub-item.highlighted,
.nav .elementor-sub-item.elementor-item-active{color:var(--fg)}
/* ---------- 좁은 화면 «MENU» 버튼 ----------
   엘리멘터 버튼 위젯입니다. 누르면 메뉴 팝업이 열립니다.
   넓은 화면에서는 가로 메뉴가 보이므로 버튼을 감춥니다. */
.menubtn .elementor-button{background:none!important;border:0!important;
  padding:0!important;color:inherit!important;box-shadow:none!important;
  /* 헤더 높이는 이 버튼이 잡습니다 — 2.7.8 의 메뉴 토글과 똑같은 값입니다.
     태블릿 2.75rem(44px) · 모바일 3rem(48px).
     v3.6.x 에서 토글을 버튼 위젯으로 바꾸면서 이 높이를 잃어버려
     모바일 헤더가 64px → 43px, 태블릿 76px → 62px 로 줄었습니다. */
  display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;
  height:2.75rem!important;line-height:1!important}
.menubtn .elementor-button:hover,
.menubtn .elementor-button:focus{background:none!important;color:inherit!important}

@media (min-width:64.0625rem){
  .nav .elementor-menu-toggle,.nav .elementor-nav-menu--dropdown{display:none}
  .menubtn{display:none!important}
}
@media (max-width:64rem){
  .nav .elementor-nav-menu--main{display:none}
  /* 가로 메뉴 위젯 자체를 접습니다 — 자리를 차지하지 않게 */
  .elementor .e-con :is(.e-con,.e-con-inner)>.elementor-widget.nav{display:none}
  .nav .elementor-menu-toggle{display:flex;position:relative;z-index:95}
  /* 메뉴 판 — 화면을 꽉 채웁니다.
     헤더 높이만큼 위를 비워 두어 «MENU / ✕» 버튼이 가려지지 않게 합니다. */
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown{
    position:fixed;inset:0;z-index:90;
    width:100%;height:100dvh;max-height:100dvh;
    margin:0;border:0;border-radius:0;
    padding:var(--menu-top,4.5rem) 16px 3rem;
    overflow-y:auto;overscroll-behavior:contain}
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown .elementor-nav-menu{
    display:flex;flex-direction:column;align-items:flex-end;gap:0}
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown .menu-item{width:100%}
  /* 대메뉴 — 크게, 오른쪽 맞춤 */
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item{
    display:flex;align-items:center;justify-content:flex-start;gap:.5rem;
    padding:.55rem 0;font-size:1.5rem;line-height:1.5;font-weight:700;
    text-transform:none;letter-spacing:-.02em}
  /* 하위 메뉴 — 글자 크기는 대메뉴와 같고, 들여쓴 것처럼 안쪽으로 12px */
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown .sub-menu{
    display:none;margin:0;padding:0;list-style:none;position:static;
    border:0;border-radius:0;min-width:0;
    width:auto;transform:none;left:auto!important;right:auto!important}
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown li[data-open]>.sub-menu{display:block}
  .nav .elementor-menu-toggle+.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-sub-item{
    display:block;text-align:left;
    /* 왼쪽 맞춤. 하위 항목은 12px 안쪽으로 들여씁니다 */
    padding:.4rem 0 .4rem 12px;
    font-size:1.5rem;line-height:1.5;font-weight:400;
    text-transform:none;letter-spacing:-.02em;opacity:.82}
  /* 화살표 — 하위 메뉴가 있다는 표시. 펼치면 위를 가리킵니다. */
  .nav .navx{appearance:none;background:none;border:0;padding:0 0 0 .6rem;
    color:inherit!important;cursor:pointer;display:inline-flex;align-items:center;
    height:1.5em;flex:0 0 auto}
  /* 화살표 크기는 글자에 매답니다 — 대메뉴 글자가 커지면 화살표도 같이 커집니다.
     이전 .55em 의 두 배입니다. 색은 반드시 글자색을 물려받습니다. */
  /* 처음 크기는 버튼 기본 글자(13.33px)의 0.55em = 7.33px 이었습니다.
     20% 키운 8.8px 을 px 로 못박습니다 — em 은 어느 글자를 기준으로 삼는지
     헷갈려 크기가 엉뚱하게 나옵니다. */
  .nav .navx::before{content:"";display:block;width:8.8px;height:8.8px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2.5px) rotate(45deg);transition:transform .2s}
  .nav li[data-open]>.navrow .navx::before{transform:translateY(1.8px) rotate(-135deg)}
  .nav .navrow{display:flex;align-items:center;justify-content:flex-start;width:100%}
  .nav .navrow>.elementor-item{width:auto;flex:0 1 auto}
  /* 판이 열려 있는 동안 뒤 내용은 움직이지 않습니다 */
  :root[data-menu-open]{overflow:hidden}
  .elementor .e-con.topbar{position:fixed}
  /* 메뉴가 버거로 바뀌면 오른쪽 끝으로 보냅니다. */
  .nav{order:3}
  /* 남는 자리를 왼쪽으로 몰아, 언어 전환이 버거 바로 옆에 붙게 합니다.
     이렇게 하지 않으면 space-between 이 언어 전환을 화면 한가운데로 밀어냅니다.
     엘리멘터가 위젯마다 내보내는 margin:0 규칙과 무게가 같으면 밀리므로
     선택자를 한 겹 더 얹습니다. */
  .elementor .e-con-inner>.e-con.utils{margin-left:auto}
}

/* ---------- 6. 히어로 제목 ----------
   글자를 하나씩 흩뜨렸다 모으는 조립. 스크립트가 만든 span 을 받습니다. */
.giant .elementor-heading-title{text-wrap:balance}
.giant .ln{display:flex;flex-wrap:wrap;word-break:normal}
.giant .ln--b{justify-content:flex-end}
.giant span{display:inline-block;will-change:transform,opacity}
.giant .sp{width:.28em;flex:0 0 auto}
html[lang^="en"] .giant .elementor-heading-title{font-size:clamp(1.75rem,7.6vw,7rem);text-transform:uppercase}
.elementor .e-con.hero{min-height:100svh}

/* ---------- 7. 자동 채움 그리드 ----------
   엘리멘터 그리드 컨테이너는 열 개수를 숫자로만 지정합니다.
   화면 폭에 따라 열 수가 스스로 늘고 주는 repeat(auto-fill, minmax()) 는
   옵션으로 만들 수 없어 여기에 남깁니다. */
/* 생물 카드 14장 — PC 에서는 7열 두 줄로 위아래를 맞춥니다(어반콜라보 요청).
   폭에 맡기면(auto-fill) 창 크기에 따라 6·5열이 되어 줄이 어긋나 보입니다. */
.elementor .e-con.orbits{display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))}
/* 옛 사진 7장 — 열 수를 화면에 맡기면 마지막 줄에 한두 장만 남아
   오른쪽이 빕니다. 장수(7)에 맞춰 열을 못박고, 마지막 줄에 혼자 남는
   한 장은 남은 칸을 전부 차지하게 합니다.
     PC   7  (한 줄)
     태블릿 3 · 3 · 1(가로 전체)
     모바일 2 · 2 · 2 · 1(가로 전체) */
.elementor .e-con.plates{display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr))}
.elementor .e-con.parks,
.elementor .e-con.nums,
.elementor .e-con.foot-grid{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))}
.elementor .e-con.parks{grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.elementor .e-con.sub{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(min(17rem,100%),34%);align-items:start}
.elementor .e-con.sub>.e-con{width:auto;min-width:0}

/* 표 행 · 정의형 2단 — 첫 칸 폭이 내용에 따라 늘지 않아야 합니다 */
.elementor .e-con.tr{display:grid;
  grid-template-columns:minmax(5.5rem,13%) minmax(0,1.1fr) minmax(0,1fr);
  align-items:baseline;
  transition:background-color .18s,padding-left .18s,border-color 2s cubic-bezier(.4,0,.2,1)}
.elementor .e-con.tr>.elementor-widget{width:auto;min-width:0}
/* 오른쪽 설명은 제목과 같은 높이에서 시작합니다.
   기준선을 맞추면(align-items:baseline) 글자 크기 차이만큼 설명이 내려앉아
   제목보다 16px 아래에서 시작했습니다. 윗변을 맞추고, 남는 3~4px 은
   제목(32px/1.18)과 설명(15px/1.6)의 반쪽 행간 차이라 그만큼 끌어올립니다.
   PC 에서만 적용됩니다 — 태블릿부터는 위아래로 쌓이므로 위 여백이 필요합니다. */
.elementor .e-con.tr>.x{align-self:start;margin-top:-4px}
.elementor .e-con.say>.say-b>.say-p{align-self:start;margin-top:-3px}
.elementor .e-con.tr:hover{background:var(--card);padding-left:.75rem}
/* 공모주제 한 챕터 — 번호 · 제목 · 본문 세 칸.
   전에는 «번호 | 나머지» 두 칸이었고 본문 폭이 48ch 로 묶여 있어
   오른쪽 절반이 통째로 비었습니다. 위의 표(.tr)와 같은 세로선을 쓰면
   페이지 전체가 하나의 격자 위에 놓입니다. */
.elementor .e-con.say{display:grid;
  grid-template-columns:minmax(5.5rem,13%) minmax(0,1.1fr) minmax(0,1fr);
  align-items:baseline}
.elementor .e-con.say>*{width:auto;min-width:0}
/* say-b 는 제목과 본문을 감싸던 상자입니다.
   display:contents 로 두면 상자는 사라지고 제목과 본문이 각각 격자 칸에 놓입니다. */
.elementor .e-con.say-b{display:contents}
/* 세 칸일 때는 칸 자체가 읽기 폭을 정합니다 — 48ch 로 또 묶으면 오른쪽이 빕니다 */
.elementor .e-con.say>.say-b>.elementor-widget-text-editor{max-width:none}
/* 섹션 머리의 제목과 영문 라벨도 기준선을 맞춥니다.
   엘리멘터 컨테이너의 «항목 정렬» 에는 기준선 항목이 없어 여기에 둡니다.
   끝 정렬로 두면 큰 제목의 내림선 여유만큼 라벨이 10px 쯤 아래로 처집니다. */
.elementor .e-con.head{align-items:baseline}
.elementor .e-con.subhead{align-items:baseline}

/* 크기가 다른 두 글자가 나란히 놓이는 줄은 윗변이 아니라 기준선을 맞춥니다.
   윗변을 맞추면 작은 글자가 2px 쯤 떠 보입니다. */
.elementor .e-con.flora-row{display:grid;
  grid-template-columns:minmax(5.5rem,8rem) minmax(0,1fr);align-items:baseline}
.elementor .e-con.meta-row{display:grid;grid-template-columns:5rem 1fr;align-items:baseline}
.elementor .e-con.flora-row>.elementor-widget,
.elementor .e-con.meta-row>.elementor-widget{width:auto;min-width:0}
/* 읽기 폭 제한 — 위젯 옵션의 «최대 너비» 는 px 만 받아 글자 수 기준을 못 씁니다 */
.elementor .e-con.meta{max-width:46ch}
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.lede{max-width:46ch}

/* ---------- 소개 머리 — 글과 풍경 사진 ----------
   글이 46ch 에서 끊기고 오른쪽이 비어 있었습니다.
   아래 Aim 표(.tr)와 같은 격자를 써서, 글은 1~2칸 사진은 3칸에 놓습니다.
   사진의 왼쪽 변이 Aim 설명 칸의 왼쪽 변과 정확히 맞습니다. */
.elementor .e-con.about-top{display:grid;
  grid-template-columns:minmax(5.5rem,13%) minmax(0,1.1fr) minmax(0,1fr);
  align-items:start;margin:0 0 8px}
.elementor .e-con.about-top>.about-text{grid-column:1 / 3;width:auto;min-width:0}
.elementor .e-con.about-top>.about-img{grid-column:3;width:auto;min-width:0}
.about-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.about-img .widget-image-caption b{font-weight:700}
.about-img .widget-image-caption span{color:var(--fg-2)}
.elementor .e-con.say-b>.elementor-widget-text-editor{max-width:48ch}
.elementor :is(.e-con,.e-con-inner)>.elementor-widget.orb-p{max-width:24ch}

/* 생물 카드는 좁은 화면에서 열 수를 못박습니다.
   자동 채움에 맡기면 한 장이 화면 폭만큼 커져 원형 사진이 지나치게 큽니다.
   태블릿 3열 · 모바일 2열입니다.
   (엘리멘터 브레이크포인트와 같은 1024px / 767px 을 씁니다)
   열 사이 간격은 여기가 아니라 «생물 카드 묶음» 컨테이너의 «레이아웃 › 간격»
   에 태블릿 16px · 모바일 12px 로 들어 있습니다. 엘리멘터에서 고치십시오. */
@media (max-width:64rem){
  .elementor .e-con.orbits{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 태블릿 3 · 3 · 1 — 일곱 번째가 남은 세 칸을 다 차지합니다 */
  .elementor .e-con.plates{grid-template-columns:repeat(3,minmax(0,1fr))}
  .elementor .e-con.plates>.plate:last-child{grid-column:1 / -1}
  /* 줄 전체를 차지하는 한 장은 4:3 으로 두면 화면을 삼킵니다.
     가로로 긴 사진이라 21:9 로 잘라 띠처럼 놓습니다.
     일곱 장이 한 줄에 들어가는 PC 에서는 다른 장과 같은 4:3 그대로입니다. */
  .elementor .e-con.plates>.plate--wide .plate-img img{aspect-ratio:21/9}
  .elementor .e-con.sub{grid-template-columns:1fr}
  .elementor .e-con.tr{grid-template-columns:minmax(0,1fr)}
  .elementor .e-con.tr>.k{order:-1}
  /* 위아래로 쌓이면 끌어올릴 이유가 없습니다 — 위 여백을 되돌립니다 */
  .elementor .e-con.tr>.x{margin-top:8px}
  .elementor .e-con.say>.say-b>.say-p{margin-top:0}
  /* 좁아지면 소개의 글과 사진, 공모주제의 세 칸은 위아래로 쌓습니다 */
  .elementor .e-con.about-top{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .elementor .e-con.about-top>.about-text,
  .elementor .e-con.about-top>.about-img{grid-column:1}
  .about-img img{aspect-ratio:16/9}
  /* 두 칸으로 줄면 제목과 본문은 다시 한 상자에 담깁니다 */
  .elementor .e-con.say{grid-template-columns:minmax(5.5rem,13%) minmax(0,1fr)}
  .elementor .e-con.say-b{display:block;grid-column:2}
  .elementor .e-con.say-b>.elementor-widget-text-editor{max-width:48ch}
}
@media (max-width:47.9375rem){
  /* 모바일 헤더는 64px 입니다. 위아래 여백 8px 에 이 버튼 48px 이 들어갑니다.
     헤더를 줄이면서 오히려 터치 영역은 44 → 48px 로 넓혔습니다.
     버튼은 바탕이 없어 화면에는 «MENU» 글자만 보이므로 커져도 티가 나지 않습니다. */
  .nav .elementor-menu-toggle{height:3rem}
  .menubtn .elementor-button{height:3rem!important}
  .elementor .e-con.orbits{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 모바일 2 · 2 · 2 · 1 */
  .elementor .e-con.plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 칸이 좁아진 만큼 원형 사진의 후광도 줄여 옆 칸과 겹치지 않게 합니다 */
  .orb .ring{box-shadow:0 0 0 4px var(--halo), 0 0 20px 5px var(--halo)}
  .orb:hover .ring{box-shadow:0 0 0 4px var(--halo), 0 0 28px 9px var(--halo)}
}
@media (max-width:44rem){
  .elementor .e-con.say{grid-template-columns:1fr}
  .elementor .e-con.say-b{display:block;grid-column:1}
  .elementor .e-con.say-b>.elementor-widget-text-editor{max-width:48ch}
  .giant .ln--b{justify-content:flex-start}
}

/* ---------- 8. 고정 비율 사진 ----------
   이미지 위젯에는 «비율» 옵션이 없어 잘림 규칙만 여기서 정합니다. */
.orb .ring{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative;
  background:var(--card);
  box-shadow:0 0 0 5px var(--halo), 0 0 44px 12px var(--halo);
  transition:box-shadow .4s,transform .4s cubic-bezier(.2,.9,.25,1)}
.orb:hover .ring{transform:translateY(-6px);box-shadow:0 0 0 5px var(--halo), 0 0 66px 22px var(--halo)}
.orb .ring .elementor-widget-container,.orb .ring figure{height:100%}
.orb .ring img{width:100%;height:100%;object-fit:cover;border-radius:0}
.elementor .e-con.orb--text .ring{aspect-ratio:1;border-radius:50%}

/* ---------- 10. 사진 슬라이드 ----------
   큰 사진 한 장을 좌우로 넘겨 봅니다.
   화살표와 점은 사진 «안» 에 얹히고, 설명은 사진 아래에 놓입니다.
   화살표·점은 스크립트가 만들어 넣습니다(스크립트 7번).
   엘리멘터에는 이런 위젯이 없어 여기서 만듭니다. */
.slider{position:relative}
.slider .slides{display:flex;flex-wrap:nowrap;align-items:flex-start;
  overflow:hidden;position:relative}
/* 엘리멘터는 컨테이너의 자식 위젯을 100% 폭으로 만듭니다.
   여기서는 한 장이 정확히 한 화면을 차지해야 하므로 줄어들지 않게 못박습니다. */
.elementor .e-con.slides>.elementor-widget.slide,
.slider .slide{flex:0 0 100%;width:100%;max-width:100%;
  transition:transform .5s cubic-bezier(.4,0,.2,1)}
.slider .slide img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
/* 설명은 사진 아래. 첫 줄 굵은 글씨는 연도·시점 */
.slider .slide .widget-image-caption b{font-weight:700}
.slider .slide .widget-image-caption span{color:var(--fg-2)}

/* 화살표 — 사진 안쪽 좌우 */
.slider .sl-nav{position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px;pointer-events:none}
.slider .sl-arrow{pointer-events:auto;
  width:44px;height:44px;display:grid;place-items:center;
  border:0;border-radius:999px;cursor:pointer;
  background:rgba(23,22,15,.42);color:var(--cream);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background-color .16s,transform .16s}
.slider .sl-arrow:hover{background:rgba(23,22,15,.68)}
.slider .sl-arrow:active{transform:scale(.94)}
.slider .sl-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.slider .sl-arrow[disabled]{opacity:.35;cursor:default}

/* 점 — 사진 안쪽 아래 가운데 */
.slider .sl-dots{position:absolute;left:0;right:0;
  display:flex;justify-content:center;gap:8px;pointer-events:none}
.slider .sl-dot{pointer-events:auto;
  width:8px;height:8px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(246,241,231,.5);transition:background-color .2s,width .2s}
.slider .sl-dot[aria-current="true"]{background:var(--cream);width:22px}

/* 작은 사진 두 장 — 반씩 나눠 놓습니다 */
/* 칸 수는 작은 사진 장수를 그대로 따릅니다(스크립트가 --thumb-n 을 넣습니다).
   1fr 1fr 로 못박아 두면 사진을 하나 빼는 순간 절반이 빕니다. */
.aerial-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.aerial-img .widget-image-caption b{font-weight:700}
.aerial-img .widget-image-caption span{color:var(--fg-2)}
.thumbs{display:grid;grid-template-columns:repeat(var(--thumb-n,2),minmax(0,1fr));align-items:start}
.thumbs .thumb{cursor:pointer}
.thumbs .thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:opacity .2s,outline-color .2s;
  outline:2px solid transparent;outline-offset:2px}
.thumbs .thumb:hover img{opacity:.86}
.thumbs .thumb[aria-current="true"] img{outline-color:var(--fg)}
.thumbs .thumb .widget-image-caption b{font-weight:700}
.thumbs .thumb .widget-image-caption span{color:var(--fg-2)}
@media (max-width:47.9375rem){
  .slider .sl-arrow{width:40px;height:40px}
  .slider .sl-nav{padding:0 8px}
}
/* ---------- 11-1. 메뉴 팝업 ----------
   내용은 엘리멘터 팝업 템플릿(템플릿 › Popups)에 들어 있습니다.
   여기에는 엘리멘터 옵션으로 표현할 수 없는 것만 둡니다. */
/* 팝업 판은 화면을 꽉 채웁니다.
   팝업 설정에도 «화면에 맞춤» 을 넣었지만, 엘리멘터가 그 설정으로 CSS 를
   다시 만들기 전까지는 기본(내용 높이)으로 나옵니다. 여기서 직접 채웁니다. */
.elementor-popup-modal:has(.popmenu){padding:0!important}
.elementor-popup-modal:has(.popmenu) .dialog-widget-content{
  width:100vw!important;max-width:100vw!important;
  height:100dvh!important;min-height:100dvh!important;max-height:none!important;
  margin:0!important;border-radius:0!important;box-shadow:none!important;
  background:var(--brown)!important}
.elementor-popup-modal:has(.popmenu) .dialog-message{
  height:100%!important;max-height:none!important;padding:0!important;overflow:auto}
/* 닫기 단추 — 22px 에서 20% 키운 26.4px.
   팝업 설정값은 처음 설치 때 한 번만 심으므로 여기서도 못박습니다. */
.elementor-popup-modal:has(.popmenu) .dialog-close-button{color:var(--cream)!important;
  font-size:26.4px!important}
.elementor-popup-modal:has(.popmenu) .dialog-close-button i{font-size:inherit!important}
.elementor-popup-modal:has(.popmenu) .dialog-close-button svg{width:26.4px!important;height:26.4px!important}
.elementor-popup-modal:has(.popmenu) .dialog-close-button i,
.elementor-popup-modal:has(.popmenu) .dialog-close-button svg{color:var(--cream)!important;fill:var(--cream)!important}
/* 글자색 — 상위·하위 모두 크림색. 하위는 크기도 상위와 같습니다. */
.popnav .elementor-item,.popnav .elementor-sub-item,
.popnav .elementor-item:hover,.popnav .elementor-sub-item:hover,
.popnav .elementor-item:focus,.popnav .elementor-sub-item:focus,
.popnav .elementor-item.elementor-item-active,.popnav .elementor-sub-item.elementor-item-active,
.popnav .sub-arrow,.popnav .sub-arrow i{color:var(--cream)!important}
/* 메뉴 팝업(모바일)의 하위 글자는 18px 입니다.
   PC 드롭다운(.nav)의 16px 와는 따로 놉니다 — 선택자가 서로 달라
   한쪽을 고쳐도 다른 쪽이 따라 움직이지 않습니다.
   전에는 inherit 로 두어 엘리멘터의 하위 메뉴 글자 크기를 그대로 받았고,
   그래서 팝업 안에서 글자가 작게 나왔습니다. */
.popnav .elementor-sub-item{font-size:18px!important;line-height:1.5!important;
  font-weight:400!important;opacity:.85}
.popnav .elementor-nav-menu--main{width:100%}
.popnav .elementor-nav-menu{display:block;width:100%}
.popnav .elementor-item{justify-content:flex-start!important;
  padding-left:0!important;padding-right:0!important}
/* 하위 메뉴 — 판 안에서 아래로 펼쳐집니다. 12px 안쪽으로 들여씁니다. */
.popnav .sub-menu{position:static!important;transform:none!important;
  width:auto!important;min-width:0!important;margin:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  padding:0 0 8px 12px!important;list-style:none}
.popnav .sub-menu .elementor-sub-item{justify-content:flex-start!important;
  text-align:left!important;padding-left:0!important}
.popnav .elementor-item:hover,.popnav .elementor-sub-item:hover,
.popnav li:hover{background:transparent!important}

/* ---------- 12. 대상지 ----------
   왼쪽에 지도, 오른쪽에 개요. 절반씩 나눕니다.
   지도만 덩그러니 놓이면 오른쪽이 비어 «어디서 튀어나온 것» 처럼 보입니다. */
/* 지도와 개요도 페이지 전체와 같은 세로선 위에 놓습니다.
   지도는 1~2칸, 개요는 3칸 — 소개의 글·사진, Aim 표와 왼쪽 변이 맞습니다.
   절반씩 자르는 것보다 페이지가 하나로 읽힙니다. */
.elementor .e-con.site{display:grid;
  grid-template-columns:minmax(5.5rem,13%) minmax(0,1.1fr) minmax(0,1fr);
  align-items:start}
.elementor .e-con.site>.site-map{grid-column:1 / 3;grid-row:1;width:auto;min-width:0}
/* 세로로 긴 항공사진 — 안내도와 같은 높이에서 시작합니다 */
.elementor .e-con.site>.site-photo{grid-column:3;grid-row:1 / 3;width:auto;min-width:0}
.site-img img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.site-img .widget-image-caption b{font-weight:700}
.site-img .widget-image-caption span{color:var(--fg-2)}
.elementor .e-con.site>.site-info{grid-column:1 / 3;grid-row:2;width:auto;min-width:0;
  margin-top:44px}


/* 지도 — 절반 폭 안에서 원본 가로세로 비를 지킵니다.
   비율(--tl-ar)은 스크립트가 임베드 코드의 data-original-* 로 정합니다.
   화면 높이의 68% 를 넘지 않게 눌러, 지도 하나가 한 화면을 삼키지 않습니다. */
.elementor .e-con.tl-frame{position:relative;
  width:min(100%, calc(68vh * var(--tl-ar, 1.5)));
  aspect-ratio:var(--tl-ar, 1.5);
  background:var(--card);border:1px solid var(--rule-2);border-radius:2px;overflow:hidden}
.elementor .e-con.tl-frame .tl-if{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.elementor .e-con.tl-frame[data-ready]{background:transparent;border-color:transparent}
/* 지도 설명 — 사진 슬라이드 설명과 같은 모양 */
.tl-cap b{font-weight:700}
.tl-cap span{color:var(--fg-2)}
.tl-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;margin:0;color:var(--fg-2);font-size:14px;line-height:1.7}
.tl-fail a{border-bottom:1px solid currentColor}

/* 좁은 화면에서는 위아래로 쌓습니다. 지도가 먼저 옵니다. */
@media (max-width:64rem){
  .elementor .e-con.site{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .elementor .e-con.site>.site-map,
  .elementor .e-con.site>.site-photo,
  .elementor .e-con.site>.site-info{grid-column:1;grid-row:auto;margin-top:0}
  /* 좁은 화면에서 2:3 은 화면 두 배 높이가 됩니다. 3:4 로 눕힙니다. */
  .site-img img{aspect-ratio:3/4}
  /* 가로로 누운 태블릿에서는 폭을 다 쓰면 지도 하나가 화면을 거의 덮습니다.
     세로로도 화면의 70% 를 넘지 않게 폭을 함께 줄입니다. */
  .elementor .e-con.tl-frame{
    width:min(100%, calc(70vh * var(--tl-ar, 1.5)));
    aspect-ratio:max(var(--tl-ar, 1.5), 1.2)}
}
@media (max-width:767px){
  .elementor .e-con.tl-frame{aspect-ratio:min(var(--tl-ar, 1.5), 1.15)}
}

@media (prefers-reduced-motion:reduce){
  .slider .slide{transition:none}
}

.plate{transition:transform .4s cubic-bezier(.2,.9,.25,1)}
.plate:hover{transform:translateY(-4px)}
.plate-img img{width:100%;aspect-ratio:4/3;object-fit:cover}


.elementor .e-con.hero-plate{position:relative;overflow:hidden;border-radius:2px;background:var(--fg)}
.hp-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.hp-img .widget-image-caption{position:absolute;left:0;right:0;bottom:0;
  padding:2rem 1.5rem 1rem;
  background:linear-gradient(0deg,rgba(20,16,10,.82),rgba(20,16,10,0))}

/* ---------- 9. 번호 매기는 목록 ----------
   아이콘 리스트에는 자동 번호 옵션이 없습니다. */
.docs .elementor-icon-list-items{counter-reset:d}
.docs .elementor-icon-list-item{counter-increment:d;
  display:grid;grid-template-columns:2rem minmax(0,1fr);gap:1rem;
  padding:.75rem 0;border-bottom:1px solid var(--rule-2)}
.docs .elementor-icon-list-item::before{content:counter(d,decimal-leading-zero);
  font-size:.6875rem;font-weight:700;letter-spacing:.06em;color:var(--fg-2);line-height:2.1}

/* 막대 아래 설명 — 구간 라벨이 상태를 이미 말하므로 이유만 한 줄로 둡니다 */
.cal-note{max-width:60ch}

/* ---------- 10. 카운터 ----------
   숫자와 단위를 왼쪽으로 붙입니다. 엘리멘터 기본은 가운데 정렬입니다. */
.cnt .elementor-counter-number-wrapper{justify-content:flex-start;align-items:baseline;
  font-variant-numeric:tabular-nums}
.cnt .elementor-counter-number-prefix{display:none}
.cnt .elementor-counter-number-suffix{flex-grow:0;font-size:.46em;font-weight:600;margin-left:.15em}
.n,.chip,.hero-date,.tr .v,.park-b,.big{font-variant-numeric:tabular-nums}

/* ---------- 11. 철새 도래기 막대 ----------
   월 12칸과 그 아래 구간 라벨을 스크립트가 만듭니다. 위젯이 아니라 옵션이 없습니다.
   버튼처럼 보이지 않도록 모서리를 직각으로 두고, 칸 사이는 1px 로만 끊어
   같은 상태의 달이 하나의 기간으로 읽히게 합니다. */
.elementor .e-con.cal-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.cal-bar>.m{grid-row:1;height:clamp(2.75rem,3.6vw,3.25rem);border-radius:0;
  background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:700;color:var(--fg-2);font-variant-numeric:tabular-nums;
  transition:background-color 2s cubic-bezier(.4,0,.2,1),color 2s cubic-bezier(.4,0,.2,1)}
.cal-bar>.m[data-peak]{background:var(--fg);color:var(--bg)}
/* 구간 라벨 — 위쪽 선이 그 기간의 폭을 그대로 표시합니다 */
.cal-bar>.z{grid-row:2;margin-top:.5rem;padding-top:.5rem;
  border-top:1.5px solid var(--fg);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center;
  transition:border-color 2s cubic-bezier(.4,0,.2,1)}
.cal-bar>.z b{font-size:.8125rem;font-weight:700;letter-spacing:-0.01em;color:var(--fg);
  font-variant-numeric:tabular-nums}
.cal-bar>.z span{font-size:.6875rem;font-weight:700;letter-spacing:.1em;color:var(--fg-2)}
.cal-bar>.z--soft{border-top-width:1px;border-top-color:var(--rule)}
.cal-bar>.z--soft b{color:var(--fg-2)}

/* ---------- 12. 토스트 ----------
   화면에 떠 있는 임시 안내. 위젯이 아닙니다. */
.elementor .e-con.toast{position:fixed;left:50%;bottom:2rem;z-index:250;width:auto;
  transform:translate(-50%,1.25rem);
  background:var(--ink);color:var(--cream);padding:.75rem 1.5rem;border-radius:999px;
  font-size:.8125rem;line-height:1.5;max-width:calc(100vw - 2*var(--e));text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.elementor .e-con.toast[data-on]{opacity:1;transform:translate(-50%,0)}

/* ---------- 13. 소소한 것들 ---------- */
.foot-big .elementor-heading-title{text-wrap:nowrap}
/* 푸터 큰 로고 — 흰색 SVG 를 푸터 안쪽 폭에 꽉 채웁니다.
   SVG 에는 width·height 속성이 없어 비율을 적어 두어야 다 받는 순간
   푸터가 덜컹 내려앉지 않습니다. 600 × 112.7 은 로고 파일의 viewBox 입니다. */
/* 폭은 위젯의 «이미지 크기» 설정이 정합니다(PC·태블릿 300px · 모바일 240px).
   여기서는 비율만 잡아 둡니다. width 를 여기에 적으면 위젯 설정을 덮어씁니다. */
.foot-big img{height:auto;aspect-ratio:600/112.7}
.tr .v small{font-size:.52em;font-weight:600;letter-spacing:0}
.park-b b i,.big b i{font-style:normal;font-size:.44em;font-weight:600;margin-left:.2em;color:var(--fg-2)}
.nm-l span{letter-spacing:.03em}
.fg a{border-bottom:1px solid rgba(246,241,231,.44);padding-bottom:1px}
.fg a:hover{color:var(--blue);border-bottom-color:var(--blue)}

@media (prefers-reduced-motion:reduce){
  .elementor *,.elementor *::before,.elementor *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .giant span{transform:none !important;opacity:1 !important}
}