/* ============================================================
   v28 타이포 — MaruBuri @font-face (네이버 한글캠페인 무료 배포)
   공식 CSS는 웨이트 매핑이 없어 자체 선언. 600/700만 로드.
   ============================================================ */
@font-face{
  font-family:'MaruBuri';font-weight:600;font-style:normal;font-display:swap;
  src:url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2') format('woff2'),
      url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff') format('woff');
}
@font-face{
  font-family:'MaruBuri';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2') format('woff2'),
      url('https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff') format('woff');
}

/* ============================================================
   강동구.KR 럭셔리 v27 — 공통 럭셔리 레이어 (luxury.css)
   크림 #FBF8F1 + 코퍼 #9A6328 + 골드 아이덴티티 위에 additive.
   원칙: 럭셔리 = 깊이(레이어드 섀도)·골드 디테일·그라데이션 워시·
         섬세한 보더·마이크로 인터랙션·타이포 리듬·여백.
         '연한 회색 텍스트' 금지 — 고대비(어르신 가독성) 절대 유지.
   로드 순서: 각 페이지 인라인 <style> 뒤, </head> 직전 <link>.
   기능 JS / SEO 메타 / PHP 로직 절대 불변. CSS만 얹는다.
   ============================================================ */

/* ---------- 0. 토큰 확장 + 세리프 복원 ---------- */
:root{
  /* 기존 토큰 폴백 겸 표준값 (페이지에 이미 있으면 그 값 우선) */
  --bg:#FBF8F1; --surface:#FFFFFF; --surface-2:#F4EFE5;
  --ink:#0F0D0B; --ink-2:#2E2A24; --ink-3:#5A544B;
  --border:#E0D6BF; --border-2:#C2B596;
  --accent:#9A6328; --accent-2:#6F4516; --accent-soft:#F4E3C9;
  --gold:#C49526;

  /* v27 럭셔리 토큰 */
  --lx-gold:#C49526;            /* 브랜드 골드 (raw #f1c40f 사용 금지) */
  --lx-gold-hi:#E8B86A;         /* 밝은 골드 (다크 배경 위) */
  --lx-gold-soft:#F4E3C9;       /* 골드 소프트 배경 */
  --lx-warm-ink:60,42,20;       /* 따뜻한 잉크 섀도 RGB (무채색 블랙 금지) */
  --lx-copper:154,99,40;        /* 코퍼 글로우 RGB */

  /* 레이어드 섀도 3종 */
  --lx-shadow-rest:0 1px 2px rgba(var(--lx-warm-ink),.04),0 4px 12px -4px rgba(var(--lx-warm-ink),.06);
  --lx-shadow-hover:0 2px 4px rgba(var(--lx-warm-ink),.06),0 12px 28px -8px rgba(var(--lx-warm-ink),.14),0 32px 64px -32px rgba(var(--lx-copper),.22);
  --lx-shadow-deep:0 2px 4px rgba(var(--lx-warm-ink),.05),0 16px 36px -12px rgba(var(--lx-copper),.18),0 40px 80px -40px rgba(var(--lx-warm-ink),.22);

  --lx-ease:cubic-bezier(.16,1,.3,1);

  /* ★ v28: MaruBuri 1순위 — var(--font-serif) 참조하는
     모든 기존 셀렉터에 자동 전파된다. (MaruBuri는 600/700만 로드) */
  --font-serif:'MaruBuri','Gowun Batang','Apple Myungjo','Noto Serif CJK KR','Batang',serif;
  --lx-serif:'MaruBuri','Gowun Batang','Apple Myungjo','Noto Serif CJK KR','Batang',serif;
}

/* ---------- 1. 프리미엄 배경 워시 (앰비언트) ---------- */
/* 단색 크림 한 장 → 골드/코퍼 저채도 글로우. 텍스트 대비 영향 없음(알파 6~16%) */
body.lx{position:relative}
body.lx::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 88% -8%,rgba(232,184,106,.14),transparent 60%),
    radial-gradient(820px 520px at -10% 34%,rgba(var(--lx-copper),.07),transparent 55%),
    radial-gradient(900px 480px at 50% 108%,rgba(244,227,201,.45),transparent 65%),
    linear-gradient(180deg,#FDFAF3 0%,var(--bg) 280px);
}
/* 섹션 단위 워시 (body.lx 대신/추가로 특정 섹션에만) */
.lx-wash-top{background:radial-gradient(1200px 480px at 50% -80px,rgba(196,149,38,.06),transparent 65%)}
.lx-wash-right{background:radial-gradient(1000px 420px at 85% 0,rgba(var(--lx-copper),.05),transparent 60%)}
.lx-wash-left{background:radial-gradient(900px 400px at 12% 100%,rgba(232,184,106,.07),transparent 60%)}

/* ---------- 2. 카드 공통 트리트먼트 ---------- */
/* .lx-card: 레이어드 섀도 + 골드 헤어라인(hover) + 리프트 */
.lx-card{
  position:relative;
  box-shadow:var(--lx-shadow-rest);
  transition:transform .28s var(--lx-ease),box-shadow .28s var(--lx-ease),border-color .28s var(--lx-ease);
}
.lx-card:hover{transform:translateY(-3px);box-shadow:var(--lx-shadow-hover);border-color:rgba(232,184,106,.55)}
.lx-card::after{
  content:"";position:absolute;top:0;left:12%;right:12%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--lx-gold),transparent);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.lx-card:hover::after{opacity:.8}
/* 카드형이지만 리프트가 과한 곳(리스트 행 등): 섀도만 */
.lx-card-flat{box-shadow:var(--lx-shadow-rest);transition:box-shadow .28s var(--lx-ease),border-color .28s var(--lx-ease)}
.lx-card-flat:hover{box-shadow:var(--lx-shadow-hover);border-color:rgba(232,184,106,.55)}

/* ---------- 3. 이미지 트리트먼트 ---------- */
/* 사진 래퍼에 부여: 내부 헤어라인 + 하단 비네트 → 사진 톤 통일 */
.lx-photo{position:relative;overflow:hidden}
.lx-photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -32px 40px -24px rgba(var(--lx-warm-ink),.28);
}
.lx-photo img{filter:saturate(1.05) contrast(1.03) sepia(.03)}
/* 하단 다크 워시가 필요한 큰 이미지(코스/이벤트) */
.lx-photo-dim::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(15,13,11,.22));
}

/* ---------- 4. 섹션 디바이더 / 아이브로우 ---------- */
/* 골드 다이아몬드 디바이더: <div class="lx-divider" aria-hidden="true"><i></i></div> */
.lx-divider{display:flex;align-items:center;gap:14px;max-width:280px;margin:36px auto;padding:8px 0}
.lx-divider::before,.lx-divider::after{content:"";flex:1;height:1px}
.lx-divider::before{background:linear-gradient(90deg,transparent,var(--border-2))}
.lx-divider::after{background:linear-gradient(90deg,var(--border-2),transparent)}
.lx-divider i{width:6px;height:6px;background:var(--lx-gold);transform:rotate(45deg);flex-shrink:0}

/* 아이브로우 라벨: <div class="lx-eyebrow">KANGDONG · 소개</div> */
.lx-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:800;letter-spacing:.22em;color:var(--accent);
  text-transform:uppercase;margin-bottom:10px;
}
.lx-eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--lx-gold),transparent)}

/* 섹션 제목 골드 틱 (h2 좌측): 이모지 대체용 */
.lx-tick{display:flex;align-items:center;gap:9px}
.lx-tick::before{
  content:"";width:4px;height:17px;border-radius:2px;flex-shrink:0;
  background:linear-gradient(180deg,var(--lx-gold-hi),var(--accent));
}

/* ---------- 5. 세리프 헤딩 리듬 ---------- */
/* var(--font-serif) 미사용 페이지의 제목에 직접 부여 */
.lx-serif{font-family:var(--lx-serif);font-weight:700;letter-spacing:-0.015em;word-break:keep-all}
/* 한글 가짜 이탤릭 금지 — em 액센트는 골드 형광 밑줄 워시로 */
.lx-em, .lx-serif em{
  font-style:normal;color:var(--accent);
  background:linear-gradient(transparent 68%,var(--accent-soft) 68%);
}

/* ---------- 6. 버튼 / 뱃지 / 칩 폴리시 ---------- */
/* 골드 메탈 버튼 (#f1c40f류 만화 노랑 전면 금지) */
.lx-btn-gold{
  background:linear-gradient(160deg,#E8C97A 0%,#C49526 55%,#A97F1E 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -6px rgba(196,149,38,.45);
  transition:transform .22s var(--lx-ease),box-shadow .22s var(--lx-ease),background .22s;
}
.lx-btn-gold:hover{
  background:linear-gradient(160deg,#F0D68C,#C49526);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 28px -8px rgba(196,149,38,.5);
}
/* 코퍼 버튼 (주요 CTA) */
.lx-btn-copper{
  background:linear-gradient(180deg,#B0722F,var(--accent));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 8px 18px -8px rgba(111,69,22,.55);
  transition:transform .22s var(--lx-ease),box-shadow .22s var(--lx-ease);
}
.lx-btn-copper:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -10px rgba(111,69,22,.6)}
/* 다크 잉크 버튼 + 골드 sheen 스윕 */
.lx-btn-dark{
  background:linear-gradient(135deg,#2E2A24,#0F0D0B);color:#fff;position:relative;overflow:hidden;
  border:1px solid rgba(232,184,106,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -12px rgba(15,13,11,.5);
  transition:transform .22s var(--lx-ease),box-shadow .22s var(--lx-ease);
}
.lx-btn-dark::before{
  content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(232,184,106,.25),transparent);
  transform:skewX(-20deg);transition:left .5s ease;pointer-events:none;
}
.lx-btn-dark:hover{transform:translateY(-2px)}
.lx-btn-dark:hover::before{left:120%}
.lx-btn-gold:active,.lx-btn-copper:active,.lx-btn-dark:active{transform:translateY(0)}

/* 골드 뱃지 (검증/등록/코스 종류 등) */
.lx-badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  background:linear-gradient(135deg,#F8ECD6,#F0DBBB);color:var(--accent-2);
  border:1px solid rgba(var(--lx-copper),.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 1px 2px rgba(var(--lx-warm-ink),.06);
  letter-spacing:.04em;font-weight:800;
}
/* 이모지 아이콘 받침 배지 (raw 이모지 격상, 마크업 불변 CSS만) */
.lx-ico{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  background:linear-gradient(145deg,#FBF3E4,#F1E2C6);
  border:1px solid rgba(194,181,150,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px -2px rgba(var(--lx-copper),.25);
}
/* 글래스 칩 (다크/영상 배경 위) */
.lx-chip-glass{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.38);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-shadow:0 1px 6px rgba(0,0,0,.35);border-radius:999px;
  transition:background .25s,color .25s;
}
.lx-chip-glass:hover{background:rgba(255,255,255,.92);color:var(--accent-2);text-shadow:none}
/* 라이트 칩 (크림 배경 위 필터/카테고리) */
.lx-chip{box-shadow:0 1px 3px rgba(var(--lx-warm-ink),.05);transition:transform .25s var(--lx-ease),box-shadow .25s var(--lx-ease),border-color .25s}
.lx-chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(var(--lx-copper),.12);border-color:var(--lx-gold)}
.lx-chip-active{
  background:linear-gradient(135deg,#2A2118,var(--ink))!important;color:#fff!important;
  border-color:var(--ink)!important;
  box-shadow:0 3px 10px rgba(15,13,11,.22),inset 0 0 0 1px rgba(232,184,106,.28);
}

/* ---------- 7. 헤더 폴리시 ---------- */
/* 공통 .topbar: 골드 힌트 헤어라인 (모든 페이지 셀렉터 동일) */
.topbar{border-bottom-color:rgba(194,181,150,.55)!important}
.topbar.scrolled{box-shadow:0 1px 0 rgba(196,149,38,.25),0 8px 24px -12px rgba(var(--lx-warm-ink),.18)}

/* ---------- 8. 푸터 프리미엄 처리 ---------- */
/* <footer class="lx-footer"> 또는 기존 footer에 클래스 부여 */
.lx-footer{
  position:relative;text-align:center;
  background:
    radial-gradient(ellipse 900px 400px at 15% 0%,rgba(var(--lx-copper),.14),transparent 60%),
    radial-gradient(ellipse 700px 300px at 90% 100%,rgba(196,149,38,.08),transparent 60%),
    linear-gradient(180deg,#171310,#0F0D0B);
  color:rgba(255,255,255,.82);           /* 고대비: .4~.5 회색 금지 */
  padding:52px 24px 36px;border-top:none;
}
.lx-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(196,149,38,.65) 50%,transparent);
}
.lx-footer .lx-f-brand{
  font-family:var(--lx-serif);font-size:21px;font-weight:700;
  color:#F5EAD8;letter-spacing:.02em;margin-bottom:8px;
}
.lx-footer .lx-f-brand span{color:var(--lx-gold-hi)}
.lx-footer .lx-f-div{width:56px;height:1px;margin:16px auto;background:linear-gradient(90deg,transparent,var(--lx-gold-hi),transparent)}
.lx-footer .lx-f-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.lx-footer a{color:rgba(255,255,255,.85);font-weight:700;transition:color .2s}
.lx-footer a:hover{color:var(--lx-gold-hi)}
.lx-footer .lx-f-copy{font-size:13px;color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.1);padding-top:18px;margin-top:8px}
/* 푸터 링크 이모지 불릿 대체: hover 골드 대시 */
.lx-footer .lx-f-links a::before,.footer .footer-col a::before{
  content:"—";color:var(--lx-gold-hi);opacity:0;margin-right:0;transition:opacity .2s,margin .2s;
}
.lx-footer .lx-f-links a:hover::before,.footer .footer-col a:hover::before{opacity:1;margin-right:6px}

/* ---------- 9. 다크 밴드 / 히어로 워시 ---------- */
/* 다크 섹션(.page-hero, CTA 밴드 등)에 부여 — 골드 글로우 + 골드 헤어라인 마감 */
.lx-dark{
  position:relative;
  border-bottom:1px solid rgba(232,184,106,.35);
}
.lx-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 82% -120px,rgba(232,184,106,.18),transparent 60%),
    radial-gradient(600px 300px at 8% 110%,rgba(var(--lx-copper),.22),transparent 55%);
}
.lx-dark>*{position:relative;z-index:1}

/* ---------- 10. 폼 / 포커스 / 빈 상태 ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
.lx-focus-ring:focus-within{
  background:#fff;border-radius:10px;
  box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px rgba(var(--lx-copper),.10);
}
.lx-empty{
  background:linear-gradient(180deg,#fff,#FDFAF3);
  border:1px dashed var(--lx-gold);border-radius:20px;
  box-shadow:0 8px 24px rgba(var(--lx-copper),.06);
}

/* ---------- 11. 인포 타일 / 인용 ---------- */
.lx-tile{
  background:#fff;border:1px solid var(--border);border-left:3px solid var(--lx-gold);
  border-radius:12px;transition:transform .18s,box-shadow .18s,border-color .18s;
}
.lx-tile:hover{transform:translateY(-2px);border-left-color:var(--accent);box-shadow:0 10px 20px -14px rgba(var(--lx-copper),.25)}
.lx-quote{position:relative;padding-left:56px!important}
.lx-quote::before{
  content:"\201C";position:absolute;left:20px;top:10px;
  font-family:var(--lx-serif);font-size:56px;line-height:1;color:var(--lx-gold);opacity:.8;
}

/* ---------- 12. 스크롤 리빌 (JS 게이트 — 폴백 안전) ---------- */
/* JS: document.documentElement.classList.add('js-reveal') + IO가 .in 부여.
   JS 미실행 시 html.js-reveal 없음 → 항상 보임. */
html.js-reveal .reveal,html.js-reveal .lx-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--lx-ease),transform .6s var(--lx-ease)}
html.js-reveal .reveal.in,html.js-reveal .lx-reveal.in{opacity:1;transform:none}

/* ---------- 13. reduced-motion 가드 (전 페이지 공통 제약) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .lx-card:hover,.lx-btn-gold:hover,.lx-btn-copper:hover,.lx-btn-dark:hover,
  .lx-chip:hover,.lx-tile:hover{transform:none}
  html.js-reveal .reveal,html.js-reveal .lx-reveal{opacity:1;transform:none}
}

/* ---------- 14. 모바일 보정 ---------- */
@media (max-width:640px){
  body.lx::before{
    background:
      radial-gradient(640px 340px at 90% -6%,rgba(232,184,106,.13),transparent 60%),
      radial-gradient(520px 380px at -12% 36%,rgba(var(--lx-copper),.06),transparent 55%),
      linear-gradient(180deg,#FDFAF3 0%,var(--bg) 220px);
  }
  .lx-divider{margin:26px auto}
}
/* 모바일 가로 스크롤 칩 행: .chips 등 래퍼에 부여 */
@media (max-width:720px){
  .lx-scroll-x{
    display:flex;flex-wrap:nowrap!important;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:6px;scroll-snap-type:x proximity;
  }
  .lx-scroll-x::-webkit-scrollbar{display:none}
  .lx-scroll-x>*{flex-shrink:0;scroll-snap-align:start}
}

/* ---------- 15. v28 타이포 리듬 (스케일 1.25 · 세리프 웨이트 정규화) ---------- */
:root{
  --fs-caption:13px;  --lh-caption:1.5;
  --fs-body:16.5px;   --lh-body:1.65;   /* 어르신 기준 불변 */
  --fs-card:19px;     --lh-card:1.4;
  --fs-sub:24px;      --lh-sub:1.35;
  --fs-section:30px;  --lh-section:1.28;
  --fs-hero:40px;     --lh-hero:1.24;
  --ls-serif:-0.015em; --ls-sans:-0.01em;
}
/* 세리프는 600/700만 존재 — 800/900 합성 볼드 전면 차단 */
.lx-serif,.serif,.hero-title,.section-title,.dong-name,.route-title,
.owner-title,.featured-name,.side-title,.footer-brand-text,.lx-f-brand,
.brand-text{font-family:var(--lx-serif)!important;font-weight:600;letter-spacing:var(--ls-serif);word-break:keep-all}
.brand-text,.brand-text strong,.footer-brand-text,.lx-f-brand,
.owner-stat strong{font-weight:700}
/* 스케일 정렬 */
.hero-title{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:-0.02em}
.section-title{font-size:var(--fs-section);line-height:var(--lh-section)}
.dong-name,.owner-title{font-size:var(--fs-sub);line-height:var(--lh-sub)}
.route-title,.featured-name{font-size:var(--fs-card);line-height:var(--lh-card)}
/* 세리프 대형 헤딩 시각 보정 */
.hero-title,.section-title{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media (max-width:640px){
  :root{--fs-hero:27px;--fs-section:24px;--fs-sub:21px;--fs-card:17.5px}
  .hero-title{line-height:1.3}
}

/* ---------- 16. v28 브랜드 워드마크 ---------- */
/* 마크업 불변: <span class="brand-text">강동구<strong>.KR</strong></span> */
.brand-text{
  font-family:var(--lx-serif);font-size:22px;font-weight:700;
  color:var(--ink);letter-spacing:0.015em;   /* 세리프 워드마크는 살짝 벌려 각인력 확보 */
  font-feature-settings:'liga' 1;
}
.brand-text strong{
  font-weight:700;letter-spacing:0.06em;      /* 라틴 .KR은 더 벌려 '각인' 처리 */
  background:linear-gradient(120deg,var(--lx-gold) 0%,var(--accent) 70%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--accent); /* 폴백: 코퍼 단색 */
}
@supports not (background-clip:text){.brand-text strong{background:none;color:var(--accent)}}
@media (max-width:640px){.brand-text{font-size:18px;white-space:nowrap}}
/* 푸터(다크 배경) 워드마크: 골드 하이 톤 */
.footer-brand-text strong,.lx-f-brand span{
  background:linear-gradient(120deg,var(--lx-gold-hi),var(--lx-gold));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--lx-gold-hi);
}