/******* 🟥🟥🟥 전체 세팅 시작 🟥🟥🟥 *******/

/*** 🟥 전역 텍스트 시작 ***/

/* 🟨 모바일: 767px이하 */
body { font-size: 1rem; line-height: 1.7; /* 본문: 1.65~1.75 권장 */
       letter-spacing: var(--ls-body); max-width: none; color:#222; }
h1 { font-size: 1.625rem; line-height: 1.3; font-weight:700; letter-spacing:-0.01em; margin:0 0 .6em; color:#111; }
h2 { font-size: 1.25rem;  line-height: 1.35; font-weight:700; margin:0 0 .6em; color:#111; }
h3 { font-size: 1.125rem; line-height: 1.45; font-weight:600; margin:0 0 .6em; color:#111; }
.caption,.meta { font-size:.9375rem; line-height:1.5; color:#555; }
#footer { font-size:.9375rem; line-height:1.5; color:#555; }

/* 🟨 Tablet: 768~1024px */
@media (min-width:768px) and (max-width:1024px){
  body { font-size:1.0625rem; line-height:1.65; color:#222; }
  h1 { font-size:1.875rem; line-height:1.25; color:#111; }
  h2 { font-size:1.375rem; line-height:1.32; color:#111; }
  h3 { font-size:1.1875rem; line-height:1.4;  color:#111; }
  .caption,.meta { font-size:.9375rem; line-height:1.45; color:#555; }
  #footer { font-size:.9375rem; line-height:1.45; color:#555; }
}

/* 🟨 PC: 1025px~1680px */
@media (min-width:1025px){
  body { font-size:1.125rem; line-height:1.6; color:#222; } 
  h1 { font-size:2.125rem; line-height:1.22; color:#111; }
  h2 { font-size:1.5rem;   line-height:1.28; color:#111; }
  h3 { font-size:1.25rem;  line-height:1.36; color:#111; }
  .caption,.meta { font-size:1rem; line-height:1.4; color:#555; }
  #footer { font-size:1rem; line-height:1.4; color:#555; }
}

/* 🟨 타이포 헬퍼 */
h1,h2,h3{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
p,li,blockquote{ letter-spacing:-0.005em; line-height:1.7; }
strong{ font-weight:700; }

/* 🟨 고정 헤더 앵커 가림 방지 */
h1,h2,h3 { scroll-margin-top: var(--header-height,80px); }

/* 🟨 버튼/라벨 크기 가이드 */
.btn,.button{ font-size:1rem; font-weight:600; padding:12px 18px; min-height:44px; }
.label,.form-label{ font-size:1rem; line-height:1.5; }

/* 🟨 본문 컨텐츠 가독 폭 가이드 */
.content{ max-width:700px; margin:0 auto; }

/* 🟨 폼/버튼까지 폰트 강제 */
input,select,textarea,button,body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif !important; /* (수정) */
}

/* 🟨 코드 블록 모노스페이스 */
pre,code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace !important; }


/*** 🟥 전역 텍스트 끝 ***/


/* 🟨 접근성/기본 */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-size:100%; scrollbar-gutter:stable; }
html,body{ margin:0; padding:0; background:#fff; }
a{ color:#0b57d0; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* 🟨 공통 래퍼/컨테이너 */
#wrap{ max-width:1680px; position:relative; width:100%; margin:0 auto; min-height:550px; }
#container{ width:97%; position:relative; margin:0 auto; }
#container #contents{ margin:0 auto; float:none; padding:0; }

/* 🟨 미디어 요소 반응형 */
audio,canvas,img,svg,video{ max-width:100%; height:auto; }

/* 🟨 포커스 가시화 */
button:focus-visible,a:focus-visible{ outline:2px solid #222; outline-offset:2px; }

/* 🟨 디바이스별 표시 토글 */
.display_mobile_only{display:none;}
.display_tablet_only{display:none;}
.display_pc_only{display:block;}
@media (max-width:767px){ .display_mobile_only{display:block;} .display_tablet_only,.display_pc_only{display:none;} }
@media (min-width:768px) and (max-width:1024px){ .display_tablet_only{display:block;} .display_mobile_only,.display_pc_only{display:none;} }
@media (min-width:1025px){ .display_pc_only{display:block;} .display_mobile_only,.display_tablet_only{display:none;} }

/******* 🟥🟥🟥 전체 세팅 끝 🟥🟥🟥 *******/




/******* 🟥🟥🟥 공통모듈 - 상단 시작 🟥🟥🟥*******/

/*** 🟥 상단 헤더 레이아웃 시작 ***/

/* 🟨 사이트 최상단 고정 헤더 (JS 없이 position:sticky만 사용) */
#header { width:100%; padding:0; background:#fff; position:sticky; top:0; z-index:998; }

/* 🟨 헤더 하단 가느다란 구분선 */
#header::after {
  content:""; position:absolute; bottom:0; left:0;
  width:100%; height:1px; background:#e8e8e8; pointer-events:none; }

/* 🟨 헤더 내부 콘텐츠 공통 래퍼 */
#header .inner { padding:0; display:flex; align-items:center; flex-direction:column; width:97%; max-width:calc(1680px * 0.92); margin-left:auto; margin-right:auto; }

/* 🟨 로고 + 메뉴를 감싸는 박스 */
#header .inner .top_nav_box { width:100%; min-height:180px; height:auto; display:flex; align-items:center; flex-wrap:wrap; background-color:#fff; gap:0 50px; justify-content:flex-start; }

/* 🟨 로고 영역 */
#header .inner .top_nav_box .top_logo { flex:0 0 auto; }
#header .inner .top_nav_box .top_logo a { display:flex; align-items:center; justify-content:center; }
#header .inner .top_nav_box .top_logo img { height:60px; width:auto; }

/* 🟨 메뉴 모듈 래퍼 (카테고리 영역) */
#header .inner .top_nav_box .nav_wrap { overflow:visible; }

/*** 🟥 상단 헤더 레이아웃 끝 ***/


/********** 🟥🟥 상단 카테고리 메뉴 시작 **********/

/* 🟨 메뉴 래퍼 기본값 */
.top_category { min-width:280px; }

/* 🟨 한 줄짜리 UL (PC 기준) */
.top_category .top_menu { display:flex; flex-wrap:nowrap; align-items:center; list-style:none; margin:0; padding:0; }

/* 🟨 공통: 상단 카테고리 기본 스타일 */
.top_category .top_menu > .item { padding:0 25px; }
.top_category .top_menu > .item > a { display:inline-block; font-size:1.125rem; font-weight:600; line-height:78px;
  color:#333; text-decoration:none; position:relative; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* 🟨 공통 호버(PC/태블릿): 색 살짝 진하게 */
.top_category .top_menu > .item > a:hover { color:#000; }

/* 🟨 키보드 포커스 */
.top_category .top_menu > .item > a:focus-visible { outline:2px solid #222; outline-offset:2px; }

/* 🟨 밑줄 애니메이션: PC + 태블릿 공통 (768px 이상) */
@media (min-width:768px){
  .top_category .top_menu > .item > a::after {
    content:""; position:relative; display:block; bottom:0; width:100%; height:2px; background:#000;
    transform:scaleX(0); transform-origin:100% 0; transition:transform .3s cubic-bezier(.45,.46,.05,.96); }
  .top_category .top_menu > .item:hover > a::after,
  .top_category .top_menu > .item > a:focus-visible::after { transform:scaleX(1); transform-origin:0 0; }
}

/* 🟨 PC(1025px 이상): 로고 + 카테고리 정렬 */
@media (min-width:1025px){
  #header .inner .top_nav_box .nav_wrap { flex:1 1 auto; display:flex; justify-content:center; }
  .top_category { min-width:280px; margin-left:50px; } /* ← 여기 숫자로 PC에서 “조금 더 오른쪽” 미세 조정 */
}

/*** 🟥 Tablet (<=1024px): 로고 1줄 + 카테고리 1줄 ***/
@media all and (max-width:1024px){
  #header .inner .top_nav_box .nav_wrap { order:2; flex-basis:100%; }
  .top_category { margin-left:0; }

  /* 로고 1행, 메뉴 2행 레이아웃 */
  #header .inner .top_nav_box { padding-top:30px; margin-bottom:10px; }
  #header .inner .top_nav_box .top_logo { order:1; flex-basis:100%; display:flex; align-items:center;
    justify-content:center; height:60px; overflow:hidden; margin:0 auto; }
  #header .inner .top_nav_box .top_logo img { max-width:200px; max-height:50px; }

  .top_category { order:2; flex-basis:100%; }
  .top_category .top_menu { justify-content:center; gap:clamp(8px,3vw,80px); flex-wrap:nowrap; }
  .top_category .top_menu > .item { padding:0; }
  .top_category .top_menu > .item > a { font-size:1rem; font-weight:400; line-height:43px; }
}

/*** 🟥 Mobile (<=767px): 같은 UL로 2줄 메뉴 ***/
@media all and (max-width:767px){
  .top_category { padding:0 16px; margin-left:0; }
  .top_category .top_menu { max-width:420px; margin:0 auto; }

  /* 상단 높이/정렬 보정 */
  #header .inner .top_nav_box { min-height:110px !important; padding-top:0 !important; }
  #header .inner .top_nav_box .nav_wrap { order:2; flex-basis:100%; margin-top:-3.7px; }
  #header .inner .top_nav_box .top_logo {
    order:1; margin-top:11px !important; margin-left:auto; margin-right:auto; }
  #header .inner .top_nav_box .top_logo img { max-height:43px !important; }

  /* 모바일 메뉴: 2줄 래핑 + 중앙 정렬 */
  .top_category .top_menu { display:flex; flex-wrap:wrap; justify-content:center; gap:0 15px; }
  .top_category .top_menu > .item { padding:0; }
  .top_category .top_menu > .item > a {
    font-size:0.9375rem; height:35px; font-weight:400; display:flex; align-items:center; justify-content:flex-start;
    text-align:left; padding:0 10px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

  /* 모바일에서 밑줄 애니메이션 제거 */
  .top_category .top_menu > .item > a::after { content:none; }
}

/********** 🟥🟥 상단 카테고리 메뉴 끝 **********/

/* 🟨 브레드크럼 (Home > 현재 위치) */
.breadcrumb {
  display: block; margin: 0.75rem 0 1.5rem; /* 위/아래 간격(12px/24px) */
  color: #666; font-size: 1rem; line-height: 1.6; }

/* 리스트 수평 배치 + 줄바꿈 대응 */
.breadcrumb > ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }

/* 링크 스타일 */
.breadcrumb a {
  color: #666; text-decoration: none; white-space: nowrap; /* 줄바꿈 방지 */ }
.breadcrumb a:hover {
  text-decoration: underline; }

/* 현재 페이지 강조 */
.breadcrumb [aria-current="page"] span { color: #111; font-weight: 600; }

/* 구분기호 */
.breadcrumb .sep { color: #c8c8c8; user-select: none; padding: 0 0.1rem; }

/* 아주 긴 이름은 말줄임 처리 */
.breadcrumb li span {
  display: inline-block; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* 모바일(<=767px) */
@media (max-width: 767px) {
  .breadcrumb { font-size: 0.875rem; /* 약 14~15px */ }
  .breadcrumb li span { max-width: 65vw; } }


/******* 🟥🟥🟥 공통모듈 - 상단 끝 🟥🟥🟥*******/




/******* 🟥🟥🟥 공통모듈 - 하단 시작 🟥🟥🟥 *******/

/* 🟨 푸터 */
.bottom-nav{ z-index:901; position:fixed; bottom:0; width:100%; height:52px; transform:translate3d(0,0,0); transition:transform .3s linear, padding-bottom .3s linear; }
.bottom-nav__top{ opacity:1; visibility:visible; position:absolute; top:-72px; right:16px; text-align:center; transition:.5s; } /* 항상 표시 */
.bottom-nav__top a{ background:#fff; border:1px solid #dadada; border-radius:50%; width:40px; height:40px; display:flex; justify-content:center; align-items:center; }

.site-footer{ width:100%; margin:0 auto; padding:0; background:#f5f5f5; overflow:hidden; }
.site-footer .inner{ width:97%; max-width:calc(1680px * 0.92); margin:0 auto; padding:100px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; flex-direction:row; }
.site-footer .inner > div{ flex-basis:50%; } /* PC 2열 */

.site-footer .bt_logo{ display:flex; align-items:center; justify-content:flex-start; text-align:left; margin:16px 0 !important; padding:0 !important; flex:0 0 auto !important; }
.site-footer .bt_logo a{ display:inline-flex; align-items:center; line-height:0; }
.site-footer .bt_logo img{ height:42px !important; width:auto !important; display:block; }

/* 🟨 기본 정보(오른쪽 칼럼) */
.site-footer .bt_info{ text-align:right; }
.site-footer .bt_info .bt_title{ margin-bottom:10px; }
.site-footer .bt_info .bt_info_list{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.25rem .625rem; margin:0 0 0 auto; max-width:500px; }
.site-footer .bt_info .bt_info_list > div{ margin-left:10px; }
.site-footer .bt_info .bt_info_list .label{ font-weight:600; }

/* 🟨 현재 구조용: bt_info_list 안의 .sns / .copyright 정렬 */
@media (min-width:1025px){
  .site-footer .bt_info .bt_info_list .sns,
  .site-footer .bt_info .bt_info_list .copyright{ flex:0 0 100%; }
  .site-footer .bt_info .bt_info_list .sns{
    display:flex;
    justify-content:flex-end;
    gap:10px; /* 링크 우측 정렬 */
  }
  .site-footer .bt_info .bt_info_list .copyright{
    text-align:right;
    margin-top:11px; /* 카피라이트 우측 */
  }

  /* 🔹 PC에서만 “화실 주소 51454 … 102호” 전체를 한 줄로 */
  .site-footer .bt_info .field.address{
    white-space: nowrap;
  }
}


/* 🟨 푸터 반응형 (태블릿 이하: 좌측 정렬 유지) */
@media (max-width:1024px){
  .site-footer{ padding-bottom:40px; }
  .site-footer .inner{ width:97%; max-width:calc(1680px * 0.92); margin:0 auto; padding:0 16px; display:flex; align-items:flex-start; justify-content:flex-start; flex-wrap:wrap; flex-direction:column; }
  .site-footer .inner > div{ flex-basis:100%; }
  .site-footer .bt_logo{ order:1; padding:17px 0 0 !important; margin-bottom:40px; width:100%; display:flex; }
  .site-footer .bt_logo a{ justify-content:flex-start; }
  .site-footer .bt_logo img{ height:30px !important; max-height:30px !important; }
  .site-footer .bt_info{ order:2; text-align:left; margin-bottom:40px; }
  .site-footer .bt_info .bt_info_list{ justify-content:flex-start; margin:0; }
  .site-footer .bt_info .bt_info_list > div{ margin:0 10px 0 0; }

  /* 태블릿 이하에서 .sns는 좌측 정렬 + 줄바꿈 */
  .site-footer .bt_info .bt_info_list .sns{
    display:flex; flex-wrap:wrap; justify-content:flex-start; column-gap:10px; row-gap:4px; }
  .site-footer .bt_info .bt_info_list .copyright{ text-align:left; }
}

@media (max-width:767px){
  .site-footer .bt_logo img{ height:23px !important; max-height:23px !important; }
}

/* 🖥 PC(넓은 화면)에서만 주소를 한 줄로 고정 */
@media (min-width:1025px){
  .site-footer .bt_info .field.address .value{
    white-space: nowrap;
  }
}


/* 🟥 카피라이트: 화면이 충분히 넓을 때만 한 줄 고정 */
@media (min-width:650px){
  .site-footer .bt_info .bt_info_list .copyright{
    white-space: nowrap;
  }
}




/******* 🟥🟥🟥 공통모듈 - 하단 끝 🟥🟥🟥 *******/






/******* 🟥🟥🟥 상세설명 디자인 시작 🟥🟥🟥 *******/

/*** 🟥 테마 변수 선언(색상) ***/
:root { --purple: #6a1b9a; /* 전체 배경으로 사용할 보라색 */ 
     --dark-gray: #2b2b2b; /* 큰 텍스트에 사용할 다크 그레이 */ 
     --violet: #3c0c72;
     --deep-purple: #570b51;
     --burgundy: #560b0b;
     --brown: #633909;
     --olive: #635e09;
     --green: #1d6309; }

/* 🟨 섹션간 간격 */
#kitty{
  --measure:72ch; --measure-title:24ch;
  --pg-gap:clamp(3rem,6vw,8rem);
  --pg-gap-sm:clamp(1.75rem,3vw,3.5rem);
  --pg-gap-lg:clamp(3.5rem,8vw,9rem);
  --link:#0645AD; --link-hover:#053B96; --link-visited:#5A2CA0; --focus-ring:#2B8FFF;
  --green:#1d6309;
}
#kitty .spacer{ height:var(--pg-gap); display:block; width:100%; }
#kitty .spacer--sm{ height:var(--pg-gap-sm); }
#kitty .spacer--lg{ height:var(--pg-gap-lg); }

/* 🟨 문장 세로 간격 */
#kitty .mt-10{ margin-top:10px; }
#kitty .mt-20{ margin-top:20px; }

/* 🟨 메인이미지 슬라이딩 시작 🟨 */
#kitty *{ margin:0; padding:0; box-sizing:border-box; }
#kitty .slide{ position: relative; width: 100%; max-width: 100%;
  aspect-ratio: 16 / 9; overflow: hidden; margin-block: 0 clamp(20px, 4vw, 55px); }
#kitty .slide ul{ list-style:none; position:relative; height:100%; }
#kitty .slide li{ position:absolute; left:0; right:0; top:0; bottom:0; opacity:0; animation:fade 9s infinite; }
#kitty .slide li img{ display:block; width:100%; height:auto; max-width:100%; }

/* 3장 기준: 0s / 3s / 6s 지연 */
#kitty .slide li:nth-child(1){ animation-delay:0s; }
#kitty .slide li:nth-child(2){ animation-delay:3s; }
#kitty .slide li:nth-child(3){ animation-delay:6s; }

/* 페이드 키프레임 (원본 타이밍 그대로) */
@keyframes fade{ 0%,50%,100% { opacity:0; } 15%,35% { opacity:1; } }
/* 🟨 메인이미지 슬라이딩 끝 🟨 */


/* 🟥 중앙 텍스트 박스 / 하단 텍스트 박스 🟥 */
/* 상·하단 텍스트박스를 동일하게 가운데 정렬 + 폭 제한 */
#kitty :is(.top-textbox, .bottom-textbox){
  text-align:center; max-width:1680px; background:#f5f5f5; border-radius:8px;
  margin:0 auto; padding:clamp(20px,4vw,55px); }

/* 🟨 제목은 중앙 정렬, 본문은 좌측 정렬 유지 */
#kitty :is(.top-textbox, .bottom-textbox) > :is(h1,h2,h3),
#kitty .right .right-content > :is(h1,h2,h3){
  text-align:center !important; text-wrap:balance; padding-bottom:10px; }
#kitty :is(.top-textbox, .bottom-textbox) > :is(p,ul,ol,li,blockquote),
#kitty .right .right-content > :is(p,ul,ol,li,blockquote){
  text-align:left !important; word-break:keep-all; overflow-wrap:anywhere; }


/* 🟥 내부 요소 폭(가독 폭)과 가운데 정렬 */
/* ▶︎ (통합) 디바이스별 변수로 한 줄 길이를 제어합니다. */
#kitty .top-textbox > :is(h1,h2,h3,p,ul,ol,li,blockquote){
  width:min(100%, var(--m-top)); margin-inline:auto; }
#kitty .bottom-textbox > :is(h1,h2,h3,p,ul,ol,li,blockquote){ 
  width:min(100%, var(--m-bottom)); margin-inline:auto; }
#kitty .right .right-content > :is(h1,h2,h3,p,ul,ol,li,blockquote){
  width:min(100%, var(--m-right)); margin-inline:auto; }


/* 🟥 가독 폭 변수 */
/* 기본값(모바일 ≤767px) */
#kitty{
  --m-top:42ch;    
  --m-bottom:42ch;  
  --m-right:42ch;   
  --m-ovl-title: 42ch;   
  --m-ovl-sub:    42ch;   
  --lh-body:1.7; --ls-body:-0.005em; --header-height:80px; }

/* 태블릿(768~1024px) */
@media (min-width:768px) and (max-width:1024px){
  #kitty{
    --m-top:42ch;
    --m-bottom:42ch;
    --m-right:42ch;
    --m-ovl-title: 42ch;
    --m-ovl-sub:   42ch; } }

/* PC(≥1025px) */
@media (min-width:1025px){
  #kitty{
    --m-top:42ch;    /* 🟨 탑 본문  */
    --m-bottom:42ch;  /* 🟨 바텀 본문  */
    --m-right:42ch;   /* 🟨 우측 박스:  */
    --m-ovl-title: 17ch; /* 🟨 overlay-text */
    --m-ovl-sub:   42ch; /* 🟨 overlay-subtext */ } }


/* 🟥 컬러배경 + 대형 문구 */
#kitty .top-box2{
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; min-height:320px;
  padding-inline:clamp(16px,4vw,48px); padding-block:clamp(24px,6vh,72px);
  background:var(--topbox-bg, #007bff); border-radius:10px; overflow:hidden; }

#kitty .main-overlay{ color:#fff; font-weight:800; font-size:clamp(2rem,8.5vw,6rem); text-align:center;
  word-break:keep-all; overflow-wrap:anywhere; display:block; max-width:min(100%, var(--m-ovl-title)); 
  margin-inline:auto; text-wrap:balance; }

#kitty .sub-overlay{
  display:block; width:min(100%, var(--m-ovl-sub)); margin-inline:auto; color:#fff;
  border:1px solid currentColor; border-radius:4px; background:rgba(0,0,0,.35);
  padding:6px 10px; text-align:left; word-break:keep-all; overflow-wrap:anywhere; }

/* 🟨 2열 레이아웃 (PC) / 1열(태블릿 이하) */
#kitty .container{ display:flex; gap:20px; align-items:stretch; 
  width: 100%; max-width: none; margin: 0 auto; padding: 0; }

#kitty .left, #kitty .right{ flex:1; display:flex; justify-content:center; align-items:center; }
@media (max-width:1024px){
  #kitty .container{ flex-direction:column; gap:clamp(6px,1.5vw,14px); }
  #kitty .left, #kitty .right{ width:100%; }
}

/* 🟥 왼쪽 이미지 박스 */
#kitty .image-wrapper{ display:flex; align-items:center; justify-content:center; height:100%; position:relative; }
#kitty .image-wrapper img{ width:100%; height:100%; object-fit:contain; object-position:center; background:transparent; }
@media (max-width:1024px){
  #kitty .image-wrapper{ height:auto; }
  #kitty .image-wrapper img{ height:auto; }
}
/* 🟥 왼쪽 컬러박스(이미지 대신) */
#kitty .colorimage-wrapper{
  position:relative; background:var(--purple, #6a4cff); width:100%; min-height:320px; overflow:hidden; }

/* 🟥 오버레이 전체 레이아웃 */
#kitty .overlay-wrapper{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:12px; padding-block:clamp(24px,6vh,72px); padding-inline:20px; }

/* 🟥 제목 + 서브텍스트 공통: 폭/정렬 */
#kitty .overlay-text,
#kitty .overlay-subtext{
  display:block; width:min(100%, var(--m-right)); margin-inline:auto; text-align:left;
  word-break:keep-all; overflow-wrap:anywhere; }

/* 🟨 실제 큰 글자와 테두리는 안쪽 span에 적용 */
#kitty .overlay-text-inner{
  display:inline-block; font-weight:700; font-size:clamp(1.25rem,8vw,4rem); color:#fff;
  border:1px solid currentColor; border-radius:6px; background:rgba(0,0,0,.35);
  background-clip:padding-box; padding:.3em; }

/* 🟨 서브텍스트 색상만 따로 지정 */
#kitty .overlay-subtext{ color:#fff; }

@media (min-width:1025px){
  #kitty .colorimage-wrapper{ display:flex; height:auto; overflow:visible; }
  #kitty .overlay-wrapper{ position:static; margin:auto; }
}

/* 🟨 태블릿 이하: 오버레이를 흐름으로 넣어 잘림 방지 + 상하 여백 확보 */
@media (max-width:1024px){
  #kitty .colorimage-wrapper{ overflow: visible; min-height: auto; }
  #kitty .overlay-wrapper{
    position: static; padding-block: clamp(24px, 6vh, 72px); padding-inline: 16px; } }

@media (max-width:500px){
  #kitty .overlay-wrapper{ padding-inline:20px; padding-block:20px 24px; }
  #kitty .overlay-subtext{ margin-top:10px; } }


/* 🟨 이미지 위 중앙 텍스트 */
#kitty .image-wrapper .overlay-text2{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
 /* 박스 크기 / 모양 */
  padding: 10px 20px; max-width: calc(100% - 40px); box-sizing: border-box; text-align: center;
  /* 글꼴/색상 디자인 */
  font-weight: 700; color: #fff; border: 1px solid currentColor;
  border-radius: 6px; background: rgba(0,0,0,.65); background-clip: padding-box; }


/* 🟥 1열 이미지 + 텍스트 🟥 */

#kitty .top-image{ position: relative; }
#kitty .top-image .image-overlay{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 이미지 정확한 가운데 */
  /* 여기서 박스 크기 조절 */
  padding: 18px 26px !important; max-width: calc(100% - 20px); box-sizing: border-box;
  text-align: center; background: rgba(0,0,0,.40); border-radius: 6px; color: #fff; }

#kitty .top-image .image-overlay > h2{ margin: 0; color: inherit; }

/* 🟨 오른쪽 텍스트 카드 */
#kitty .right{ background:#f5f5f5; }



#kitty .right-content{ max-width:500px; padding:20px; text-align:center; position:relative; }
/* “수업 과정 자세히 보기” 같은 read-more 링크 정렬 */
#kitty .read-more{
  display:block;
  width:min(100%, var(--m-right));  /* 본문 텍스트랑 같은 가독 폭 */
  margin:20px auto 0;               /* 위에는 여백, 좌우는 자동 중앙 */
  text-align:right;                 /* 🖥 PC 기본: 오른쪽 정렬 */
}

/* 태블릿 이하에서는 다시 가운데 정렬 */
@media (max-width:1024px){
  #kitty .read-more{
    text-align:center;
  }
}



/* PC에서 좌/우 박스 높이를 동일하게 맞추고, 오른쪽 텍스트는 가운데 정렬 */
@media (min-width:1025px){
  #kitty .left,
  #kitty .right{ align-items: stretch; }
  #kitty .colorimage-wrapper,
  /* 오른쪽 카드 안의 내용 세로 가운데 */
  #kitty .right-content{ height: 100%; display:flex; flex-direction:column; justify-content:center; } }


/* 🟨 함께 볼 페이지 전용 리스트 스타일 */
#kitty .top-textbox ul.link-list{ list-style: disc; padding-left: 1.11em; }


/* 🟥 3열 이미지 갤러리 🟥 */
#kitty .image-gallery:not(.gallery--masonry){
  display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; position:relative;
}
#kitty .image-gallery:not(.gallery--masonry) .gallery-item{
  flex:1 1 calc(33.333% - 13.34px); overflow:hidden; border-radius:8px; transition:transform .3s ease;
  text-decoration:none; color:inherit; display:flex; flex-direction:column; font-size:0 !important;
}
#kitty .image-gallery:not(.gallery--masonry) .gallery-item img{
  width:100%; height:auto; display:block; transition:transform .4s ease; aspect-ratio:4/3; object-fit:cover;
}
#kitty .image-gallery:not(.gallery--masonry) .gallery-item:hover img{ transform:scale(1.05); }
#kitty .caption{ margin:.7rem 0 1rem; line-height:1.35; }

/* Masonry(원본 비율 유지) */
#kitty .image-gallery.gallery--masonry{ display:block; column-count:3; column-gap:12px; }
@media (max-width:1024px){ #kitty .image-gallery.gallery--masonry{ column-count:2; column-gap:4px; } }
#kitty .image-gallery.gallery--masonry .gallery-item{
  display:block; width:100%; margin:0 0 21px; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; border-radius:8px;
}
#kitty .image-gallery.gallery--masonry .gallery-item img{
  width:100%; height:auto; aspect-ratio:auto; object-fit:contain; display:block;
}

/******* 🟥🟥🟥 상세설명 디자인 끝 🟥🟥🟥 *******/


/******* 🟥🟥🟥 기타 🟥🟥🟥 *******/