/* 홈페이지 스튜디오 공용 부품 CSS (2026-10-06)
   - 디자이너/AI 산출물의 CSS 는 저장 시 `.studio-site` 아래로 자동 한정된다. 이 파일은 그 밑에 깔리는 최소 기본값과
     data-studio-* 부품(슬라이더·라이트박스·드로어·스크롤 등장·헤더)의 동작에 필요한 규칙만 담는다.
   - 예약 페이지(reserv2)와 한 문서에 섞이므로 전역 선택자는 body{margin:0} 하나만 쓴다.
   - 스튜디오 앱의 미리보기(srcdoc)도 같은 파일을 로드한다 — 레이아웃과 미리보기가 같은 모양이어야 한다. */

body { margin: 0; }

/* ---- 영역 래퍼 기본값 ---- */
.studio-site,
.studio-site * { box-sizing: border-box; }
.studio-site {
   font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
   -webkit-font-smoothing: antialiased;
   line-height: 1.5;
   color: #1a1a1a;
   word-break: keep-all;
}
.studio-site * { font-family: inherit; }
.studio-site img { max-width: 100%; height: auto; }
.studio-site a { color: inherit; text-decoration: none; }
.studio-site button { font: inherit; cursor: pointer; }
.studio-main { display: block; min-height: 40vh; }
.studio-empty { padding: 80px 16px; text-align: center; color: #888; }

/* ---- 헤더: data-studio-header
   기본은 투명하게 시작해 스크롤 40px 뒤 .is-solid. data-studio-header="solid" 면 항상 solid.
   예약 페이지(data-reserv-mode=true)에서는 studio.js 가 항상 .is-solid 를 붙인다. ---- */
.studio-site [data-studio-header] {
   position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
   transition: background-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.studio-site [data-studio-header].is-solid {
   background-color: var(--studio-header-bg, #fff);
   box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* ---- 드로어(모바일 메뉴): [data-studio-drawer-toggle] 버튼 + [data-studio-drawer-panel] ---- */
.studio-site [data-studio-drawer-panel] { display: none; }
.studio-site [data-studio-drawer-panel].is-open { display: block; }

/* ---- 대표 슬라이더: [data-studio-slider] 안의 img 를 겹쳐 놓고 크로스페이드 ----
   공지 팝업(.studio-notice__slides)은 body 끝, 즉 `.studio-site` 밖에 붙으므로 같은 규칙이 닿도록 아래 규칙들의 선택자를 함께 적는다
   (컨테이너의 min-height 만 페이지 전용 — 팝업은 아래 공지 팝업 블록의 aspect-ratio 를 쓴다). */
.studio-site [data-studio-slider] { position: relative; overflow: hidden; min-height: 60vh; }
.studio-site [data-studio-slider] > img,
.studio-notice__slides[data-studio-slider] > img {
   position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
   opacity: 0; transition: opacity 1.4s ease; z-index: 0;
}
.studio-site [data-studio-slider] > img.is-prev,
.studio-notice__slides[data-studio-slider] > img.is-prev { opacity: 1; z-index: 0; }
.studio-site [data-studio-slider] > img.is-active,
.studio-notice__slides[data-studio-slider] > img.is-active { opacity: 1; z-index: 1; }
.studio-site .studio-slider__dots,
.studio-notice__slides .studio-slider__dots {
   position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3;
   display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0;
}
.studio-site .studio-slider__dot,
.studio-notice__slides .studio-slider__dot {
   width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
   background: rgba(255, 255, 255, .5); transition: transform .2s, background .2s;
}
.studio-site .studio-slider__dot.is-active,
.studio-notice__slides .studio-slider__dot.is-active { background: #fff; transform: scale(1.3); }
/* 슬라이더 위에 올라가는 글자 블록은 z-index 2 이상이어야 사진 위로 온다 */
.studio-site [data-studio-slider] > :not(img):not(.studio-slider__dots),
.studio-notice__slides[data-studio-slider] > :not(img):not(.studio-slider__dots) { position: relative; z-index: 2; }

/* ---- 여러 장 사진: [data-studio-slides] — 편집 탭 [여러 장으로 만들기] 로 한 장 사진을 감싼 상자(2026-10-21) ----
   첫 장은 원래 자리·크기·사이트 CSS 그대로(틀을 정한다), 나머지는 그 위에 겹쳐 크로스페이드. 사이트 CSS 의 transition 보다 앞서도록 !important */
.studio-site [data-studio-slides] { position: relative; display: block; width: 100%; height: 100%; }
.studio-site [data-studio-slides] > img ~ img {
   position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover;
   opacity: 0; z-index: 1; transition: opacity 1.4s ease, transform .5s ease !important;
}
.studio-site [data-studio-slides] > img ~ img.is-prev { opacity: 1; z-index: 1; }
.studio-site [data-studio-slides] > img ~ img.is-active { opacity: 1; z-index: 2; }

/* ---- 사진 보이는 영역 상자: img style 의 --studio-pos/--studio-zoom(PC), --studio-pos-m/--studio-zoom-m(모바일 768px 미만) (2026-10-22) ----
   편집 탭 [보이는 영역] 의 영역 상자. 칸을 cover 로 채우고, 위치 p 를 object-position 과 확대 중심에 함께 써서 상자 그대로 보이게 한다
   (상자 왼쪽 = p×(1-상자 폭) — 스튜디오 photo-focus.ts 와 같은 계산). 정하지 않은 화면은 사이트 CSS 그대로. 확대한 사진이 칸 밖으로 나가지 않게 부모를 자른다.
   사이트 CSS 보다 앞서야 해서 !important. scale 은 transform 과 따로 곱해지므로 사이트의 hover 확대 같은 transform 은 그대로 동작한다 */
@media all and (min-width: 768px) {
   .studio-site img[style*="--studio-zoom:"] {
      object-fit: cover !important; object-position: var(--studio-pos) !important;
      transform-origin: var(--studio-pos) !important; scale: var(--studio-zoom) !important;
   }
   .studio-site :has(> img[style*="--studio-zoom:"]) { overflow: hidden; }
}
@media all and (max-width: 767.98px) {
   .studio-site img[style*="--studio-zoom-m:"] {
      object-fit: cover !important; object-position: var(--studio-pos-m) !important;
      transform-origin: var(--studio-pos-m) !important; scale: var(--studio-zoom-m) !important;
   }
   .studio-site :has(> img[style*="--studio-zoom-m:"]) { overflow: hidden; }
}

/* ---- 라이트박스: [data-studio-lightbox] 안의 a 나 img 를 누르면 크게 보기 ---- */
.studio-site [data-studio-lightbox] img { cursor: zoom-in; }
.studio-lightbox {
   position: fixed; inset: 0; z-index: 2000; display: none;
   align-items: center; justify-content: center; padding: 24px;
   background: rgba(0, 0, 0, .92); cursor: zoom-out;
}
.studio-lightbox.is-open { display: flex; }
.studio-lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); cursor: default; }
.studio-lightbox__close {
   position: absolute; top: 14px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%;
   background: rgba(255, 255, 255, .12); color: #fff; font-size: 28px; line-height: 44px; text-align: center;
}

/* ---- 스크롤 등장: [data-studio-reveal] — JS 가 html.studio-js 를 붙인 뒤에만 숨긴다(JS 없으면 그냥 보인다) ---- */
html.studio-js .studio-site [data-studio-reveal] {
   opacity: 0; transform: translateY(18px);
   transition: opacity .7s ease, transform .7s ease;
}
html.studio-js .studio-site [data-studio-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
   html.studio-js .studio-site [data-studio-reveal] { opacity: 1; transform: none; transition: none; }
   .studio-site [data-studio-slider] > img,
   .studio-notice__slides[data-studio-slider] > img { transition: none; }
   .studio-site [data-studio-slides] > img ~ img { transition: none !important; }
}

/* ---- 카카오 지도(지도 부품): [data-studio-map] 안에 studio.js 가 iframe 을 넣는다 (2026-10-28) ----
   크기가 정해진 상자(높이·aspect-ratio) 안에 두면 그 상자를 꽉 채우고(height:100%), 부모 높이가 없으면 100% 가 auto 로 풀려 2:1 비율(최소 240px).
   사이트 CSS 로 height·aspect-ratio 를 주면 그 값. iframe 은 표식을 꽉 채운다(absolute) */
[data-studio-map] { position: relative; display: block; width: 100%; height: 100%; min-height: 240px; aspect-ratio: 2 / 1; overflow: hidden; background: #f2f2f0; }
.studio-map__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }

/* ---- 법적 고지(레이아웃이 푸터 끝에 붙임, 편집 불가) ---- */
.studio-site .studio-legal {
   padding: 20px 16px 28px; font-size: 12px; line-height: 1.7; color: #8a8a8a; text-align: center;
   border-top: 1px solid rgba(0, 0, 0, .06);
}
.studio-site .studio-legal p { margin: 0; }
.studio-site .studio-legal a { text-decoration: underline; }
/* 푸터 안 고지(서버·미리보기가 footer_html 안 끝에 넣음, 2026-10-15) — 푸터 배경·글자색을 그대로 물려받는다 */
.studio-site .studio-legal--in {
   background: transparent; color: inherit; opacity: .7;
   border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 20%, transparent);
   padding: 16px 0 0; margin-top: 24px; font-size: 12px; line-height: 1.7; text-align: inherit;
 width: 100%; flex: 1 1 100%; grid-column: 1 / -1;}
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
   .studio-site .studio-legal--in { border-top-color: rgba(127, 127, 127, .25); }
}
.studio-site .studio-legal--in a { color: inherit; }

/* ---- 예약 페이지와 섞일 때: 고정 헤더 높이만큼 본문을 내린다(값은 레이아웃의 :root 변수) ---- */
.title_bg { height: 0; display: none; }
[data-reserv-mode="true"] .title_bg { display: block; height: var(--header_pc_height, 76px); }
@media all and (max-width: 1024px) {
   [data-reserv-mode="true"] .title_bg { height: var(--header_mobile_height, 64px); }
   /* 모바일 하단 고정 예약바가 푸터를 가리지 않게 */
   [data-reserv-mode="true"] #studio-footer { padding-bottom: 150px; }
}

/* ---- 공통 부품(설계 2026-10-08-common-parts-design.md §6): 글꼴·색은 사이트 상속, "표가 표로 보일 정도"만. 사이트 CSS 가 덮어쓴다 ---- */
.studio-part { margin: 0 0 32px; }
.studio-part__title { margin: 0 0 12px; font-size: 1.25em; font-weight: 700; }
.studio-part__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.studio-part__table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
/* color-mix() 를 모르는 브라우저(구형 Android WebView·Safari 16.2 미만)용 폴백.
   테두리는 currentColor 만 쓰므로 모르는 브라우저가 그 선언을 파싱 단계에서 버려 바로 앞 줄의 평문 폴백이 적용된다.
   색조는 var() 를 품어 파싱 때 버려지지 않고 계산 단계에서 transparent 가 되므로 @supports 로 감싼다(평문 폴백이 기본, 지원 브라우저만 덮어씀). */
.studio-part__table th, .studio-part__table td {
   padding: 10px 12px;
   border: 1px solid rgba(0, 0, 0, .12);
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
   text-align: center; white-space: nowrap;
}
.studio-part__table thead th { background: rgba(229, 72, 61, .08); font-weight: 600; }
@supports (background: color-mix(in srgb, red 1%, transparent)) {
   .studio-part__table thead th { background: color-mix(in srgb, var(--point_color, #e5483d) 8%, transparent); }
}
.studio-part__table tbody th { text-align: left; font-weight: 600; }
.studio-part__note { margin: 10px 0 0; font-size: 0.85em; opacity: .7; }
.studio-part__list {
   list-style: none; margin: 0; padding: 0;
   border-top: 1px solid rgba(0, 0, 0, .12);
   border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.studio-part__item {
   border-bottom: 1px solid rgba(0, 0, 0, .12);
   border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.studio-part__item summary { display: flex; align-items: center; gap: 10px; padding: 14px 4px; cursor: pointer; list-style: none; }
.studio-part__item summary::-webkit-details-marker { display: none; }
.studio-part__badge { flex: none; padding: 2px 8px; border: 1px solid var(--point_color, #e5483d); border-radius: 999px; font-size: 0.75em; color: var(--point_color, #e5483d); }
.studio-part__item.is-important .studio-part__badge { background: var(--point_color, #e5483d); color: #fff; }
.studio-part__subject { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-part__item time { flex: none; font-size: 0.85em; opacity: .6; }
.studio-part__body { padding: 0 4px 16px; line-height: 1.7; }
.studio-part__body img { max-width: 100%; height: auto; }
.studio-part--placeholder { padding: 24px; border: 1px dashed #bbb; border-radius: 8px; color: #777; font-size: 14px; text-align: center; background: #fafafa; }
/* 공지 팝업 */
.studio-notice { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.55); }
.studio-notice[hidden] { display: none; }
/* 팝업도 .studio-site 밖이라 서체가 상속되지 않는다 — 사이트와 같은 서체로 */
.studio-notice { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #1a1a1a; }
.studio-notice__dialog { width: min(420px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.studio-notice__slides { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; }
.studio-notice__slides img { display: block; width: 100%; height: auto; }
.studio-notice__slides[data-studio-slider] { aspect-ratio: 405 / 646; overflow: hidden; }
.studio-notice__slides[data-studio-slider] img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-notice__actions { display: flex; flex: none; border-top: 1px solid #eee; }
.studio-notice__actions button { flex: 1 1 0; padding: 14px 8px; border: 0; background: #fff; font: inherit; font-size: 14px; cursor: pointer; }
.studio-notice__actions button + button { border-left: 1px solid #eee; }
.studio-notice__close { color: var(--point_color, #e5483d); font-weight: 600; }
/* 공지 팝업 위치·크기 (tb_studio_site.notice_opts → 루트 studio-notice--{position} studio-notice--{size}, 2026-10-14)
   --center(기본): 위 규칙 그대로(가운데·배경 어둡게). 모서리 4종: 배경 없음 — 뒤 페이지를 그대로 쓰게 루트는 pointer-events:none, 대화상자만 받는다.
   480px 이하 화면에서는 위치와 무관하게 가운데+어두운 배경(모서리 팝업이 화면을 다 덮는 것 방지) — 아래 @media 가 되돌린다 */
.studio-notice--top-left, .studio-notice--top-right, .studio-notice--bottom-left, .studio-notice--bottom-right { background: transparent; pointer-events: none; }
.studio-notice--top-left .studio-notice__dialog, .studio-notice--top-right .studio-notice__dialog,
.studio-notice--bottom-left .studio-notice__dialog, .studio-notice--bottom-right .studio-notice__dialog { pointer-events: auto; box-shadow: 0 12px 48px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25); }
.studio-notice--top-left { align-items: flex-start; justify-content: flex-start; }
.studio-notice--top-right { align-items: flex-start; justify-content: flex-end; }
.studio-notice--bottom-left { align-items: flex-end; justify-content: flex-start; }
.studio-notice--bottom-right { align-items: flex-end; justify-content: flex-end; }
.studio-notice--default .studio-notice__dialog { width: min(420px, 100%); }
.studio-notice--small .studio-notice__dialog { width: min(320px, 100%); }
.studio-notice--large .studio-notice__dialog { width: min(560px, 100%); }
@media all and (max-width: 480px) {
   .studio-notice--top-left, .studio-notice--top-right, .studio-notice--bottom-left, .studio-notice--bottom-right {
      align-items: center; justify-content: center; background: rgba(0,0,0,.55); pointer-events: auto;
   }
   .studio-notice--top-left .studio-notice__dialog, .studio-notice--top-right .studio-notice__dialog,
   .studio-notice--bottom-left .studio-notice__dialog, .studio-notice--bottom-right .studio-notice__dialog { box-shadow: 0 20px 60px rgba(0,0,0,.35); }
}