/* =============================================================================
   Gowa Booking Channel — 프론트엔드 스타일
   레이아웃: [아이콘 + 채널명] 50% | [제목 + 내용 + 버튼] 50%
   ============================================================================= */

.gowa-booking-channels {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	max-width:      860px;
	margin:         0 auto;
	font-family:    inherit;
	box-sizing:     border-box;
}

/* ── 카드 ──────────────────────────────────────────────────────────────────── */

.gowa-bc-item {
	display:       flex;
	align-items:   stretch;
	background:    #ffffff;
	border-radius: 14px;
	border:        1px solid #e5e5e5;
	overflow:      hidden;
}

/* ── 왼쪽 40% : 아이콘(좌) + 플랫폼명·채널ID(우) — 그리드로 센터링 ────────── */

.gowa-bc-left {
	flex:                  2;
	display:               grid;
	grid-template-columns: 72px max-content;  /* 아이콘 고정 | 텍스트 자동 */
	grid-template-rows:    auto auto;
	align-content:         center;
	align-items:           center;
	justify-content:       start;             /* 아이콘+텍스트 그룹 왼쪽 정렬 */
	text-align:            left;
	column-gap:            20px;
	row-gap:               4px;
	padding:               36px 44px;
	flex-shrink:           0;
}

.gowa-bc-icon {
	grid-column:     1;
	grid-row:        1 / 3;
	width:           72px;
	height:          72px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	align-self:      center;
}

.gowa-bc-icon svg,
.gowa-bc-icon img {
	width:         100%;
	height:        100%;
	display:       block;
	border-radius: 14px;
}

.gowa-bc-platform-name {
	grid-column:    2;
	grid-row:       1;
	font-size:      18px;      /* JS 인라인 스타일로 override 가능 */
	font-weight:    700;
	color:          #1a1a1a;
	margin:         0;
	line-height:    1.2;
	letter-spacing: -.02em;
	align-self:     end;
	white-space:    nowrap;
}

.gowa-bc-channel-id {
	grid-column: 2;
	grid-row:    2;
	font-size:   13px;         /* JS 인라인 스타일로 override 가능 */
	color:       #b0b0b0;
	margin:      0;
	line-height: 1.4;
	align-self:  start;
	white-space: nowrap;
}

/* ── 세로 구분선 ───────────────────────────────────────────────────────────── */

.gowa-bc-sep {
	width:       1px;
	align-self:  stretch;
	background:  #ebebeb;
	margin:      32px 0;
	flex-shrink: 0;
}

/* ── 오른쪽 60% : 제목 + 내용 + 버튼 (+ QR 옵션) ───────────────────────── */

.gowa-bc-right {
	flex:           3;
	display:        flex;
	flex-direction: row;    /* body + optional QR */
	align-items:    stretch;
	min-width:      0;
}

.gowa-bc-right-body {
	flex:            1;
	padding:         36px 44px;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	text-align:      left;
	gap:             8px;
	min-width:       0;
}

/* ✦ 장식 + 제목 */
.gowa-bc-title {
	font-size:      20px;      /* JS 인라인 스타일로 override 가능 */
	font-weight:    800;
	color:          #6e3416;
	margin:         0;
	line-height:    1.35;
	word-break:     keep-all;
	letter-spacing: -.02em;
}

.gowa-bc-title::before {
	content:      '✦ ';
	font-size:    .7em;
	font-weight:  400;
	opacity:      .8;
}

.gowa-bc-subtitle {
	font-size:   14px;         /* JS 인라인 스타일로 override 가능 */
	color:       #8a8a8a;
	margin:      0;
	line-height: 1.75;
	word-break:  keep-all;
}

/* ── 버튼 ────────────────────────────────────────────────────────────────────── */

.gowa-bc-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin-top:      16px;
	padding:         11px 26px;
	background:      #1c1c1c;
	color:           #ffffff !important;
	border-radius:   100px;
	font-size:       13px;
	font-weight:     700;
	text-decoration: none !important;
	letter-spacing:  .02em;
	white-space:     nowrap;
	line-height:     1.4;
	transition:      background .18s ease;
}

.gowa-bc-btn::after {
	content:     ' →';
	font-weight: 400;
	opacity:     .6;
}

.gowa-bc-btn:hover {
	background: #3a3a3a;
	color:      #ffffff !important;
}

/* 플랫폼별 버튼 + 제목 색상 — 각 SNS 브랜드 포인트컬러 적용 */

/* KakaoTalk — 브랜드 옐로우 #FEE500 */
.gowa-bc-item--kakao .gowa-bc-btn          { background: #FEE500; color: #3D1A00 !important; }
.gowa-bc-item--kakao .gowa-bc-btn:hover    { background: #f0d800; color: #3D1A00 !important; }
.gowa-bc-item--kakao .gowa-bc-title        { color: #6e3416; }

/* WhatsApp — 브랜드 그린 #25D366 */
.gowa-bc-item--whatsapp .gowa-bc-btn       { background: #25D366; color: #ffffff !important; }
.gowa-bc-item--whatsapp .gowa-bc-btn:hover { background: #1db954; color: #ffffff !important; }
.gowa-bc-item--whatsapp .gowa-bc-title     { color: #1a4d42; }

/* LINE — 브랜드 그린 #00B900 */
.gowa-bc-item--line .gowa-bc-btn           { background: #00B900; color: #ffffff !important; }
.gowa-bc-item--line .gowa-bc-btn:hover     { background: #009400; color: #ffffff !important; }
.gowa-bc-item--line .gowa-bc-title         { color: #1a5c1a; }

/* 네이버톡톡 — 네이버 브랜드 그린 #03C75A */
.gowa-bc-item--naver .gowa-bc-btn          { background: #03C75A; color: #ffffff !important; }
.gowa-bc-item--naver .gowa-bc-btn:hover    { background: #02a84c; color: #ffffff !important; }
.gowa-bc-item--naver .gowa-bc-title        { color: #1a5c38; }

/* 네이버캘린더 — 네이버 브랜드 그린 #03C75A */
.gowa-bc-item--naver_calendar .gowa-bc-btn          { background: #03C75A; color: #ffffff !important; }
.gowa-bc-item--naver_calendar .gowa-bc-btn:hover    { background: #02a84c; color: #ffffff !important; }
.gowa-bc-item--naver_calendar .gowa-bc-title        { color: #1a5c38; }

/* WeChat — 브랜드 그린 #07C160 */
.gowa-bc-item--wechat .gowa-bc-btn         { background: #07C160; color: #ffffff !important; }
.gowa-bc-item--wechat .gowa-bc-btn:hover   { background: #06a050; color: #ffffff !important; }
.gowa-bc-item--wechat .gowa-bc-title       { color: #1a5c38; }

/* ── QR 코드 (.gowa-bc-right 내부 우측) ─────────────────────────────────── */

.gowa-bc-qr {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px;
}

.gowa-bc-qr img {
	width:         100%;
	height:        auto;
	display:       block;
	border-radius: 8px;
}

@media (max-width: 620px) {
	.gowa-bc-qr {
		display: none !important;
	}
}

/* ========= 관리자 아이콘 미리보기 =========  */

.gowa-bc-icon-preview {
	width:           48px;
	height:          48px;
	border-radius:   11px;
	overflow:        hidden;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f3f4f6;
	flex-shrink:     0;
}

.gowa-bc-icon-preview svg,
.gowa-bc-icon-preview img {
	width:   100%;
	height:  100%;
	display: block;
}

/* ========= 반응형 ========= */

/* ========= 관리자 QR 섹션 ========= */

.gowa-bc-row-qr {
	padding:    10px 14px 14px;
	border-top: 1px dashed #e0e0e0;
	margin-top: 6px;
}

.gowa-bc-qr-label {
	margin:    0 0 8px;
	font-size: 12px;
	color:     #555;
}

.gowa-bc-qr-img-wrap {
	display:     flex;
	align-items: center;
	gap:         8px;
	margin-bottom: 8px;
}

.gowa-bc-qr-img-wrap img {
	width:         80px;
	height:        80px;
	object-fit:    contain;
	border:        1px solid #e0e0e0;
	border-radius: 6px;
	background:    #f9f9f9;
}

.gowa-remove-qr {
	background:    #fff;
	border:        1px solid #c3c4c7;
	border-radius: 50%;
	width:         22px;
	height:        22px;
	line-height:   1;
	font-size:     15px;
	cursor:        pointer;
	color:         #666;
	flex-shrink:   0;
	padding:       0;
	display:       flex;
	align-items:   center;
	justify-content: center;
}

.gowa-remove-qr:hover {
	background: #f0f0f0;
	color:      #c00;
}

.gowa-bc-qr-width-field {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin-top:  8px;
	font-size:   13px;
	color:       #444;
}

/* ========= 반응형 ========= */

@media (max-width: 620px) {
	/* 아이콘 + 채널명 + 버튼 compact 가로 레이아웃 */
	.gowa-bc-item {
		flex-direction: row;
		align-items:    center;
	}

	/* 구분선 숨김 */
	.gowa-bc-sep {
		display: none;
	}

	/* 왼쪽: 아이콘 + 채널명 */
	.gowa-bc-left {
		padding:               14px 16px;
		grid-template-columns: 44px max-content;
		column-gap:            10px;
		justify-content:       start;
	}

	.gowa-bc-icon {
		width:  44px;
		height: 44px;
	}

	.gowa-bc-icon svg,
	.gowa-bc-icon img { border-radius: 10px; }

	.gowa-bc-platform-name { font-size: 14px !important; }
	.gowa-bc-channel-id    { font-size: 11px !important; }

	/* 오른쪽: 버튼만 — 제목·내용 숨김 */
	.gowa-bc-right {
		flex: 0 0 auto;
	}

	.gowa-bc-right-body {
		padding:         14px 16px;
		justify-content: center;
		align-items:     flex-end;
		gap:             0;
	}

	.gowa-bc-title,
	.gowa-bc-subtitle {
		display: none;
	}

	.gowa-bc-btn {
		align-self:  flex-start;
		font-size:   12px;
		padding:     9px 18px;
		margin-top:  0;
		white-space: nowrap;
		width:       auto !important;  /* JS 인라인 width 모바일에서 리셋 */
	}
}