@charset "utf-8";
/* ============================================================
   common.css
   배송대행 통합 솔루션 — 메인 시안 공통 스타일
   - 리셋 / 컨테이너 / 그리드 / 공통 버튼 / 타이포 / 변수
   - 6단계 반응형 (Wide PC / PC / Small PC / Tablet / Mobile / Small Mobile)
   - 스튜디오 환경 (사이드메뉴 / 모달 / 온보딩) ← layout/studio 통합
   ============================================================ */


/* ----- CSS Variables (테마 컬러는 추후 업체별 오버라이드) ----- */
:root {
	--c-primary: #2962ff;
	--c-primary-dark: #1d4cd6;
	--c-secondary: #ff7043;
	--c-text: #222;
	--c-text-sub: #666;
	--c-text-mute: #999;
	--c-line: #e5e5e5;
	--c-bg: #fff;
	--c-bg-soft: #f7f8fa;
	--c-bg-dark: #1a1f2e;
	--c-success: #00c853;
	--c-warn: #ffab00;
	--c-error: #e53935;

	--ff-base: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 16px;

	--shadow-s: 0 2px 6px rgba(0, 0, 0, .06);
	--shadow-m: 0 4px 16px rgba(0, 0, 0, .08);
	--shadow-l: 0 12px 32px rgba(0, 0, 0, .12);
}

/* ----- Reset ----- */
*, *::before, *::after {box-sizing: border-box;}
html, body {margin: 0; padding: 0;}
body {font-family: var(--ff-base); font-size: 15px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased;}
h1, h2, h3, h4, h5, h6, p, figure, blockquote {margin: 0;}
ul, ol {margin: 0; padding: 0; list-style: none;}
a {color: inherit; text-decoration: none;}
img {max-width: 100%; vertical-align: middle; border: 0;}
button {font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;}
input, select, textarea {font: inherit; color: inherit;}
table {border-collapse: collapse; border-spacing: 0; width: 100%;}

/* ----- Container ----- */
.inner {width: 1240px; margin: 0 auto; padding: 0 20px;}

/* ----- Section 공통 ----- */
.main-section {padding: 80px 0;}
.main-section--narrow {padding: 60px 0;}
.main-section--soft {background: var(--c-bg-soft);}
.main-section--dark {background: var(--c-bg-dark); color: #fff;}

.sec-head {text-align: center; margin-bottom: 40px;}
.sec-head .sec-title {font-size: 32px; font-weight: 700; color: var(--c-text);}
.sec-head .sec-desc {margin-top: 12px; font-size: 16px; color: var(--c-text-sub);}

/* ----- Grid 유틸 ----- */
.col-2, .col-3, .col-4 {display: grid; gap: 20px;}
.col-2 {grid-template-columns: repeat(2, 1fr);}
.col-3 {grid-template-columns: repeat(3, 1fr);}
.col-4 {grid-template-columns: repeat(4, 1fr);}

/* ----- 버튼 공통 ----- */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 0 24px; border-radius: var(--radius-m); font-size: 15px; font-weight: 600; transition: background .2s, color .2s, border-color .2s;}
.btn-primary {background: var(--c-primary); color: #fff;}
.btn-primary:hover {background: var(--c-primary-dark);}
.btn-line {border: 1px solid var(--c-line); color: var(--c-text); background: #fff;}
.btn-line:hover {border-color: var(--c-primary); color: var(--c-primary);}
.btn-sm {height: 36px; padding: 0 16px; font-size: 13px;}
.btn-lg {height: 56px; padding: 0 32px; font-size: 17px;}

/* ----- 폼 공통 ----- */
.fld {height: 48px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: #fff; width: 100%;}
.fld:focus {outline: 0; border-color: var(--c-primary);}

/* ----- 표시 유틸 ----- */
.hide {display: none !important;}
.only-pc {display: block;}
.only-tablet {display: none;}
.only-mobile {display: none;}


/* ============================================================
   반응형 — 6단계 (Desktop-first)
   Wide PC      : 1600px 이상
   PC           : 1280 ~ 1599px (기본값)
   Small PC     : 1024 ~ 1279px
   Tablet       : 768 ~ 1023px
   Mobile       : 480 ~ 767px
   Small Mobile : 479px 이하
   ============================================================ */

/* Wide PC */
@media (min-width: 1600px) {
	.inner {width: 1480px;}
}

/* 1920 해상도 모니터에서만 80% 스케일 (실사이트 UserCommon.css 와 동일 — 스크롤바 감안 뷰포트 1900~1920 범위; 2560 등 더 넓은 해상도는 제외) */
@media screen and (min-width: 1900px) and (max-width: 1920px) {
	:root {zoom: 0.8;}
	/* zoom:0.8 아래서 100vh는 화면의 80%(864px)만 채워 사이드바가 화면바닥에 못 닿음 → foot 하단정렬 깨짐. 125vh(=100/0.8, ×0.8→화면 100%)로 보정. base(.studio-side height:100vh)가 이 블록보다 소스순서상 뒤라, 명시도 올려(.studio-layout .studio-side) 이기게 함 */
	.studio-layout .studio-side {height: 125vh;}
	/* 완성형 시안 뷰어(크게보기 팝업)만 80% 축소에서 제외 — 0.8 × 1.25 = 1 이라 시안이 다른 해상도와 똑같이 원본 크기로 보인다.
	   화면 전체를 덮는 fixed 오버레이라 주변 레이아웃엔 영향 없음. 박스 높이는 % 기준이라 배율이 바뀌어도 화면의 92% 유지. */
	.studio-viewer {zoom: 1.25;}
}

/* Small PC / Tablet Landscape */
@media (max-width: 1279px) {
	.inner {width: 100%; max-width: 980px;}
	.main-section {padding: 70px 0;}
	.sec-head .sec-title {font-size: 28px;}
}

/* Tablet Portrait */
@media (max-width: 1023px) {
	.inner {max-width: 100%; padding: 0 30px;}
	.main-section {padding: 60px 0;}
	.col-4 {grid-template-columns: repeat(2, 1fr);}
	.only-pc {display: none;}
	.only-tablet {display: block;}
}

/* Mobile */
@media (max-width: 767px) {
	body {font-size: 14px;}
	.inner {padding: 0 20px;}
	.main-section {padding: 48px 0;}
	.sec-head {margin-bottom: 28px;}
	.sec-head .sec-title {font-size: 22px;}
	.sec-head .sec-desc {font-size: 14px;}
	.col-2, .col-3, .col-4 {grid-template-columns: 1fr; gap: 14px;}
	.btn {height: 44px; font-size: 14px;}
	.btn-lg {height: 50px; font-size: 15px;}
	.only-tablet {display: none;}
	.only-mobile {display: block;}

}

/* Small Mobile */
@media (max-width: 479px) {
	.inner {padding: 0 14px;}
	.main-section {padding: 40px 0;}
	.sec-head .sec-title {font-size: 20px;}
}


/* ============================================================
   LAYOUT — 스튜디오/시안 페이지 레이아웃 (구 layout.css 통합)
   ============================================================ */
/* ============================================================
   layout.css
   메인 Layout 영역 — 3종 (모듈 배치/순서 제어)
   - body.layout-type1 : 정보 우선형 (NEOTSOFT 표준, 보수적)
   - body.layout-type2 : 기능 우선형 (도구·전환 중심)
   - body.layout-type3 : 풀폭 교차 매거진형 (브랜드 강조)

   ※ 모듈 자체 디자인은 module.css 에서 담당.
     이 파일은 "어떤 순서, 어떤 배치로 배열할지"만 제어.

   ※ 메인 컨텐츠 컨테이너 .main-content 는 flex column.
     각 섹션은 .main-section--{모듈명} 클래스로 구분.
     body.layout-typeN 이 order 값을 부여해 시각적 순서 결정.
   ============================================================ */

/* ----- 메인 컨텐츠 컨테이너 (order 기반 배치 활성화) ----- */
.main-content {display: flex; flex-direction: column; min-width: 0;}
.main-content > .main-section {width: 100%;}


/* ============================================================
   Layout 별 비주얼 톤 분화
   ----------------------------------------------------------------
   Layout 1 (정보 우선) — 깔끔·보수적 (표준)
   Layout 2 (기능 우선) — 컴팩트·비즈니스
   Layout 3 (풀폭 매거진) — 드라마틱·브랜드 강조
   ============================================================ */

/* ----- Layout 2 — 컴팩트·비즈니스 톤 ----- */
.layout-type2 .main-content > .main-section {padding: 64px 0;}
.layout-type2 .main-content > .main-section--narrow {padding: 48px 0;}
.layout-type2 .sec-head {margin-bottom: 32px;}
.layout-type2 .sec-head .sec-title {font-size: 28px;}
.layout-type2 .sec-head .sec-desc {font-size: 14px; margin-top: 8px;}
.layout-type2 .mod-event .event-card,
.layout-type2 .mod-warehouse .warehouse-card,
.layout-type2 .mod-review .review-card,
.layout-type2 .mod-bank,
.layout-type2 .mod-cs,
.layout-type2 .mod-nodata .nodata-card {border-radius: 8px;}
.layout-type2 .promo-banner {border-radius: 8px;}
.layout-type2 .mod-event .event-card:hover,
.layout-type2 .mod-warehouse .warehouse-card:hover {box-shadow: 0 8px 24px rgba(0, 0, 0, .1);}
.layout-type2 .mod-calc {border-radius: 12px; padding: 30px;}
.layout-type2 .mod-tracking--dual .tracking-form {height: 56px;}
.layout-type2 .btn-primary {font-weight: 700; letter-spacing: .2px;}


/* ----- Layout 3 — 드라마틱·매거진 톤 ----- */
.layout-type3 .main-content > .main-section {padding: 100px 0;}
.layout-type3 .main-content > .main-section--narrow {padding: 70px 0;}
.layout-type3 .sec-head {margin-bottom: 56px;}
.layout-type3 .sec-head .sec-title {font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1.2;}
.layout-type3 .sec-head .sec-desc {font-size: 17px; margin-top: 14px;}
.layout-type3 .sec-head--row .sec-title {font-size: 36px;}
.layout-type3 .mod-event .event-card,
.layout-type3 .mod-warehouse .warehouse-card,
.layout-type3 .mod-review .review-card,
.layout-type3 .mod-bank,
.layout-type3 .mod-cs,
.layout-type3 .mod-nodata .nodata-card {border-radius: 4px;}
.layout-type3 .promo-banner {border-radius: 4px;}
.layout-type3 .mod-process .process-item {border-radius: 4px;}
.layout-type3 .mod-quickstep {border-radius: 4px;}
.layout-type3 .nodata-thumb {border-radius: 0;}
.layout-type3 .event-thumb {border-radius: 0;}

/* Layout 3 — 모바일에서는 컴팩트 톤으로 (가독성) */
@media (max-width: 1023px) {
	.layout-type3 .main-content > .main-section {padding: 70px 0;}
	.layout-type3 .sec-head .sec-title {font-size: 34px;}
	.layout-type3 .sec-head--row .sec-title {font-size: 28px;}
	/* type-a 반응형 — 일관된 spacing rhythm */
	.type-a .main-content > .main-section {padding: 60px 0;}
	.type-a .main-content > .main-section--narrow {padding: 32px 0;}
	.type-a .main-content > .main-section--notice,
	.type-a .main-content > .main-section--service {padding-bottom: 32px;}
	.type-a .main-content > .main-section--tracking-dual {margin-bottom: 32px;}
	.type-a .main-content > .main-section--schedule-cal {padding-top: 32px;}
}
@media (max-width: 767px) {
	.layout-type2 .main-content > .main-section,
	.layout-type3 .main-content > .main-section {padding: 48px 0;}
	.layout-type3 .sec-head .sec-title {font-size: 26px;}
	.layout-type3 .sec-head--row .sec-title {font-size: 22px;}
	/* type-a 반응형 — 모바일 컴팩트 */
	.type-a .main-content > .main-section {padding: 48px 0;}
	.type-a .main-content > .main-section--narrow {padding: 24px 0;}
	.type-a .main-content > .main-section--notice,
	.type-a .main-content > .main-section--service {padding-bottom: 24px;}
	.type-a .main-content > .main-section--tracking-dual {margin-bottom: 24px;}
	.type-a .main-content > .main-section--schedule-cal {padding-top: 24px;}
}


/* ============================================================
   Layout Type 1 — 정보 우선형 (NEOTSOFT 표준)
   배치: 프로모 → 듀얼배송조회 → 인포패널(공지+빠른메뉴+환율)
        → 출항스케줄 캘린더 → 이용절차 6단 → 창고
        → 후기 → 이벤트 → 노데이터 → 입금계좌+고객센터 → FAQ
   ============================================================ */

/* ============================================================
   TYPE A — 정보 우선형 (PPT 디자인 매트릭스 기준)
   ----------------------------------------------------------------
   핵심 원칙: 컨텐츠와 정보가 전면에 / 텍스트 비중↑ / 신뢰감
   - layout-type1 위에 type-a 가 추가 적용되는 강화 톤
   - 섹션의 위치/표시 여부는 HTML source order 기준 (강제 제어 없음)
   ============================================================ */

/* ----- A형 비주얼 톤 (정보 밀도↑ · 신뢰감 · 보수적) ----- */
.type-a .main-content > .main-section {padding: 80px 0;}
.type-a .main-content > .main-section--narrow {padding: 40px 0;}
/* 배송조회(tracking-dual) 위/아래 시각적 흰 갭 균형 — schedule-cal 배경색 보정 */
.type-a .main-content > .main-section--notice,
.type-a .main-content > .main-section--service {padding-bottom: 40px;}
.type-a .main-content > .main-section--tracking-dual {margin-bottom: 40px;}
.type-a .main-content > .main-section--schedule-cal {padding-top: 40px; border-top: 0;}
.type-a .sec-head {margin-bottom: 32px;}
.type-a .sec-head .sec-title {font-size: 28px; font-weight: 700; letter-spacing: -.4px;}
.type-a .sec-head .sec-desc {font-size: 15px; margin-top: 10px; color: var(--c-text-sub);}
.type-a .sec-head--row .sec-title {font-size: 24px;}
/* A형 — 카드 라운드 컴팩트 (보수적 인상) */
.type-a .mod-event .event-card,
.type-a .mod-bank,
.type-a .mod-cs,
.type-a .mod-center-status .center-card,
.type-a .mod-channels .channels-item,
.type-a .mod-clearance .clearance-table,
.type-a .mod-nodata .nodata-card {border-radius: var(--radius-m);}
.type-a .promo-banner {border-radius: var(--radius-m);}

/* A형 — 섹션 간 시각적 구분선 (정보 페이지 느낌 강화) */
.type-a .main-content > .main-section + .main-section:not(.main-section--soft):not(.main-section--narrow) {border-top: 1px solid var(--c-line);}

/* A형 — 반응형 */
@media (max-width: 1023px) {
	.type-a .main-content > .main-section {padding: 56px 0;}
	.type-a .main-content > .main-section--narrow {padding: 32px 0;}
	.type-a .sec-head {margin-bottom: 24px;}
	.type-a .sec-head .sec-title {font-size: 24px;}
	.type-a .sec-head--row .sec-title {font-size: 20px;}
}
@media (max-width: 767px) {
	.type-a .main-content > .main-section {padding: 44px 0;}
	.type-a .main-content > .main-section--narrow {padding: 24px 0;}
	.type-a .sec-head {margin-bottom: 20px;}
	.type-a .sec-head .sec-title {font-size: 20px;}
	.type-a .sec-head .sec-desc {font-size: 13px; margin-top: 6px;}
	.type-a .sec-head--row .sec-title {font-size: 18px;}
}


/* ============================================================
   Layout Type 2 — 기능 우선형 (도구·전환 중심)
   배치: 듀얼배송조회 → 계산기 → 빠른메뉴 → 출항스케줄
        → 간략스텝 → 후기 → 노데이터 → 이벤트
        → 공지 → 입금계좌+고객센터 → FAQ
   ============================================================ */

/* ============================================================
   Layout Type 3 — 풀폭 교차 매거진형 (브랜드 강조)
   배치: 풀폭 이용절차 → 창고 풀폭 → 환율+계산기 2단
        → 출항스케줄 → 풀폭 후기(다크) → 간략스텝 → 공지+이벤트 2단
        → 노데이터 → 입금계좌+고객센터 → FAQ
   ============================================================ */

/* Layout 3 의 풀폭 강조 — 일부 모듈 다크 배경 */
.layout-type3 .main-section--review {background: var(--c-bg-dark); color: #fff;}
.layout-type3 .main-section--review .sec-head .sec-title {color: #fff;}
.layout-type3 .main-section--review .sec-head .sec-desc {color: rgba(255, 255, 255, .7);}

/* Layout 3 — 환율 + 계산기 2단 통합 섹션 */
.layout-type3 .main-section--rate-calc-2col .col-2 {gap: 30px; align-items: start;}
.layout-type3 .main-section--rate-calc-2col .mod-rate {background: #fff; padding: 28px; border-radius: var(--radius-l); border: 1px solid var(--c-line);}
.layout-type3 .main-section--rate-calc-2col .mod-rate .rate-list {display: flex; flex-direction: column; gap: 12px;}
.layout-type3 .main-section--rate-calc-2col .mod-rate .rate-item {display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px;}
.layout-type3 .main-section--rate-calc-2col .mod-rate .rate-flag {margin-bottom: 0;}
.layout-type3 .main-section--rate-calc-2col .mod-rate .rate-value {margin-top: 0; padding-top: 0; border-top: 0; text-align: right;}
.layout-type3 .main-section--rate-calc-2col .mod-rate .rate-value b {font-size: 20px;}
.layout-type3 .main-section--rate-calc-2col .mod-calc {max-width: none; margin: 0;}

/* Layout 3 — 공지 + 이벤트 2단 통합 섹션 */
.layout-type3 .main-section--notice-event-2col .col-2 {gap: 30px; align-items: start;}
.layout-type3 .main-section--notice-event-2col .mod-event {display: flex; flex-direction: column; gap: 16px;}
.layout-type3 .main-section--notice-event-2col .mod-event .event-card {display: grid; grid-template-columns: 1.2fr 1fr;}
.layout-type3 .main-section--notice-event-2col .mod-event .event-thumb {aspect-ratio: auto; height: 100%;}
.layout-type3 .main-section--notice-event-2col .mod-event .event-thumb-text {font-size: 20px; letter-spacing: 3px;}
.layout-type3 .main-section--notice-event-2col .mod-event .event-info {padding: 18px 22px; display: flex; flex-direction: column; justify-content: center;}
.layout-type3 .main-section--notice-event-2col .mod-event .event-title {font-size: 16px;}

/* Layout 3 — 2단 섹션 모바일 반응형 */
@media (max-width: 767px) {
	.layout-type3 .main-section--rate-calc-2col .col-2,
	.layout-type3 .main-section--notice-event-2col .col-2 {grid-template-columns: 1fr; gap: 18px;}
	.layout-type3 .main-section--notice-event-2col .mod-event .event-card {grid-template-columns: 1fr;}
	.layout-type3 .main-section--notice-event-2col .mod-event .event-thumb {aspect-ratio: 16 / 7;}
}


/* ============================================================
   STUDIO — 사이드메뉴 / 모달 / 온보딩 (구 studio.css 통합)
   ============================================================ */
/* ============================================================
   studio.css
   통합 미리보기 페이지 — 좌측 카테고리 메뉴 + 우측 iframe
   ============================================================ */

/* ----- 페이지 기본 ----- */
.studio-page {margin: 0; padding: 0; min-height: 100vh; font-family: var(--ff-base); background: #0f172a; overflow-x: hidden;}
.studio-layout {display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; align-items: start; min-width: 0; transition: grid-template-columns .3s ease;}
.studio-layout.is-collapsed {grid-template-columns: 0 1fr;}
.studio-main, .studio-main--combine {min-width: 0; overflow-x: hidden;}

/* ----- 좌측 사이드 메뉴 (sticky로 화면에 고정) ----- */
.studio-side {position: sticky; top: 0; height: 100vh; background: #fff; border-right: 1px solid var(--c-line); display: flex; flex-direction: column; overflow: hidden; transition: opacity .25s ease;}
.studio-layout.is-collapsed .studio-side {opacity: 0; pointer-events: none;}

/* ----- 사이드바 접기/펼치기 토글 버튼 (사이드바 외부, fixed) ----- */
/* 모바일 드로어용 딤 — PC 에서는 숨김 */
.studio-side-dim {display: none;}
.studio-side-toggle {position: fixed; top: 18px; left: 244px; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid var(--c-line); box-shadow: 0 4px 12px rgba(15, 23, 42, .18); display: inline-flex; align-items: center; justify-content: center; color: var(--c-text-sub); font-size: 12px; cursor: pointer; z-index: 9000; transition: left .3s ease, background .2s ease, color .2s ease, border-color .2s ease;}
.studio-side-toggle:hover {background: var(--c-primary); color: #fff; border-color: var(--c-primary);}
.studio-side-toggle i {transition: transform .3s ease;}
.studio-layout.is-collapsed .studio-side-toggle {left: 16px;}
.studio-layout.is-collapsed .studio-side-toggle i {transform: rotate(180deg);}
.studio-side-head {flex: 0 0 auto; padding: 22px 22px 20px; border-bottom: 1px solid #0a1628; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff;}
.studio-side-logo {display: flex; align-items: center; margin-bottom: 14px;}
.studio-side-logo img {max-width: 210px; height: auto; display: block;}
.studio-side-head h1 {font-size: 17px; font-weight: 800; letter-spacing: -.3px; color: #fff;}
.studio-side-head p {font-size: 13px; color: rgba(255, 255, 255, .65); line-height: 1.5;}

.studio-menu {flex: 1 1 auto; padding: 6px 0; overflow-y: auto; min-height: 0;}
/* 사이드 메뉴 스크롤바 — 트랙은 비우고 썸만 메뉴 텍스트와 같은 slate(#64748b) 톤으로 가늘게(6px).
   ★ Chrome 은 표준 scrollbar-width 가 지정되면 ::-webkit-scrollbar 의 width 를 무시한다(thin = 10px 고정).
     6px 로 얇게 하려면 .studio-menu 에 scrollbar-width 를 걸면 안 됨. 실측: thin 10px / auto 15px / webkit-only 6px.
   Firefox 는 ::-webkit-scrollbar 를 모르므로 @supports not selector() 로 갈라 표준 속성만 준다. */
.studio-menu::-webkit-scrollbar {width: 6px;}
.studio-menu::-webkit-scrollbar-track {background: transparent; margin: 4px 0;}
.studio-menu::-webkit-scrollbar-thumb {background: rgba(100, 116, 139, .28); border-radius: 99px;}
.studio-menu::-webkit-scrollbar-thumb:hover {background: rgba(71, 85, 105, .5);}
@supports not selector(::-webkit-scrollbar) {
	.studio-menu {scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, .35) transparent;}
}
.studio-cat {padding: 6px 0 6px; border-bottom: 1px solid #eef0f3;}
.studio-cat:last-child {border-bottom: 0;}
.studio-cat-title {position: relative; padding: 3px 22px 5px 26px; font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: -.2px;}
.studio-cat-title::before {content: ""; position: absolute; left: 14px; top: 7px; width: 3px; height: 14px; border-radius: 2px; background: linear-gradient(180deg, #334155 0%, #64748b 100%);}
.studio-cat-title b {color: #64748b; font-weight: 700; margin-right: 6px; font-size: 14px;}
.studio-list {list-style: none; margin: 0; padding: 0 8px;}
.studio-list li {margin: 0;}
.studio-btn {display: block; width: 100%; padding: 3px 14px 3px 26px; background: transparent; border: 0; border-radius: 6px; text-align: left; font-size: 14px; font-weight: 500; color: #64748b; cursor: pointer; transition: all .15s; position: relative;}
.studio-btn::before {content: ""; position: absolute; left: 14px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #cbd5e1; transform: translateY(-50%); transition: all .15s;}
.studio-btn:hover {color: #334155; background: rgba(71, 85, 105, .04);}
.studio-btn:hover::before {background: #64748b;}
.studio-btn.is-active {color: #0f172a; background: rgba(71, 85, 105, .07); font-weight: 700; padding-right: 76px;}
.studio-btn.is-active::before {background: #334155; width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(71, 85, 105, .14);}
.studio-btn.is-active::after {content: "적용중"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 10px; background: #fff; color: #475569; font-size: 13px; font-weight: 600; border: 1px solid rgba(71, 85, 105, .25); border-radius: 99px; letter-spacing: -.2px; line-height: 1.5;}
.studio-btn .studio-btn-badge {display: inline-block; margin-left: 6px; padding: 1px 7px; background: rgba(100, 116, 139, .12); color: #64748b; font-size: 11px; font-weight: 600; border-radius: 99px; letter-spacing: -.2px; vertical-align: middle;}
.studio-btn.is-disabled, .studio-btn[disabled] {color: #94a3b8; cursor: not-allowed; opacity: .7;}
.studio-btn.is-disabled:hover, .studio-btn[disabled]:hover {background: transparent; color: #94a3b8;}

/* '사용 안함' 옵션(.studio-btn--none) — 불릿·글자색·간격 모두 위 메뉴들과 완전히 동일하게 .studio-btn 을 그대로 쓴다.
   예전엔 가로막대 마커 + 톤다운 + margin-top 으로 구분했으나 전용 스타일을 전부 걷어냄. 클래스는 마크업 식별용으로만 남김. */

/* ----- 사이드 푸터 (선택 상태 요약 + 전달 버튼) — 헤더와 동일한 다크 톤 ----- */
.studio-side-foot {flex: 0 0 auto; padding: 16px 20px 18px; border-top: 1px solid #0a1628; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 5px;}
.studio-side-foot .summary-row {display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; line-height: 1.3;}
.studio-side-foot .summary-row:last-of-type {grid-column: 1 / -1;}
.studio-side-foot .summary-row b {color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 500; letter-spacing: .3px;}
.studio-side-foot .summary-row span {font-size: 15px; font-weight: 800; color: #fcb900; letter-spacing: -.2px;}
.studio-side-foot .studio-send-btn {grid-column: 1 / -1; margin-top: 8px;}

/* 전달 버튼 — 로고 컬러 (골드 → 오렌지) 그라데이션 */
.studio-send-btn {display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; padding: 14px 12px; border: 0; border-radius: var(--radius-m); background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.3px; cursor: pointer; transition: filter .2s ease, transform .1s ease, box-shadow .2s ease; box-shadow: 0 4px 14px rgba(252, 185, 0, .35);}
.studio-send-btn:hover {filter: brightness(1.08); box-shadow: 0 6px 18px rgba(255, 112, 67, .45);}
.studio-send-btn:active {transform: scale(.98);}
.studio-send-btn i {font-size: 14px;}

/* ----- 확인 모달 ----- */
.studio-modal {position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;}
.studio-modal.is-open {display: flex;}
.studio-modal-dim {position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer;}
.studio-modal-box {position: relative; width: calc(100% - 40px); max-width: 1100px; max-height: 92vh; background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: hidden; display: flex; flex-direction: column; animation: studioModalIn .2s ease-out;}
@keyframes studioModalIn {
	from {opacity: 0; transform: translateY(10px) scale(.98);}
	to {opacity: 1; transform: translateY(0) scale(1);}
}
.studio-modal-head {padding: 24px 26px 18px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-bottom: 0; color: #fff;}
.studio-modal-head h3 {font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -.3px; text-align: center;}
.studio-modal-head p {font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.55;}
.studio-modal-body {padding: 20px 22px 22px; background: #fff; display: grid; grid-template-columns: 1.8fr 1fr; gap: 20px; align-items: start; flex: 1 1 auto; min-height: 0;}
.studio-modal-side {display: flex; flex-direction: column; gap: 14px; min-height: 0;}
.studio-modal-side-title {display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px dashed var(--c-line); font-size: 15px; font-weight: 800; color: var(--c-text); letter-spacing: -.3px;}
.studio-modal-side-title i {flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fcb900, #ff7043); color: #fff; font-size: 12px; border-radius: 8px; box-shadow: 0 4px 10px rgba(255, 112, 67, .3);}
.studio-modal-side-notes {margin: -2px 0 0; padding: 14px 16px; list-style: none; background: linear-gradient(135deg, #fff5e6, #fffaf0); border-radius: 10px;}
.studio-modal-side-notes li {position: relative; padding-left: 26px; font-size: 14px; line-height: 1.6; color: var(--c-text); word-break: keep-all;}
.studio-modal-side-notes li + li {margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255, 112, 67, .2);}
.studio-modal-side-notes li::before {content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 1px; left: 0; width: 18px; height: 18px; line-height: 18px; text-align: center; background: linear-gradient(135deg, #fcb900, #ff7043); color: #fff; font-size: 10px; border-radius: 50%; box-shadow: 0 2px 6px rgba(255, 112, 67, .3);}
.studio-modal-side-notes li + li::before {top: 11px;}
.studio-modal-side-notes b {color: #c2410c; font-weight: 800; background: linear-gradient(transparent 60%, rgba(255, 167, 38, .25) 60%); padding: 0 2px;}

/* 미니어처 — 실제 페이지 축소 미리보기 (좌측) — 길면 이 영역만 스크롤 */
.studio-modal-preview {position: relative; width: 100%; max-height: 70vh; overflow-y: auto; overflow-x: hidden; background: #f1f5f9; border: 1px solid var(--c-line); border-radius: 10px; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .25) transparent;}
.studio-modal-preview::-webkit-scrollbar {width: 6px;}
.studio-modal-preview::-webkit-scrollbar-track {background: transparent; margin: 6px 0;}
.studio-modal-preview::-webkit-scrollbar-thumb {background: rgba(15, 23, 42, .22); border-radius: 99px;}
.studio-modal-preview::-webkit-scrollbar-thumb:hover {background: rgba(15, 23, 42, .42);}
.studio-modal-preview .mini-preview-inner {position: absolute; top: 0; left: 0; transform-origin: top left; pointer-events: none; overflow: hidden;}
/* 라이브 .studio-preview와 동일하게 슬롯을 contents로 펼쳐서 레이아웃 동일성 유지 */
.studio-modal-preview .mini-preview-inner > .studio-slot {display: contents;}
.studio-modal-preview .mini-preview-inner .studio-slot {pointer-events: none;}
/* 미리보기 안 quickbar — 클론 박스 내부에 가두기 위해 fixed → absolute 로 강제. type1~3 우측 도크 / type4 풀폭 바텀바 분기 */
.studio-modal-preview .mini-preview-inner .floating-dock {position: absolute;}
.studio-modal-preview .mini-preview-inner .floating-dock:not(.floating-dock--type4) {top: auto; bottom: 40px; right: 30px; left: auto; transform: none;}
.studio-modal-preview .mini-preview-inner .floating-dock--type4 {top: auto; bottom: 0; left: 0; right: 0; transform: none;}

/* 선택 요약 (좌측, 상단 정렬) */
.studio-modal-summary {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px;}
.studio-modal-summary li {display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--c-bg-soft); border: 1px solid var(--c-line); border-radius: 8px; font-size: 14px;}
.studio-modal-summary li span {color: var(--c-text-sub); font-weight: 600; font-size: 13px; letter-spacing: -.2px;}
.studio-modal-summary li b {color: #c2410c; font-weight: 800; font-size: 16px; letter-spacing: -.3px;}

/* 모바일 — 미니어처 숨기고 선택 항목만 표시 */
@media (max-width: 600px) {
	.studio-modal-body {grid-template-columns: 1fr;}
	.studio-modal-preview {display: none;}
}
.studio-modal-foot {display: flex; gap: 8px;}
.studio-modal-btn {flex: 1; padding: 14px 14px; border-radius: var(--radius-m); font-size: 16px; font-weight: 700; cursor: pointer; transition: filter .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;}
.studio-modal-cancel {background: #fff; border: 1px solid var(--c-line); color: var(--c-text-sub);}
.studio-modal-cancel:hover {background: var(--c-bg-soft); border-color: var(--c-text-mute); color: var(--c-text);}
.studio-modal-confirm {background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); border: 0; color: #fff; box-shadow: 0 4px 14px rgba(252, 185, 0, .35);}
.studio-modal-confirm:hover {filter: brightness(1.08); box-shadow: 0 6px 18px rgba(255, 112, 67, .45);}

/* ----- 우측 미리보기 영역 ----- */
.studio-main {position: relative; background: #f1f5f9;}
.studio-frame {width: 100%; height: 100%; border: 0; background: #fff; display: block;}
.studio-loading {position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--c-text-mute); font-size: 14px; pointer-events: none; opacity: 0; transition: opacity .2s;}
.studio-loading.is-show {opacity: 1;}

/* ----- 반응형 — 좁은 화면에서는 메뉴를 상단으로 ----- */
/* ============================================================
   온보딩 가이드 모달 (첫 방문자)
   ============================================================ */
.studio-onboarding {position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center;}
.studio-onboarding.is-open {display: flex;}
.studio-onboarding-dim {position: absolute; inset: 0; background: rgba(15, 23, 42, .65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; animation: obDimIn .25s ease-out;}
.studio-onboarding-box {position: relative; width: calc(100% - 40px); max-width: 580px; background: #fff; border-radius: 18px; box-shadow: 0 24px 80px rgba(15, 23, 42, .4); overflow: hidden; animation: obBoxIn .35s cubic-bezier(.22, 1, .36, 1);}
@keyframes obDimIn {from {opacity: 0;} to {opacity: 1;}}
@keyframes obBoxIn {from {opacity: 0; transform: translateY(24px) scale(.96);} to {opacity: 1; transform: translateY(0) scale(1);}}

.studio-onboarding-close {position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .15); border: 0; color: #fff; font-size: 13px; cursor: pointer; z-index: 5; transition: background .2s ease;}
.studio-onboarding-close:hover {background: rgba(255, 255, 255, .3);}

/* 단계 영역 */
.studio-onboarding-stage {position: relative; padding: 44px 36px 24px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff; min-height: 430px;}
.studio-onboarding-step {position: absolute; inset: 44px 36px 24px; opacity: 0; visibility: hidden; transform: translateX(20px); transition: opacity .35s ease, transform .35s ease, visibility .35s;}
.studio-onboarding-step.is-active {position: relative; inset: auto; opacity: 1; visibility: visible; transform: translateX(0);}

/* 일러스트 컨테이너 (각 단계 공통) */
.studio-onboarding-illust {position: relative; min-height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px;}

/* 1단계 — 환영 */
.ob-welcome {position: relative; display: flex; align-items: center; justify-content: center; padding: 24px 32px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .25); animation: obFloat 3s ease-in-out infinite;}
.ob-welcome-logo {height: 44px; width: auto; display: block;}
.ob-welcome-spark {position: absolute; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); box-shadow: 0 0 14px rgba(252, 185, 0, .8); animation: obSpark 2s ease-in-out infinite;}
.ob-welcome-spark--1 {top: -10px; left: -16px;}
.ob-welcome-spark--2 {top: 24px; right: -20px; animation-delay: .4s; width: 6px; height: 6px;}
.ob-welcome-spark--3 {bottom: -8px; left: 30%; animation-delay: .8s; width: 5px; height: 5px;}
@keyframes obFloat {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-6px);}}
@keyframes obSpark {0%, 100% {opacity: .4; transform: scale(.8);} 50% {opacity: 1; transform: scale(1.3);}}

/* 2단계 — 화면 구조 (좌측 메뉴 + 우측 미리보기) */
.ob-layout {display: flex; align-items: center; gap: 14px;}
.ob-layout-side {display: flex; flex-direction: column; gap: 7px; padding: 14px 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; min-width: 90px;}
.ob-layout-side-label {font-size: 10px; font-weight: 800; color: #fcb900; letter-spacing: 1px; text-align: center; margin-bottom: 4px;}
.ob-layout-side-bar {height: 6px; background: linear-gradient(90deg, rgba(252, 185, 0, .5) 0%, rgba(255, 112, 67, .5) 100%); border-radius: 3px;}
.ob-layout-side-bar:nth-child(2) {animation: obBarPulse 2s ease-in-out infinite;}
.ob-layout-side-bar:nth-child(3) {animation: obBarPulse 2s ease-in-out infinite .4s; opacity: .55;}
.ob-layout-side-bar:nth-child(4) {opacity: .55;}
.ob-layout-side-bar:nth-child(5) {opacity: .55;}
@keyframes obBarPulse {0%, 100% {opacity: .5; transform: scaleX(.92);} 50% {opacity: 1; transform: scaleX(1);}}
.ob-layout-arrow {font-size: 18px; color: #fcb900; animation: obArrowMove 1.6s ease-in-out infinite;}
@keyframes obArrowMove {0%, 100% {transform: translateX(0);} 50% {transform: translateX(5px);}}
.ob-layout-preview {position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; min-width: 160px;}
.ob-layout-preview-label {font-size: 10px; font-weight: 800; color: #22d3ee; letter-spacing: 1px; text-align: center; margin-bottom: 4px;}
.ob-layout-preview-block {height: 8px; border-radius: 3px;}
.ob-layout-preview-block--sm {background: rgba(34, 211, 238, .55); width: 70%;}
.ob-layout-preview-block--lg {background: rgba(34, 211, 238, .8); height: 32px; animation: obFlash 2s ease-in-out infinite;}
.ob-layout-preview-block--md {background: rgba(34, 211, 238, .45); width: 85%;}
@keyframes obFlash {0%, 100% {opacity: .55;} 50% {opacity: 1; box-shadow: 0 0 14px rgba(34, 211, 238, .6);}}

/* 3단계 — 와이어프레임 (페이지 영역 컬러 매핑) */
.ob-wf {position: relative; display: flex; flex-direction: column; gap: 5px; width: 280px; padding: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px;}
.ob-wf-area {display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 5px; font-size: 11px; font-weight: 700; opacity: 0; animation: obWfIn .35s ease forwards; border: 1px solid transparent;}
.ob-wf-area b {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, .25); color: #fff; font-size: 10px; font-weight: 800;}
.ob-wf-area--header {height: 24px; background: rgba(41, 98, 255, .25); border-color: rgba(41, 98, 255, .5); color: #93c5fd; animation-delay: .05s;}
.ob-wf-area--hero {height: 56px; background: rgba(34, 211, 238, .22); border-color: rgba(34, 211, 238, .5); color: #67e8f9; animation-delay: .15s;}
.ob-wf-area--body {height: 60px; background: rgba(252, 185, 0, .22); border-color: rgba(252, 185, 0, .5); color: #fcd34d; animation-delay: .25s; align-items: flex-start; padding-top: 8px;}
.ob-wf-area--footer {height: 28px; background: rgba(124, 77, 255, .25); border-color: rgba(124, 77, 255, .55); color: #c4b5fd; animation-delay: .35s;}
.ob-wf-area--quickbar {position: absolute; right: -48px; top: 50%; width: 42px; height: 42px; border-radius: 50%; padding: 0; background: rgba(255, 112, 67, .3); border-color: rgba(255, 112, 67, .6); color: #fdba74; font-size: 10px; align-items: center; justify-content: center; flex-direction: column; gap: 1px; transform: translateY(-50%); animation-delay: .45s; animation: obFloat 2.2s ease-in-out infinite .45s, obWfIn .35s ease .45s forwards;}
.ob-wf-area--quickbar b {display: inline; width: auto; height: auto; background: transparent; padding: 0; font-size: 11px; line-height: 1; color: #fff;}
@keyframes obWfIn {from {opacity: 0; transform: translateY(6px);} to {opacity: 1; transform: translateY(0);}}

/* 4단계 — 클릭 → 해당 영역 변경 */
.ob-action {display: flex; align-items: center; gap: 14px;}
.ob-action-menu {position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; background: #fff; border-radius: 10px; min-width: 130px; box-shadow: 0 8px 22px rgba(0, 0, 0, .25);}
.ob-action-menu-row {padding: 6px 10px 6px 22px; font-size: 11px; font-weight: 600; color: var(--c-text-sub); border-radius: 5px; position: relative;}
.ob-action-menu-row::before {content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--c-line); transform: translateY(-50%);}
.ob-action-menu-row.is-target {background: linear-gradient(90deg, rgba(252, 185, 0, .14) 0%, rgba(255, 112, 67, .14) 100%); color: #d65a1f; font-weight: 800;}
.ob-action-menu-row.is-target::before {background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); width: 7px; height: 7px;}
.ob-action-cursor {position: absolute; left: calc(50% + 8px); top: 36%; font-size: 16px; color: #1e293b; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); animation: obCursorClick 2.6s ease-in-out infinite;}
@keyframes obCursorClick {0% {transform: translate(28px, 22px); opacity: 0;} 25% {opacity: 1;} 55% {transform: translate(0, 0);} 70% {transform: translate(0, 0) scale(.82);} 85% {transform: translate(0, 0) scale(1);} 100% {transform: translate(28px, 22px); opacity: 0;}}
.ob-action-page {display: flex; flex-direction: column; gap: 4px; padding: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; min-width: 130px;}
.ob-action-page-row {padding: 4px 8px; font-size: 10px; font-weight: 700; border-radius: 4px; border: 1px solid transparent; transition: all .3s ease;}
.ob-action-page-row--head {background: rgba(41, 98, 255, .2); border-color: rgba(41, 98, 255, .4); color: #93c5fd;}
.ob-action-page-row--head.is-flash {background: linear-gradient(90deg, rgba(252, 185, 0, .35) 0%, rgba(255, 112, 67, .35) 100%); border-color: rgba(255, 112, 67, .7); color: #fff; animation: obFlashRow 2.6s ease-in-out infinite;}
.ob-action-page-row--hero {background: rgba(34, 211, 238, .18); border-color: rgba(34, 211, 238, .35); color: #67e8f9; height: 24px;}
.ob-action-page-row--body {background: rgba(252, 185, 0, .18); border-color: rgba(252, 185, 0, .35); color: #fcd34d; height: 28px;}
.ob-action-page-row--foot {background: rgba(124, 77, 255, .18); border-color: rgba(124, 77, 255, .4); color: #c4b5fd;}
@keyframes obFlashRow {0%, 100% {box-shadow: 0 0 0 0 rgba(255, 112, 67, 0);} 50% {box-shadow: 0 0 0 6px rgba(255, 112, 67, .25);}}

/* 5단계 — 선택 결과 미니 푸터 */
.ob-foot {display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: linear-gradient(180deg, #1a1f3a 0%, #0f1729 100%); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; min-width: 240px; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);}
.ob-foot-title {font-size: 10px; font-weight: 800; color: rgba(255, 255, 255, .55); letter-spacing: 1.5px; margin-bottom: 6px; text-align: center;}
.ob-foot-row {display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 5px; font-size: 11px;}
.ob-foot-row span {color: rgba(255, 255, 255, .65); font-weight: 600;}
.ob-foot-row b {color: #fcb900; font-weight: 800;}
.ob-foot-row.is-update {background: linear-gradient(90deg, rgba(252, 185, 0, .15) 0%, rgba(255, 112, 67, .15) 100%); border-color: rgba(255, 112, 67, .4); animation: obFootUpdate 2.4s ease-in-out infinite;}
.ob-foot-row.is-update b {background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
@keyframes obFootUpdate {0%, 100% {box-shadow: 0 0 0 0 rgba(255, 112, 67, 0);} 50% {box-shadow: 0 0 0 4px rgba(255, 112, 67, .15);}}

/* 6단계 — 시안 보내기 */
.ob-send-wrap {display: flex; flex-direction: column; align-items: center; gap: 8px;}
.ob-send-arrow {font-size: 22px; color: #fcb900; animation: obArrowDown 1.4s ease-in-out infinite;}
@keyframes obArrowDown {0%, 100% {transform: translateY(0);} 50% {transform: translateY(6px);}}
.ob-send {display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); color: #fff; font-size: 15px; font-weight: 800; border-radius: 10px; box-shadow: 0 10px 26px rgba(252, 185, 0, .45); animation: obSendBeat 1.8s ease-in-out infinite;}
.ob-send-icon {font-size: 15px;}
@keyframes obSendBeat {0%, 100% {transform: scale(1); box-shadow: 0 10px 26px rgba(252, 185, 0, .45);} 50% {transform: scale(1.06); box-shadow: 0 14px 34px rgba(255, 112, 67, .55);}}

/* 타이틀 / 설명 */
.studio-onboarding-title {font-size: 22px; font-weight: 800; line-height: 1.4; letter-spacing: -.4px; color: #fff; margin-bottom: 12px; text-align: center;}
.studio-onboarding-title em {font-style: normal; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.studio-onboarding-desc {font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .75); text-align: center; margin: 0;}
.studio-onboarding-desc b {color: #fcb900; font-weight: 700;}

/* 1단계 서브타이틀 (로고 아래) */
.studio-onboarding-step[data-step="1"] .studio-onboarding-illust {flex-direction: column; gap: 18px;}
.studio-onboarding-subtitle {margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.5px; text-align: center; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}

/* 체크리스트 (안내 박스) */
.ob-checklist {list-style: none; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-left: 3px solid #fcb900; border-radius: 10px;}
.ob-checklist-item {display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .88); text-align: left;}
.ob-checklist-item > i {flex: 0 0 auto; margin-top: 3px; font-size: 14px; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); -webkit-background-clip: text; background-clip: text; color: transparent;}
.ob-checklist-item > span {flex: 1; min-width: 0;}
.ob-checklist-item b {color: #fcb900; font-weight: 700;}
.ob-checklist-item em {font-style: normal; color: rgba(255, 255, 255, .55); font-size: 13px;}

/* 인디케이터 */
.studio-onboarding-dots {display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 0 14px; background: linear-gradient(180deg, #0f172a 0%, #14172e 100%);}
.ob-dot {width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); border: 0; padding: 0; cursor: pointer; transition: width .3s ease, background .3s ease, border-radius .3s ease;}
.ob-dot:hover {background: rgba(255, 255, 255, .5);}
.ob-dot.is-active {background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); width: 28px; border-radius: 99px;}

/* 푸터 (다시 보지 않기 only) */
.studio-onboarding-foot {display: flex; align-items: center; justify-content: center; padding: 18px 24px 22px; background: #fff; border-top: 1px solid var(--c-line);}
.studio-onboarding-skip {display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--c-text-sub); cursor: pointer; user-select: none;}
.studio-onboarding-skip input {width: 16px; height: 16px; accent-color: #ff7043; cursor: pointer;}

/* 좌우 스크롤링(이전/다음) 네비게이션 — 스테이지 내부 absolute, 수직 중앙 */
.ob-nav {position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;}
.ob-nav:hover:not([disabled]) {background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .35);}
.ob-nav[disabled] {opacity: .25; cursor: not-allowed;}
.ob-nav--prev {left: 14px;}
.ob-nav--next {right: 14px;}

/* 태블릿 */
@media (max-width: 900px) {
	.studio-onboarding-subtitle {font-size: 23px;}
	.ob-checklist {padding: 14px 16px; gap: 9px;}
	.ob-checklist-item {font-size: 13.5px;}
}

/* 모바일 */
@media (max-width: 540px) {
	.studio-onboarding-stage {padding: 36px 22px 18px; min-height: 340px;}
	.studio-onboarding-step {inset: 36px 22px 18px;}
	.studio-onboarding-title {font-size: 19px;}
	.studio-onboarding-desc {font-size: 13px;}
	.studio-onboarding-foot {padding: 14px 18px 18px;}
	.ob-nav {width: 36px; height: 36px; font-size: 13px;}
	.ob-nav--prev {left: 8px;}
	.ob-nav--next {right: 8px;}
	.studio-onboarding-subtitle {font-size: 20px;}
	.ob-checklist {padding: 13px 14px; gap: 8px; border-radius: 8px;}
	.ob-checklist-item {font-size: 13px; gap: 8px;}
	.ob-checklist-item > i {font-size: 13px; margin-top: 2px;}
	.ob-checklist-item em {font-size: 12px;}
}


/* 모바일 사이드바 = 오버레이 드로어(min(82vw,300px))라 폭이 PC 사이드바(260px)와 비슷하다 → 폰트는 PC 값을 그대로 쓰고 여백/터치영역만 조정 */
@media (max-width: 1023px) {
	.studio-side-head {padding: 16px 18px;}
	.studio-cat {padding: 6px 0;}
	.studio-cat-title {padding: 0 18px 4px;}
	.studio-btn {padding: 7px 12px 7px 24px;}
	.studio-btn.is-active::after {right: 6px;}
	.studio-btn::before {left: 10px;}
}

/* ----- 모바일: 사이드바를 왼쪽에서 밀려나오는 오버레이 드로어로 전환 -----
   기본 상태를 translateX(-100%)(닫힘)로 두어 JS 실행 전 깜빡임이 없다.
   개폐 상태 클래스는 PC(.is-collapsed)와 분리해 .is-side-open 을 쓴다 — 의미가 반대라 한 클래스로 겸용하면 브레이크포인트를 넘을 때 상태가 뒤집힌다. */
@media (max-width: 1023px) {
	:root {--studio-drawer-w: min(82vw, 300px);}
	.studio-page {height: auto; overflow: auto;}
	.studio-layout {grid-template-columns: 1fr; height: auto;}
	.studio-main {height: auto; min-height: 100vh;}

	.studio-side {display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: var(--studio-drawer-w); height: auto; z-index: 9500; transform: translateX(-100%); box-shadow: 4px 0 32px rgba(15, 23, 42, .28); transition: transform .28s ease;}
	/* PC 전용 접힘 상태가 남아 있어도 모바일 레이아웃이 깨지지 않도록 무력화
	   (그대로 두면 그리드가 0 1fr 이 되어 본문이 눌리고, .studio-side 가 opacity:0/pointer-events:none 이라 드로어를 열어도 안 보인다) */
	.studio-layout.is-collapsed {grid-template-columns: 1fr;}
	.studio-layout.is-collapsed .studio-side {opacity: 1; pointer-events: auto;}
	.studio-layout.is-collapsed .studio-side-toggle {left: 12px;}
	.studio-layout.is-side-open .studio-side {transform: translateX(0);}

	.studio-side-dim {display: block; position: fixed; inset: 0; z-index: 9400; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .28s ease;}
	.studio-layout.is-side-open .studio-side-dim {opacity: 1; pointer-events: auto;}

	/* 토글 버튼 — 닫힘: 좌상단 / 열림: 드로어 바로 바깥(82vw + 42px < 100vw 라 항상 화면 안) */
	.studio-side-toggle {top: 12px; left: 12px; z-index: 9600;}
	.studio-side-toggle i {transform: rotate(180deg);}
	.studio-layout.is-side-open .studio-side-toggle {left: calc(var(--studio-drawer-w) + 10px);}
	.studio-layout.is-side-open .studio-side-toggle i {transform: rotate(0deg);}

	/* 드로어가 열려 있는 동안 뒤 페이지 스크롤 잠금 (미지원 브라우저는 잠금만 빠짐) */
	.studio-page:has(.studio-layout.is-side-open) {overflow: hidden;}
}


/* ----- 자유 조합 모드 (parts/ fragment inject 방식) ----- */
.studio-main--combine {background: #fff; padding: 0;}
.studio-preview {min-height: 100%;}
.studio-preview > .studio-slot {display: contents;}
.studio-error {padding: 60px 30px; text-align: center; color: var(--c-error); background: rgba(229, 57, 53, .04); border: 1px dashed var(--c-error); border-radius: var(--radius-l); margin: 30px;}
.studio-error small {display: block; margin-top: 10px; color: var(--c-text-mute); font-weight: 400;}

/* slot 안 영역의 fixed 위치 도크/플로팅이 studio-main 기준으로 동작하도록 */
.studio-main--combine .floating-dock {position: fixed;}

/* 스튜디오 모드에서 풀폭 퀵바(type4)가 사이드바 영역을 덮지 않도록 */
@media (min-width: 1024px) {
	.studio-main--combine .floating-dock--type4 {left: 260px;}
}


/* ============================================================
   완성형 시안 모드 (studio-preset)
   - 사이드 헤더 안 모드 탭(.studio-mode-tab)으로 조합형 ↔ 완성형 전환
   - 완성형일 때: 좌측 조합 메뉴/요약 숨김 + 우측 갤러리 노출
   ============================================================ */

/* ----- 모드별 노출 제어 (기본 = 조합형) ----- */
.studio-cat--preset,
.studio-main--preset,
.studio-modal-summary--preset,
.studio-modal-side-notes--preset {display: none;}

/* 완성형은 좌측 조합 메뉴 대신 안내 패널만, 하단 요약/보내기는 쓰지 않는다
   (시안 선택·전달이 갤러리 뷰어 안에서 끝나므로) */
.studio-preset .studio-menu > .studio-cat:not(.studio-cat--preset) {display: none;}
.studio-preset .studio-menu > .studio-cat--preset {display: block;}
.studio-preset .studio-side-foot {display: none;}
.studio-preset .studio-main--combine {display: none;}
.studio-preset .studio-main--preset {display: block;}
.studio-preset .studio-modal-summary:not(.studio-modal-summary--preset) {display: none;}
.studio-preset .studio-modal-summary--preset {display: flex;}
.studio-preset .studio-modal-side-notes:not(.studio-modal-side-notes--preset) {display: none;}
.studio-preset .studio-modal-side-notes--preset {display: block;}

/* ----- 사이드: 완성형 이용 안내 -----
   3단계 흐름(클릭 → 확대 → 선택)이라 번호 스텝 카드로 구성 */
.studio-cat--preset {border-bottom: 0;}
.studio-preset-guide {margin: 14px 16px 10px; padding: 16px 14px; background: linear-gradient(180deg, #f8fafc 0%, #f1f4f9 100%); border: 1px solid #e5eaf2; border-radius: var(--radius-m); box-shadow: inset 0 1px 0 #fff;}
.studio-preset-notes {counter-reset: preset-step; list-style: none;}
.studio-preset-notes > li {position: relative; padding-left: 28px; font-size: 13px; line-height: 1.65; color: #475569; letter-spacing: -.2px; word-break: keep-all;}
.studio-preset-notes > li + li {margin-top: 12px; padding-top: 12px; border-top: 1px dashed #dce2ec;}
.studio-preset-notes > li::before {counter-increment: preset-step; content: counter(preset-step); position: absolute; left: 0; top: 1px; width: 19px; height: 19px; line-height: 19px; text-align: center; border-radius: 50%; background: linear-gradient(135deg, #334155 0%, #1e293b 100%); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0;}
.studio-preset-notes > li + li::before {top: 13px;}
.studio-preset-notes b {color: #0f172a; font-weight: 700; background: linear-gradient(transparent 62%, rgba(100, 116, 139, .22) 62%); padding: 0 2px;}

/* ----- 사이드 헤더 아래: 조합형 / 완성형 모드 탭 -----
   메뉴 영역과 같은 화이트 위에 얹는 세그먼트 탭.
   선택 색은 사이드 메뉴의 선택 표시(#334155 계열)와 같은 슬레이트 톤으로 맞춘다.
   노출 조건: 프로 계약 업체(body.is-pro)만 — 클래스가 없으면 숨김이 기본값(조합형 단독) */
.studio-mode-tabs {flex: 0 0 auto; display: none; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px 16px; background: #fff; border-bottom: 1px solid #eef0f3;}
.is-pro .studio-mode-tabs {display: grid;}
.studio-mode-tab {display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 6px; border: 1px solid #e2e8f0; border-radius: var(--radius-m); background: #f5f7fa; color: #64748b; font-size: 14px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;}
.studio-mode-tab:hover {background: #eef1f6; color: #334155; border-color: #cbd5e1;}
.studio-mode-tab.is-active {background: linear-gradient(135deg, #334155 0%, #1e293b 100%); border-color: transparent; color: #fff; box-shadow: 0 3px 10px rgba(15, 23, 42, .2);}
.studio-mode-tab.is-active:hover {background: linear-gradient(135deg, #3d4c63 0%, #26334a 100%); color: #fff;}
.studio-mode-tab i {font-size: 13px; opacity: .85;}

/* ----- 우측: 완성형 시안 갤러리 ----- */
.studio-main--preset {min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);}
.studio-gallery {max-width: 1500px; margin: 0 auto; padding: 46px 26px 64px;}
.studio-gallery-head {margin-bottom: 34px; text-align: center;}
.studio-gallery-desc {font-size: 15px; color: rgba(255, 255, 255, .68);}
.studio-gallery-grid {column-count: 4; column-gap: 20px;}

/* 카드 */
.preset-card {display: inline-block; width: 100%; margin-bottom: 20px; padding: 16px; background: #fff; border: 2px solid transparent; border-radius: var(--radius-m); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); break-inside: avoid; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;}
.preset-card:hover {transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0, 0, 0, .3);}
.preset-card.is-selected {border-color: #fcb900; box-shadow: 0 10px 28px rgba(252, 185, 0, .38);}
.preset-card-serial {display: block; margin-bottom: 12px; padding: 7px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: var(--radius-s); font-size: 13px; font-weight: 700; color: #666; text-align: center; letter-spacing: .2px;}
.preset-card-thumb {position: relative; display: block; overflow: hidden; border-radius: var(--radius-s);}
.preset-card-thumb img {display: block; width: 100%; height: auto;}

/* hover 액션 — 확대 안내 + 독립 선택 버튼 (버튼만 클릭 가능) */
.preset-card-actions {position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 0; transition: opacity .3s ease; pointer-events: none;}
.preset-card:hover .preset-card-actions {opacity: 1;}
/* '이미지 크게 보기' — 아래 '이 시안으로 선택' 버튼과 형태를 동일하게(알약 · 같은 padding/폰트/아이콘 · 그림자 · hover·active 반응).
   색만 중립 다크로 둬서 주 CTA(골드 그라데이션)와 위계는 유지한다. 클릭하면 카드 클릭과 같이 크게보기가 열린다. */
.preset-card-hint {display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border: 0; border-radius: 99px; background: rgba(15, 23, 42, .82); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 22px rgba(15, 23, 42, .45); transition: filter .15s ease, box-shadow .15s ease, transform .1s ease;}
.preset-card:hover .preset-card-hint {pointer-events: auto;}
.preset-card-hint:hover {filter: brightness(1.25); box-shadow: 0 10px 28px rgba(15, 23, 42, .6);}
.preset-card-hint:active {transform: scale(.97);}
.preset-card-hint i {font-size: 15px;}
.preset-card-pick {display: inline-flex; align-items: center; gap: 9px; padding: 15px 30px; border: 0; border-radius: 99px; background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); color: #fff; font-size: 16px; font-weight: 800; letter-spacing: -.3px; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 22px rgba(255, 112, 67, .5); transition: filter .15s ease, box-shadow .15s ease, transform .1s ease;}
.preset-card:hover .preset-card-pick {pointer-events: auto;}
.preset-card-pick:hover {filter: brightness(1.08); box-shadow: 0 10px 28px rgba(255, 112, 67, .65);}
.preset-card-pick:active {transform: scale(.97);}
.preset-card-pick i {font-size: 15px;}

/* SOLD OUT */
.preset-card.is-sold {opacity: .62;}
.preset-card.is-sold .preset-card-thumb::before {content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(0, 0, 0, .6);}
.preset-card-sold {position: absolute; top: 50%; left: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transform: translate(-50%, -50%);}
.preset-card-sold b {padding: 9px 22px; border: 2px solid #fff; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 1px;}
.preset-card-sold-link {color: #ffd166; font-size: 13px; font-weight: 600; text-decoration: underline; word-break: break-all;}
.preset-card-sold-link:hover {color: #fff;}

/* ----- 완성형 시안 크게보기 뷰어 ----- */
.studio-viewer {position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center;}
.studio-viewer.is-open {display: flex;}
.studio-viewer-dim {position: absolute; inset: 0; background: rgba(15, 23, 42, .72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer;}
/* 시안 원본 크기 그대로 노출 — 박스 폭은 JS가 이미지 naturalWidth 로 맞추고(뷰포트 초과 시 뷰포트로 클램프), 넘치는 만큼 body 가 스크롤 */
/* 1920 해상도 80% 축소(:root{zoom:.8})에서 vh 는 화면의 80%(92vh→73.6%)만 잡아 팝업 높이가 작아짐 → 부모(.studio-viewer, fixed inset:0)는 배율과 무관하게 화면 전체라 % 로 잡아야 해상도별로 알아서 맞는다 */
.studio-viewer-box {position: relative; display: flex; flex-direction: column; width: calc(100% - 40px); max-width: calc(100% - 40px); max-height: 92%; background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: hidden;}
.studio-viewer-head {flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: #fff;}
.studio-viewer-serial {font-size: 15px; font-weight: 800; letter-spacing: .2px;}
.studio-viewer-close {width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; font-size: 15px; transition: background .2s ease;}
.studio-viewer-close:hover {background: rgba(255, 255, 255, .28);}
.studio-viewer-body {flex: 1 1 auto; min-height: 0; overflow: auto; background: #f1f5f9; scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .25) transparent;}
.studio-viewer-body::-webkit-scrollbar {width: 8px; height: 8px;}
.studio-viewer-body::-webkit-scrollbar-track {background: transparent;}
.studio-viewer-body::-webkit-scrollbar-thumb {background: rgba(15, 23, 42, .22); border-radius: 99px;}
.studio-viewer-body::-webkit-scrollbar-thumb:hover {background: rgba(15, 23, 42, .42);}
.studio-viewer-body img {display: block; width: auto; max-width: none; height: auto; margin: 0 auto;}
.studio-viewer-foot {flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--c-line); background: #fff;}
.studio-viewer-link {display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--c-text-sub); text-decoration: underline; word-break: break-all;}
.studio-viewer-link:hover {color: var(--c-secondary);}
.studio-viewer-link[hidden] {display: none;}
.studio-viewer-select {flex: 0 0 auto; margin-left: auto; padding: 13px 30px; border: 0; border-radius: var(--radius-m); background: linear-gradient(135deg, #fcb900 0%, #ff7043 100%); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.3px; cursor: pointer; box-shadow: 0 4px 14px rgba(252, 185, 0, .35); transition: filter .15s ease, box-shadow .15s ease;}
.studio-viewer-select:hover:not(:disabled) {filter: brightness(1.08); box-shadow: 0 6px 18px rgba(255, 112, 67, .45);}
.studio-viewer-select:disabled {background: #e2e8f0; color: #94a3b8; box-shadow: none; cursor: not-allowed;}

/* ----- 시안 전달 모달 — 완성형 이미지 미리보기 ----- */
.studio-modal-preset-img {display: block; width: 100%; height: auto;}

/* ----- 전달 완료 화면 (window.close() 가 막혔을 때 대체) ----- */
.studio-done {position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);}
.studio-done.is-open {display: flex;}
.studio-done-box {padding: 0 24px; text-align: center; color: #fff;}
.studio-done-icon {font-size: 56px; color: #fcb900; margin-bottom: 22px;}
.studio-done-box h3 {font-size: 26px; font-weight: 800; letter-spacing: -.5px; color: #fff;}
.studio-done-box p {margin-top: 14px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .72); word-break: keep-all;}

/* ----- 갤러리 반응형 ----- */
@media (max-width: 1600px) {
	.studio-gallery-grid {column-count: 3;}
}
@media (max-width: 1200px) {
	.studio-gallery-grid {column-count: 2;}
	.studio-gallery {padding: 36px 18px 48px;}
}
@media (max-width: 767px) {
	.studio-gallery-grid {column-count: 1;}
	.studio-viewer-foot {flex-wrap: wrap;}
	.studio-viewer-select {width: 100%; margin-left: 0;}
}

/* ----- 트래킹번호 복사용 임시 입력창(페이지 최하단) 숨김 ----- */
#TEXT_COPY {position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none;}