/* =========================================================
   WaLLLnut — Landing CSS (Refactored)
   - Base tokens / layout
   - Typography (Pretendard default, keep Asap selectors)
   - Header & language dropdown
   - Sections 01~08
   - Utilities & footer
   ========================================================= */

/* ========== Design Tokens ========== */
:root{
  /* Layout */
  --side-desktop: 20px;
  --side-tablet: 20px;
  --gap-title-content: 16px;

  /* Colors */
  --title-color: #403E3C;
  --muted: #807F7F;
  --paper: #FFFFFF;
  --ink: #191919;
  --bg-gray: #F2F2F2;
  --hover-bg: #FAFAF9;
  --chip: #DEDBD8;
  --accent: #FF952D;

  /* Shadows */
  --elev: 0 6px 24px rgba(0,0,0,0.16);
  --btn-elev: 0 8px 20px rgba(255,149,45,.35);
  --btn-elev-hover: 0 12px 24px rgba(255,149,45,.45);
}

/* ========== Reset & Base ========== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }


body{
  margin: 0;
  color: var(--ink);
  background: #FAFAF9;
  scroll-behavior: smooth;
  /* ▶ 기본 본문 폰트: 영/한 모두 Pretendard */
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif !important;
}

/* 한국어 환경에서도 본문 전역 Pretendard 보장 (Asap 지정된 곳은 유지됨) */
html[lang="ko"] :where(p,div,span,li,button,a,h1,h2,h3,h4,h5,h6){
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif;
}

p{margin: 0;}
a{text-decoration: none; color: #807F7F; font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
/* 공용 컨테이너 */
.container{
  max-width: 1028px;
  margin: 0 auto;
  padding-left: var(--side-desktop);
  padding-right: var(--side-desktop);
}

/* 공용 텍스트 유틸 */
.h3{ font-size: 28px; font-weight: 800; margin:0 0 12px; color:#111; }
.p { color:#444; font-size:14px; line-height:1.7; margin:0; }

/* 모바일 잔류 & 버그 방지 */

/* Desktop safeguard: 모바일 전용 UI는 데스크톱에선 강제 비표시 */
@media (min-width: 768px) {
  .mobile-menu-btn,
  .mobile-menu-overlay,
  .nav-close-btn {
    display: none !important;
  }

  /* 혹시 .menu-open 클래스가 남아도 데스크톱 레이아웃 유지 */
  .logo-menus.menu-open .nav {
    display: flex !important;
    opacity: 1 !important;
    transform: none !important;
    position: static !important;
  }
}




/* ========== Fixed Header ========== */
.header{
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; bottom: 8%; left: 50%; transform: translateX(-50%);
  z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  box-shadow: var(--elev);
  padding: 10px 14px;
}
.logo-menus{display: flex; align-items: center;}
.logo-menus img{padding-right: 4px;}
.nav{ display:flex; gap:4px; align-items:center; justify-content:center; font-size: 13px; }
.nav a{ text-decoration: none; color:#222; padding:8px 12px; border-radius: 10px; }
.nav a:hover{ background: var(--hover-bg); }

/* ========== Language Dropdown (UI only) ========== */
.lang-dd { padding-left: 80px; display:flex; align-items:center; gap:10px; margin-left:auto; }
.lang-dd-label { color: var(--muted); font-size:14px; }
.lang-dd-wrap { position:relative; }
.lang-dd-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:9999px; border:0;
  background:#2b2b2b; color:#fff; cursor:pointer;
  font: inherit; line-height:1; transition: opacity .15s;
}
.lang-dd-btn:hover{ opacity:.9; }
.lang-dd-btn .caret{ transition: transform .15s; fill:#fff; }
.lang-dd-btn[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.lang-dd-menu{
  position:absolute; top:calc(-360% + 8px); right:0; min-width:180px;
  background:#fff; border:1px solid var(--chip);
  border-radius:12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); padding:6px;
  list-style:none; margin:0; z-index:50;
}
.lang-dd-menu li{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-radius:8px; cursor:pointer; user-select:none;
  font-size:14px; color: var(--ink);
}
.lang-dd-menu li:hover, .lang-dd-menu li.focused{ background: var(--hover-bg); }
.lang-dd-menu .lang-code{ color:#8a8a8a; font-variant: all-small-caps; }

/* ========== Section Meta Labels ========== */
/* Asap Condensed 유지 (영/한 모두) */
.section-label,
.section-title{
  font-family: "Asap Condensed", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--title-color);
  margin: 0 0 var(--gap-title-content);
}

/* ========== Section spacing ========== */
section{ padding-top: 0; padding-bottom: 0; }
#sec01{ height: 100vh !important; padding: 320px 0; background-color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; text-align: center; }
#sec02{ background-image: url('../asset/section02_슬로건.png'); background-size: cover; background-repeat:no-repeat; }
#sec03, #sec04, #sec05{ padding-top: 160px; padding-bottom: 160px; }
#sec06{ padding-top: 120px; padding-bottom: 200px; }
#sec07{ padding-top: 0; padding-bottom: 120px; }
#sec08{ background: var(--bg-gray); padding: 80px 0 120px 0; }

/* ========== Section 01: Countdown ========== */
.sec01{position: relative;}
#bg-canvas {
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
#sec01 .count-wrap,
#sec01 .banner-title { position: relative; z-index: 1; }
.main-cont-topB {margin-bottom: 120px; display: flex; flex-direction: column; gap: 40px; align-items: center;}
#heroToggleBtn{margin-top: 40px;}

.count-wrap{ display:flex; gap:28px; align-items:center; justify-content:flex-start; margin-bottom: 20px;}
.time-box{
  min-width: 260px; height: 260px; border-radius: 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  user-select: none; transition: background .2s ease; background:#fff;
}
.time-box:hover{ background: var(--hover-bg); }
.time-value{ font-size: 80px; font-weight: 800; line-height: 1; }
.time-label{
   font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, Roboto, "Noto Sans KR", "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
   font-size: 16px; 
   font-weight: 500;
   color:#403E3C; 
   margin-top: 12px; 
   letter-spacing:.4px; 
  }

  .banner-title .sec01-title {margin: 0;}
  .banner-title .s-t-01{color: #0F0F10; padding-bottom: 4px;}
  .banner-title .s-t-02{color: #807F7F; filter: blur(.65px);}



/* ========== Section 02: Strip Banner ========== */
.strip{
  width:100%; height:120px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff !important;
  text-shadow: 0 0 16px rgba(0,0,0,.9) !important;
}
.strip p{
  margin:0; padding: 0 20px; font-size: 14px; font-weight: 400;
  color:#fff !important;
  text-shadow: 0 0 16px rgba(0,0,0,.9) !important;
}

/* ========== Section 03: Technology Split Panels ========== */
.tech-body {position: relative; left: 12px;}
.tech-split{height: 520px; display:flex; gap:16px; align-items:stretch; }
.tech-panel{
  position:relative; background:#FFFFFF; border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column; padding: 60px 40px;
  transition: flex-basis .35s ease, max-height .35s ease, background-color .2s ease;
}
.tech-panel.active{ flex: 1 1 auto; }
.tech-panel.inactive{ flex: 0 0 154px; background: var(--chip); }

.tech-panel .inner{
  display:grid; grid-template-columns: 1fr 120px;
  gap:40px; align-items:start; flex:1;
}
.tech-panel .content, .tech-panel .actions{ display:none; }
.tech-panel.active .content, .tech-panel.active .actions{ display:block; }
.tech-panel.active .content{ width:100%; grid-column:1; }

.tech-panel .inactive-head{
  width: 100%; height: 100%;
  position:relative;
  display:none; text-align:right;
}
.tech-panel.inactive .inactive-head{ display:block; }
.inactive-icon-tabs{
  position: absolute; bottom: 0;
}

.inactive-title{
  font-family:"Asap Condensed", sans-serif; font-weight:700; font-size:20px;
  color: var(--muted); display:inline-flex; align-items:center; gap:8px;
}
.inactive-title .material-icons{ font-size:20px; color: var(--muted); }

/* Asap 유지 */
.tech-title-lg{
  font-family:"Asap Condensed", sans-serif;
  font-weight:700; font-size: clamp(32px, 6vw, 42px);
  line-height:.95; color:#000; margin:0 0 20px;
}
.tech-subtitle{ font-size:16px; font-weight:400; color:var(--title-color); line-height:1.5; }
.tech-body{ font-size:16px; font-weight:400; color:var(--title-color); line-height:1.5; }
.tech-ref{ font-size:14px; font-weight:400; color:var(--muted); line-height:1.6; margin:0; }

/* 1024px 이하에서는 JS 박스 끄고, 줄바꿈 단위로 배경을 칠한다 */
@media (max-width: 1024px) {
  /* Tech-B 항목: 굵게(강조) 텍스트에 라인단위 하이라이트 */
  #panel-b .tech-body .black-f {
    background: #FF952D;
    padding: 0 .25em;                 /* 살짝 여백 */
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone; /* 줄바꿈마다 배경/라운드 복제 */
  }
  /* JS가 뿌리는 주황 박스를 모바일에선 숨김 */
  #panel-b .g-item-ex .box {
    display: none !important;
  }
}

/* Actions */
.actions{grid-column:1; display:flex; text-align: right; gap:16px; margin-top:20px; }
/* 아이콘은 버튼 바깥 (이미지/아이콘 모두 지원) */
.actions .action-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:90px; height:90px; border-radius:50%;
  background: transparent;
}
.actions .action-icon img{ width: 80px; height: 80px; display:block; }
.actions .material-icons{ font-size:24px; color:#0F0F10; }

/* CTA: 오렌지 박스 */
.more-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:140px; height:40px; padding:0 16px;
  border-radius:10px; border:none;
  background: var(--accent); color:#0F0F10; font-weight:700;
  box-shadow: var(--btn-elev); cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.more-btn:hover, .more-btn:focus-visible{ transform: translateY(-1px); box-shadow: var(--btn-elev-hover); }

.panel-thumb{ position:absolute; height:auto; pointer-events:none; }
.panel-thumb.pt-1{ left: -50px; top: -80px; }
.panel-thumb.pt-2{ right: -60px; bottom: -80px; }


/* ========== Section 04: Our Service (Slider) ========== */
.svc-slider{ position: relative; overflow: hidden; }
.svc-track{ display:flex; transition: transform .45s ease; will-change: transform; }
.svc-item{
  box-sizing:border-box; flex:0 0 100%;
  display:grid; grid-template-columns: 416px minmax(0, 1fr);
  column-gap:100px; align-items:start;
}
.svc-top{ display:contents; }
/* left */
.svc-a{
  grid-column:1; position:relative; width:100%; height:416px;
  border-radius:24px; overflow:hidden;
  /* img position */
  background-size: cover; background-repeat: no-repeat; background-position: center;
}

.sa01{background-image: url('../asset/sec04-slide-L01.png');}
.sa02{background-image: url('../asset/sec04-slide-L02.png');}
.sa03{background-image: url('../asset/sec04-slide-L03.png');}
.sa04{background-image: url('../asset/sec04-slide-L04.png');}

/* right */
.svc-right{
  grid-column:2; display:flex; flex-direction:column; gap:24px; min-width:0;
  height:416px; justify-content:space-between; align-items:stretch;
}
.svc-b{ display:flex; flex-direction:column; gap:16px; align-items:flex-end; text-align:right; }
/* Asap 유지 */
.svc-title{ font-family:"Asap Condensed", sans-serif; font-weight:700; font-size: clamp(28px, 5vw, 56px); color:#000; margin:0; line-height:1.1; }
.svc-desc{ font-size:16px; font-weight:500; color:#20201F; line-height:1.6; margin:0; max-width: 580px; }

.svc-bot{ width:100%; }
.svc-c{
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  width:100%; height:154px; border:none; border-radius:16px; overflow:hidden;
  background:#FFFFFF; padding:24px; box-sizing:border-box;
}
.svc-c::after{
  content:''; position:absolute; right:0; top:0; width:16px; height:100%;
  background:#20201F; border-radius:0 16px 16px 0;
}
.svc-c img{ position:absolute; height:auto; }
.svc-c img.s-img-1{ width:340px; left:-120px; top:55%; transform: translateY(-35%); }
.svc-c img.s-img-2{ left:-260px; top:55%; transform: translateY(-50%); }
.svc-c img.s-img-3{ left:-20px; top:55%; transform: translateY(-40%); }
.svc-c img.s-img-4{ left:-8px; top:55%; transform: translateY(-30%); }

.svc-c-meta{ display:flex; align-items:flex-end; text-align:right; flex-direction:column; gap:4px; z-index:1; padding-right:16px; }
.svc-c-title{ font-size:16px; font-weight:500; color:#20201F; margin:0; }
/* Asap 유지 */
.svc-c-title2{ font-family:"Asap Condensed", sans-serif; font-weight:700; font-size: clamp(22px, 4vw, 36px); color:#000; margin:0; line-height:1; padding:12px 0 2px 0; }
.svc-c-ref{ font-size:14px; font-weight:500; color:#807F7F; margin:0; }

/* Controls */
.svc-cont{ margin-top:32px; display:flex; justify-content:flex-end; gap:8px; }
.svc-btn{
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  background-color:#FAFAF9; border-radius:50%; border:none; color:#807F7F;
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.svc-btn:is(:hover,:focus-visible){ transform: translateY(-1px); background-color:#F2F2F2; }
.svc-btn.is-gray{ color:#B6B4B1; }

/* ========== Section 05: Our Goal ========== */
/* 점 배경 */
.dot-bg{ background-image: radial-gradient(circle, #ccc 1px, transparent 1px); background-size:20px 20px; background-position:0 0; }

.goal-wrap{ max-width:800px; margin:0 auto; padding: 20px; display:flex; flex-direction:column; align-items:center;}

/* 공통 섹션 라벨 기본은 위(.section-label) 사용.
   Goal 내에서만 시각 보정이 필요하면 아래처럼 범위 한정해 오버라이드 */
.goal-wrap .section-label{
  font-weight:500; 
  font-size: clamp(12px, 1.4vw, 16px); 
  color:#666; 
  margin:0; 
  letter-spacing:.5px;
  position: relative;
  top: 20px;
}

.title-area{
  position:relative; width: 130%;
  height: 100vh;
  /* height: clamp(500px, 100vw, 1020px); */
  background: url('../asset/swection05-top-bg.svg') no-repeat center center;
  background-size:contain;
  overflow: visible; background-position:center center;
}
.frame-content{
  position:absolute;
  top: clamp(24px, 6vw, 72px); right: clamp(24px, 6vw, 72px);
  bottom: clamp(24px, 6vw, 72px); left: clamp(24px, 6vw, 72px);
  display:grid; grid-template-rows: min-content min-content min-content; row-gap: clamp(6px, 1.2vw, 14px);
  justify-items:center; align-content:center;
}
.title-graphic{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.title-graphic img{ max-width:100%; max-height:100%; width:auto; height:auto; }

.goal-caption{ width:100%; max-width:520px; padding: 20px 0; text-align:center; align-self:end; }
.goal-caption .p{ margin:0; font-size: clamp(13px, 1.3vw, 16px); line-height:1.5; color:#333; }

/* Dropdown Cards */
.goal-dropdown-container{ width:100%; max-width:800px; display:flex; flex-direction:column; gap:16px;}
.goal-dropdown-card{ background:white; border-radius:16px; border:4px solid #DEDBD8; box-shadow:0 4px 12px rgba(0,0,0,.03); overflow:hidden; transition: all .3s ease; }
.goal-dropdown-card:hover{ box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.goal-dropdown-header{
  padding:20px 24px; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  background:white; border:none; width:100%; text-align:left; font-family: inherit;
}
.goal-dropdown-question{ font-size:16px; font-weight:500; color: var(--title-color); line-height:1.5; flex:1; }
.goal-dropdown-icon{ width:24px; height:24px; fill:none; stroke: var(--title-color); stroke-width:2; flex-shrink:0; transition: transform .3s ease; }
.goal-dropdown-card.open .goal-dropdown-icon{ transform: rotate(45deg) !important; }
.goal-dropdown-content{
  box-sizing: border-box;
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .2s ease;
}
.goal-dropdown-card.open .goal-dropdown-content{ max-height:500px;  padding: 12px 24px 16px;  }
.goal-dropdown-text{ font-size:15px; font-weight:400; color: var(--title-color); line-height:1.6; margin:0; }
.goal-dropdown-content > .item-drop > .dropItem-num02-subtotle{padding-bottom: 4px;}

.card02 > .goal-dropdown-content > .item-drop{margin-bottom: 16px;}
.card02 > .goal-dropdown-content > .item-drop p:nth-child(2){color: #807F7F; font-size: 14px;}


/* ========== Section 06: Our Experience ========== */
#sec06 > h2{margin-bottom: 72px;}
.property-container{ margin-bottom:40px; }
.property-content{ display:flex; align-items:flex-start; gap:60px;}
/* Asap 유지 */
.property-title{
  font-family:"Asap Condensed", sans-serif; font-size:68px; font-weight:800;
  color:#0F0F10; line-height:1; flex:1; min-width:300px; 
  position: relative; top: -120px;
}
.images-container{ position:relative; top: -40px; height:300px; flex:1; min-width:400px; }
.main-image{ width: 80%; height: 280px; border-radius:20px; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; }
.small-image{
  width: 45%; height: auto; 
  display:flex; align-items:center; justify-content:center;
  position:absolute; bottom:-60px; right:20px; z-index:2;
}
.property-features{ list-style:none; padding-left: 0; margin: 0; position: relative; bottom: 80px;}
.property-features li{ margin-bottom:8px; font-size:14px; color:#555; position:relative; padding-left:20px; }
.property-features li:before{ content:'•'; position:absolute; left:0; color:#667eea; font-weight:bold; }

.architecture-diagram{ position:relative; width:100%; background:white; border-radius:16px; padding:30px; }
.architecture-diagram > img{ width:100%; }

• Use Cases */
.use-cases-section{ border-radius:24px; margin-bottom:200px; }
.use-cases-title{
  background:#DEDBD8; color:#403E3C; padding:12px 24px; border-radius:40px;
  font-family:"Asap Condensed", sans-serif; font-size:18px; font-weight:600; display:inline-block;
}
.use-case{ margin-bottom:32px; margin-left:4px; }
.use-case-title{ font-size:16px; font-weight:700; color:#2c3e50; margin-bottom:8px; }
.use-case-desc{ font-size:14px; color:#666; line-height:1.5; }

/* Roadmap */
.roadmap-section{ text-align:center; }
.roadmap-title{ margin-top: 200px; margin-bottom:60px; }
.roadmap-timeline{ display:flex; flex-direction:column; gap:40px; align-items:center; }
.roadmap-item{ padding:30px 40px; max-width:500px; position:relative; }
/* Asap 유지 */
.roadmap-date{
  background:#ff9800; color:#0F0F10; padding:12px 20px; border-radius:50px;
  font-family:"Asap Condensed", sans-serif; font-size:24px; font-weight:600; margin-bottom:16px; display:inline-block;
}
.roadmap-date.ongoing:after{ content:'• Ongoing'; margin-left:8px; opacity:.8; }
.roadmap-content{ font-size:16px; font-weight:600; color:#2c3e50; }
.roadmap-item:not(:last-child):after{
  content:''; position:absolute; bottom:-40px; left:50%; transform: translateX(-50%);
  width:2px; height:40px; background: linear-gradient(to bottom, #ddd, transparent);
}

/* ========== Section 07: Team ========== */
.team-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:60px 80px; justify-items:center; }
.team-member{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:300px; width:100%; }
.member-avatar{ margin-bottom:20px; position:relative; }
.avatar-male, .avatar-female{ width:100%; height:auto; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.member-info{ width:100%; }
/* Asap 유지 */
.member-name-role{
  background:#ff9800; color:#0F0F10; padding:12px 26px; border-radius:32px;
  font-family:"Asap Condensed", sans-serif; font-size:24px; font-weight:900;
  margin-bottom:12px; display:inline-block; white-space:nowrap;
}
.member-description{ font-size:14px; color:#807F7F; line-height:1.4; font-weight:400; }

/* CEO 강조 */
.team-grid .team-member:first-child{ grid-column: 1 / -1; margin-bottom:20px; }
.team-grid .team-member:first-child .member-avatar{ margin-bottom:24px; }

.s08-comt-inner, 
.professor-list li{display: flex; flex-direction: column; align-items: center;}
.s08-title{font-size: 14px; text-align: center; color: #807F7F;}
.professor-list{margin-top: 20px;}

/* ===== Tech Panel CTA 상태 분리 (override) ===== */
/* Tech 패널 내 기본은 회색(비활성), 활성 패널에서만 오렌지 */
.tech-panel .more-btn{
  background:#EDEDED;
  color:#9A9A9A;
  box-shadow:none;
}
.tech-panel .more-btn:hover,
.tech-panel .more-btn:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* 아이콘은 비활성에서 연하게, 활성에서 정상 */
.tech-panel.inactive .action-icon{ filter:grayscale(1); opacity:.55; }
.tech-panel.active   .action-icon{ filter:none; opacity:1; position: relative; top: -50px; right: -130px;}

/* 활성 패널 버튼만 오렌지 */
.tech-panel.active .more-btn{
  color:#807F7F;
  width: 136px;
}


/* 접근성 포커스 링 */
.tech-panel .more-btn:focus-visible{
  outline: 2px solid rgba(255,149,45,.7);
  outline-offset: 2px;
}

/* 드롭다운이 열렸을 때 (+ → x), 컨텐츠 패딩 20px */
.goal-dropdown-header[aria-expanded="true"] .goal-dropdown-icon{
  transform: rotate(45deg);
}
/* 열림: + → × 회전은 그대로, 컨텐츠는 큰 값으로 애니메이션 */
.goal-dropdown-header[aria-expanded="true"] + .goal-dropdown-content{
  max-height: 999px;         /* 충분히 큰 값으로 */
  padding: 20px 24px 24px;   /* 원하는 여백 */
}
/* 닫혔을 때는 패딩 0 유지 */
.goal-dropdown-header[aria-expanded="false"] + .goal-dropdown-content{
  padding: 0 24px;
}

/* --- Material Icons 강제 적용 (글꼴 오버라이드 방지) --- */
.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp,
.material-icons-two-tone {
  font-family: 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 24px; /* 필요하면 조절 */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

/* JS 스크롤과 충돌 방지: 전역 스무스 비활성화 */
/* html, body { scroll-behavior: auto !important; } */

/* 메뉴 열렸을 때 배경 스크롤 완전 고정 */
html.menu-locked, body.menu-locked {
  overflow: hidden !important;
  touch-action: none;
}



/* Footer */
footer{background-color: #DEDBD8; padding: 20px;}
footer > div {font-size: 12px; font-weight: 600; color: #807F7F;}

.f-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.f-social-list{
  display: flex;
  gap: 12px;
  align-items: center;
}

.social-link{text-align: center;}
.social-link a,
.social-link a svg{width: 24px; height: 24px;}
.social-link:nth-child(1) a {display: flex; align-items: center; justify-content: center;}
.social-link:nth-child(1) a svg {width: 20px; height: 20px;}