/* Pretendard 웹폰트 — 가변 다이나믹 서브셋 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
/* Roboto 웹폰트 (영문·숫자 우선) */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/* ============================================
   common.css — 모든 페이지 공통
   색상 변수 · 리셋 · 원스크롤 · 헤더 · 메가메뉴 · 푸터
============================================ */

/* ===== CSS 변수 ===== */
:root{
  --orange:#2A8BCC;          /* 본문 포인트(헤더와 통일된 파랑) */
  --orange-soft:#5aa6dd;
  --sky:#2A8BCC;             /* 헤더 포인트 하늘색 */
  --ink:#1a1a1a;             /* 본문 검정 */
  --ink-soft:#555;
  --beige:#f6f4ef;           /* 히어로 우측 (실제 사이트 색) */
  --section-bg:#f8f8f8;      /* M.C.M·블로그 (실제 사이트 색) */
  --line:#e6e2da;
  --bg:#ffffff;
  --font:'Roboto','Pretendard Variable','Pretendard','Pretendard Fallback','Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --max:1380px;
  /* New/Update 칩 — 값 불변. GNB·메가에서도 쓰려고 :root 로 옮겼다
     (.ez-picker 스코프에 두면 그 후손이 아닌 곳에서 var() 가 해석되지 않는다) */
  --picker-chip-new-bg:#c0392b;
  --picker-chip-new-fg:#ffffff;
  --picker-chip-upd-bg:#1e7a45;
  --picker-chip-upd-fg:#ffffff;
  --header-h:84px;
}

/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{max-width:100%;display:block;}

/* ===== 원스크롤 (JS 풀페이지 제어 — common.js) ===== */
html{scroll-behavior:smooth;overflow-x:hidden;}
/* 풀페이지 섹션: 한 화면 꽉 (영상·M.C.M) */
/* 풀페이지 섹션: 영상과 동일하게 '정확히' 한 화면 높이로 고정 (투스크롤 방지) */
.vh-full{height:calc(100vh - var(--header-h));min-height:0;
  display:flex;flex-direction:column;justify-content:center;}
.section.vh-full{padding-top:40px;padding-bottom:40px;}
.vh-half{min-height:50vh;display:flex;flex-direction:column;justify-content:center;}
.section.vh-half{padding-top:40px;padding-bottom:40px;}
@media(max-width:768px){
  .vh-full,.vh-half{height:auto;min-height:auto;overflow:visible;display:block;}
}

/* ===== 공통 헬퍼 ===== */
.is-hidden{display:none !important;}
/* 전체폭 배경 (가운데 정렬 .section에서도 양옆까지 채움) */
.bg-beige{position:relative;}
.bg-beige::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:100vw;background:var(--section-bg);z-index:0;}
.bg-beige > *{position:relative;z-index:1;}

/* ===== HEADER ===== */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;justify-content:flex-start;padding:0 max(50px, 9%);
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:box-shadow .3s ease;
}
.header.is-scrolled{box-shadow:0 2px 12px rgba(0,0,0,.12);}
@media (prefers-reduced-motion:reduce){ .header{transition:none;} }
.logo{display:flex;align-items:center;}
.logo img{height:34px;width:auto;display:block;}
.logo-mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:17px;color:#fff;background:linear-gradient(135deg,var(--orange) 0%,#4a3aff 100%);
  box-shadow:0 4px 16px rgba(74,58,255,.3);}
.nav{display:flex;gap:50px;justify-content:center;
  position:absolute;top:0;height:100%;align-items:center;
  left:0;right:0;pointer-events:none;}
.nav-item{pointer-events:auto;}
.nav-item{}
.nav-item > a{font-size:18px;font-weight:500;color:var(--ink);position:relative;
  padding:30px 0;letter-spacing:-.3px;display:inline-block;}
.nav-item > a::after{content:"";position:absolute;left:-14px;right:-14px;bottom:0;height:4px;background:var(--sky);
  border-radius:3px 3px 0 0;z-index:120;transform:scaleX(0);transform-origin:center;transition:transform .26s ease;}
.nav-item:hover > a::after{transform:scaleX(1);}
.nav-item:hover > a{color:var(--sky);}

/* ===== 메가 패널 (전체폭 펼침 · 항목 가로 배치) ===== */
.mega{
  position:fixed; top:calc(var(--header-h) - 1px); left:0; right:0;
  background:#fff;
  box-shadow:0 24px 40px -22px rgba(0,0,0,.18);
  padding:30px 50px;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .26s ease, transform .26s ease, visibility .26s;
  z-index:90;
}
.nav-item:hover .mega{opacity:1; visibility:visible; transform:translateY(0);}
.mega-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; justify-content:center; align-items:center;
  gap:18px; flex-wrap:wrap;
}
.mega a{
  font-size:16px; font-weight:500; color:var(--ink);
  padding:12px 26px; border-radius:10px; white-space:nowrap;
  transition:background .18s, color .18s;
}
.mega a::after{display:none;}
.mega a:hover{color:var(--sky);}

/* ===== UIRestyler 포털 진입 pill (검색 아이콘 옆) ===== */
.uir-cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:38px;padding:0 20px;box-sizing:border-box;line-height:1;
  border-radius:999px;
  font-family:'Pretendard Variable','Pretendard','Pretendard Fallback','Roboto','Noto Sans KR',sans-serif;
  font-size:16px;font-weight:500;letter-spacing:-.2px;
  color:#256ef4;background:#fff;border:1.5px solid #256ef4;
  transition:background .18s, color .18s;
  white-space:nowrap;
}
.uir-cta:hover{background:#256ef4;color:#fff;}
/* .lang a:first-child 규칙이 pill 색을 덮는 것 방지 (강제 지정) */
.lang .uir-cta{color:#256ef4 !important;font-weight:500 !important;}
.lang .uir-cta:hover{color:#fff !important;}

/* ===== 언어 전환 ===== */
.lang{display:flex;gap:14px;align-items:center;font-size:14px;color:#999;margin-left:auto;}
.lang a:first-child{color:var(--ink);font-weight:600;}
.lang span{color:#ccc;}

@media(max-width:1024px){.header{padding:0 22px;}.nav{gap:24px;}.nav-item > a{font-size:15px;}.mega{padding:24px;}}
/* 모바일 — 데스크톱 메뉴만 숨긴다. 검색은 남기고 pill 만 감춘다.
   .lang 은 아래쪽에서 다시 flex 로 선언되므로 여기서 숨겨도 먹지 않는다.
   자동 여백을 .lang 하나만 남겨 검색·햄버거를 우측에 붙인다. */
@media(max-width:768px){.nav{display:none;}.uir-cta{display:none;}.nav-burger{margin-left:6px;}}

/* ===== 공통 섹션 헤더 ===== */
.section{max-width:var(--max);margin:0 auto;padding:90px 50px;}
.sec-head{text-align:center;margin-bottom:50px;}
.sec-head .e{color:var(--orange);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;}
.sec-head h2{font-size:clamp(26px,3vw,38px);font-weight:800;letter-spacing:-1px;color:var(--ink);}
@media(max-width:1024px){.section{padding:60px 22px;}}

/* ===== FOOTER ===== */
/* ===== 푸터 (리스타일러와 통일 · footer-v2 3단 구조) ===== */
.footer{background:#222222;color:#9a9a9a;}
.footer-v2{padding:56px clamp(24px,6vw,100px) 44px;background:#222222;}
.footer-brand{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;}
.footer-social{max-width:var(--max);margin:0 auto 40px;display:flex;gap:14px;}
.footer-social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#c7ccd4;background:rgba(255,255,255,.07);transition:background .2s ease,color .2s ease;}
.footer-social a svg{width:20px;height:20px;fill:currentColor;flex:none;}
.footer-social a:hover{background:rgba(255,255,255,.16);color:#fff;}
.footer-cols{max-width:var(--max);margin:0 auto 48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;}
.f-col{display:flex;flex-direction:column;gap:14px;}
.f-col-title{font-size:16px;font-weight:700;color:#fff;margin-bottom:4px;}
.f-col a{font-size:15px;color:#b9bec7;transition:color .15s ease;width:fit-content;}
.f-col a:hover{color:#fff;}
.footer-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(255,255,255,.12);padding-top:28px;}
.fb-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
.fb-legal{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.fb-legal span,.fb-legal a{font-size:14px;color:#9aa0ab;}
.fb-legal span{cursor:default;}
.fb-legal .fb-strong{color:#e8eaee;font-weight:700;}
.fb-legal a{transition:color .15s ease;}
.fb-legal a:hover{color:#fff;}
.fb-lang{margin-left:auto;font-size:14px;font-weight:600;color:#d5d8de;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:9px 18px;}
.footer-v2 .footer-info{margin-top:20px;font-size:13.5px;color:#7e8490;line-height:1.7;}
@media(max-width:768px){.footer-cols{grid-template-columns:1fr;gap:32px;}.fb-row{gap:16px;}}

/* ===== 등장 애니메이션 ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s;}
.reveal.in{opacity:1;transform:none;}

/* ============================================================
   [추가] 데스크탑 폭 고정 + 모바일 햄버거 (끝에 추가)
   ※ 거의 append-only. 폭 고정은 1025 이상 한정이고,
     769~1024 는 태블릿 전용 레이아웃이 담당한다.
============================================================ */

/* 데스크탑 최소 폭 고정 — 1025 이상 한정.
   769~1024 는 전용 레이아웃이 따로 있어 폭을 고정하지 않는다.
   그 구간의 루트 가로 넘침 허용 규칙도 함께 걷어냈다. */
@media(min-width:1025px){ body{min-width:1024px;} }

/* ===== 햄버거 버튼 (데스크탑 숨김 / ≤860 노출) ===== */
.nav-burger{
  display:none;width:36px;height:36px;flex-direction:column;justify-content:center;gap:6px;
  border:0;background:none;cursor:pointer;padding:0;
}
.nav-burger span{display:block;width:26px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

/* ===== 모바일 슬라이드 패널 (common.js가 .nav/.lang을 복제해 생성) ===== */
.m-nav-backdrop{
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  background:rgba(0,0,0,.4);z-index:94;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.m-nav-backdrop.open{opacity:1;visibility:visible;}
.m-nav{
  position:fixed;top:var(--header-h);right:0;bottom:0;width:min(82vw,360px);
  background:#fff;z-index:95;transform:translateX(100%);
  transition:transform .3s ease;overflow-y:auto;
  box-shadow:-14px 0 40px -18px rgba(0,0,0,.35);padding:8px 0 30px;
}
.m-nav.open{transform:translateX(0);}
.m-nav-inner{display:flex;flex-direction:column;}
.m-nav .m-link,.m-nav .m-group-head{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:16px 24px;font-size:17px;font-weight:600;color:#212121;
  background:none;border:0;border-bottom:1px solid var(--line);
  text-align:left;font-family:inherit;cursor:pointer;
}
.m-nav .m-group-head i{
  width:9px;height:9px;border-right:2px solid #9a9a9a;border-bottom:2px solid #9a9a9a;
  transform:rotate(45deg);transition:transform .25s ease;flex:none;margin-right:3px;
}
.m-nav .m-group.open .m-group-head i{transform:rotate(-135deg);}
.m-nav .m-sub{max-height:0;overflow:hidden;background:#f7f7f7;transition:max-height .3s ease;}
.m-nav .m-group.open .m-sub{max-height:360px;}
.m-nav .m-cta{color:#256ef4;}
.m-nav .m-sub a{
  display:block;padding:13px 24px 13px 40px;font-size:15px;color:#212121;
  border-bottom:1px solid var(--line);
}

/* 패널 열림 시 배경 스크롤 잠금 */
html.m-nav-open{overflow:hidden;}

/* ===== 분기점 (≤860 = 모바일 햄버거) ===== */
@media(max-width:768px){
  body{min-width:0;}        /* ★ 폭 고정 해제 — 안 하면 폰에서도 1024 고정 */
  .nav-burger{display:flex;}
}
@media(min-width:769px){
  .m-nav,.m-nav-backdrop{display:none;}   /* 데스크탑은 패널 비활성 */
}

/* ===== 언어 전환 — 지구본 아이콘 + 드롭다운 (하이닉스식) ===== */
.lang{position:relative;margin-left:auto;display:flex;align-items:center;gap:6px;}
/* ===== 검색 (돋보기 버튼 + 상단 검색바 오버레이) ===== */
.search-btn{display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border:0;background:none;cursor:pointer;
  color:#444;border-radius:50%;transition:background .15s,color .15s;}
.search-btn:hover{background:#f2f4f7;color:var(--sky);}
.search-btn svg{width:26px;height:26px;display:block;stroke-width:1.4;}

.search-overlay{position:fixed;inset:0;z-index:200;
  background:rgba(255,255,255,.98);
  opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s;}
.search-overlay.open{opacity:1;visibility:visible;}
.search-bar{max-width:760px;margin:0 auto;padding:46px 24px 0;
  display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);}
.search-bar input{flex:1;border:0;outline:0;background:none;
  font-size:30px;font-weight:600;color:var(--ink);padding:8px 0;font-family:var(--font);}
.search-bar input::placeholder{color:#bbb;font-weight:500;}
.search-ico{width:28px;height:28px;color:var(--ink);flex:none;}
.search-close{width:40px;height:40px;border:0;background:none;cursor:pointer;
  color:#444;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;}
.search-close:hover{background:#f2f4f7;}
.search-close svg{width:26px;height:26px;}
.search-results{max-width:760px;margin:0 auto;padding:18px 24px 60px;
  max-height:calc(100vh - 160px);overflow:auto;}
.search-results .sr-item{display:block;padding:16px 12px;border-radius:10px;
  border-bottom:1px solid var(--line);transition:background .15s;}
.search-results .sr-item:hover{background:#f6f8fb;}
.search-results .sr-crumb{font-size:12.5px;color:#9aa1ab;margin-bottom:4px;}
.search-results .sr-title{font-size:17px;font-weight:700;color:var(--ink);}
.search-results .sr-snip{font-size:14px;color:#666;margin-top:5px;line-height:1.5;}
.search-results .sr-snip mark{background:#dcebf8;color:var(--sky);padding:0 2px;border-radius:3px;}
.search-results .sr-empty{padding:40px 12px;color:#999;font-size:15px;text-align:center;}
@media(max-width:768px){
  .search-bar{padding-top:30px;}
  .search-bar input{font-size:22px;}
}

/* ===== 검색 아이콘 = 지구본과 크기/색/두께 통일 ===== */
.search-btn{
  width:46px; height:46px;          /* 지구본 버튼과 동일 클릭영역 */
  padding:0; border:none; background:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  color:var(--ink);                 /* 지구본과 동일 색 */
}
.search-btn svg{
  width:28px; height:28px;          /* 지구본 아이콘과 동일 28×28 */
  stroke-width:1.4;                 /* 인라인 2를 덮어 가는 선으로 */
}
.search-btn:hover{ color:var(--sky); }


/* ── Tawk.to 챗봇 위젯 숨김 (2026-07-13, 완성도 이슈로 임시 비활성) ── */
#tawkchat-container,
.tawk-min-container,
.tawk-button,
.widget-visible iframe,
iframe[title="chat widget"],
iframe[src*="tawk.to"] { display: none !important; visibility: hidden !important; }

/* font-fix : 웹폰트 교체 시 레이아웃 흔들림 제거 (2026-07-20 실측) */
@font-face{
  font-family:'Pretendard Fallback';
  src:local('Malgun Gothic'), local('맑은 고딕');
  size-adjust:85.74%;
  ascent-override:110.80%;
  descent-override:27.99%;
  line-gap-override:0%;
}
/* end font-fix */

/* ============================================================
   EZ-PICKER:START — 목록 + 패널 픽커 (2026-08-11)

   마크업 계약
     [data-picker]              컨테이너            .ez-picker
     [data-picker-list]         항목 목록           .ez-picker-list
     [data-picker-item]         항목 버튼           .ez-picker-item
                                data-<키> 로 패널 값을 보유한다
     [data-picker-panel]        패널                .ez-picker-panel
     [data-picker-out="<키>"]   패널 출력 자리      textContent 로 주입
     [data-picker-out="href"]   <a> 이면 href 속성으로 갱신

   마크업 순서 — 패널이 목록보다 먼저 와야 한다
     [data-picker] > [data-picker-panel] 다음에 [data-picker-list]
     .ez-picker 가 좌측을 패널 폭(기본 210px), 우측을 목록으로 잡기 때문이다.
     순서를 바꾸면 데스크톱에서 목록이 패널 폭에 갇히고 패널이 늘어난다.
     1024 이하는 1단이라 소스 순서대로 패널이 위로 온다 (order 선언 없음).

   토큰은 .ez-picker 스코프 — 컨테이너 style="--picker-cols:3" 식으로 덮어쓴다.

   색은 신규 정의 없이 참조만 한다. 단 --k-* 는 main.css(index)·form-krds.css(contact)
   에만 있어 전 페이지 보장이 아니므로 common.css 자체 토큰을 폴백으로 둔다.
   ============================================================ */
.ez-picker{
  --picker-panel-w:210px;
  --picker-cols:2;
  --picker-gap:4px;
  --picker-radius:12px;
  /* 판 3겹 · 패널 타이포 — 값은 컨테이너 style 로 주입한다.
     기본값은 --k-* 2단 폴백이라 토큰을 안 넘겨도 그대로 성립한다. */
  --picker-panel-border:1px solid var(--k-gray-20, var(--line));
  --picker-panel-bg:var(--k-gray-5, var(--section-bg));
  --picker-list-bg:var(--k-gray-5, var(--section-bg));
  --picker-inner-bg:var(--bg,#fff);
  --picker-panel-fg:var(--k-gray-90, var(--ink));
  --picker-panel-sub:var(--k-gray-60, var(--ink-soft));
  --picker-panel-link:var(--k-primary, var(--sky));
  display:grid;
  grid-template-columns:var(--picker-panel-w) minmax(0,1fr);
  gap:16px;   /* 패널–목록 간격. 항목 간격(--picker-gap)과 분리 */
  align-items:stretch;   /* 패널 높이를 목록에 맞춘다 — start 가 grid 기본 stretch 를 덮고 있었다 */
}
/* 바깥 판 — data-picker-list 는 여기 유지 (JS 가 후손에서 항목을 찾는다) */
.ez-picker-list{
  background:var(--picker-list-bg);
  border-radius:var(--picker-radius);
  padding:14px 24px;margin:0;list-style:none;
}
/* 안쪽 판 — 격자는 여기서 잡는다 */
.ez-picker-list-inner{
  display:grid;
  grid-template-columns:repeat(var(--picker-cols),minmax(0,1fr));
  gap:var(--picker-gap);
  background:var(--picker-inner-bg);
  border-radius:calc(var(--picker-radius) - 4px);
  padding:30px 16px;
}
/* 항목 — 상자 없음. 브라우저 기본 버튼 스타일을 상태까지 함께 끈다 */
.ez-picker-item,
.ez-picker-item:hover,
.ez-picker-item:focus,
.ez-picker-item:focus-visible,
.ez-picker-item:active{
  border:none;box-shadow:none;background-image:none;
  -webkit-appearance:none;appearance:none;font-family:inherit;
}
.ez-picker-item{
  display:block;width:100%;
  padding:8px 18px;
  border-radius:10px;
  background:transparent;
  font-size:18px;font-weight:700;line-height:1.45;
  color:var(--k-gray-90, var(--ink));
  text-align:left;text-decoration:none;cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
/* 항목 아이콘 — 정적 요소. 제목이 텍스트 노드라 flex/grid 로는 스택이 깨진다.
   기존 .ez-picker-item 규칙은 수정하지 않고 뒤에서 position·padding-left 만 얹는다. */
.ez-picker-item{position:relative;padding-left:54px;}
.ez-picker-ic{position:absolute;left:18px;top:30px;
  width:24px;height:24px;color:inherit;}
.ez-picker-ic svg{display:block;width:100%;height:100%;}
/* 상위 분류 라벨 — 값은 마크업의 data-cat 과 같은 문자열 */
.ez-picker-cat{display:block;margin-bottom:4px;
  font-size:12px;font-style:normal;font-weight:700;
  color:var(--k-gray-60, var(--ink-soft));}
/* New / Update 칩 — 정적 마크업 전용. 색은 위 토큰만 참조한다.
   태그가 <i> 인 이유: .ez-picker-item > span 이 직계 span 을 부제로 잡는다 */
.ez-picker-chip{display:inline-block;margin-left:6px;
  vertical-align:var(--picker-chip-va,2px);
  padding:var(--picker-chip-pad,2px 7px);border-radius:9px;
  font-size:var(--picker-chip-fs,10px);font-style:normal;font-weight:700;line-height:1.5;}
.ez-picker-chip--new{background:var(--picker-chip-new-bg);color:var(--picker-chip-new-fg);}
.ez-picker-chip--upd{background:var(--picker-chip-upd-bg);color:var(--picker-chip-upd-fg);}
.ez-picker-item > span{
  display:block;margin-top:7px;
  font-size:15px;line-height:1.65;font-weight:400;color:var(--k-gray-60, var(--ink-soft));
  transition:color .15s ease;
}
/* 호버 — 배경 + 제목 강조색 (패널 전환은 클릭 전용) */
.ez-picker-item:hover{
  color:var(--k-primary, var(--sky));
}
/* 선택 — 배경 짙게 + 제목 강조색 + 설명 한 단계 진하게 */
.ez-picker-item[aria-current="true"]{
  color:var(--k-primary, var(--sky));
  font-weight:800;   /* 배경 없이 호버와 구별 — 기본 700 대비 한 단계 */
}
.ez-picker-item[aria-current="true"] > span{
  color:var(--k-gray-70, var(--ink));
}
/* 상자가 없어 아웃라인이 밖으로 나가면 떠 보인다 → 안쪽으로 */
.ez-picker-item:focus-visible{
  outline:2px solid var(--k-primary, var(--sky));outline-offset:-2px;
}
.ez-picker-panel{
  border:var(--picker-panel-border);
  border-radius:var(--picker-radius);
  background:var(--picker-panel-bg);
  padding:30px 26px;
  display:flex;flex-direction:column;gap:0;
}
.ez-picker-panel [data-picker-out="cat"]{
  font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:10px;
  color:var(--picker-panel-sub);
}
.ez-picker-panel [data-picker-out="name"]{
  font-size:23px;font-weight:700;line-height:1.35;margin-bottom:16px;
  color:var(--picker-panel-fg);
}
.ez-picker-panel [data-picker-out="desc"]{
  font-size:15px;line-height:1.85;
  color:var(--picker-panel-sub);
}
/* margin-top:auto — flex column 에서 링크를 패널 하단으로 민다 */
.ez-picker-panel [data-picker-out="href"]{
  margin-top:auto;padding-top:24px;
  font-size:15px;font-weight:700;text-decoration:none;
  color:var(--picker-panel-link);
}
.ez-picker-panel [data-picker-out="href"]:hover{text-decoration:underline;}
/* 1024 이하 — 세로 1열, 패널이 목록 위로 */
@media(max-width:1024px){
  .ez-picker{grid-template-columns:minmax(0,1fr);--picker-cols:1;}
}
/* EZ-PICKER:END */