@charset "UTF-8";
/* ============================================================
 * vweb-common.css — 전체 공통 CSS
 * Reset + Layout + Keyframes + Utility + V-Web 디자인 시스템
 * 폰트 (Typekit ikh8yfw / Noto Sans·Serif KR / Pretendard Variable) 는
 * theme/design/template/header/index.html 에서 병렬 <link> 로드 — 여기서 @import 금지
 * ============================================================ */
.en_font {
  font-family: "cofo-raffine", sans-serif;
}

/* === 폰트 크기 토큰 (--size-NN, 1905 기준 vw) === */
:root {
  --size-10: 0.5249vw;
  --size-11: 0.5774vw;
  --size-12: 0.6299vw;
  --size-13: 0.6824vw;
  --size-14: 0.7349vw;
  --size-15: 0.7874vw;
  --size-16: 0.8399vw;
  --size-17: 0.8924vw;
  --size-18: 0.9449vw;
  --size-19: 0.9974vw;
  --size-20: 1.0499vw;
  --size-21: 1.1024vw;
  --size-22: 1.1549vw;
  --size-23: 1.2073vw;
  --size-24: 1.2598vw;
  --size-25: 1.3123vw;
  --size-26: 1.3648vw;
  --size-27: 1.4173vw;
  --size-28: 1.4698vw;
  --size-29: 1.5223vw;
  --size-30: 1.5748vw;
  --size-31: 1.6273vw;
  --size-32: 1.6798vw;
  --size-33: 1.7323vw;
  --size-34: 1.7848vw;
  --size-35: 1.8373vw;
  --size-36: 1.8898vw;
  --size-37: 1.9423vw;
  --size-38: 1.9948vw;
  --size-39: 2.0472vw;
  --size-40: 2.0997vw;
  --size-41: 2.1522vw;
  --size-42: 2.2047vw;
  --size-43: 2.2572vw;
  --size-44: 2.3097vw;
  --size-45: 2.3622vw;
  --size-46: 2.4147vw;
  --size-47: 2.4672vw;
  --size-48: 2.5197vw;
  --size-49: 2.5722vw;
  --size-50: 2.6247vw;
  --size-51: 2.6772vw;
  --size-52: 2.7297vw;
  --size-53: 2.7822vw;
  --size-54: 2.8346vw;
  --size-55: 2.8871vw;
  --size-56: 2.9396vw;
  --size-57: 2.9921vw;
  --size-58: 3.0446vw;
  --size-59: 3.0971vw;
  --size-60: 3.1496vw;
  --size-61: 3.2021vw;
  --size-62: 3.2546vw;
  --size-63: 3.3071vw;
  --size-64: 3.3596vw;
  --size-65: 3.4121vw;
  --size-66: 3.4646vw;
  --size-67: 3.5171vw;
  --size-68: 3.5696vw;
  --size-69: 3.6220vw;
  --size-70: 3.6745vw;
  --size-71: 3.7270vw;
  --size-72: 3.7795vw;
  --size-73: 3.8320vw;
  --size-74: 3.8845vw;
  --size-75: 3.9370vw;
  --size-76: 3.9895vw;
  --size-77: 4.0420vw;
  --size-78: 4.0945vw;
  --size-79: 4.1470vw;
  --size-80: 4.1995vw;
  --size-81: 4.2520vw;
  --size-82: 4.3045vw;
  --size-83: 4.3570vw;
  --size-84: 4.4094vw;
  --size-85: 4.4619vw;
  --size-86: 4.5144vw;
  --size-87: 4.5669vw;
  --size-88: 4.6194vw;
  --size-89: 4.6719vw;
  --size-90: 4.7244vw;
  --size-91: 4.7769vw;
  --size-92: 4.8294vw;
  --size-93: 4.8819vw;
  --size-94: 4.9344vw;
  --size-95: 4.9869vw;
  --size-96: 5.0394vw;
  --size-97: 5.0919vw;
  --size-98: 5.1444vw;
  --size-99: 5.1969vw;
  --size-100: 5.2493vw;
}

/* === V-Web 디자인 토큰 (1905 기준 vw) === */
:root {
  --vw-title-xl: 4.094488vw;
  --vw-title-l: 3.044619vw;
  --vw-title-m: 2.099738vw;
  --vw-title-s: 1.574803vw;
  --vw-body-l: 1.259843vw;
  --vw-body: 0.997375vw;
  --vw-body-s: 0.892388vw;
  --vw-caption: 0.787402vw;
  --lh-title: 1.293;
  --lh-body: 1.474;
  --lh-tight: 1.2;
  --lh-loose: 1.6;
  --ls-title: -0.05em;
  --ls-body: -0.045em;
  --ls-normal: 0;
}

/* === Base Reset === */
*, *::before, *::after {
  box-sizing: unset;
  margin: 0;
}

button {
  outline: none;
  border: none;
}

html, body {
  padding: 0;
  margin: 0;
}

p {
  word-break: keep-all;
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

html {
  scroll-behavior: smooth;
}

b {
  font-weight: 700;
}

iframe {
  width: 100%;
  height: 100%;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === Section 기본 === */
section {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

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

/* === Swiper 기본 === */
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;
}

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

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

/* === Fonts ===
   - Pretendard Variable 동적 서브셋 + Noto Sans/Serif KR 은 head <link> 에서 병렬 로드 (이 파일에서 @import 금지)
   - body 폰트 패밀리는 'Pretendard Variable' 우선 → 옛 woff(noonfonts) 폴백 다운로드 차단 */
body {
  font-family: "Pretendard Variable", "Pretendard", "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, "Noto Serif KR", sans-serif;
}

/* === Layout Helpers === */
.pc-mobile {
  display: flex;
}

.mobile-pc {
  display: none;
}

.pc {
  display: flex;
}

.pc-inline {
  display: inline;
}

.tablet {
  display: none;
}

.mobile {
  display: none;
}

.clearfix::before, .clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

.hideopa {
  opacity: 0 !important;
}

.show {
  opacity: 1 !important;
}

.absol {
  position: absolute;
}

.rltv {
  position: relative;
}

.fwrap {
  flex-wrap: wrap;
}

.pointer {
  cursor: pointer;
}

.leftflex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
}

.rightflex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
}

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

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

/* 무한 스크롤 (마키) */
.scrX {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrX .scrX_item {
  animation: marqueeX 20s linear infinite;
  width: 100%;
}

.scrX .scrX_item_absol {
  right: -100%;
  width: 100%;
}

.scrY {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scrY .scrY_item {
  animation: marqueeY 20s linear infinite;
  height: 100%;
}

.scrY .scrY_item_absol {
  bottom: -100%;
  width: 100%;
}

/* image_sd (X 방향 슬라이드) */
.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%;
}

/* slide_y (Y 방향 슬라이드) */
.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%;
}

/* 배경 이미지 */
.back_img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.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%;
}

/* Swiper 화살표 버튼 */
.btn_arr {
  z-index: 2;
  cursor: pointer;
}

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

/* === Keyframes === */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes marquee2 {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@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 rotate360 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate_imageY {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zoom2 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes opa {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes opazoom {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.02);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes ball {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 20px;
  }
}
@keyframes blk {
  0%, 30% {
    opacity: 0;
  }
  31%, 99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blk2 {
  0%, 49% {
    opacity: 0;
  }
  50%, 99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blk3 {
  0%, 24% {
    opacity: 1;
  }
  25%, 99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes scaleOpa {
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}
@keyframes scaleOpa2 {
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}
@keyframes scaleOpa3 {
  100% {
    transform: scale(1.3);
    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 ddm2 {
  0% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.02) translateY(20px);
  }
  75% {
    transform: scale(1.02) translateY(10px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@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 smoke {
  0% {
    transform: translateY(30%) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30%) scale(1.1);
    opacity: 0;
  }
}
@keyframes light {
  0%, 31%, 34%, 39%, 42%, 47% {
    opacity: 0;
  }
  5%, 30%, 35%, 38%, 43%, 46% {
    opacity: 0.4;
  }
  50%, 51%, 54%, 55%, 60%, 67%, 68%, 100% {
    opacity: 1;
  }
  70% {
    opacity: 0.2;
  }
}
@keyframes shakeTwice {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(5deg);
  }
  20% {
    transform: rotate(-5deg);
  }
  30% {
    transform: rotate(4deg);
  }
  40% {
    transform: rotate(-4deg);
  }
}
@keyframes shakeTwices {
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(3deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  30% {
    transform: rotate(2deg);
  }
  40% {
    transform: rotate(-2deg);
  }
}
@keyframes shakeAndFall {
  0% {
    transform: translate(0, -50%) rotate(0);
    opacity: 0;
  }
}
/* === 애니메이션 헬퍼 클래스 === */
.rotate {
  animation: rotate360 20s linear infinite;
}

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

.blk {
  animation: blk 1s infinite;
}

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

.opazoom {
  animation: opazoom 1.5s infinite;
}

.scaleopa1, .scaleOpa {
  animation: scaleOpa 2s infinite;
}

.scaleopa2, .scaleOpa2 {
  animation: scaleOpa2 2s infinite;
}

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

.light {
  animation: light 5s infinite;
}

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

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

/* === 폰트 패밀리 헬퍼 === */
.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;
}

/* === 색상 / 정렬 헬퍼 === */
.white {
  color: white;
}

.txct {
  text-align: center;
}

.lh {
  line-height: 1.5;
}

/* === Clip 애니메이션 헬퍼 (reveal 대체) === */
.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;
} /* 가운데서 */
.clip_on {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
} /* GSAP에서 추가 */
/* === 카카오맵 마커 === */
.map_marker {
  position: relative;
  display: inline-block;
}

.my-place-label {
  background: #fff;
  border: 2px solid var(--mc);
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: bold;
  color: #333;
  text-align: center;
  white-space: nowrap;
  position: relative;
  bottom: 50px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transform: translateY(-50%);
}

.my-place-label:after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 8px solid var(--mc);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.my-place-label:before {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-top: 8px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  z-index: 1;
}

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

.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 #BE0211;
}

/* ============================================================
 * V-Web 디자인 시스템 (v-* 공통 클래스)
 * ============================================================ */
/* === 타이틀 공통 === */
.v-title-l {
  font-family: var(--tf);
  font-weight: 700;
  font-size: var(--vw-title-l);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  white-space: nowrap;
}

.v-title-m {
  font-family: var(--tf);
  font-weight: 700;
  font-size: var(--vw-title-m);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  white-space: nowrap;
}

.v-title-s {
  font-family: var(--tf);
  font-weight: 700;
  font-size: var(--vw-title-s);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  white-space: nowrap;
}

/* === 본문 공통 === */
.v-body {
  font-family: var(--mf);
  font-weight: 400;
  font-size: var(--vw-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

.v-body-medium {
  font-family: var(--mf);
  font-weight: 500;
  font-size: var(--vw-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

.v-body-semibold {
  font-family: var(--mf);
  font-weight: 600;
  font-size: var(--vw-body);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
}

/* === 강조 컬러 === */
.v-accent {
  color: #e16020;
}

/* === Nav 버튼 (hover-line clip 패턴) === */
.v-nav-btn {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: #000;
  font-family: var(--mf);
}

.v-nav-btn .v-nav-arrow {
  position: absolute;
  font-family: var(--sf);
  font-weight: 500;
  font-size: 0.944882vw;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  white-space: nowrap;
  top: 0.15748vw;
}

.v-nav-btn .v-nav-label {
  position: absolute;
  font-family: var(--mf);
  font-weight: 500;
  font-size: 1.049869vw;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  white-space: nowrap;
  top: 0;
}

.v-nav-btn .v-nav-line {
  position: absolute;
  top: 1.627297vw;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px solid currentColor;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.v-nav-btn[data-dir=prev]:hover .v-nav-line,
.v-nav-btn[data-dir=prev]:focus-visible .v-nav-line {
  clip-path: inset(0 0 0 100%);
}

.v-nav-btn[data-dir=next]:hover .v-nav-line,
.v-nav-btn[data-dir=next]:focus-visible .v-nav-line {
  clip-path: inset(0 100% 0 0);
}

.v-nav-btn[data-dir=prev] .v-nav-arrow {
  left: 0;
}

.v-nav-btn[data-dir=prev] .v-nav-label {
  left: 62.244898%;
}

.v-nav-btn[data-dir=next] .v-nav-label {
  left: 2.040816%;
}

.v-nav-btn[data-dir=next] .v-nav-arrow {
  left: 89.795918%;
}

/* === Tab 공통 === */
.v-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: var(--mf);
  font-weight: 500;
  font-size: var(--vw-body);
  letter-spacing: var(--ls-title);
  color: #000;
  background: transparent;
  border: 0;
  padding: 0;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.v-tab.is-active {
  color: #e16020;
  font-weight: 700;
}

/* === 서브페이지 Hero (Brand 형태) === */
.v-sub-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 10vw;
  padding-bottom: 8vw;
}

.v-sub-hero-eyebrow {
  font-family: var(--mf);
  font-weight: 500;
  font-size: var(--vw-body);
  color: #000;
  letter-spacing: var(--ls-title);
  margin-bottom: 1vw;
}

.v-sub-hero-title {
  font-family: var(--tf);
  font-weight: 700;
  font-size: var(--vw-title-xl);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
  white-space: nowrap;
}

/* === 모바일 === */
@media (max-width: 599px) {
  :root {
    --vw-title-xl: 9vw;
    --vw-title-l: 8vw;
    --vw-title-m: 6vw;
    --vw-title-s: 5vw;
    --vw-body-l: 4.2vw;
    --vw-body: 3.5vw;
    --vw-body-s: 3.3vw;
    --vw-caption: 3vw;
  }
  .v-title-l, .v-title-m, .v-title-s, .v-sub-hero-title {
    white-space: normal;
  }
  .v-nav-btn .v-nav-arrow {
    font-size: 3.3vw;
  }
  .v-nav-btn .v-nav-label {
    font-size: 3.5vw;
  }
  .v-tab {
    font-size: 3.5vw;
  }
  .pc-mobile {
    display: none;
  }
  .mobile-pc {
    display: flex;
  }
  .pc {
    display: none;
  }
  .pc-inline {
    display: none;
  }
  .tablet {
    display: none;
  }
  .mobile {
    display: flex;
  }
}
/* === Site Text 인라인 에디터 (admin/admin02 전용) === */
[data-st-editable="1"] {
  outline: 2px dashed #71994B;
  outline-offset: 6px;
  cursor: text;
  transition: outline-color 0.2s, outline-style 0.2s;
  position: relative;
}

[data-st-editable="1"]:hover {
  outline-style: solid;
}

[data-st-editable="1"]:focus,
[data-st-editable="1"].is-editing {
  outline: 2px solid #e16020;
  outline-offset: 6px;
}

[data-st-editable="1"]::before {
  content: "✎ 클릭하여 수정";
  position: absolute;
  top: -1.8em;
  left: 0;
  font-size: 0.7rem;
  font-family: sans-serif;
  color: #71994B;
  background: #fff;
  padding: 0.15em 0.45em;
  border-radius: 3px;
  border: 1px solid #71994B;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}

[data-st-editable="1"]:hover::before,
[data-st-editable="1"]:focus::before {
  opacity: 1;
}

.site-text-save-btn {
  position: fixed;
  bottom: 1.9rem;
  right: 1.9rem;
  padding: 0.85em 1.8em;
  background: #e16020;
  color: #fff;
  font-size: 0.95rem;
  font-family: sans-serif;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

.site-text-save-btn:hover:not(:disabled) {
  background: #c54f17;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.site-text-save-btn:active:not(:disabled) {
  transform: translateY(0);
}

.site-text-save-btn:disabled {
  background: #999;
  cursor: wait;
}

.site-text-inline-toolbar {
  position: absolute;
  display: none;
  flex-direction: row;
  gap: 0.15em;
  padding: 0.15em;
  background: #2c2c2c;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 100000;
  font-family: sans-serif;
}

.site-text-inline-toolbar button {
  padding: 0.4em 0.9em;
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s;
}

.site-text-inline-toolbar button:hover {
  background: #71994B;
}

.site-text-inline-toolbar button[data-cmd=unwrap-span]:hover,
.site-text-inline-toolbar button[data-cmd=unwrap-b]:hover {
  background: #c0392b;
}

.site-board-link {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  display: flex;
  gap: 0.4em;
  padding: 0;
  font-family: sans-serif;
  font-size: 0.8rem;
  z-index: 1;
}

.site-board-link a {
  display: inline-block;
  padding: 0.6em 1.4em;
  background: #71994B;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}

.site-board-link a:hover {
  background: #5d8240;
  transform: translateY(-1px);
}

.site-board-link a.is-secondary {
  background: #555;
}

.site-board-link a.is-secondary:hover {
  background: #333;
}