@charset "utf-8";
/* ==========================================================================
   Creator 스킨 — 미니홈
   2026-07-31 hsb : 시안 "(수빈) 미니홈 스킨4 반응형 디자인 / 미니홈 PC.dc.html" (개정판) 기준
   PC   = 스티키 상단헤더(로고+내계정 링크) + 좌측 사이드바 + 본문 2단 (max 1440)
   ≤700 = 스티키 상단헤더(로고+설정+햄버거) + 단일 컬럼
          순서 : 헤더 → 프로필 → 공동구매 → 구매랭킹 → 파트너스 → 본문
   설정(톱니) : PC=프로필카드 우상단 / 모바일=상단헤더 우측 · 셀러 본인만 노출
   ※ Creator 스킨 전용. basic 스킨 CSS 와 공유하지 않음.
   ========================================================================== */

/* ==========================================================================
   ★ basic 스킨 전역 CSS 무력화
   /skin/basic/css/reset.css 는 모바일 전용 기준이라 아래를 강제한다.
       main { width:100%; max-width:525px; min-height:100dvh; margin:0 auto; background:#FFF }
       body { font-size:16px; line-height:1 }
   이 때문에 PC 2단 레이아웃이 525px 흰 컬럼으로 갇힌다. 해당 규칙만 정확히 되돌린다.
   (basic 스킨 파일은 수정하지 않고 Creator 쪽에서만 상쇄)
   ========================================================================== */
main.creator-main {
	width: auto;
	max-width: none;
	min-height: 0;
	margin: 0;
	background: #fff;
}

/* ---------- 토큰 ---------- */
.creator-page {
	--c-bg: #f2f4f6;
	--c-surface: #fff;
	--c-text: #191f28;
	--c-text-2: #333d4b;
	--c-text-3: #4e5968;
	--c-muted: #6b7684;
	--c-muted-2: #8b95a1;
	--c-muted-3: #b0b8c1;
	--c-line: #e5e8eb;
	--c-line-2: #d1d6db;
	--c-line-3: #eaedf0;
	--c-fill: #f2f4f6;
	--c-fill-2: #f4f6f8;
	--c-fill-3: #f7f8fa;
	--c-accent: #a58add;
	--c-accent-strong: #8b68cf;
	--c-accent-deep: #7452b8;
	--c-accent-soft: rgba(165, 138, 221, 0.2);
	--c-tile-bg: #f4f0fc;
	--c-danger: #f04452;
	--c-shadow: 0 8px 24px -18px rgba(24, 28, 34, 0.4);
	--c-r-card: 26px;
	--c-r-md: 16px;
	--c-r-in: 12px;
	--c-r-sm: 11px;
	--c-r-pill: 30px;
}

/* ---------- 기본 ---------- */
.creator-page * { box-sizing: border-box; }

.creator-page {
	min-height: 100vh;
	padding: 0 0 20px;
	background: var(--c-bg);
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
	color: var(--c-text);
	font-size: 14px;
	line-height: 1.4;
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: optimizeLegibility;
	letter-spacing: -0.01em;
}

.creator-page a { color: var(--c-accent-strong); text-decoration: none; }
.creator-page a:hover { color: var(--c-accent-deep); }
.creator-page button { font-family: inherit; }
.creator-page img { max-width: 100%; }
.creator-page [hidden] { display: none !important; }
.creator-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes creatorDrawerFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes creatorDrawerIn { from { transform: translateX(100%) } to { transform: translateX(0) } }

/* ---------- PC 상단 헤더 ---------- */
.creator-phead {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--c-line-3);
}
.creator-phead-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1440px;
	height: 46px;
	margin: 0 auto;
	padding: 0 20px;
}
.creator-phead-sp { flex: 1; }

.creator-logo-link { display: block; line-height: 0; }
.creator-logo { display: block; width: auto; opacity: 0.9; }
.creator-logo-pc { height: 19px; }
.creator-logo-m { height: 18px; }

.creator-phead-auth {
	display: flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 500; color: var(--c-muted);
}
.creator-phead-me { font-weight: 700; color: var(--c-text-2); }
.creator-phead-div { width: 1px; height: 10px; background: var(--c-line); }
/* ★ 특이도 주의 : 위쪽 `.creator-page a { color: var(--c-accent-strong) }` 가 (0,1,1) 이라
   클래스만 쓴 규칙(0,1,0)을 전부 이긴다. 아래 링크들은 모두 <a> 라 보라색으로 덮이고 있었다.
   `.creator-page a.클래스` (0,2,1) 로 올려 확실히 이기게 한다. */
.creator-page a.creator-phead-link { color: var(--c-text-3); }
.creator-page a.creator-phead-link:hover { color: var(--c-text); }
.creator-phead-out {
	margin-left: 28px; border: 0; background: transparent; padding: 0;
	font-size: 12px; font-weight: 600; color: var(--c-danger); cursor: pointer;
}
.creator-page a.creator-phead-out { color: var(--c-danger); }
.creator-page a.creator-phead-out:hover { color: #d8323f; }
.creator-phead-login {
	display: flex; align-items: center;
	height: 34px; padding: 0 14px;
	border: 1px solid var(--c-line); border-radius: 10px;
	background: #fff; font-size: 13px; font-weight: 600; color: var(--c-text-2);
}
.creator-page a.creator-phead-login { color: var(--c-text-3); }
.creator-page a.creator-phead-login:hover { background: var(--c-fill); color: var(--c-text-3); }

/* ---------- 모바일 상단 헤더 (PC 숨김) ---------- */
.creator-mhead { display: none; }

.creator-mhead-btns { display: flex; align-items: center; gap: 2px; }
.creator-mhead-btn {
	display: grid; place-items: center;
	width: 40px; height: 40px; border: 0; border-radius: var(--c-r-in);
	background: transparent; color: var(--c-text-3); cursor: pointer;
}
.creator-mhead-gear { color: var(--c-muted-2); }
.creator-mhead-btn:active { background: var(--c-fill); }

/* ---------- 레이아웃 ---------- */
.creator-shell {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	max-width: 1440px;
	margin: 0 auto;
	padding: 20px;
}

.creator-side {
	display: flex;
	flex: 1 1 250px;
	flex-direction: column;
	gap: 16px;
	min-width: 250px;
	align-self: flex-start;
}

.creator-colmain {
	display: flex;
	flex: 999 1 560px;
	flex-direction: column;
	gap: 16px;
	min-width: 300px;
}

.creator-main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
}

.creator-card {
	background: var(--c-surface);
	border-radius: var(--c-r-card);
	box-shadow: var(--c-shadow);
	padding: 18px;
}

.creator-cap {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--c-muted-3);
}

/* ---------- 프로필 카드 ---------- */
.creator-profile { position: relative; }

/* 설정(톱니) — PC : 프로필 카드 우상단 */
.creator-psetting {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--c-r-in);
	background: var(--c-fill);
	color: var(--c-muted-2);
	cursor: pointer;
	transition: background 0.14s, color 0.14s;
}
.creator-psetting:hover { background: #e8ebef; color: var(--c-text-3); }

/* 2026-08-27 hsb : 메인배너(커버 이미지) — 카드 padding(18px) 밖으로 음수 마진으로 빼서
   카드 상단 모서리에 꽉 채운다. data-cover-image 는 creator.js 가 src 를 채운다. */
.creator-cover {
	margin: -18px -18px 14px;
	border-radius: var(--c-r-card) var(--c-r-card) 0 0;
	overflow: hidden;
	background: var(--c-fill);
}
.creator-cover-img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
	object-position: center;
}

.creator-profile-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.creator-avatar {
	display: block;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--c-fill) center/cover no-repeat;
	object-fit: cover;
}

.creator-profile-text { min-width: 0; width: 100%; }

.creator-nick {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.creator-bio {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--c-muted-2);
	cursor: pointer;
	text-align: center;
}

/* 2026-08-04 hsb : 링크(SNS) 아이콘을 한 줄에 최대 4개까지, 5번째부터 아래로 쌓는다.
   ★ 아이콘 크기 · 간격 · 줄당 개수를 변수로 묶고 max-width 를 calc 으로 유도한다.
     개수만 바꾸고 폭을 같이 안 고쳐서 어긋나는 사고를 막기 위함(CLAUDE.md §6-6).
   ★ 변수는 .creator-sns / .creator-sns-sk 자기 자신에 선언한다. 조상(.creator-profile)에
     두면 이 컨테이너를 다른 곳에서 재사용할 때 var() 가 통째로 죽는다(§6-3 스코프 함정).
   ★ max-width 를 걸었으므로 좌우 auto 마진으로 가운데 정렬을 유지한다
     (margin-top 만 두면 flex 박스가 왼쪽으로 붙는다 — §6-2 동반 속성). */
.creator-sns,
.creator-sns-sk {
	--sns-size: 38px;
	--sns-gap: 10px;
	--sns-per-row: 4;
	max-width: calc(var(--sns-size) * var(--sns-per-row) + var(--sns-gap) * (var(--sns-per-row) - 1));
}

.creator-sns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sns-gap);
	margin: 18px auto 0;
}
.creator-sns:empty { display: none; }

.creator-sns-item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 부모(.creator-sns)의 --sns-size 를 따른다. 줄당 개수 계산과 실제 아이콘 크기가
	   따로 놀지 않게 하기 위함. 컨테이너 밖에서 쓰일 때를 대비해 폴백 38px 을 둔다. */
	width: var(--sns-size, 38px);
	height: var(--sns-size, 38px);
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	transition: opacity 0.14s;
}
.creator-sns-item:hover { color: #fff; opacity: 0.85; }
.creator-sns-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.creator-sns-item svg { width: 22px; height: 22px; }
.creator-sns-item[data-sns="youtube"] { background: #ff0033; }
.creator-sns-item[data-sns="instagram"] { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.creator-sns-item[data-sns="tiktok"] { background: #010101; }
.creator-sns-item[data-sns="chzzk"] { background: #000; }
.creator-sns-item[data-sns="naver"] { background: #03c75a; }
.creator-sns-item[data-sns="facebook"] { background: #1877f2; }
.creator-sns-item[data-sns="x"] { background: #000; }

/* --------------------------------------------------------------------------
   프로필 로딩 스켈레톤 (2026-07-31 hsb)
   /api/1.0/minishop/info 응답 전까지 아바타·닉네임·소개글·링크(SNS) 자리를
   회색 블록으로 채운다. .is-loading 은 minishop_home.asp 마크업에 박혀 있어
   JS 실행 전(최초 페인트)부터 보이고, creator.js 가 로딩을 끝내면 뗀다.
   실제 요소와 같은 크기(96/38px·17px 등)를 써서 걷힐 때 레이아웃이 안 튄다.
   -------------------------------------------------------------------------- */
.creator-profile.is-loading .creator-profile-top::before,
.creator-profile.is-loading .creator-nick::before,
.creator-profile.is-loading .creator-bio::before,
.creator-profile.is-loading .creator-bio::after { content: ""; }

.creator-profile.is-loading .creator-profile-top::before,
.creator-profile.is-loading .creator-nick::before,
.creator-profile.is-loading .creator-bio::before,
.creator-profile.is-loading .creator-bio::after,
.creator-sns-sk > span {
	display: block;
	background-color: var(--c-fill);
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
	background-repeat: no-repeat;
	background-size: 160px 100%;
	background-position: -160px 0;
	animation: creatorSkShine 1.2s ease-in-out infinite;
}

@keyframes creatorSkShine {
	from { background-position: -160px 0; }
	to   { background-position: calc(100% + 160px) 0; }
}

/* 아바타 : 실제 <img> 는 감추고 같은 규격의 원을 같은 자리에 세운다 */
.creator-profile.is-loading .creator-avatar { display: none; }
.creator-profile.is-loading .creator-profile-top::before {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
}

/* 닉네임 : 한 줄 */
.creator-profile.is-loading .creator-nick::before {
	width: 116px;
	height: 17px;
	border-radius: 6px;
}

/* 소개글 : 두 줄 (line-clamp 를 잠시 풀어야 가상요소가 두 줄로 쌓인다) */
.creator-profile.is-loading .creator-bio {
	display: block;
	cursor: default;
}
.creator-profile.is-loading .creator-bio::before,
.creator-profile.is-loading .creator-bio::after {
	height: 11px;
	margin: 7px auto 0;
	border-radius: 6px;
}
.creator-profile.is-loading .creator-bio::before { width: 84%; }
.creator-profile.is-loading .creator-bio::after  { width: 56%; }

/* 링크(SNS) 아이콘 : .creator-sns 와 같은 정렬·간격·줄바꿈 규칙을 쓴다.
   (스켈레톤과 실제 목록의 폭·줄수가 달라지면 로딩이 끝나는 순간 화면이 튄다) */
.creator-sns-sk {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sns-gap);
	margin: 18px auto 0;
}
.creator-profile.is-loading .creator-sns-sk { display: flex; }
.creator-sns-sk > span { width: var(--sns-size); height: var(--sns-size); flex: none; border-radius: 50%; }

/* 로딩 중엔 실데이터 컨테이너를 감춰 스켈레톤과 겹치지 않게 한다 */
.creator-profile.is-loading .creator-sns { display: none; }

@media (prefers-reduced-motion: reduce) {
	.creator-profile.is-loading .creator-profile-top::before,
	.creator-profile.is-loading .creator-nick::before,
	.creator-profile.is-loading .creator-bio::before,
	.creator-profile.is-loading .creator-bio::after,
	.creator-sns-sk > span { animation: none; }
}

.creator-profile-actions {
	display: flex;
	gap: 8px;
	margin-top: 14px;
}

.creator-follow {
	flex: 1;
	height: 48px;
	border: 1px solid var(--c-accent);
	border-radius: var(--c-r-md);
	padding: 0 14px;
	background: var(--c-accent);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.creator-follow.is-on {
	border-color: #d9cbf2;
	background: #fff;
	color: var(--c-accent-strong);
}

.creator-share {
	flex: 0 0 auto;
	height: 48px;
	border: 0;
	border-radius: var(--c-r-md);
	padding: 0 16px;
	background: var(--c-fill);
	color: var(--c-text-3);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.14s;
}
.creator-share:hover { background: #e8ebef; }

/* ---------- 카테고리 ---------- */
.creator-catnav-list { display: flex; flex-direction: column; gap: 2px; }

.creator-cat {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 38px;
	margin: 0;
	border: 0;
	border-radius: var(--c-r-sm);
	padding: 0 12px;
	background: transparent;
	font-size: 14px;
	font-weight: 400;
	color: var(--c-text-3);
	cursor: pointer;
	transition: background 0.14s;
}
.creator-cat:hover { background: var(--c-fill-2); }
.creator-cat.is-on {
	/* 2026-08-03 khs : 사이트컬러(예 onelive 검정) 기준 accent-soft 는 탁한 회색이 돼서 안 예뻤다.
	   공유 버튼(.creator-share)과 같은 톤의 중립 회색으로 통일 */
	background: var(--c-fill);
	color: var(--c-text-3);
	font-weight: 700;
}
.creator-cat-name { flex: 1; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.creator-cat-count { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--c-muted-3); }

/* ---------- 구매랭킹 ---------- */
.creator-rank-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.creator-rank-list { display: flex; flex-direction: column; gap: 2px; }

.creator-rank-row {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	border-radius: var(--c-r-sm);
	padding: 0 8px;
}
.creator-rank-no {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 8px;
	background: var(--c-fill);
	color: var(--c-muted-2);
	font-size: 12px;
	font-weight: 700;
}
.creator-rank-row:nth-child(1) .creator-rank-no { background: linear-gradient(135deg, #f5c000, #d69200); color: #fff; }
.creator-rank-row:nth-child(2) .creator-rank-no { background: linear-gradient(135deg, #bfc7d0, #98a3af); color: #fff; }
.creator-rank-row:nth-child(3) .creator-rank-no { background: linear-gradient(135deg, #ce8b52, #a9642b); color: #fff; }
.creator-rank-name {
	flex: 1; min-width: 0;
	font-size: 14px; color: var(--c-text-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creator-rank-val { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; color: var(--c-muted-2); }

/* ---------- 파트너스 (배너 이미지) ----------
   배너 자체에 라운드/배경이 포함돼 있어 별도 배경·패딩 없이 이미지만 노출한다. */
.creator-partner {
	display: block;
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
	transition: opacity 0.14s;
}
.creator-partner:hover { opacity: 0.9; }
/* PC / 875px 이하 모바일 배너를 <picture> 로 분기 — 래퍼가 인라인이라 block 으로 고정 */
.creator-partner picture { display: block; }
.creator-partner img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- 파트너스 (텍스트 배너, 2026-08-03) ---------- */
.creator-partner-text {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 16px;
	border-radius: var(--c-r-card);
	background: var(--c-tile-bg);
	cursor: pointer;
	transition: background 0.14s;
}
.creator-page a.creator-partner-text { color: inherit; }
.creator-partner-text:hover { background: var(--c-accent-soft); }
.creator-partner-text-ico {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--c-accent); color: #fff;
}
.creator-partner-text-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.creator-partner-text-body strong { font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.creator-partner-text-body span { font-size: 12px; color: var(--c-text-2); }
.creator-partner-text-arrow { flex: 0 0 auto; color: var(--c-text-2); }

/* ---------- 공동구매 (퍼블만) ---------- */
.creator-gb {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	padding: 18px;
	background: linear-gradient(118deg, #ff2e86 0%, #f0399f 22%, #c13be8 52%, #7a3df2 78%, #4e23c9 100%);
	color: #fff;
}

.creator-gb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.creator-gb-tag {
	display: inline-flex; align-items: center; gap: 6px;
	border-radius: var(--c-r-pill); padding: 5px 11px;
	background: rgba(255, 255, 255, 0.2);
	font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.creator-gb-dot { width: 6px; height: 6px; border-radius: 50%; background: #ffd166; }
.creator-gb-title { font-size: clamp(15px, 1.9vw, 18px); font-weight: 700; letter-spacing: -0.03em; }
.creator-gb-timer {
	margin-left: auto; display: flex; align-items: center; gap: 8px;
	font-size: 12px; color: rgba(255, 255, 255, 0.85); white-space: nowrap;
}
.creator-gb-remain {
	font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 700; color: #fff;
	border-radius: 10px; padding: 5px 10px; background: rgba(255, 255, 255, 0.22);
}

.creator-gb-body {
	display: flex; flex-wrap: wrap; align-items: stretch;
	gap: clamp(12px, 2vw, 18px); margin-top: 16px;
}

.creator-gb-lead {
	display: flex; flex: 1 1 340px; min-width: 0;
	gap: clamp(12px, 2vw, 18px);
	border-radius: 20px; padding: clamp(12px, 2vw, 16px);
	background: rgba(255, 255, 255, 0.14);
}
.creator-gb-lead-img {
	position: relative; flex: 0 0 auto; align-self: flex-start;
	width: min(190px, 38%); aspect-ratio: 1;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.18) center/cover no-repeat;
}
.creator-gb-lead-info { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.creator-gb-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px;
	font-size: 12px; color: rgba(255, 255, 255, 0.85);
}
.creator-gb-state {
	border-radius: var(--c-r-pill); padding: 3px 8px;
	background: #f2a900; color: #fff; font-weight: 700; white-space: nowrap;
}
.creator-gb-name { margin-top: 5px; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -0.02em; }
.creator-gb-price-wrap { margin-top: 4px; }
.creator-gb-was { font-size: 12px; color: rgba(255, 255, 255, 0.7); text-decoration: line-through; }
.creator-gb-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 2px; }
.creator-gb-off { font-size: 16px; font-weight: 700; color: #ffd166; white-space: nowrap; }
.creator-gb-price { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.creator-gb-foot { margin-top: auto; padding-top: 14px; }
.creator-gb-goal {
	display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between;
	gap: 2px 10px; font-size: 12px; color: rgba(255, 255, 255, 0.85);
}
.creator-gb-pct { font-weight: 700; color: #ffd166; white-space: nowrap; }
.creator-gb-bar {
	height: 8px; margin-top: 7px; border-radius: var(--c-r-pill);
	background: rgba(255, 255, 255, 0.25); overflow: hidden;
}
.creator-gb-bar > i {
	display: block; height: 100%; border-radius: var(--c-r-pill);
	background: linear-gradient(90deg, #ffd166, #fff);
}
.creator-gb-join {
	width: 100%; margin-top: 14px; border: 0; border-radius: 14px;
	padding: 13px 10px; background: #fff; color: #4e23c9;
	font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;
	transition: background 0.14s;
}
.creator-gb-join:hover { background: #ffd166; }

.creator-gb-next { display: flex; flex: 1 1 300px; flex-direction: column; gap: 8px; min-width: 0; }
.creator-gb-next-cap { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.8); }
.creator-gb-row {
	display: flex; align-items: center; gap: 12px;
	border-radius: var(--c-r-md); padding: 11px 12px;
	background: rgba(255, 255, 255, 0.12);
}
.creator-gb-row-img {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--c-r-in);
	background: rgba(255, 255, 255, 0.18) center/cover no-repeat;
}
.creator-gb-row-info { flex: 1; min-width: 0; }
.creator-gb-row-period { font-size: 12px; color: rgba(255, 255, 255, 0.82); }
.creator-gb-row-name {
	margin-top: 3px; font-size: 13px; font-weight: 500; line-height: 1.4;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.creator-gb-row-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; }
.creator-gb-row-off { font-size: 13px; font-weight: 700; color: #ffd166; }
.creator-gb-row-now { font-size: 15px; font-weight: 700; }
.creator-gb-alarm {
	flex: 0 0 auto; border: 0; border-radius: var(--c-r-pill); padding: 7px 12px;
	background: #fff; color: #4e23c9; font-size: 12px; font-weight: 700;
	cursor: pointer; transition: background 0.14s;
}
.creator-gb-alarm.is-on {
	border: 1px solid rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- 본문 헤더행 ---------- */
.creator-headrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

.creator-headtitle {
	display: flex; align-items: baseline; gap: 8px;
	flex: 1 1 auto; min-width: 0;
}
.creator-headtitle > strong {
	font-size: clamp(16px, 2vw, 20px); font-weight: 700; letter-spacing: -0.03em;
}

.creator-search {
	order: 3;
	display: flex; align-items: center; gap: 8px;
	flex: 1 1 160px; max-width: 230px; min-width: 140px; height: 40px;
	border: 1px solid var(--c-line-2); border-radius: var(--c-r-in); padding: 0 13px;
	background: #fff;
}
.creator-search-ico { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--c-muted-2); }
.creator-search input {
	flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
	font-family: inherit; font-size: 13px; color: var(--c-text);
}
.creator-search-clear {
	border: 0; border-radius: 50%; width: 22px; height: 22px;
	background: #dfe3e8; color: var(--c-text-3); font-size: 12px; line-height: 1; cursor: pointer;
}
.creator-search-clear:hover { background: #c4cbd3; }

.creator-sort { order: 2; position: relative; flex: 0 0 auto; margin-left: auto; }
.creator-sort-btn {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	width: 124px; height: 40px;
	border: 1px solid var(--c-line-2); border-radius: var(--c-r-in); padding: 0 14px 0 16px;
	background: #fff; font-size: 13px; font-weight: 600; color: var(--c-text-2); cursor: pointer;
}
.creator-sort-arrow {
	width: 7px; height: 7px; margin-top: -3px;
	border-right: 1.6px solid var(--c-muted-2); border-bottom: 1.6px solid var(--c-muted-2);
	transform: rotate(45deg);
}
.creator-sort-pop {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
	min-width: 156px; border: 1px solid var(--c-line); border-radius: var(--c-r-md);
	padding: 6px; background: #fff;
	box-shadow: 0 12px 28px -14px rgba(24, 28, 34, 0.3);
}
.creator-sort-opt {
	display: flex; align-items: center; gap: 8px; width: 100%;
	border: 0; border-radius: var(--c-r-sm); padding: 11px 12px;
	background: transparent; font-size: 13px; font-weight: 500; color: var(--c-text-3);
	cursor: pointer; transition: background 0.12s;
}
.creator-sort-opt:hover { background: var(--c-fill-2); }
.creator-sort-opt.is-on { color: var(--c-accent-strong); font-weight: 700; }
.creator-sort-opt > span:first-child { flex: 1; text-align: left; }
.creator-sort-check { font-size: 12px; color: var(--c-accent-strong); opacity: 0; }
.creator-sort-opt.is-on .creator-sort-check { opacity: 1; }

/* ---------- 칩 ---------- */
.creator-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.creator-chips:empty { display: none; }
.creator-chip {
	display: inline-flex; align-items: center; gap: 6px;
	border: 0; border-radius: var(--c-r-pill); padding: 10px 15px;
	background: var(--c-fill); color: var(--c-muted);
	font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
	transition: background 0.14s, color 0.14s;
}
.creator-chip.is-on { background: #e8ebef; color: var(--c-text); font-weight: 700; }
/* 2026-08-03 khs : 칩 우측 상품수 배지 — 좌측 카테고리 내비(.creator-cat-count)와 같은 톤 */
.creator-chip-count {
	font-variant-numeric: tabular-nums;
	font-size: 12px; font-weight: 600; line-height: 1;
	color: var(--c-muted-3);
	transition: color 0.14s;
}
.creator-chip.is-on .creator-chip-count { color: var(--c-text-3); }

/* ---------- 상품 그리드 ---------- */
.creator-goods {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), max(calc(25% - 12px), 190px)), 1fr));
	gap: 26px 16px;
}

.creator-goods-item { display: flex; flex-direction: column; gap: 11px; }
.creator-goods-link { display: flex; flex-direction: column; gap: 11px; color: inherit; cursor: pointer; }
.creator-goods-link:hover { color: inherit; }

.creator-goods-thumb {
	position: relative; aspect-ratio: 1 / 1; border-radius: var(--c-r-md); overflow: hidden;
	background: repeating-linear-gradient(135deg, #e9ecef 0 7px, #f4f6f8 7px 14px);
}
.creator-goods-thumb img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.3s ease;
}
.creator-goods-link:hover .creator-goods-thumb img { transform: scale(1.04); }

.creator-flag {
	position: absolute; top: 10px; left: 10px;
	display: inline-flex; align-items: center; justify-content: center;
	height: 24px; padding: 0 11px; border-radius: var(--c-r-pill);
	font-size: 12px; font-weight: 500; letter-spacing: 0.06em; line-height: 1; color: #fff;
	background: linear-gradient(135deg, #ffb020, #f59300);
	box-shadow: 0 4px 12px -4px rgba(245, 147, 0, 0.5);
}
.creator-flag.is-hot {
	background: linear-gradient(135deg, #ff8a5c, #ff4d6d);
	box-shadow: 0 4px 12px -4px rgba(255, 77, 109, 0.5);
}

.creator-goods-cart {
	position: absolute; bottom: 12px; right: 12px;
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.6); color: #fff; line-height: 0; cursor: pointer;
	transition: background 0.14s;
}
.creator-goods-cart:hover { background: var(--c-accent); }

.creator-goods-info { display: flex; flex-direction: column; gap: 5px; }
.creator-goods-brand { font-size: 12px; color: var(--c-muted-2); }
.creator-goods-title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--c-text-2);
	text-overflow: ellipsis;
}
.creator-goods-price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 1px; }
.creator-goods-price { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.creator-goods-price.is-soldout { color: var(--c-muted-2); }
.creator-goods-off { font-size: 14px; font-weight: 700; color: #ff4d6d; }
.creator-goods-sub {
	display: flex; align-items: center; gap: 5px;
	font-size: 12px; color: var(--c-muted-2);
}
.creator-goods-sub .creator-star { display: inline-flex; line-height: 0; color: #ffb020; }

/* ---------- 빈 상태 / 스켈레톤 ---------- */
.creator-empty { border-radius: 24px; padding: 60px 20px; text-align: center; }
.creator-empty-title { font-size: 14px; font-weight: 700; }
.creator-empty-desc { margin-top: 6px; font-size: 13px; color: var(--c-muted-2); }

.creator-skel-item { display: flex; flex-direction: column; gap: 11px; }
.creator-skel-thumb {
	aspect-ratio: 1 / 1; border-radius: var(--c-r-md);
	background: linear-gradient(100deg, #eef1f4 30%, #f6f8fa 50%, #eef1f4 70%);
	background-size: 200% 100%;
	animation: creatorShimmer 1.2s linear infinite;
}
.creator-skel-line {
	height: 12px; border-radius: 6px;
	background: linear-gradient(100deg, #eef1f4 30%, #f6f8fa 50%, #eef1f4 70%);
	background-size: 200% 100%;
	animation: creatorShimmer 1.2s linear infinite;
}
.creator-skel-line.short { width: 45%; }
@keyframes creatorShimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* ---------- 모달 ---------- */
.creator-modal {
	position: fixed; inset: 0; z-index: 95;
	display: flex; align-items: center; justify-content: center; padding: 24px;
	background: rgba(24, 28, 34, 0.45);
}
.creator-modal-box {
	width: 100%; max-width: 400px; border-radius: 24px; padding: 24px;
	background: #fff; box-shadow: 0 24px 60px -24px rgba(24, 28, 34, 0.5);
	max-height: calc(100vh - 48px); overflow-y: auto;
}
.creator-modal[data-modal="bio"] .creator-modal-box { max-width: 420px; }

.creator-modal-title {
	display: flex; align-items: center; gap: 8px;
	font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}
.creator-modal-check {
	display: flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--c-accent); color: #fff;
}
/* 모달 닫기 : 원형 크기(32px)는 디자인이라 유지하고, ::after 로 터치 타깃만 44x44 로 넓힌다.
   아이콘은 드로어와 같은 SVG 라 iOS/Android 렌더가 동일하다. */
.creator-modal-close {
	position: relative;
	display: grid; place-items: center;
	border: 0; border-radius: 50%; width: 32px; height: 32px; padding: 0;
	background: var(--c-fill); color: var(--c-text-3);
	line-height: 0; cursor: pointer; flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.creator-modal-close svg { display: block; width: 15px; height: 15px; pointer-events: none; }
.creator-modal-close::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.creator-modal-close:hover { background: var(--c-line); }
.creator-modal-close:active { background: var(--c-line); }

.creator-modal-item {
	display: flex; align-items: center; gap: 14px;
	margin-top: 18px; border-radius: var(--c-r-md); padding: 14px; background: #f8f9fa;
}
.creator-modal-thumb {
	flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--c-r-in);
	background: #e9ecef center/cover no-repeat;
}
.creator-modal-brand { font-size: 12px; color: var(--c-muted-2); }
.creator-modal-name { margin-top: 3px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.creator-modal-price { margin-top: 5px; font-size: 15px; font-weight: 700; }
.creator-modal-note { margin-top: 14px; font-size: 13px; color: var(--c-muted-2); }

.creator-modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.creator-btn-ghost, .creator-btn-fill {
	flex: 1; border-radius: var(--c-r-md); padding: 14px;
	font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.creator-btn-ghost { border: 1px solid var(--c-line); background: #fff; color: var(--c-text-3); }
.creator-btn-ghost:hover { background: var(--c-fill-2); }
.creator-btn-fill { border: 0; background: var(--c-accent); color: #fff; }
.creator-btn-fill:hover { background: var(--c-accent-strong); color: #fff; }

/* 타일형 모달 (설정) */
.creator-tilebox { max-width: 420px; padding: 16px 16px 20px; }
.creator-tilebox-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.creator-tilebox-head-end { justify-content: flex-end; }

.creator-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 2px; }
.creator-tile {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 12px 2px; border: 0; border-radius: 14px;
	background: transparent; cursor: pointer;
	font-family: inherit; font-size: 12px; font-weight: 600;
	color: var(--c-text-2); letter-spacing: -0.02em; text-align: center; line-height: 1.25;
}
.creator-tile:hover, .creator-tile:active { background: var(--c-fill-3); color: var(--c-text-2); }
.creator-tile-ico {
	display: grid; place-items: center;
	width: 50px; height: 50px; border-radius: 17px;
	background: var(--c-tile-bg); color: var(--c-accent-strong);
}

/* ---------- 드로어 : 더보기 ---------- */
.creator-drawer {
	position: fixed; inset: 0; z-index: 95;
	display: flex; justify-content: flex-end;
	background: rgba(24, 28, 34, 0.45);
	animation: creatorDrawerFade 0.2s ease-out both;
}
.creator-drawer.is-closing { animation: creatorDrawerFade 0.24s ease-in reverse both; }

.creator-drawer-panel {
	display: flex; flex-direction: column;
	width: 70%; max-width: 360px; height: 100%;
	background: #fff;
	box-shadow: -16px 0 48px -20px rgba(24, 28, 34, 0.45);
	overflow-y: auto;
	animation: creatorDrawerIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.creator-drawer.is-closing .creator-drawer-panel {
	animation: creatorDrawerIn 0.26s cubic-bezier(0.4, 0.1, 0.8, 0.4) reverse both;
}

.creator-drawer-head {
	display: flex; align-items: center; gap: 10px;
	height: 52px; padding: 0 8px 0 18px;
	border-bottom: 1px solid var(--c-fill);
	flex: 0 0 auto;
}
.creator-drawer-me {
	flex: 1; font-size: 15px; font-weight: 700; color: var(--c-text);
	letter-spacing: -0.02em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
/* 닫기 버튼 : 아이콘을 SVG 로 고정했다(문자 ✕ 는 iOS/Android 폰트 폴백에 따라
   크기·베이스라인이 달라져 아이폰에서 작고 어긋나 보였다).
   버튼을 44x44 로 잡아 두 OS 모두 동일한 터치 타깃을 갖게 한다. */
.creator-drawer-close {
	display: grid; place-items: center;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--c-r-in);
	background: transparent; color: var(--c-muted);
	line-height: 0; cursor: pointer; flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.creator-drawer-close svg { display: block; width: 18px; height: 18px; pointer-events: none; }
.creator-drawer-close:active { background: var(--c-fill); }

.creator-drawer-body {
	display: flex; flex: 1; flex-direction: column;
	padding: 8px 10px 16px;
}
.creator-drawer-row {
	display: flex; align-items: center; gap: 12px;
	height: 52px; padding: 0 8px; border: 0; border-radius: var(--c-r-in);
	background: transparent; cursor: pointer;
	font-size: 15px; font-weight: 600; color: var(--c-text-3);
	letter-spacing: -0.02em; text-align: left;
}
.creator-page a.creator-drawer-row:hover, .creator-page a.creator-drawer-row:active { background: var(--c-fill-3); color: var(--c-text-3); }
.creator-drawer-ico {
	display: grid; place-items: center;
	width: 26px; height: 26px; flex: 0 0 auto; color: var(--c-text-3);
}
.creator-page a.creator-drawer-row { color: var(--c-text-3); }
.creator-drawer-row > span:last-child { flex: 1; }

.creator-drawer-sp { flex: 1; }
.creator-drawer-line { height: 1px; margin: 8px; background: var(--c-fill); }

/* 로그인/로그아웃은 같은 <a> 를 creator.js 가 href·라벨만 바꿔 재사용한다.
   구분 클래스가 없으므로 href 로 판별한다 — 로그아웃일 때만 붉은색, 로그인은 위 항목들과 동일 색. */
/* 로그인 = 위 3항목과 동일(--c-text-3) / 로그아웃만 붉은색.
   여기도 .creator-page a 를 이기려면 a 를 붙여 (0,2,1) 이상이어야 한다. */
.creator-page a.creator-drawer-auth,
.creator-page a.creator-drawer-auth .creator-drawer-ico { color: var(--c-text-3); }
.creator-page a.creator-drawer-auth:hover,
.creator-page a.creator-drawer-auth:active { background: var(--c-fill-3); color: var(--c-text-3); }
.creator-page a.creator-drawer-auth[href^="/m/mobile_logout.asp"],
.creator-page a.creator-drawer-auth[href^="/m/mobile_logout.asp"] .creator-drawer-ico { color: var(--c-danger); }
.creator-page a.creator-drawer-auth[href^="/m/mobile_logout.asp"]:hover,
.creator-page a.creator-drawer-auth[href^="/m/mobile_logout.asp"]:active { background: #fff5f5; color: var(--c-danger); }

/* ---------- 소개 모달 ---------- */
.creator-bio-head { display: flex; align-items: center; gap: 12px; }
.creator-bio-head > strong { flex: 1; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.creator-bio-body {
	margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--c-text-3);
	white-space: pre-line; word-break: break-word;
}
.creator-bio-ok {
	width: 100%; margin-top: 22px; border: 0; border-radius: var(--c-r-md); padding: 14px;
	background: var(--c-accent-strong); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.creator-bio-ok:hover { background: var(--c-accent-deep); }

/* ==========================================================================
   모바일 (≤700px) — 시안 규칙 그대로
   [data-page] 를 flex column 으로 만들고 shell/side/colmain 을 display:contents 로
   평탄화한 뒤 order 로 재배치한다.
   순서 : 상단헤더(0) → 프로필(1) → 공동구매(2) → 구매랭킹(3) → 파트너스(4) → 본문(5)
   ========================================================================== */
@media (max-width: 700px) {
	.creator-page {
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 0 0 20px;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
	}
	.creator-page svg { shape-rendering: geometricPrecision; }

	/* 레이아웃 평탄화 */
	.creator-shell, .creator-side, .creator-colmain { display: contents; }

	/* PC 헤더 숨김 / 모바일 헤더 노출 */
	.creator-phead { display: none; }
	.creator-mhead {
		order: 0;
		display: flex;
		position: sticky;
		top: 0;
		z-index: 30;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		height: 52px;
		padding: 0 16px;
		background: #fff;
		border-bottom: 1px solid #f2f4f6;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* 카드 공통 : 라운드/그림자 제거 */
	.creator-card {
		border-radius: 0;
		box-shadow: none;
		border-bottom: 8px solid #f2f4f6;
	}

	/* 메인배너도 카드처럼 라운드 제거 + 모바일에서 살짝 낮게 */
	.creator-cover { border-radius: 0; }
	.creator-cover-img { height: 120px; }

	/* 순서 재배치 */
	.creator-profile { order: 1; border-bottom: 0; }
	.creator-gb      { order: 2; margin: 0; border-radius: 0; padding: 22px 18px; }
	.creator-rank    { order: 3; border-bottom: 0; margin-bottom: 0; }
	/* 배너 이미지는 여백 없이 화면 폭 100% — 패딩은 기본 규칙(padding:0)을 그대로 쓴다 */
	.creator-partner {
		order: 4;
		width: 100%;
		margin: 0;
		border-radius: 0;
		background: transparent;
	}
	/* 2026-08-03 khs : 텍스트 배너도 모바일 순서(4번째)는 그대로 유지 */
	.creator-partner-text { order: 4; margin: 0 16px; width: auto; }
	.creator-main    { order: 5; border-top: 0; border-bottom: 0; padding-top: 16px; }

	/* 모바일 미노출 : PC 전용 설정버튼 · 카테고리 카드 */
	.creator-psetting { display: none; }
	.creator-catnav   { display: none; }

	/* 본문 헤더행 */
	.creator-headrow { margin-top: 8px; }
	.creator-headtitle { flex: 1 1 100%; }
	.creator-search { flex: 1 1 0; max-width: none; min-width: 0; }
	.creator-sort { margin-left: 0; }

	/* 칩 가로 스크롤 */
	.creator-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin: 0 -18px;
		padding: 0 18px;
	}
	.creator-chips::-webkit-scrollbar { display: none; }
	.creator-chips > .creator-chip { flex: 0 0 auto; }

	.creator-goods { gap: 22px 14px; }
	.creator-modal { padding: 18px; }
}

@media (max-width: 420px) {
	.creator-goods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.creator-tiles { gap: 6px 0; }
	.creator-tile { font-size: 11px; }
	.creator-tile-ico { width: 46px; height: 46px; border-radius: 16px; }
}

/* ==========================================================================
   공유 모달 (.shareLayer) — 2026-07-31 hsb
   /m/_lib/ajax_share_minishop.asp 이 내려주는 조각(마크업 고정, 타 스킨과 공용)을
   Creator 스킨의 "설정 모달"과 같은 UI 로 다시 입힌다.
   ※ 조각 ASP 는 basic 스킨도 쓰므로 건드리지 않고 CSS 로만 재디자인한다.
   ※ 닫기 버튼(.shareLayerCloseWrap)은 카드 바깥 형제라, creator.js 가 주입 직후
     .shareLayerWrap 안으로 옮긴다(그래야 카드 우상단에 붙는다).
   ========================================================================== */

/* 오버레이 — .creator-modal 과 동일
   ★ /skin/basic/css/common.css 에 `.shareLayer{ left:50%; transform:translateX(-50%);
     width:100%; max-width:680px; height:100% }` 가 이미 있다(같은 특이도 0,1,0).
     creator.css 가 뒤에 로드돼 top/left 는 이기지만 **transform·max-width 는 내가 안 쓰면 그대로 남아**
     오버레이가 좌측으로 밀리고 폭도 680px 로 잘렸다. 아래에서 명시적으로 무력화한다. */
.shareLayer {
	/* ★ 디자인 토큰은 .creator-page 에만 선언돼 있다(:root 아님).
	   .shareLayer 는 .creator-page 바깥이라 var(--c-*) 가 전부 미해석 → 글자가 흰색으로
	   상속돼 제목·URL·닫기 X 가 안 보였다. 여기서 필요한 토큰만 다시 선언한다. */
	--c-text: #191f28;
	--c-text-2: #333d4b;
	--c-text-3: #4e5968;
	--c-muted: #6b7684;
	--c-line: #e5e8eb;
	--c-fill: #f2f4f6;
	--c-fill-3: #f7f8fa;
	--c-accent-strong: #8b68cf;
	--c-accent-deep: #7452b8;
	--c-r-in: 12px;
	--card-pad: 24px;					/* 카드 안쪽 여백 — 닫기 버튼 위치가 이 값을 따라간다 */

	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	transform: none;					/* basic 의 translateX(-50%) 무력화 */
	width: auto; max-width: none;		/* basic 의 width:100%/max-width:680px 무력화 */
	height: auto;						/* basic 의 height:100% 무력화 (top/bottom 이 결정) */
	margin: 0;
	z-index: 95;
	align-items: center; justify-content: center;
	padding: 24px;
	background: rgba(24, 28, 34, 0.45);
	box-sizing: border-box;
}
.shareLayer.on { display: flex; }
/* basic 이 폭에 따라 display:none/block 을 걸어 두어 내 타일 레이아웃(block 50x50)이 깨진다.
   ※ 가시성을 바꾸는 게 아니다 — basic 에서도 680px 규칙이 뒤에 와서 원래 보이던 아이콘이다.
   ※ data-icon="message"(문자메시지)는 이 조각이 아예 내려주지 않아 규칙을 두지 않는다. */
.shareLayer .shareLayer-item-anchor[data-icon="kakaotalk"] { display: block; }
.shareLayer * { box-sizing: border-box; }
.shareLayer #shortUrlId { display: none; }

/* 카드 — .creator-modal-box 와 동일 */
.shareLayer .shareLayerWrap {
	position: relative;
	width: 100%; max-width: 400px;
	border-radius: 24px; padding: var(--card-pad);
	background: #fff;
	box-shadow: 0 24px 60px -24px rgba(24, 28, 34, 0.5);
	max-height: calc(100vh - 48px); overflow-y: auto;
	color: var(--c-text);
}
.shareLayer .shareLayerWrap * { color: inherit; }			/* basic 의 .shareLayer{color:#fff} 잔여 차단 */
.shareLayer .shareLayerTit,
.shareLayer .shareLayer-copy-link-url { color: var(--c-text); }

/* 닫기 — .creator-modal-close 와 동일(원형 32px). 조각엔 텍스트 링크라 X 를 CSS 로 그린다 */
/* 제목과 수평 정렬 : 카드 padding(24px) 에서 시작 + 높이 32px = 제목 line-height 와 동일 → 중심 일치 */
.shareLayer .shareLayerCloseWrap { position: absolute; top: var(--card-pad); right: var(--card-pad); height: 32px; }
.shareLayer .shareLayerClose {
	/* ★ basic 은 이 <a> 에 `position:absolute; top:20px; right:20px; bottom:auto; left:auto` 를 건다.
	   position 만 바꾸고 오프셋을 안 지우면 relative 기준으로 **아래-왼쪽으로 밀려난다**(실제 발생 원인).
	   네 방향을 모두 auto 로 되돌려 정상 흐름 위치에 놓는다. */
	position: relative;			/* ::before/::after 의 기준 */
	top: auto; right: auto; bottom: auto; left: auto;
	display: block; width: 32px; height: 32px; margin: 0;
	border-radius: 50%; background: var(--c-fill); text-indent: 0; font-size: 0;
	-webkit-tap-highlight-color: transparent;
}
.shareLayer .shareLayerClose::before,
.shareLayer .shareLayerClose::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 13px; height: 1.8px; border-radius: 2px; background: var(--c-text-3);
}
.shareLayer .shareLayerClose::before { transform: translate(-50%, -50%) rotate(45deg); }
.shareLayer .shareLayerClose::after { transform: translate(-50%, -50%) rotate(-45deg); }
.shareLayer .shareLayerClose:hover { background: var(--c-line); }

/* 섹션 제목 — .creator-bio-head > strong 과 동일 톤 */
.shareLayer .shareLayerTit {
	margin: 0 0 14px; padding-right: 44px;
	font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
	line-height: 32px;					/* 닫기 버튼(32px)과 같은 높이 → 수평 중심 일치 */
	color: var(--c-text);
}
.shareLayer .shareLayerCon + .shareLayerCon { margin-top: 24px; }
.shareLayer .shareLayerCon + .shareLayerCon .shareLayerTit { padding-right: 0; }

/* 아이콘 타일 — .creator-tile / .creator-tile-ico 규격(50x50, radius 17) */
/* 아이콘만 노출 (라벨 제거 요청 2026-07-31) — 텍스트는 font-size:0 으로 감추고 스크린리더에는 남긴다 */
.shareLayer ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; width: 100%; }
.shareLayer ul li.shareLayer-item { width: auto; margin: 0; padding: 0; }
.shareLayer ul li a.shareLayer-item-anchor {
	display: block; width: 50px; height: 50px; margin: 0; padding: 0;
	border-radius: 17px; background: transparent; overflow: visible;
	text-indent: 0; font-size: 0; line-height: 0;
	transition: transform 0.14s, filter 0.14s;
}
.shareLayer ul li a.shareLayer-item-anchor:hover { transform: translateY(-2px); filter: brightness(1.06); }
.shareLayer ul li a.shareLayer-item-anchor:active { transform: translateY(0); }
.shareLayer .shareLayer-item-anchor::after {
	content: ""; position: static; display: block; margin: 0; inset: auto;
	width: 100%; height: 100%; border-radius: 17px;
	background-repeat: no-repeat; background-position: 50% 50%;
}
/* 브랜드 색 + 아이콘 크기(원본 비율 유지) */
.shareLayer .shareLayer-item-anchor[data-icon="facebook"]::after   { background-color: #3b5998; background-image: url(/m/images/icon-sns-facebook.png); background-size: auto 22px; }
.shareLayer .shareLayer-item-anchor[data-icon="twitter"]::after    { background-color: #2aa9e0; background-image: url(/m/images/icon-sns-twitter.png);  background-size: 23px auto; }
.shareLayer .shareLayer-item-anchor[data-icon="kakaotalk"]::after  { background-color: #F9E81E; background-image: url(/m/images/kakaotalk.png);         background-size: 26px auto; }
.shareLayer .shareLayer-item-anchor[data-icon="kakaostory"]::after { background-color: #FCF310; background-image: url(/m/images/kakaostory.png);        background-size: 26px auto; }
.shareLayer .shareLayer-item-anchor[data-icon="nvband"]::after     { background-color: #1bcc21; background-image: url(/m/images/ico_nb.png);            background-size: 24px auto; }
.shareLayer .shareLayer-item-anchor[data-icon="google"]::after     { background-color: #DC4A38; background-image: url(/m/images/icon-sns-google.png);    background-size: 24px auto; }
.shareLayer .shareLayer-item-anchor[data-icon="blog"]::after       { background-color: #00c73c; background-image: url(/m/images/ic-naver-02.png);        background-size: 24px auto; }
/* 문자메시지 : 전달받은 message_icon.svg 로 교체(2026-07-31). SVG 안에 라운드 배경+그라데이션이
   포함돼 있어 background-color 없이 타일을 꽉 채운다. 모서리는 타일 border-radius 가 잘라 준다. */
.shareLayer .shareLayer-item-anchor[data-icon="message"]::after    { background-color: transparent; background-image: url(/skin/creator/minishop/images/message_icon.svg); background-size: 100% 100%; }

/* 링크복사 — 입력창 + 액센트 버튼 */
.shareLayer .shareLayer-copy-link {
	display: flex; align-items: center; gap: 8px; width: 100%;
	border: 1px solid var(--c-line); border-radius: var(--c-r-in);
	background: var(--c-fill-3); padding: 8px 8px 8px 14px; cursor: default;
}
.shareLayer .shareLayer-copy-link-url {
	display: block; flex: 1; min-width: 0; margin: 0; padding: 0;
	width: auto; vertical-align: baseline; box-sizing: border-box; outline: none;	/* basic 의 width:100%/table-cell 잔여 제거 */
	font-family: inherit; font-size: 13px; line-height: 1.4; letter-spacing: -0.01em;
	color: var(--c-text-3); background: none; border: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shareLayer .shareLayer-copy-link-button-wrapper { display: block; flex: 0 0 auto; width: auto; height: auto; }
.shareLayer .shareLayer-copy-link-button {
	display: flex; align-items: center; justify-content: center;
	position: static; top: 0; width: auto; height: 34px; padding: 0 14px;
	border-radius: 10px; background: var(--c-accent-strong);
	text-indent: 0; font-size: 12px; font-weight: 700; color: #fff;
	cursor: pointer; transition: background 0.14s;
}
.shareLayer .shareLayer-copy-link-button:hover { background: var(--c-accent-deep); }
.shareLayer .shareLayer-copy-link-button::before { content: "복사"; position: static; width: auto; height: auto; background: none; transform: none; }
.shareLayer .shareLayer-copy-link-button::after { display: none; }

/* 좁은 화면 */
@media (max-width: 400px) {
	.shareLayer { padding: 16px; --card-pad: 20px; }	/* 닫기 위치도 이 값을 따라간다 */
	.shareLayer .shareLayerWrap { border-radius: 20px; }
	.shareLayer ul { gap: 12px; }
	.shareLayer ul li a.shareLayer-item-anchor { width: 46px; height: 46px; border-radius: 16px; }
	.shareLayer .shareLayer-item-anchor::after { border-radius: 16px; }
}

/* 토스트 — 링크 복사 결과 안내(2초). 조각의 clipboard 핸들러가 layer_alert() 를 부르는데
   그 함수는 common.js 에 있고 Creator 페이지는 common.js 를 로드하지 않아 정의가 없다.
   creator.js 에서 window.layer_alert 를 이 토스트로 정의한다(덮어쓰기 아님, 신규 정의). */
.creator-toast {
	position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
	z-index: 120; max-width: calc(100vw - 40px);
	padding: 12px 18px; border-radius: 999px;
	background: rgba(24, 28, 34, 0.92); color: #fff;
	font-family: "Pretendard Variable", Pretendard, -apple-system, sans-serif;
	font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: -0.02em;
	text-align: center; white-space: pre-line;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
	opacity: 0; pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.creator-toast.on { opacity: 1; transform: translateX(-50%) translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .creator-toast { transition: none; } }

/* 첫 오픈 로딩 표시 — 조각이 오기 전 빈 오버레이 대신 스피너 */
.shareLayer.is-loading::after {
	content: ""; width: 34px; height: 34px; border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, 0.28); border-top-color: #fff;
	animation: creatorShareSpin 0.7s linear infinite;
}
@keyframes creatorShareSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .shareLayer.is-loading::after { animation-duration: 2s; } }