@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;
  /* 브랜드색 — 시안·포션에서 추출해 교체 */
  --primary: #166938; --secondary: #cf152d; --tertiary: #f4e6c1; --bg-color: #fef5e8;
  /* 폰트 패밀리 — @font-face 선언명과 완전 일치해야 한다 */
  --font-pretendard: "Pretendard Variable", sans-serif; --font-suit: "Suit", sans-serif; --font-paperlogy: "Paperlogy", sans-serif; --font-anton: "Anton", sans-serif; --font-butler: "Butler Regular", sans-serif; --font-ria: "Ria", 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) * 203.53); /* x4 Anton 대형 */ --displayL: calc(var(--px) * 77.66); /* x10 Anton */ --displayM: calc(var(--px) * 65); /* x41 섹션 대표 헤딩 */ --displayS: calc(var(--px) * 55); /* x16 */
  --titleXL: calc(var(--px) * 50); /* x4 */ --titleL: calc(var(--px) * 45); /* x5 */ --titleM: calc(var(--px) * 40.01); /* x5 */ --titleS: calc(var(--px) * 35); /* x4 */ --titleXS: calc(var(--px) * 33); /* x6 */
  --headL: calc(var(--px) * 32); /* x11 */ --headM: calc(var(--px) * 30); /* x7 */ --headS: calc(var(--px) * 28); /* x10 */
  --subheadL: calc(var(--px) * 23); /* x24 */ --subheadM: calc(var(--px) * 22); /* x26 */ --subheadS: calc(var(--px) * 21); /* x24 */
  --bodyXL: calc(var(--px) * 20); /* x75 */ --bodyL: calc(var(--px) * 18); /* x21 */ --bodyM: calc(var(--px) * 16); /* x98 본문 최빈 */ --bodyS: calc(var(--px) * 14); /* census 0 — 코어 유지 */ --bodyXS: calc(var(--px) * 13); /* census 0 — 코어 유지 */
  /* 티어 밖 census 값(섹션 CSS 에서 calc 직접): 26 x5 · 25 x5 · 24 x4 · 19.72 x8 · 17 x9 · 49.17 x4 */
  /* font-coverage:exempt Antonio Gulim */
  --paddingTop: calc(var(--px) * 200);
}
@media (max-width: 599px) {
  :root {
    /* 모바일 폰트 티어 — --px 가 0.2 수준으로 무너지는 구간이라 vw 직접값이 정본 */
    --displayXL: 28.8vw; --displayL: 16.8vw; --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 */
/* ══ 버튼 호버 채움 — 흰 면이 좌→우로 차고 글자·테두리는 --hf-color. 요소가 positioned 여야 ::before 가 갇힘. 눌림·아이콘은 GSAP 가 쥔 transform 을 피해 개별 속성 scale·translate 로 ══ */
.v-hover-fill { --hf-color: var(--primary); --hf-ease: cubic-bezier(.7, 0, .3, 1); isolation: isolate; overflow: hidden; border: 1px solid var(--hf-color); transition: color .45s var(--hf-ease), scale .15s ease-out; }
.v-hover-fill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--hf-ease); }
.v-hover-fill__icon { transition: translate .45s var(--hf-ease); }
.v-hover-fill:focus-visible { color: var(--hf-color); }
.v-hover-fill:focus-visible::before { transform: scaleX(1); }
.v-hover-fill:focus-visible .v-hover-fill__icon--x { translate: 20% 0; }
.v-hover-fill:focus-visible .v-hover-fill__icon--y { translate: 0 20%; }
@media (hover: hover) {
  .v-hover-fill:hover { color: var(--hf-color); }
  .v-hover-fill:hover::before { transform: scaleX(1); }
  .v-hover-fill:hover .v-hover-fill__icon--x { translate: 20% 0; }
  .v-hover-fill:hover .v-hover-fill__icon--y { translate: 0 20%; }
}
.v-hover-fill:active { scale: .97; }
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); } }
/* ══ 카카오맵 컴포넌트 (js/map.js) — 옛 css/style.css 에 있었으나 그 파일은 merge-build 산출물이라 옮겼다(R75) ══ */
.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; }
/* 모바일 지도 터치 잠금 오버레이 (kakao-map 스킬 zoom.md) */
.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; } }
/* ══ 인라인 편집(site_text_editor) — 방문자에게도 보여야 해서 에디터 CSS 가 아니라 여기 둔다 ══ */
.st-em { color: var(--primary); }
/* reset.css 의 자동서식 제거(0,0,1)를 편집영역 안에서만 (0,1,1) 로 되살린다 */
[data-st-key] :is(i, em) { font-style: italic; }
[data-st-key] :is(b, strong) { font-weight: bolder; }
[data-st-key] :is(s, del, strike) { text-decoration: line-through; }
[data-st-key] :is(u, ins) { text-decoration: underline; }