/* =========================================================
   DA-LAB – Global Styles (with Theme & Galaxy)
   (원본 유지) ...
   ========================================================= */

/* ===== Design Tokens (Light) ===== */
:root{
  --bg:#ffffff; --bg-soft:#f6f7fb; --surface:#ffffff;
  --text:#0c1323; --muted:#5e6a83; --line:#e8ebf3;
  --primary:#001B54; --primary-weak:#E6ECF7; --accent:#44C1C4;
  --warn:#f59e0b; --danger:#ef4444;
  --radius:18px; --shadow-lg:0 12px 30px rgba(16,24,40,.08);
  --w:1100px; --page-pad:40px;
  --gutter: clamp(16px, calc((100vw - (var(--w) + var(--page-pad)))/2), 340px);
  --light-gutter-pattern-opacity: 0;
}

/* ===== Design Tokens (Dark) ===== */
html[data-theme="dark"]{
  --bg:#0b1020; --bg-soft:#0c152b; --surface:#0f1b33;
  --text:#e6ecff; --muted:#98a4c9; --line:#1b2a4b;
  --primary:#8fb6ff; --primary-weak:#0f2048; --accent:#49d4d7;
  --shadow-lg:0 18px 60px rgba(3,10,28,.55);
}

/* prefers-color-scheme hint */
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --bg:#0b1020; --bg-soft:#0c152b; --surface:#0f1b33;
    --text:#e6ecff; --muted:#98a4c9; --line:#1b2a4b;
    --primary:#8fb6ff; --primary-weak:#0f2048; --accent:#49d4d7;
    --shadow-lg:0 18px 60px rgba(3,10,28,.55);
  }
}

/* ===== Base (원본 유지) ===== */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter','Noto Sans KR',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
  line-height:1.55;
  background-image:
    linear-gradient(to right,
      transparent 0, transparent var(--gutter),
      rgba(0,27,84, calc(.03 * var(--light-gutter-pattern-opacity))) var(--gutter),
      rgba(0,27,84, calc(.03 * var(--light-gutter-pattern-opacity))) calc(100% - var(--gutter)),
      transparent calc(100% - var(--gutter)), transparent 100%
    ),
    radial-gradient(circle at 1px 1px, rgba(0,27,84, calc(.06 * var(--light-gutter-pattern-opacity))) 1px, transparent 1px);
  background-size:100% 100%, 12px 12px;
  background-repeat:no-repeat, repeat;
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--w);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .small{font-size:13px}

/* ===== Header / Navbar (원본 유지) ===== */
header{position:sticky; top:0; z-index:50; background:color-mix(in oklab, var(--surface) 82%, transparent); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;gap:12px;align-items:center;white-space:nowrap}
.brand-link{color:var(--text);text-decoration:none}
.brand-link:hover{opacity:.9}
.brand-text{display:inline-block;font-weight:700}
.brand-img{height:40px;width:auto;display:block;object-fit:contain}
@media (max-width:860px){.brand-img{height:32px}}
.nav>ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav>ul>li{position:relative}
.nav>ul>li>a{padding:8px 10px;border-radius:10px;color:var(--text);display:inline-block;font-weight:700}
.nav>ul>li>a.active,.nav>ul>li>a:hover{background:var(--primary-weak)}
.nav>ul>li>a.active{color:var(--primary);box-shadow:inset 0 -2px 0 var(--primary)}
.menu-btn{display:none}
@media (max-width:860px){
  .menu-btn{display:block;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:8px 10px}
  .nav>ul{display:none}
  .nav.open>ul{display:flex;position:absolute;left:20px;right:20px;top:60px;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px}
  /* 모바일: 메뉴 패널 고정 높이 + 내부 스크롤 */
  .nav.open>ul{max-height:calc(100vh - 80px);overflow-y:auto;-webkit-overflow-scrolling:touch}
}
.has-dd>a::after{content:"▾";font-size:11px;margin-left:6px;opacity:.7}
.nav>ul>li>.dropdown{position:absolute;top:100%;left:0;z-index:60;min-width:220px;padding:8px 8px 10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);display:none}
.nav>ul>li>.dropdown::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px;background:transparent}
.nav>ul>li>.dropdown>li{list-style:none}
.nav>ul>li>.dropdown a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);white-space:nowrap;font-weight:500}
.nav>ul>li>.dropdown a:hover{background:var(--primary-weak)}
@media (hover:hover){
  .nav>ul>li.has-dd:hover>.dropdown,.nav>ul>li>.dropdown:hover{display:block}
 /* .has-dd.open > .dropdown { display:block; } */
  .nav>ul>li.has-dd>.dropdown{transition:opacity .15s ease,visibility .15s ease;opacity:0;visibility:hidden}
  .nav>ul>li.has-dd:hover>.dropdown{opacity:1;visibility:visible;display:block}
}

/* ===== THEME TOGGLE (원본 유지) ===== */
.theme-toggle{--s:38px;width:var(--s);height:var(--s);display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;cursor:pointer;margin-left:12px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.theme-toggle:hover{background:color-mix(in oklab, var(--surface) 92%, var(--primary-weak))}
.theme-toggle svg{width:20px;height:20px;display:block}
.theme-toggle .sun{display:block}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}

/* =========================================================
   HERO / CAROUSEL  ★ 여기부터가 실질 수정
   ========================================================= */
.hero{position:relative}
.carousel{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}

/* 박스형 히어로는 기본적으로 컬럼 폭 */
.hero--boxed .carousel{
  max-width:var(--w); margin:0 auto;
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
}

/* 슬라이드 트랙/아이템 */
.slides{display:flex;transition:transform .7s ease;will-change:transform}
#heroSlides.dragging{transition:none}                         /* 드래그 중 즉시 반응 */
.slide{flex:0 0 100%;min-width:100%;height:58vh;position:relative;background:#dfe7ff}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,27,84,.55),rgba(0,27,84,.35) 35%,rgba(0,27,84,0))}

/* 기본 cover(필요 시) – fill/비디오에는 적용 안함 */
.slide:not(.fill):not(.cover-video) img,
.slide:not(.fill):not(.cover-video) video{width:100%;height:100%;object-fit:cover}

/* 오버레이/컨트롤 z-index + 포인터 패스스루 */
.hero-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;z-index:5;pointer-events:none} /* ← 드래그 가로채지 않음 */
.hero-copy{width:100%;max-width:var(--w);margin:0 auto;padding:24px 20px 40px;color:#fff}
.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:6px 10px;border-radius:999px;font-size:12px;font-weight:600;backdrop-filter:blur(6px)}
.hero-title{font-size:36px;line-height:1.2;margin:12px 0 8px}
.hero-desc{opacity:.95;max-width:720px}
.hero-ctrl{position:absolute;inset:auto 0 16px 0;display:flex;justify-content:center;gap:8px;z-index:5}
.dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);cursor:pointer}
.dot.active{background:#fff}
.nav-arrows{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 8px;z-index:5;pointer-events:none}
.arrow{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.4);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);pointer-events:auto}

/* === NO-CROP 모드의 기본 규칙(비디오/필 슬라이드는 제외) */
.slides.no-crop .slide:not(.fill):not(.cover-video) img,
.slides.no-crop .cover-video {
  background:#fff;   /* 좌우 남는 부분 흰색 */
  display:flex;
  align-items:center;
  justify-content:center;
}

.slides.no-crop .cover-video > video {
  max-width:100%;
  max-height:100%;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#fff !important; /* 혹시 비디오 자체 여백에도 흰색 */
}

/* ★ 이미지 슬라이드: 좌우 블러 배경 + 원본은 'contain'으로 전체 보이기 */
.slide.fill{background:#000;position:relative;overflow:hidden}
.slide.fill::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--img);
  background-size:cover;background-position:center;
  filter:blur(32px) brightness(.85);transform:scale(1.15);pointer-events:none;
}
/* 부드러운 가장자리 */
.slide.fill::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, transparent 82%, rgba(0,0,0,.28));
}
/* ★ 핵심: 원본 이미지는 컨테이너(슬라이드) 안에서 항상 전부 보이도록 */
.slides.no-crop .slide.fill > img{
  position:relative;z-index:2;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:transparent !important;
}

/* 비디오는 cover 유지(원본 규칙 override) */
.slides.no-crop .cover-video > video{
  width:100% !important;height:100% !important;
  object-fit:cover !important;object-position:center center !important;background:transparent !important;
}

/* 박스 히어로를 풀폭으로 쓰고 싶을 때(hero--full) */
.hero--boxed.hero--full .carousel{
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  border:0;border-radius:0;box-shadow:none;
}

/* ===== Sections / Cards 이하 원본 유지 ===== */
section{padding:64px 0;border-bottom:1px solid var(--line)}
section .head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px}
.head h2{font-size:28px;margin:0}
.head h2::after{content:"";display:block;width:100%;height:3px;background:var(--primary);border-radius:999px;margin-top:8px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.card-pad{padding:18px}
.about p{margin:0 0 12px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--primary-weak);color:var(--primary);border:1px solid #dfe3f5;font-weight:600;font-size:12px}
.list{display:flex;flex-wrap:wrap;gap:8px}
.list .chip{padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft)}
.prose p{margin:0 0 12px}
.photo{border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.kicker{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--primary);background:var(--primary-weak);border:1px solid #dfe3f5;border-radius:999px;padding:6px 10px;font-size:12px}
.title,.page-title{font-size:28px;margin:6px 0 0}
.divider{width:120px;height:3px;background:var(--primary-weak);border-radius:3px;margin:12px 0 0}
.member{display:flex;gap:14px;align-items:center}
.avatar{width:56px;height:56px;border-radius:14px;background:#eef1f8;flex:0 0 auto;overflow:hidden;border:1px solid var(--line)}
.avatar img{width:100%;height:100%;object-fit:cover}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.tab.active{background:var(--primary);border-color:var(--primary);color:#fff}
.area{display:flex;flex-direction:column;gap:10px}
.news-item{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:start;padding:12px;border:1px dashed var(--line);border-radius:12px;background:var(--bg-soft)}
.news-date{font-weight:700}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px;color:#cbd5e1;margin-right:6px}
.input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:820px){.row{grid-template-columns:1fr}}
.btn{display:inline-block;padding:10px 14px;border-radius:12px;border:1px solid var(--primary);background:var(--primary);color:#fff;cursor:pointer}
iframe.map{width:100%;min-height:320px;border:0;border-radius:14px}
.page-hero{padding:40px 0;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.breadcrumbs{font-size:13px;color:var(--muted)} .breadcrumbs a{color:inherit}
footer{padding:36px 0}
:focus-visible{outline:3px solid rgba(68,193,196,.6);outline-offset:2px}
#about .head .muted,#research .head .muted,#activity .head .muted,#contact .head .muted{display:none}
#galaxy-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease;display:block;width:100vw;height:100vh;mix-blend-mode:screen}
html[data-theme="dark"] #galaxy-canvas{opacity:1}
@media (prefers-reduced-motion: reduce){.dot,.arrow,.slides{transition:none !important}#galaxy-canvas{transition:none}}
.link-list li{margin:6px 0}
.link-list a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.link-list a:hover{opacity:.9}

/* 제스처용 보조 스타일 */
#heroSlides{touch-action:pan-y;cursor:grab;user-select:none}
#heroSlides:active{cursor:grabbing}
#heroSlides img,#heroSlides video{pointer-events:none;-webkit-user-drag:none;user-drag:none}

/* Heading underline & etc (원본 유지) ... */
.head h2 .title-text{position:relative;display:inline-block;padding-bottom:4px}
.head h2 .title-text::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--primary);border-radius:999px}
.head h2 .more-info{font-size:14px;margin-left:10px;text-decoration:underline;color:var(--muted)}
.head h2::after{content:none !important;display:none !important}
.head h2 .more-info{text-decoration:none;border-bottom:0;color:var(--muted)}
.head h2 .more-info:hover{text-decoration:none;color:color-mix(in oklab, var(--muted) 80%, var(--text))}
@media (max-width:860px){
  .grid>*{grid-column:1 / -1 !important}
  .brand{white-space:normal}
  .brand-text .muted{display:inline-block;opacity:.75;font-weight:500}
  .hero-title{font-size:26px;line-height:1.25}
  .hero-desc{font-size:14px}
}
@media (max-width:450px){
  .hero-kicker{font-size:10px;margin-bottom:-4px}
  .hero-title{font-size:16px;margin-bottom:-4px}
  .hero-desc{font-size:10px}
  .prof-header{display:block !important;gap:16px !important}
}
.email-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.icon-mail{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:transform .08s ease, background .2s}
.icon-mail:hover{background:var(--bg-soft);transform:translateY(-1px)}
.icon-mail svg{width:16px;height:16px;fill:var(--text)}
.icon-emoji{font-size:18px;line-height:1}
.news-item{display:grid;grid-template-columns:120px 1fr;align-items:center}
.news-date{text-align:center;font-weight:600}
.hero-title,
.hero-desc,
.hero-kicker {
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
/* === Hero video: keep original aspect (contain) + white bars === */
.slides.no-crop .cover-video {
  background:#000;               /* 좌우/상하 빈영역 흰색 */
  display:flex;
  align-items:center;
  justify-content:center;
}

.slides.no-crop .cover-video > video{
  max-width:100%;
  max-height:100%;
  width:auto !important;         /* 비율 유지 */
  height:auto !important;        /* 비율 유지 */
  object-fit:contain !important; /* 원본 비율로 전체 보이기 */
  background:#000 !important;
}

/* 비디오 슬라이드에는 어두운 오버레이 제거 (흰색 바를 가리지 않도록) */
.cover-video::after{ display:none !important; }

/* Activity 카드: 내용 위, View all은 하단 고정 */
.card.card-pad{
  display:flex;
  flex-direction:column;
}
.card.card-pad .view-all{
  margin-top:auto;          /* 아래로 밀기 */
  display:inline-block;
}
.pill {
  display: inline-flex;   /* 글자 길이만큼만 차지 */
  width: auto;            /* 고정폭 제거 */
  padding: 6px 12px;      /* (선택) 버튼 여백 */
  white-space: nowrap;    /* 줄바꿈 방지 */
}
/* 카드 안의 pill 버튼은 가로로 늘어나지 않게 */
.card.card-pad > .pill{
  align-self: flex-start;          /* stretch 방지 (핵심) */
  display: inline-flex !important; /* 글자만큼 */
  width: auto !important;
  max-width: max-content;          /* 내용 너비만큼 */
  white-space: nowrap;
}
.head h2 .more-info {
  font-size: 14px;
  margin-left: 10px;
  color: var(--muted);
  text-decoration: none;
  transition: transform 0.2s ease, color 0.2s ease; /* 애니메이션 */
  display: inline-block; /* transform 적용하려면 inline-block 필요 */
}

.head h2 .more-info:hover {
  transform: translateY(-2px); /* 위로 2px 떠오름 */
  color: var(--primary);       /* (선택) hover 시 색도 살짝 강조 */
}
/* Research 카드에만 hover 효과 */
#research .card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#research .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.12);
}

/* Activity 카드 hover 효과 제거 (덮어쓰기) */
#activity .card {
  transform: none !important;
  box-shadow: var(--shadow-lg); /* 기본 그림자 유지 */
}

/* Activity의 View all 링크 스타일 */
#activity .view-all {
  font-weight: 700;              /* Bold */
  display: inline-block;
  transition: transform 0.2s ease;
}
#activity .view-all:hover {
  transform: translateY(-2px);   /* 살짝 위로 */
}
/* Contact 섹션 - 이메일 링크 효과 */
#contact a[href^="mailto:"] {
  font-weight: 600; /* 평상시도 살짝 강조 */
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
#contact a[href^="mailto:"]:hover {
  color: var(--primary);         /* 파란색으로 강조 */
  transform: translateY(-2px);   /* 살짝 위로 */
}

/* Contact 섹션 - 링크 리스트 효과 (GitHub, Scholar, IE Dept) */
#contact .link-list a {
  transition: transform 0.2s ease, color 0.2s ease;
  font-weight: 600; /* 볼드 처리 */
}
#contact .link-list a:hover {
  color: var(--primary);         /* hover 시 색상 변경 */
  transform: translateY(-2px);   /* 살짝 위로 */
}
/* 공통 more-info 링크 스타일 + hover lift (헤더 밖에서도 사용) */
.more-info{
  display:inline-block;
  color: var(--muted);
  text-decoration: none;
  transition: transform .2s ease, color .2s ease;
  white-space: nowrap;
}
.more-info:hover{
  transform: translateY(-2px);
  color: var(--primary);
}

/* 헤더 옆 배치용(남아 있어도 문제 없음) */
.head h2 .more-info{ margin-left:10px; }

/* Contact 카드 내부 more info를 오른쪽 위로 */
.more-info-top {
  align-self: flex-end;     /* 오른쪽 정렬 */
  font-weight: 700;
  margin-bottom: 8px;       /* 아래 내용과 간격 */
}

/* Contact 카드: 제목과 more info를 같은 라인 좌/우 정렬 */
.contact-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}

/* 우측 more info 스타일 + hover lift */
.more-info-inline{
  font-weight:700;
  color:var(--muted);
  text-decoration:none;
  transition:transform .2s ease, color .2s ease;
}
.more-info-inline:hover{
  transform:translateY(-2px);
  color:var(--primary);
}
/* Lab Seminar: 기존 인디고 유지(원하면 다른 색으로 바꿔도 OK) */
.pill--lab-seminar{ --pill: 99,102,241; }      /* indigo */

/* Paper Review: 에메랄드 예시 */
.pill--paper-review{ --pill: 16,185,129; }      /* emerald-500 */
/* 데스크탑: 기존 hover 유지 */
.has-dd:hover > .dropdown { display: block; }

/* 모바일/터치: hover 비활성, .open으로 제어 */
@media (hover: none) {
  .has-dd:hover > .dropdown { display: none; }
}
.has-dd > .dropdown { display: none; }
.has-dd.open > .dropdown { display: block; }

/* 데스크탑 hover 유지 */
/* .has-dd:hover > .dropdown { display: block; } */

/* 모바일에선 hover 비활성 */
@media (hover: none) {
  /* .has-dd:hover > .dropdown { display: none; } */
  /* .nav.open > ul > li > .dropdown { position: static; } */
}

/* 데스크탑 hover 유지 */
/* .has-dd:hover > .dropdown { display: block; } */

/* 모바일에서는 hover 비활성화 (토글만 유효) */
@media (hover: none) {
  .has-dd:hover > .dropdown { display: none; }
}
/* 기본 숨김/표시 */
.has-dd { position: relative; }
.has-dd > .dropdown { display: none; position: absolute; z-index: 9999; }
.has-dd.open > .dropdown { display: block; }

/* 데스크톱: hover로 열림 */
@media (hover: hover) and (pointer: fine) {
  /* .has-dd:hover > .dropdown { display: block; } */
}

/* 모바일: hover 무력화 → JS 토글만 */
@media (hover: none), (pointer: coarse) {
  /* .has-dd:hover > .dropdown { display: none; } */
}

/* 버튼을 링크처럼 보이게 */
.dd-trigger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.has-dd > .dropdown { display: none; }
.has-dd.open > .dropdown { display: block; }

/* 데스크톱 hover 유지, 모바일에서 hover 무력화(선택) */
@media (hover: hover) and (pointer: fine) {
  /* .has-dd:hover > .dropdown { display: block; } */
}
@media (hover: none), (pointer: coarse) {
  .has-dd:hover > .dropdown { display: none; }
}

/* open이면 무조건 보이게 */
.has-dd.open > .dropdown { display: block !important; }

/* 모바일 메뉴 펼침 상태에서 드롭다운을 문서 흐름으로 */
@media (max-width: 860px){
  #navbar.open > ul > li > .dropdown {
    position: static !important;
    left:auto !important; right:auto !important; top:auto !important;
    width:100%;
    box-shadow:none;
  }
}