/* BASIC css start */

/* ===== 모바일 기본 레이아웃 ===== */
:root {
  --ribbon-gap: 4px;          /* 타일 간격 */
  --tile-h: 30px;             /* 각 타일 높이 */
  --tile-fz: 12px;            /* 타일 글씨 크기 */
  --tile-radius: 8px;        /* 모서리 */
}
html { scroll-behavior: smooth; }

.mo-expo { position: relative; }
.mo-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
  /* 하단 고정 리본에 가리지 않도록 패딩 확보 (2줄 × 54px + 패딩/여백) */
  padding-bottom: calc((var(--tile-h) * 2) + 24px + env(safe-area-inset-bottom));
}
.mo-sec { position: relative; }
.mo-map { position: relative; }
.mo-map img { display: block; width: 100%; height: auto; }

/* 이미지 핫스팟(영역링크) */
.hotspot {
  position: absolute; display: block;
  text-indent: -9999px; overflow: hidden;
  /* 개발 중에만 보이게 하려면 아래 주석 해제 */
  /* outline: 2px dashed rgba(255,0,0,.35); background: rgba(255,0,0,.05); */
}

/* ===== 고정 띠배너: 2×2 타일 그리드 ===== */
.mo-ribbon{
  position: fixed;
  left: 0; right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 9999;

  margin: 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2열 */
  grid-auto-rows: var(--tile-h);    /* 2행 */
  gap: var(--ribbon-gap);

  background: transparent;          /* 타일만 보이도록 */
}

/* 타일 버튼 스타일 */
.mo-ribbon .r-item{
  display: flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none;
  background: #1e1e1e;
  color: #e6e6e6;
  border: 1px solid #3a3a3a;
  border-radius: var(--tile-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  padding: 0 8px;
  font-weight: 700;
  transition: transform .15s, background .2s, color .2s;
}

/* 두 줄 표시 & 행간 */
.mo-ribbon .r-item span{
  display: block;
  white-space: normal;
  font-size: var(--tile-fz);
  line-height: 1.35;               /* 필요 시 1.25~1.45 사이로 조절 */
}

/* 터치 피드백 */
.mo-ribbon .r-item:active{ transform: translateY(1px); }

/* 활성 섹션 하이라이트 */
.mo-ribbon .r-item.active{
  background: #b21a05;             /* 강조색 */
  color: #fff;
  border-color: #b21a05;
}

/* 필요 시 브랜드 톤에 맞춰 개별 타일 색상 예시
.mo-ribbon .r-item:nth-child(1){ background:#b21a05; color:#fff; border-color:#b21a05; }
.mo-ribbon .r-item:nth-child(2){ background:#242424; }
*/

/* 작은 화면에서 글자가 너무 크면 자동 보정 */
@media (max-width: 360px){
  :root{ --tile-fz: 14px; --tile-h: 50px; }
}

/* ===== 띠배너 좌/우 안전 여백(SAFE GAP) 설정 ===== */
/* 필요에 따라 숫자만 바꿔서 간격 조절 */
:root{
  --safe-left: 65px;   /* 왼쪽 플로팅 버튼과 거리 */
  --safe-right: 60px;  /* 오른쪽(예: 카톡톡 버튼)과 거리 */
  --safe-bottom: 12px; /* 하단 안전 여백 */
}

/* 모바일 기본(<=768px)에서만 적용되도록 */
@media (max-width: 768px){
  /* 띠배너: 화면 폭에서 좌/우 여백만큼 안쪽으로 */
  .mo-ribbon{
    position: fixed !important;
    left: var(--safe-left) !important;
    right: var(--safe-right) !important;
    bottom: max(var(--safe-bottom), env(safe-area-inset-bottom)) !important;

    margin: 0 !important;             /* 기존 margin 제거 */
    width: auto !important;            /* left/right 기준으로 자동 계산 */
    transform: none !important;        /* 혹시 남아있을 수 있는 transform 무시 */
  }

  /* 필요 시 그리드 간격도 살짝 줄이거나 늘릴 수 있음 */
  /* .mo-ribbon{ --ribbon-gap: 6px; } */
}


/* 2x2 띠배너 전체 배경 */
.mo-ribbon {
  position: fixed;
  left: 0; right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 9999;

  margin: 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2열 */
  grid-auto-rows: var(--tile-h);    /* 2행 */
  gap: var(--ribbon-gap);

  padding: 10px;                     /* 배경 안쪽 여백 */
  border-radius: 10px;               /* 배경 모서리 둥글게 */
  background: rgba(255,255,255,0.7); /* 연한 흰색 반투명 */
  backdrop-filter: blur(4px);        /* (옵션) 살짝 블러효과 */
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); /* 은은한 그림자 */
}
div.C-10089-1228-2 { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; background:repeat left top; border-top:0px solid ; border-right:0px solid ; border-bottom:0px solid ; border-left:0px solid ; }
/* BASIC css end */