/* 유스턴 아카데미 — 따뜻한 우드·그린 테마
   MARSHMALLOW 토큰 위에 얹는 리컬러 + 한글 라운드 폰트 + 공통 섹션 스타일.
   styles.css(디자인시스템) 다음에 로드한다. */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');

:root{
  /* ---- 베이스 팔레트 리매핑: 블루→그린, 앰버→우드 ---- */
  --blue-50:#EAF1EC; --blue-100:#D8E6DC; --blue-200:#B7D0BD; --blue-300:#8FB79A;
  --blue-400:#6CA079; --blue-500:#4A7C59; --blue-600:#3C6749; --blue-700:#2F5239;
  --amber-100:#F6E7CF; --amber-300:#EBC78C; --amber-500:#D69A52; --amber-600:#C0823B;
  --green-100:#DBEFDF; --green-500:#4A9A6A;

  /* ---- 중성: 따뜻한 크림/우드 ---- */
  --ink-900:#33291F; --ink-600:#8A7D6C; --ink-400:#AEA08C;
  --paper-0:#FFFDF8; --paper-50:#F7F2E8; --paper-100:#EFE7D6; --line-200:#E7DECF;

  /* ---- 시맨틱 재정의 ---- */
  --background:#F7F2E8;
  --surface:#FFFDF8;
  --surface-alt:#EFE7D6;
  --text-primary:#33291F;
  --text-secondary:#8A7D6C;
  --text-tertiary:#AEA08C;
  --border:#E7DECF;
  --border-strong:#D9CCB4;

  --accent-primary:#4A7C59;
  --accent-primary-hover:#3C6749;
  --accent-primary-press:#2F5239;
  --accent-primary-soft:rgba(74,124,89,0.12);
  --accent-secondary:#D69A52;
  --accent-secondary-soft:rgba(214,154,82,0.16);
  --focus-ring:rgba(74,124,89,0.32);
  --shadow-accent:0 10px 24px rgba(74,124,89,0.26);

  /* ---- 폰트 ---- */
  --font-display:'Pretendard',sans-serif;
  --font-body:'Pretendard',sans-serif;
  --font-ko:'Pretendard',sans-serif;
  --font-head:'Jua',sans-serif;   /* 동글동글 헤드라인 (시안별 override) */
  --wood:#9B7A4F;
}

/* 시안별 헤드라인 폰트 */
.t-a{ --font-head:'Jua',sans-serif; }
.t-b{ --font-head:'Jua',sans-serif; }
.t-c{ --font-head:'Jua',sans-serif; }
.t-d{ --font-head:'Jua',sans-serif; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--background);color:var(--text-primary);
  font-family:var(--font-body);line-height:1.7;-webkit-font-smoothing:antialiased;font-synthesis:none;}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
.kohead{font-family:var(--font-head);font-weight:600;letter-spacing:-0.01em;line-height:1.22}
.t-a .kohead,.t-c .kohead{letter-spacing:-0.02em}

/* 레이아웃 */
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--font-display);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-primary)}
.sec{padding:104px 0}
.sec-head{margin-bottom:52px}
.sec-head.center{text-align:center}
.sec-head h2{font-family:var(--font-head);font-weight:600;font-size:clamp(28px,3.4vw,42px);
  line-height:1.2;margin-top:14px;letter-spacing:-0.01em}
.sec-head p{color:var(--text-secondary);margin-top:14px;font-size:16px}

/* 헤더 */
.hd{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:74px}
.hd.solid{background:rgba(247,242,232,.86);backdrop-filter:blur(12px);box-shadow:0 4px 20px rgba(51,41,31,.06)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:21px;color:var(--text-primary)}
.logo .mk{width:38px;height:38px;border-radius:14px;background:var(--accent-primary);
  display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-size:17px;
  box-shadow:0 6px 14px rgba(74,124,89,.3)}
.gnb{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.gnb a{font-size:14.5px;font-weight:500;color:var(--text-primary);position:relative;padding:6px 0;white-space:nowrap}
.gnb a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;
  background:var(--accent-primary);transition:right .22s ease}
.gnb a:hover::after{right:0}
.hd-cta{display:flex;align-items:center;gap:14px}
.hd-login{font-size:14px;font-weight:500;color:var(--text-secondary)}
.hamb{display:none}

/* 메가메뉴 */
.navgroup{position:static;display:flex}
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(255,253,248,.98);
  backdrop-filter:blur(12px);border-top:1px solid var(--border);
  box-shadow:0 18px 34px rgba(51,41,31,.1);padding:36px 0 42px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s;z-index:150}
.navgroup:hover .mega{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:20px}
.mega-col{display:flex;flex-direction:column}
.mega-h{font-family:var(--font-head);font-size:15px;color:var(--accent-primary);font-weight:400;
  padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--border)}
.mega-l{font-size:13.5px;color:var(--text-secondary);padding:5px 0;transition:color .16s,padding .16s}
.mega-l:hover{color:var(--accent-primary);padding-left:5px}

/* 모바일 시트 */
.msheet{background:var(--surface);border-top:1px solid var(--border);padding:8px 18px 22px;
  box-shadow:var(--shadow-md);max-height:78vh;overflow:auto}
.macc{border-bottom:1px solid var(--border)}
.macc-h{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;
  border:none;padding:15px 4px;font-family:var(--font-body);font-weight:600;font-size:15.5px;
  color:var(--text-primary);cursor:pointer}
.macc-b{padding:0 4px 10px}
.macc-b a{display:block;padding:9px 0 9px 12px;color:var(--text-secondary);font-size:14px}

/* 헤더가 투명일 때(히어로 위) — 어두운 히어로용 라이트 변형 */
.hero-dark .hd:not(.solid) .logo,
.hero-dark .hd:not(.solid) .gnb a,
.hero-dark .hd:not(.solid) .hd-login{color:#fff}
.hero-dark .hd:not(.solid) .logo .mk{background:rgba(255,255,255,.2);box-shadow:none}
.hero-dark .hd:not(.solid) .btn-pri{background:#fff;color:var(--accent-primary);box-shadow:none}

/* 버튼(데모용 — DS Button과 동일 룩) */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-weight:700;font-size:15px;border:none;cursor:pointer;border-radius:var(--radius-button,12px);
  padding:13px 24px;white-space:nowrap;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.btn-pri{background:var(--accent-primary);color:#fff;box-shadow:var(--shadow-accent)}
.btn-pri:hover{background:var(--accent-primary-hover)}
.btn-soft{background:var(--surface-alt);color:var(--text-primary)}
.btn-soft:hover{background:#e6dcc7}
.btn-ghost{background:transparent;color:var(--accent-primary)}
.btn-line{background:var(--surface);color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.btn-lg{padding:16px 30px;font-size:16px}
.btn-pill{border-radius:999px}

/* 사진 슬롯 — 프레임(클립된 영역)에만 채색하고 호스트는 그림자만 */
image-slot{display:block;box-shadow:var(--shadow-md)}
image-slot[shape="circle"]{border-radius:50%}
image-slot::part(frame){background:linear-gradient(140deg,#e8dcc4,#cdb084)}
image-slot::part(empty){color:rgba(74,58,36,.6)}
.slot-cap{position:absolute;left:22px;bottom:18px;color:#fff;font-family:var(--font-head);
  font-size:15px;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.4);z-index:2;
  pointer-events:none;white-space:nowrap}

/* 떠다니는 파스텔 도형 */
.blob{position:absolute;border-radius:50%;filter:blur(.4px);z-index:0;pointer-events:none}

/* 칩/뱃지 */
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:7px 14px;border-radius:999px;
  white-space:nowrap;background:var(--accent-primary-soft);color:var(--accent-primary)}
.chip.wood{background:var(--accent-secondary-soft);color:var(--amber-600)}

/* 카드 호버 */
.lift{transition:transform .16s ease,box-shadow .16s ease}
.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* 플로팅 상담 버튼 */
.float{position:fixed;right:24px;bottom:24px;z-index:160;width:64px;height:64px;border-radius:50%;
  background:var(--accent-secondary);color:#fff;display:grid;place-items:center;text-align:center;
  font-family:var(--font-head);font-size:13px;line-height:1.15;cursor:pointer;
  box-shadow:0 12px 26px rgba(214,154,82,.45);transition:transform .14s ease}
.float:hover{transform:scale(1.07) rotate(-3deg)}

/* 탭 */
.tabbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px}
.tab{font-family:var(--font-body);font-weight:600;font-size:15px;padding:11px 20px;border-radius:999px;
  cursor:pointer;border:1.5px solid var(--border-strong);background:transparent;color:var(--text-secondary);
  transition:.18s;display:inline-flex;align-items:center;gap:8px}
.tab:hover{border-color:var(--accent-primary);color:var(--accent-primary)}
.tab.on{background:var(--accent-primary);border-color:var(--accent-primary);color:#fff}

/* 푸터 사이트맵 */
.foot-top{display:grid;grid-template-columns:1fr 2.2fr;gap:48px}
.foot-contact{display:flex;align-items:center;gap:16px;margin-top:22px;
  color:rgba(255,255,255,.5);font-size:13px}
.foot-site{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 20px}
.foot-col h5{color:#fff;font-size:14px;margin:0 0 12px;font-weight:700}
.foot-col a{display:block;padding:5px 0;color:rgba(255,255,255,.55);font-size:13.5px;transition:color .16s}
.foot-col a:hover{color:#fff}

/* 진입 애니메이션 (베이스는 항상 보이게 — transform만 움직임) */
@keyframes fadeUp{from{transform:translateY(14px)}to{transform:none}}
.fade{animation:fadeUp .5s ease both}

/* 스크롤 등장 — 살짝 커지며 올라오는 리빌(JS가 reveal-ready를 붙일 때만 동작, 모션축소 존중) */
.reveal-ready .reveal{opacity:0;transform:translateY(28px) scale(.985);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),transform .65s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal-ready .reveal.in{opacity:1;transform:none}
@media print{.reveal{opacity:1 !important;transform:none !important}}

/* 반응형 */
@media(max-width:900px){
  .wrap{padding:0 20px}
  .sec{padding:72px 0}
  .gnb,.hd-login{display:none}
  .navgroup{display:none !important}
  .hd-in{justify-content:center !important;position:relative}
  .hd-cta{position:absolute;left:0;top:50%;transform:translateY(-50%)}
  html,body{overflow-x:clip}
  .hamb{display:grid !important;place-items:center;width:44px;height:44px;border-radius:12px;
    background:var(--accent-primary);color:#fff;cursor:pointer}
  .hero-dark .hd:not(.solid) .hamb{background:rgba(255,255,255,.18)}

  /* 인라인 그리드 모바일 강제 1단 */
  .twocol{grid-template-columns:1fr !important;gap:32px !important}
  .fgrid{grid-template-columns:1fr 1fr !important}
  .rsplit{grid-template-columns:1fr !important;gap:36px !important}
  .rgrid3{grid-template-columns:1fr !important}
  .rgrid4{grid-template-columns:1fr 1fr !important}
  .rfoot{grid-template-columns:1fr 1fr !important;gap:22px !important}
  .mega{display:none}
  .foot-top{grid-template-columns:1fr !important;gap:34px}
  .foot-site{grid-template-columns:1fr 1fr}
  .hbrow{flex-wrap:wrap}
  .hbrow > div{transform:none !important;margin-top:0 !important}
  .collage{height:auto !important;display:flex !important;flex-direction:column;
    align-items:center;gap:18px}
  .collage > div{position:static !important;transform:none !important}
  .collage > span{display:none !important}
}
@media(max-width:560px){
  .rfoot{grid-template-columns:1fr !important}
  .rgrid4{grid-template-columns:1fr 1fr !important}
  .fgrid{grid-template-columns:1fr !important}
  /* 좁은 화면에서 헤더 상담신청 버튼 숨김 → 햄버거 메뉴 + 우측 플로팅 CTA로 대체 */
  .hd-consult{display:none}
  .hd-cta{gap:10px}
}