/* =====================================================================
   YMS Landing — 학원 랜딩페이지 전용 스타일
   - 독립 실행형 (styles.css / bootstrap 의존 없음)
   - 모바일 우선(mobile-first)
   - 팔레트는 YMS 로고 원본 색상에서 추출:
       남색 #042F6B · 청록 #3DA0B3 · 노랑 #FDB819
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — 로고 원본 색 */
  --l-navy:       #042f6b;
  --l-navy-2:     #0b4a94;
  --l-navy-3:     #1a6ec0;
  --l-teal:       #3da0b3;
  --l-teal-2:     #63bccd;
  --l-teal-soft:  #e7f4f7;
  --l-amber:      #fdb819;
  --l-amber-2:    #ffd166;
  --l-amber-soft: #fff5dd;

  /* Surfaces — 따뜻한 오프화이트 계열 */
  --l-cream:   #fdfbf6;
  --l-sky:     #eff6fb;
  --l-bg:      #ffffff;
  --l-bg-2:    #f8fafc;
  --l-border:  #e6edf4;

  /* Text */
  --l-heading: #0d2544;
  --l-text:    #34465f;
  --l-muted:   #6b7f96;
  --l-on-navy:     #eaf2fb;
  --l-on-navy-dim: #9db6d4;

  /* Radius — 전반적으로 크고 둥글게 */
  --l-r-sm:   12px;
  --l-r-md:   20px;
  --l-r-lg:   28px;
  --l-r-xl:   36px;
  --l-r-pill: 999px;

  /* Shadow — 남색 기운을 살짝 섞어 부드럽게 */
  --l-sh-sm: 0 2px 6px rgba(4,47,107,.05), 0 8px 20px rgba(4,47,107,.05);
  --l-sh-md: 0 10px 30px rgba(4,47,107,.08);
  --l-sh-lg: 0 26px 60px rgba(4,47,107,.13);
  --l-sh-navy: 0 16px 38px rgba(4,47,107,.26);
  --l-sh-amber: 0 16px 38px rgba(253,184,25,.34);

  /* Layout */
  --l-wrap: 1120px;
  --l-header-h: 80px;
  --l-gutter: 20px;

  --l-font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
            "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
  --l-t: .25s cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 992px) {
  :root { --l-header-h: 96px; --l-gutter: 32px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--l-header-h) + 16px);
}
body {
  margin: 0;
  font-family: var(--l-font);
  font-size: 16px;
  line-height: 1.7;              /* 여유 있는 행간으로 부드럽게 */
  letter-spacing: -.01em;
  color: var(--l-text);
  background: var(--l-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* 모바일 가로 스크롤 차단 */
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--l-heading);
  font-weight: 800;
  line-height: 1.38;             /* 딱딱하지 않게 넉넉히 */
  letter-spacing: -.022em;
  word-break: keep-all;          /* 한글 단어 단위 줄바꿈 */
}
p  { margin: 0; word-break: keep-all; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 3px solid rgba(61,160,179,.6); outline-offset: 3px; border-radius: 8px; }

/* ---------- 3. Utilities ---------- */
.l-wrap {
  width: 100%;
  max-width: var(--l-wrap);
  margin-inline: auto;
  padding-inline: var(--l-gutter);
}
.l-sec { padding-block: 76px; }
@media (min-width: 768px)  { .l-sec { padding-block: 100px; } }
@media (min-width: 1200px) { .l-sec { padding-block: 124px; } }

.l-sec--cream { background: var(--l-cream); }
.l-sec--navy  { background: var(--l-navy); color: var(--l-on-navy); }
.l-sec--navy h2, .l-sec--navy h3 { color: #fff; }

.l-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px;
  border-radius: var(--l-r-pill);
  background: var(--l-amber-soft);
  color: #8a5a00;
  font-size: 13.5px; font-weight: 700;
}
.l-eyebrow svg { width: 16px; height: 16px; flex: none; color: var(--l-amber); }
.l-sec--navy .l-eyebrow {
  background: rgba(255,255,255,.1);
  color: var(--l-amber-2);
}
.l-sec--navy .l-eyebrow svg { color: var(--l-amber); }

.l-h2 { font-size: clamp(26px, 5vw, 42px); }
.l-lead {
  margin-top: 18px;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.85;
  color: var(--l-muted);
}
.l-sec--navy .l-lead, .l-hero .l-lead { color: var(--l-on-navy-dim); }
.l-hero .l-lead { color: var(--l-muted); }

.l-sec-head { max-width: 660px; }
.l-sec-head > .l-eyebrow { margin-bottom: 20px; }
.l-sec-head--center { margin-inline: auto; text-align: center; }

/* 노란 형광펜 하이라이트 — 가장 친근한 강조 */
.l-mark {
  display: inline;
  background-image: linear-gradient(90deg, rgba(253,184,25,.5), rgba(253,209,102,.45));
  background-repeat: no-repeat;
  background-size: 100% .38em;
  background-position: 0 86%;
  padding-inline: 3px;
}
.l-sec--navy .l-mark,
.l-hero .l-mark--teal {
  background-image: linear-gradient(90deg, rgba(61,160,179,.55), rgba(99,188,205,.4));
}
.l-amber { color: var(--l-amber); }

/* ---------- 4. Buttons ---------- */
.l-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 28px;
  border-radius: var(--l-r-pill);
  font-size: 16px; font-weight: 700;
  transition: transform var(--l-t), box-shadow var(--l-t), background var(--l-t),
              border-color var(--l-t), color var(--l-t);
  white-space: nowrap;
}
.l-btn svg { width: 19px; height: 19px; flex: none; }
.l-btn:active { transform: translateY(1px) scale(.99); }

/* 노란 버튼 = 상담/전화 (가장 따뜻한 액션) */
.l-btn--amber {
  color: var(--l-navy);
  background: linear-gradient(120deg, var(--l-amber-2) 0%, var(--l-amber) 100%);
  box-shadow: var(--l-sh-amber);
}
.l-btn--amber:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(253,184,25,.44); }

/* 남색 버튼 = 로그인 */
.l-btn--navy {
  color: #fff;
  background: linear-gradient(120deg, var(--l-navy-2) 0%, var(--l-navy) 100%);
  box-shadow: var(--l-sh-navy);
}
.l-btn--navy:hover { transform: translateY(-2px); box-shadow: 0 20px 46px rgba(4,47,107,.34); }

.l-btn--ghost {
  color: var(--l-navy);
  background: #fff;
  border: 1.5px solid var(--l-border);
  box-shadow: var(--l-sh-sm);
}
.l-btn--ghost:hover { border-color: var(--l-teal-2); color: var(--l-navy); transform: translateY(-2px); }

.l-btn--block { width: 100%; }

/* ---------- 5. Scroll progress ---------- */
.l-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120;
  background: linear-gradient(90deg, var(--l-navy), var(--l-teal), var(--l-amber));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- 6. 헤더 (로고 + 부송관 만) ---------- */
.l-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--l-header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--l-t), box-shadow var(--l-t), border-color var(--l-t);
}
.l-header.is-stuck {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--l-border);
  box-shadow: 0 6px 26px rgba(4,47,107,.06);
}
.l-header__inner {
  width: 100%; max-width: var(--l-wrap); margin-inline: auto;
  padding-inline: var(--l-gutter);
}
.l-logo { display: inline-flex; align-items: center; gap: 14px; }
.l-logo img {
  height: 54px; width: auto;
}
@media (min-width: 992px) { .l-logo img { height: 70px; } }
.l-logo__txt {
  font-size: 19px; font-weight: 800; letter-spacing: -.02em;
  color: var(--l-navy);
  padding-left: 14px;
  border-left: 2px solid var(--l-amber);
  line-height: 1.2;
}
@media (min-width: 992px) { .l-logo__txt { font-size: 22px; } }

/* ---------- 7. Hero — 밝고 따뜻한 톤 ---------- */
.l-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--l-header-h) + 40px);
  padding-bottom: 84px;
  background: linear-gradient(180deg, var(--l-cream) 0%, var(--l-sky) 58%, #fff 100%);
}
@media (min-width: 992px) {
  .l-hero { padding-top: calc(var(--l-header-h) + 72px); padding-bottom: 120px; }
}

/* 말랑한 블롭 장식 (격자 대신) */
.l-blobs { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.l-blobs i {
  position: absolute; display: block;
  filter: blur(50px); opacity: .5;
  animation: l-drift 16s ease-in-out infinite alternate;
}
.l-blobs i:nth-child(1) {
  width: 44vw; height: 44vw; min-width: 280px; min-height: 280px;
  left: -10%; top: 4%;
  background: radial-gradient(circle, var(--l-teal-2), transparent 68%);
  border-radius: 58% 42% 44% 56%;
}
.l-blobs i:nth-child(2) {
  width: 38vw; height: 38vw; min-width: 240px; min-height: 240px;
  right: -8%; top: -4%;
  background: radial-gradient(circle, var(--l-amber-2), transparent 68%);
  border-radius: 46% 54% 60% 40%; opacity: .42; animation-delay: -5s;
}
.l-blobs i:nth-child(3) {
  width: 34vw; height: 34vw; min-width: 220px; min-height: 220px;
  left: 40%; bottom: -12%;
  background: radial-gradient(circle, #a8d5e2, transparent 68%);
  border-radius: 52% 48% 40% 60%; opacity: .45; animation-delay: -10s;
}
@keyframes l-drift {
  from { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.12) rotate(8deg); }
}
/* 은은한 점 패턴 — 선 격자보다 부드럽다 */
.l-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(4,47,107,.07) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 100%);
}

.l-hero__grid { display: grid; gap: 52px; align-items: center; }
@media (min-width: 1024px) {
  .l-hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 60px; }
}
.l-hero h1 {
  margin-top: 24px;
  font-size: clamp(32px, 6.6vw, 54px);
  line-height: 1.34;
  letter-spacing: -.028em;
}
.l-hero .l-lead { max-width: 30em; }
.l-hero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.l-hero__cta .l-btn { flex: 1 1 auto; min-width: 168px; }
@media (min-width: 480px) { .l-hero__cta .l-btn { flex: 0 0 auto; } }

/* ---------- 8. Hero 미리보기 카드 ---------- */
.l-mock { position: relative; padding-bottom: 128px; }
.l-mock__card {
  position: relative;
  padding: 22px;
  border-radius: var(--l-r-lg);
  background: #fff;
  border: 1px solid var(--l-border);
  box-shadow: var(--l-sh-lg);
  animation: l-float 7s ease-in-out infinite;
}
@keyframes l-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@media (min-width: 1024px) { .l-mock__card { padding: 26px; } }

.l-mock__head { display: flex; align-items: center; gap: 12px; }
.l-mock__ava {
  width: 46px; height: 46px; border-radius: 16px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--l-teal-2), var(--l-teal));
  color: #fff; font-weight: 800; font-size: 16px;
}
.l-mock__name { font-weight: 700; font-size: 15.5px; color: var(--l-heading); }
.l-mock__sub  { font-size: 12.5px; color: var(--l-muted); }
.l-mock__chip {
  margin-left: auto; flex: none;
  padding: 6px 13px; border-radius: var(--l-r-pill);
  background: var(--l-amber-soft); color: #8a5a00;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

.l-mock__rows { margin-top: 22px; display: grid; gap: 16px; }
.l-mock__row-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; font-size: 13.5px;
}
.l-mock__row-top b { font-weight: 600; color: var(--l-heading); }
.l-mock__row-top i { font-style: normal; font-size: 12.5px; color: var(--l-muted); font-variant-numeric: tabular-nums; }

.l-bar { height: 10px; border-radius: 99px; background: #edf2f7; overflow: hidden; }
.l-bar > span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--l-navy-3), var(--l-navy-2));
  transition: width 1.4s cubic-bezier(.22,1,.36,1);
}
.l-bar.is-teal  > span { background: linear-gradient(90deg, var(--l-teal-2), var(--l-teal)); }
.l-bar.is-amber > span { background: linear-gradient(90deg, var(--l-amber-2), var(--l-amber)); }

.l-mock__foot {
  margin-top: 22px; padding-top: 18px; border-top: 1.5px dashed #e3ebf3;
  display: flex; align-items: center; gap: 10px;
}
.l-mock__foot .l-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--l-teal); animation: l-pulse 2.2s infinite;
}
@keyframes l-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(61,160,179,.5); }
  70%  { box-shadow: 0 0 0 12px rgba(61,160,179,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,160,179,0); }
}
.l-mock__foot p { font-size: 12.5px; color: var(--l-muted); }

/* 떠 있는 알림톡 말풍선 — 카드 아래쪽 여백에 놓아 본문을 가리지 않게 */
.l-mock__toast {
  position: absolute; z-index: 2; right: 0; bottom: 0;
  width: min(280px, 88%);
  padding: 15px 17px;
  border-radius: 22px 22px 22px 8px;
  background: var(--l-navy); color: #fff;
  box-shadow: 0 22px 46px rgba(4,47,107,.32);
  animation: l-float 7s ease-in-out infinite reverse;
}
@media (min-width: 1024px) { .l-mock__toast { right: -26px; } }
.l-mock__toast-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--l-amber); }
.l-mock__toast-h svg { width: 14px; height: 14px; }
.l-mock__toast p { margin-top: 7px; font-size: 13px; line-height: 1.6; color: #e6eefa; }
.l-mock__toast p b { color: #fff; }
.l-mock__toast time { display: block; margin-top: 9px; font-size: 11px; color: var(--l-on-navy-dim); }

/* ---------- 9. 배지 마퀴 ---------- */
.l-marquee {
  background: #fff;
  border-block: 1px solid var(--l-border);
  padding-block: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.l-marquee__track { display: flex; gap: 40px; width: max-content; animation: l-scroll 30s linear infinite; }
.l-marquee:hover .l-marquee__track { animation-play-state: paused; }
@keyframes l-scroll { to { transform: translateX(-50%); } }
.l-marquee__item {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-size: 14.5px; font-weight: 600; color: var(--l-navy); white-space: nowrap;
}
.l-marquee__item svg { width: 18px; height: 18px; flex: none; color: var(--l-teal); }

/* ---------- 10. 차별점 카드 ---------- */
.l-cards { margin-top: 52px; display: grid; gap: 18px; }
@media (min-width: 640px)  { .l-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .l-cards { grid-template-columns: repeat(4, 1fr); } }

.l-card {
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--l-r-lg);
  background: #fff;
  border: 1px solid var(--l-border);
  box-shadow: var(--l-sh-sm);
  transition: transform var(--l-t), box-shadow var(--l-t), border-color var(--l-t);
}
.l-card:hover { transform: translateY(-6px); box-shadow: var(--l-sh-lg); border-color: #cfe3ea; }
.l-card__ic {
  width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center;
  background: var(--l-teal-soft); color: var(--l-teal);
  transition: background var(--l-t), color var(--l-t);
}
.l-card:nth-child(2) .l-card__ic { background: var(--l-amber-soft); color: #d99400; }
.l-card:nth-child(3) .l-card__ic { background: #e8f0fb; color: var(--l-navy-2); }
.l-card:nth-child(4) .l-card__ic { background: #eef7f0; color: #3f9e6a; }
.l-card__ic svg { width: 28px; height: 28px; }
.l-card h3 { margin-top: 20px; font-size: 19px; }
.l-card p  { margin-top: 10px; font-size: 14.5px; line-height: 1.8; color: var(--l-muted); }

/* ---------- 11. 학습 시스템 4단계 ---------- */
.l-steps { position: relative; margin-top: 54px; display: grid; gap: 32px; }
.l-steps::before {                      /* 모바일: 세로 점선 */
  content: ""; position: absolute; left: 28px; top: 16px; bottom: 16px; width: 0;
  border-left: 2px dashed rgba(255,255,255,.18);
}
.l-steps__fill {
  position: absolute; left: 27px; top: 16px; width: 3px; height: 0;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--l-teal), var(--l-amber));
  transition: height .9s cubic-bezier(.22,1,.36,1);
}
.l-step { position: relative; padding-left: 76px; }
.l-step__n {
  position: absolute; left: 0; top: 0;
  width: 58px; height: 58px; border-radius: 22px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.16);
  color: var(--l-on-navy-dim); font-weight: 800; font-size: 17px;
  transition: background var(--l-t), color var(--l-t), border-color var(--l-t),
              transform var(--l-t), box-shadow var(--l-t);
}
.l-step.is-on .l-step__n {
  background: linear-gradient(135deg, var(--l-amber-2), var(--l-amber));
  border-color: transparent; color: var(--l-navy);
  transform: scale(1.07); box-shadow: 0 12px 30px rgba(253,184,25,.36);
}
.l-step h3 { font-size: 20px; }
.l-step p  { margin-top: 10px; font-size: 14.5px; line-height: 1.85; color: var(--l-on-navy-dim); }
.l-step__tags { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.l-step__tags span {
  padding: 6px 13px; border-radius: var(--l-r-pill);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 12px; font-weight: 600; color: #cfe0f2;
}
@media (min-width: 1024px) {
  .l-steps { grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 68px; }
  .l-steps::before { left: 29px; right: 29px; top: 29px; bottom: auto; width: auto; height: 0; border-left: 0; border-top: 2px dashed rgba(255,255,255,.18); }
  .l-steps__fill { left: 29px; top: 28px; width: 0; height: 3px; transition: width 1s cubic-bezier(.22,1,.36,1); }
  .l-step { padding-left: 0; padding-top: 84px; }
}

/* ---------- 12. 상담 CTA + 오시는 길 ---------- */
.l-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--l-r-xl);
  padding: 46px 26px;
  background: linear-gradient(135deg, #073c86 0%, var(--l-navy) 55%, #06305f 100%);
  color: #fff;
}
@media (min-width: 900px) { .l-cta { padding: 68px 60px; } }
.l-cta::before {                      /* 따뜻한 노란 빛 번짐 */
  content: ""; position: absolute; inset: auto -12% -45% auto; width: 62%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(253,184,25,.4), transparent 62%); filter: blur(34px);
}
.l-cta::after {
  content: ""; position: absolute; inset: -40% auto auto -14%; width: 52%; aspect-ratio: 1; z-index: -1;
  background: radial-gradient(circle, rgba(61,160,179,.42), transparent 64%); filter: blur(34px);
}
.l-cta h2 { color: #fff; font-size: clamp(24px, 4.4vw, 38px); }
.l-cta p  { margin-top: 16px; font-size: clamp(15px, 2vw, 17px); line-height: 1.85; color: #c9dbf1; }
.l-cta__grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .l-cta__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 48px; align-items: center; } }
/* 방문 상담 안내 문구 (연락처 미공개 상태) */
.l-cta p.l-cta__note {          /* .l-cta p 보다 우선하도록 태그까지 명시 */
  margin-top: 28px;
  display: inline-flex; align-items: flex-start; gap: 10px;
  padding: 14px 20px;
  border-radius: var(--l-r-md);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 14.5px; font-weight: 600; line-height: 1.6;
  color: #fff;
}

.l-info { display: grid; gap: 2px; border-radius: var(--l-r-lg); overflow: hidden; background: rgba(255,255,255,.14); }
.l-info__row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 19px 22px; background: rgba(3,32,73,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.l-info__row svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--l-amber); }
.l-info__row b { display: block; font-size: 12px; font-weight: 700; color: #9db6d4; }
.l-info__row p { margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff; }

/* ---------- 13. 푸터 (간소화) ---------- */
.l-footer { background: var(--l-cream); border-top: 1px solid var(--l-border); padding-block: 40px 32px; }
.l-footer__top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  justify-content: space-between;
}
.l-footer__brand { display: inline-flex; align-items: center; gap: 12px; }
.l-footer__brand img { height: 48px; }
.l-footer__brand span {
  font-size: 16px; font-weight: 800; color: var(--l-navy);
  padding-left: 12px; border-left: 2px solid var(--l-amber);
}
.l-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.l-footer__links a { font-size: 14px; font-weight: 600; color: var(--l-muted); transition: color var(--l-t); }
.l-footer__links a:hover { color: var(--l-navy); }
.l-footer__bot {
  margin-top: 26px; padding-top: 22px; border-top: 1px dashed #dfe8f0;
  font-size: 12.5px; line-height: 1.9; color: var(--l-muted);
}
.l-footer__bot span { display: block; }   /* 모바일: 한 줄에 하나씩, 구분선 없음 */

/* 한 줄에 들어가는 폭에서만 " | " 구분선을 노출 */
@media (min-width: 768px) {
  .l-footer__bot { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .l-footer__bot span { display: inline; }
  .l-footer__bot span + span:not(.l-footer__addr)::before {
    content: "|"; margin-right: 14px; color: #cbd6e2;
  }
  .l-footer__addr { flex-basis: 100%; }   /* 주소는 항상 다음 줄에 */
}

/* ---------- 14. 모바일 하단 고정 액션바 ---------- */
.l-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px var(--l-gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--l-border);
  transform: translateY(120%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.l-dock.is-on { transform: translateY(0); }
.l-dock .l-btn { min-height: 50px; font-size: 15px; padding: 0 14px; }
@media (min-width: 992px) { .l-dock { display: none; } }
@media (max-width: 991.98px) { .l-footer { padding-bottom: 104px; } }

/* 맨 위로 */
.l-top {
  position: fixed; right: 18px; bottom: 88px; z-index: 80;
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--l-navy);
  border: 1px solid var(--l-border); box-shadow: var(--l-sh-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--l-t), transform var(--l-t), visibility var(--l-t);
}
.l-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.l-top svg { width: 21px; height: 21px; }
@media (min-width: 992px) { .l-top { right: 28px; bottom: 28px; } }

/* ---------- 15. Reveal ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 16. 접근성: 모션 최소화 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 스크린리더 전용 */
.l-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 17. 프리로더 (JS 없이도 사라짐) ---------- */
.l-preload {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; background: var(--l-cream);
  animation: l-preout .45s ease .5s forwards;
}
.l-preload img { width: 66px; height: 66px; border-radius: 22px; animation: l-bob 1.1s ease-in-out infinite alternate; }
@keyframes l-bob { to { transform: translateY(-10px); } }
@keyframes l-preout { to { opacity: 0; visibility: hidden; } }