@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes)

   로드: theme/design/head.sub.php (<head> 안, reset.css 뒤 / 섹션 CSS 앞)

   style.css · header.css · footer.css 에 흩어져 있던 것을 통합했다.
   - 표시 제어: .pc / .mobile / .tablet / .hide / .show / .flowhid …
   - 배치 유틸: .absol / .rltv / .flexrow / .flexcol / .absol_cover / .back_img …
   - 텍스트 유틸: .noto / .bold / .medium / .thin / .txct / .white / .lh …
   - 마퀴·슬라이드 공용: .image_sd* / .slide_y* / .flow_sd* / .swiper*
   - @keyframes 39종 (ddm·blk·marquee·scaleOpa·shake·line-*·spin 등)

   ★ 섹션 전용 스타일은 여기 넣지 않는다 (css/style.css 등 각 섹션 CSS 로).
   ═══════════════════════════════════════════════════════════════ */

/* ══ 디자인 토큰 (:root) ══
   디자이너 텍스트본(포션의 참고사항 txt 등)에서 추린 폰트·컬러를 여기에 등록한다.
   ★ style.css 가 아니라 이 파일이다 — style.css 는 메인 페이지에서만 로드되므로
     거기 :root 를 두면 서브·게시판 페이지와 header.css/footer.css 에서 토큰이 미정의가 된다.
     common.css 는 head.sub.php 가 전 페이지에 싣는다.
   등록 절차는 portion 스킬 참조. Pretendard 는 광역 카스케이드라 토큰 불필요. */
:root {
  interpolate-size: allow-keywords;

  /* --px 정적 폴백 — head.sub.php IIFE 가 인라인 style 로 항상 덮는다. 없으면 IIFE 미실행 시 calc() 전량 IACVT */
  --px: 1px;

  /* 웹폰트 미확보(상용 유료) + 데코 1회성 — 토큰을 지어 넣으면 IACVT 로 죽으므로 이미지로 처리한다.
     Calder-Dark 60(Inhouse Type 상용) · ProximaNovaHangeul 10(상용 · con05 110px 대형) · Quentin 3(con23 하단) */
  /* font-coverage:exempt Calder-Dark ProximaNovaHangeul Quentin */

  /* 브랜드색 — 시안·포션에서 추출해 교체 */
  --primary: #1c4fa2; /* hero 풀폭 배경판(1920x940 단색 · 채움비 100%) — STANBRU 로고와 같은 계열 */
  --secondary: #c7000c;
  --tertiary: #ffe3bb;
  --bg-color: #fef5e8;

  /* 폰트 패밀리 — @font-face 선언명과 완전 일치해야 한다 */
  --font-pretendard: "Pretendard Variable", sans-serif; /* census 411 — 본문 정본 */
  /* PSD 가 NanumSquareNeoTTF-* / NanumSquareNeo-* 두 이름을 섞어 쓴다. 실체는 같은 폰트라 뒤 이름은 매칭용 별칭 */
  --font-nanumsquareneo: "NanumSquareNeo", "NanumSquareNeoTTF", sans-serif; /* census 150 — 헤딩 정본 */
  --font-suit: "Suit", sans-serif; /* census 8 */
  /* ⚠️ 아래 8종은 이 시안 미사용(스타터 잔재). noto-serif·nanum·isamanru·hambakneun·paytone 은 @font-face 도 없어 쓰면 IACVT 로 조용히 죽는다 */
  --font-butler: "Butler Regular", sans-serif;
  --font-noto-serif: "Noto Serif KR", serif;
  --font-nanum: "NanumMyeongjo", serif;
  --font-ria: "Ria", sans-serif;
  --font-paperlogy: "Paperlogy", sans-serif;
  --font-isamanru: "Isamanru", sans-serif;
  --font-hambakneun: "SfHambakneun", sans-serif;
  --font-paytone: "Paytone One", sans-serif;

  --font-family: var(--font-pretendard);

  /* PC 폰트 티어 — 값은 font-perf(STEP -0.5) 가 PSD census 로 확정한다.
     ★ 시안 px 를 그대로 N 에 넣는다(60px → *60). 옛 --size-N 프리미티브는 손코딩 잔재라 폐기됨. */
  --displayXL: calc(var(--px) * 110); /* 110.34px x8 — con05 대형 타이틀(ProximaNovaHangeul) */
  --displayL: calc(var(--px) * 85);   /* census 근거 없음 — 예비 */
  --displayM: calc(var(--px) * 70);   /* 70px x5 */
  --displayS: calc(var(--px) * 65);   /* census 근거 없음 — 예비 */

  --titleXL: calc(var(--px) * 57);    /* 57px x67 — 섹션 대표 헤딩(NanumSquareNeo) */
  --titleL: calc(var(--px) * 55);     /* 55px x3 */
  --titleM: calc(var(--px) * 45);     /* census 근거 없음 — 예비 */
  --titleS: calc(var(--px) * 38);     /* 38px x4 */
  --titleXS: calc(var(--px) * 32);    /* 32px x16 */

  --headL: calc(var(--px) * 30);      /* 30px x31 */
  --headM: calc(var(--px) * 26);      /* 26px x30 (+25.98 x7) */
  --headS: calc(var(--px) * 22);      /* 22px x116 — 최다 */

  --subheadL: calc(var(--px) * 28);   /* 28px x12 (+27.98 x12) */
  --subheadM: calc(var(--px) * 24);   /* 24px x10 (+23 x9) */
  --subheadS: calc(var(--px) * 17);   /* 17px x35 */

  --bodyXL: calc(var(--px) * 20);     /* 20px x69 (+19.99 x6) */
  --bodyL: calc(var(--px) * 18);      /* 18px x66 */
  --bodyM: calc(var(--px) * 16);      /* 15.96px x57 */
  --bodyS: calc(var(--px) * 14);      /* 14px x4 */
  --bodyXS: calc(var(--px) * 13);     /* census 근거 없음 — 예비 */

  --paddingTop: calc(var(--px) * 200);
}

@media (max-width: 599px) {
  :root {
    /* 모바일 폰트 티어 — --px 가 0.2 수준으로 무너지는 구간이라 vw 직접값이 정본 */
    --displayXL: 12vw;
    --displayL: 10.6667vw;
    --displayM: 9.3333vw;
    --displayS: 8.5333vw;

    --titleXL: 8vw;
    --titleL: 7.4667vw;
    --titleM: 6.9333vw;
    --titleS: 6.6667vw;
    --titleXS: 6.4vw;

    --headL: 4.8vw;
    --headM: 4.8vw;
    --headS: 4.2667vw;

    --subheadL: 4.2667vw;
    --subheadM: 4vw;
    --subheadS: 3.7333vw;

    --bodyXL: 4.2667vw;
    --bodyL: 3.7333vw;
    --bodyM: 3.7333vw;
    --bodyS: 3.4667vw;
    --bodyXS: 3.4667vw;

    --paddingTop: 13.3333vw;
  }
}

/* ══ 단위 베이스 ══
   1rem === var(--px)*10 로 맞춰 rem 표기와 calc(var(--px)*N) 표기가 같은 축에 있게 한다.
   ★ 옛 베이스 `round(nearest, 0.5208333333vw, 1px)` 는 w/192 축이라 캔버스 1905 와 0.79% 어긋났다.
   GSAP transform 은 calc()/var() 를 파싱하지 못해 rem 리터럴을 수송로로 쓰므로 이 베이스는 유지한다.
   모바일은 --px(=w/1905) 가 0.2 수준으로 무너지므로 vw 베이스로 갈아탄다. */
html {
  font-size: calc(var(--px) * 10);
}

@media (max-width: 599px) {
  html {
    font-size: 1.6vw;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--bodyM);
  letter-spacing: -0.04em;
  line-height: 1.5;
  word-break: keep-all;
}

@media (max-width: 599px) {
  body {
    font-size: 3.8647vw;
  }
}

section {
  position: relative;
  overflow: hidden;
  width: 100%;
  font-weight: 300;
  font-size: var(--bodyL);
  letter-spacing: -0.04vw;
}

section img {
  width: 100%;
  /* ★ display:block 은 폭 규칙과 한 쌍이다 (2026-08-17). img 는 기본이 inline 이라 래퍼 안에
     baseline descender 여백(약 4~7px)이 남고, 그게 래퍼 높이를 IMG:AUTO 관리블록의 aspect-ratio 보다
     크게 만든다. bottom 앵커 요소는 그 초과분만큼 통째로 뜬다.
     실측: main 섹션 래퍼 45 → 52(+7) · con01 은 이 한 건이 mismatch 13.1% → 7.7% 로 단일 최대 요인.
     con01~05 는 래퍼가 전부 absolute 라 드러나지 않았을 뿐이다.
     ⚠️ 범위를 `section` 안으로 묶는 이유 — 전역 `img` 에 걸면 영카트/관리자 페이지의 인라인 썸네일까지
     바뀐다. 퍼블 섹션은 이미 `width:100%` 로 블록처럼 쓰는 게 규약이라 여기만 정렬한다.
     인라인이 필요하면 `.pc-inline`/`.mobile-inline`(!important)이 이 선언을 이긴다. */
  display: block;
}

img {
  object-fit: cover;
  height: auto;
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

@keyframes ddm3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: rotate(-8deg);
  }
  65% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm4 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: rotate(-2deg);
  }
  50% {
    transform: scale(1.05);
  }
  75% {
    transform: rotate(2deg);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk3 {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes scaleOpa {
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

@keyframes scaleOpa2 {
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes ddm {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rotate_imageY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes ddm2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: translateY(20px);
  }
  75% {
    transform: scale(1.02);
    transform: translateY(10px);
  }
  100% {
    transform: scale(1);
    transform: translateY(0px);
  }
}

@keyframes scaleOpa3 {
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes smoke {
  0% {
    transform: translateY(30%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30%) scale(1.1);
    opacity: 0;
  }
}

.smoke {
  animation: smoke 4s infinite linear;
}

@keyframes light {
  0%, 31%, 34%, 39%, 42%, 47% {
    opacity: 0;
  }
  5%, 30%, 35%, 38%, 43%, 46% {
    opacity: 0.4;
  }
  50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
}

@keyframes marqueeX {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marqueeX_r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes marqueeY {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes marqueeY_r {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes shakeAndFall {
  0% {
    transform: translate(0, -50%) rotate(0);
    opacity: 0;
  }
}

.shakeTwice {
  animation: shakeTwice 2s ease-in-out infinite;
  transform-origin: center;
}

.shakeTwices {
  animation: shakeTwices 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes shakeTwice {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes shakeTwices {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

div.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-wrapper.flow {
  pointer-events: none;
  transition-timing-function: linear;
}

.swiper-button-disabled {
  opacity: 0.3;
}

.noto {
  font-family: "Noto Serif", serif;
}

.notokr {
  font-family: "Noto Serif KR", serif;
}

.exbold {
  font-weight: 800;
}

.bold {
  font-weight: 700;
}

.sebold {
  font-weight: 600;
}

.medium {
  font-weight: 500;
}

.regular {
  font-weight: 400;
}

.flight {
  font-weight: 200;
}

.thin {
  font-weight: 100;
}

.animate-blk {
  animation: blk 1s infinite ease-in-out;
}

.scaleOpa {
  animation: scaleOpa infinite 2s;
}

.scaleOpa2 {
  animation: scaleOpa2 infinite 2s;
}

.light {
  animation: light infinite 5s;
}

.rotate_img {
  animation: rotate_image 10s infinite linear;
}

.white {
  color: white;
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* reveal 대신 사용 start */
/* 왼쪽부터 나타나기 */
.clip_off02 {
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: all 0.8s;
}

/* 가운데에서 나타나기 */
.clip_off {
  clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  transition: all 0.8s;
}

/* gsap에서 넣을 class */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
}

/* reveal 대신 사용 end */
.absol_cover {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.max_width {
  width: unset !important;
  max-width: 101%;
}

.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* image_sd */
.image_sd_wrap {
  overflow: hidden;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

.image_sd_r .absol {
  right: 100%;
}

/* image_sd end */
/* y_slide start */
.slide_y_wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0%;
  overflow: hidden;
}

.slide_y {
  animation: marqueeY 20s infinite linear;
}

.slide_y img.absol {
  top: 100%;
}

.slide_y_r {
  animation: marqueeY_r 20s infinite linear;
}

.slide_y_r img.absol {
  bottom: 100%;
}

/* y_slide end */
/* flow_sd 가로 (여러 이미지 마퀴) start */
.flow_sd {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX 20s infinite linear;
}

.flow_sd_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeX_r 20s infinite linear;
}

.flow_sd_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flow_sd_move_item02 {
  left: 100%;
}

.flow_sd_move_item02_r {
  right: 100%;
}

.flow_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 가로 end */
/* flow_sd 세로 (여러 이미지 마퀴) start */
.flow_sd_y {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.flow_sd_y_move {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY 10s infinite linear;
}

.flow_sd_y_move_r {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: marqueeY_r 10s infinite linear;
}

.flow_sd_y_move_item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.flow_sd_y_move_item02 {
  top: 100%;
}

.flow_sd_y_move_item02_r {
  bottom: 100%;
}

.flow_sd_y_img {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flow_sd 세로 end */
/* swiper-arr */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

.arr_next {
  transform: rotateY(180deg);
}

/* swiper-arr */
iframe {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-lock {
  display: none !important;
}

.swiper {
  margin: 0;
  z-index: 0;
}

b {
  font-weight: 700;
}

.obj > img {
  height: 100%;
  object-fit: cover;
}

.pc-mobile {
  display: flex !important;
}

.mobile-pc {
  display: none !important;
}

/* ══ PC↔모바일 표시 토글 ══
   ★ 표시 타입별로 클래스가 갈린다 — .pc 는 block 이다. flex 로 켜야 하면 .pc-flex 를 쓴다.
   섹션 CSS 의 media query 에서 같은 대상을 display 로 직접 토글하지 않는다(GSAP 가 클래스로 PC/MO 를 분기). */
.pc {
  display: block !important;
}

.pc-flex {
  display: flex !important;
}

.pc-grid {
  display: grid !important;
}

.pc-inline {
  display: inline !important;
}

.tablet {
  display: none !important;
}

.mobile,
.mobile-flex,
.mobile-grid,
.mobile-inline {
  display: none !important;
}

@media (max-width: 599px) {
  .pc,
  .pc-flex,
  .pc-grid,
  .pc-inline {
    display: none !important;
  }
  .mobile {
    display: block !important;
  }
  .mobile-flex {
    display: flex !important;
  }
  .mobile-grid {
    display: grid !important;
  }
  .mobile-inline {
    display: inline !important;
  }
  .mob-ta-c {
    text-align: center;
  }
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

/* 섹션 골격 — .front 는 전경 레이어, .bg_img 는 그 앞 형제로 두는 배경면. 둘 다 positioned 라 DOM 순서로 층이 정해진다 */
.front {
  position: relative;
  z-index: 10;
  width: 100%;
}

/* 자기 크기를 스스로 소유한다 — 래퍼 div 로 감싸지 말 것 */
.bg_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* splitWordsMask (js/library.js) 산출 — 라인 마스크 + 단어 inline-block */
.mask-line {
  display: block;
  overflow: hidden;
}

.mask-word {
  display: inline-block;
  will-change: transform;
}

/* ══ 구조 유틸 (Tailwind 네이밍) — ★ 신규 마크업은 이쪽. 1속성 1클래스 ══
   ⛔ 수치 스케일(`p-4`·`w-full`·`gap-2`·`text-lg`)은 없다 — 치수는 `calc(var(--px)*N)`,
      폰트는 시맨틱 토큰이 정본이다. 구조 키워드만 차용한다.
   근거·경위 = docs/RULE_RATIONALE.md R14 */

/* display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.block { display: block; }
.inline-block { display: inline-block; }
.hidden { display: none; }

/* flex 방향·줄바꿈 */
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* 교차축 */
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* 주축 */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-end { justify-content: flex-end; }

/* position — .absol/.rltv 의 표준 이름 별칭 */
.relative { position: relative; }
.absolute { position: absolute; }

/* ── 이하 구 유틸 (하위호환 · 신규 사용 금지) ──────────────────────────────
   ⚠️ `.flex` 는 이제 `display:flex` 만이다. 양축 center 는 `.flex-cc`. */

.flexrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

.flexcol {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* .flex* 가 양축 center 를 이미 품으므로 아래 단축 유틸은 반드시 뒤에 와서 override 한다 */
.justify-c {
  justify-content: center;
}

.justify-sb {
  justify-content: space-between;
}

.justify-sa {
  justify-content: space-around;
}

/* ※ `.justify-end` 는 위 표준 블록이 소유한다(중복 정의 금지 — 뒤쪽이 이긴다). */

.align-c {
  align-items: center;
}

.align-start {
  align-items: start;
}

.align-end {
  align-items: end;
}

/* ★ 전역 박스모델 = **border-box**(그누보드 default.css 값). padding·border 는 width 에 포함.
   아래 유틸은 예외 지정용 — content-box 가 필요한 박스에만 `.box-content`.
   `.bx` 는 `.box-border` 의 하위호환 별칭이다(마크업에 박혀 있어 지우지 않는다). */
.box-border,
.bx {
  box-sizing: border-box;
}

.box-content {
  box-sizing: content-box;
}

@keyframes marquee3 {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes blk {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  31% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ddm_m {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ddm_m_reverse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes blk2 {
  0% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes line-top {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(13px);
  }
}

/* 추가된 부분 */
@keyframes line-top-reverse {
  0% {
    transform: translateY(13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-top-rotate {
  0% {
    transform: translateY(13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(13px) rotateZ(45deg);
  }
}

/* 추가된 부분 */
@keyframes line-top-rotate-reverse {
  0% {
    transform: translateY(13px) rotateZ(45deg);
  }
  100% {
    transform: translateY(13px) rotateZ(0deg);
  }
}

@keyframes line-mid {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

/* 추가된 부분 */
@keyframes line-mid-reverse {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes line-mid-invisible {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes line-bot {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-13px);
  }
}

/* 추가된 부분 */
@keyframes line-bot-reverse {
  0% {
    transform: translateY(-13px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes line-bot-rotate {
  0% {
    transform: translateY(-13px) rotateZ(0deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(135deg);
  }
}

/* 추가된 부분 */
@keyframes line-bot-rotate-reverse {
  0% {
    transform: translateY(-13px) rotateZ(135deg);
  }
  100% {
    transform: translateY(-13px) rotateZ(0deg);
  }
}

/* -------------------header 커스텀 시작------------------- */
@keyframes dropHeader {
  0% {
    top: calc(var(--px) * -50);
  }
  100% {
    top: 0;
  }
}

@keyframes insertHeader {
  0% {
    top: 0;
  }
  100% {
    top: calc(var(--px) * -70);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 인라인 편집(site_text_editor) 강조 — admin 이 툴바로 감싸는 span */
.st-em {
  color: var(--primary);
}

/* B/I/S 툴바가 넣는 태그를 reset.css 의 자동서식 제거(:is(strong,em,i…){font-style:inherit} 외)보다 뒤에서 되살린다.
   편집영역 안(data-st-key)으로만 좁혀 퍼블 마크업의 시맨틱 태그는 그대로 리셋을 받는다.
   ★ 방문자에게도 보여야 하므로 admin 전용 site-text-editor.css 가 아니라 여기가 소유한다 */
[data-st-key] :is(i, em) {
  font-style: italic;
}

[data-st-key] :is(b, strong) {
  font-weight: bolder; /* 700 고정은 본문이 800 인 자리에서 오히려 얇아진다 */
}

[data-st-key] :is(s, del, strike) {
  text-decoration: line-through;
}

[data-st-key] :is(u, ins) {
  text-decoration: underline;
}

/* ══ 카카오맵 컴포넌트 (js/map.js) ══
   마커 말풍선 + 모바일 터치 잠금 오버레이. 옛 css/style.css 에 있었으나 그 파일은 merge-build 산출물이라 옮겼다. */
.map_marker {
  position: relative;
  display: inline-block;
}

.map_marker_text {
  background: #711835;
  border: 1px solid #fff;
  padding: calc(var(--px) * 9) calc(var(--px) * 19);
  border-radius: 100px;
  font-size: var(--bodyXS);
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 말풍선 꼬리 — 바깥 삼각형이 흰 테두리, ::after 가 안쪽 채움 */
.map_marker_tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

.map_marker_tail::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #711835;
}

/* 모바일 지도 터치 잠금 오버레이 (md/map_zoom_control.md §3) */
.map-touch-lock-parent {
  position: relative;
}

.map-touch-lock {
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.map-touch-lock-text {
  display: block;
  padding: 0 calc(var(--px) * 20);
  font-size: var(--bodyM);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

.is-map-touch-unlocked .map-touch-lock {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 599px) {
  .map-touch-lock-text {
    font-size: 4.3vw;
    padding: 0 4vw;
  }
}