/* 여기에 작업 또는 수정할 당신의 css style을 설정하세요. (customizations) */

/* --------------------------------------------------
   Monochrome (Black & White) styling for user pages
   Scope-limited to avoid bleeding into other shop pages
----------------------------------------------------- */

.user-deposit,
.user-deposit-request,
.user-item-write,
.user-my-items {
	color:#111;
}

/* Cards and section headers */
.user-deposit .card,
.user-deposit-request .card,
.user-item-write .card,
.user-my-items .card {
	background:#fff;
	border:1px solid #e6e6e6;
	border-radius:2px;
}
.user-deposit .card-header,
.user-deposit-request .card-header,
.user-item-write .card-header,
.user-my-items .card-header {
	background:#fafafa;
	border-bottom:1px solid #eee;
}
.user-deposit .card-header h5,
.user-deposit-request .card-header h5,
.user-item-write .card-header h5,
.user-my-items .card-header h5 {
	color:#111;
}

/* Tables */
.user-deposit table,
.user-deposit-request table,
.user-item-write table,
.user-my-items table { font-size:13px; }
.admin-user-deposit .table { table-layout:fixed; border-collapse:separate; border-spacing:0; }
.admin-user-deposit .table thead th { border-bottom:2px solid #e0e0e0; }
.admin-user-deposit .table td, .admin-user-deposit .table th { border-right:1px solid #eee; }
.admin-user-deposit .table td:last-child, .admin-user-deposit .table th:last-child { border-right:0; }
.admin-user-deposit .table tbody tr + tr td { border-top:1px solid #f0f0f0; }
.admin-user-deposit .table-hover tbody tr:hover { background:#fafafa; }
.admin-user-deposit .table td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-deposit thead th,
.user-deposit-request thead th,
.user-item-write thead th,
.user-my-items thead th {
	background:#f9f9f9;
	color:#666;
	border-bottom:1px solid #eee;
}

/* Badges - grayscale */
.user-deposit .badge,
.user-deposit-request .badge,
.user-item-write .badge,
.user-my-items .badge { border-radius:2px; }
.user-deposit .badge-secondary,
.user-deposit-request .badge-secondary,
.user-item-write .badge-secondary,
.user-my-items .badge-secondary { background:#777; color:#fff; }
.user-deposit .badge-success,
.user-deposit-request .badge-success,
.user-item-write .badge-success,
.user-my-items .badge-success { background:#111; color:#fff; }
.user-deposit .badge-danger,
.user-deposit-request .badge-danger,
.user-item-write .badge-danger,
.user-my-items .badge-danger { background:#333; color:#fff; }
.user-my-items .badge-primary { background:#222; color:#fff; }
.user-my-items .badge-dark { background:#000; color:#fff; }

/* Links */
.user-deposit a,
.user-deposit-request a,
.user-item-write a,
.user-my-items a { color:#111; }
.user-deposit a:hover,
.user-deposit-request a:hover,
.user-item-write a:hover,
.user-my-items a:hover { color:#000; text-decoration:underline; }

/* Form elements (subtle monochrome focus) */
.user-deposit .form-control,
.user-deposit-request .form-control,
.user-item-write .form-control,
.user-my-items .form-control { border:1px solid #d9d9d9; border-radius:2px; }
.user-deposit .form-control:focus,
.user-deposit-request .form-control:focus,
.user-item-write .form-control:focus,
.user-my-items .form-control:focus { border-color:#000; box-shadow:0 0 0 0.12rem rgba(0,0,0,0.15); }

/* Buttons - unified black & white */
.user-deposit .btn,
.user-deposit-request .btn,
.user-item-write .btn,
.user-my-items .btn { border-radius:2px; font-size:14px; padding:10px 22px; }
.user-deposit .btn i,
.user-deposit-request .btn i,
.user-item-write .btn i,
.user-my-items .btn i { margin-right:6px; }

/* Primary: solid black */
.user-deposit .btn-primary,
.user-deposit-request .btn-primary,
.user-item-write .btn-primary,
.user-my-items .btn-primary { background:#000; border-color:#000; color:#fff; }
.user-deposit .btn-primary:hover,
.user-deposit-request .btn-primary:hover,
.user-item-write .btn-primary:hover,
.user-my-items .btn-primary:hover { background:#222; border-color:#222; }

/* Secondary: white with black border */
.user-deposit .btn-secondary,
.user-deposit-request .btn-secondary,
.user-item-write .btn-secondary,
.user-my-items .btn-secondary { background:#fff; color:#000; border:1px solid #000; }
.user-deposit .btn-secondary:hover,
.user-deposit-request .btn-secondary:hover,
.user-item-write .btn-secondary:hover,


/* Other variants unified to monochrome outline */
.user-deposit .btn-danger,
.user-deposit .btn-success,
.user-deposit .btn-warning,
.user-deposit-request .btn-danger,
.user-deposit-request .btn-success,
.user-deposit-request .btn-warning,
.user-item-write .btn-danger,
.user-item-write .btn-success,
.user-item-write .btn-warning,
.user-my-items .btn-danger,
.user-my-items .btn-success,
.user-my-items .btn-warning { background:#fff; color:#000; border:1px solid #000; }
.user-deposit .btn-danger:hover,
.user-deposit .btn-success:hover,
.user-deposit .btn-warning:hover,
.user-deposit-request .btn-danger:hover,
.user-deposit-request .btn-success:hover,
.user-deposit-request .btn-warning:hover,
.user-item-write .btn-danger:hover,
.user-item-write .btn-success:hover,
.user-item-write .btn-warning:hover,
.user-my-items .btn-danger:hover,
.user-my-items .btn-success:hover,
.user-my-items .btn-warning:hover { background:#000; color:#fff; }

/* Headings on pages */
.user-deposit .page-header h2,
.user-deposit-request .page-header h2,
.user-item-write .page-header h2,
.user-my-items .page-header h2 { color:#111; font-weight:700; }

/* Deposit page: action buttons alignment */
.user-deposit .col-md-6.text-md-right { display:flex; justify-content:flex-end; gap:10px; }
@media (max-width: 767.98px) {
	.user-deposit .col-md-6.text-md-right { flex-direction:column; }
	.user-deposit .col-md-6.text-md-right .btn { width:100%; }
}

/* Modal footer buttons spacing (identical on page modal and popup modal) */
.user-deposit .modal-footer,
.user-deposit-native .modal-footer { display:flex; justify-content:flex-end; gap:6.5px; }

/* Deposit balance visual */
.user-deposit .balance-amount { color:#111; }
.user-deposit .balance-amount i { color:#111; }

/* My items: tighter spacing for action buttons */
.user-my-items .table .btn { margin:0 2px; }
.user-my-items .toolbar .btn { min-width:140px; }

/* --------------------------------------------------
   My Items: Compact KPI stats bar
--------------------------------------------------- */
.user-my-items .stats-bar { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.user-my-items .stats-bar .stat { border:1px solid #ededed; background:#fff; border-radius:4px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; }
.user-my-items .stats-bar .stat .label { color:#666; font-size:.875rem; }
.user-my-items .stats-bar .stat .value { color:#111; font-weight:700; font-size:1.05rem; }
.user-my-items .stats-bar .stat:hover { border-color:#dcdcdc; }
/* --------------------------------------------------
   My Items: Row action buttons as 3-column grid
--------------------------------------------------- */
.user-my-items .action-grid { display:grid; grid-template-columns: 1fr; gap:6px; justify-items:stretch; }
.user-my-items .action-grid .btn-e { width:100%; max-width:160px; margin:0 auto; }

/* Mobile readability for list table */
@media (max-width: 575.98px) {
  /* Hide non-essential columns: 번호(1), 재고(5), 조회(6), 등록일(8) */
  .user-my-items table thead { display:none; }
  .user-my-items table tbody td { font-size:14px; padding:10px 8px; }
  .user-my-items table tbody td:nth-child(1) { display:none; } /* 번호 */
  .user-my-items table tbody td:nth-child(5) { display:none; } /* 재고 */
  .user-my-items table tbody td:nth-child(6) { display:none; } /* 조회 */
  /* 등록일은 data-label로 표시 유지하기 위해 숨기지 않음 */
  .user-my-items table tbody td[data-label]::before { content: attr(data-label) '\00A0'; color:#888; margin-right:6px; font-size:12px; }
  .user-my-items .thumb-cell { width:64px; }
  /* Make rows denser but touch-friendly */
  .user-my-items .table { border-width:1px; }
}
@media (max-width: 991.98px) {
  .user-my-items .stats-bar { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .user-my-items .stats-bar { grid-template-columns:1fr; }
}

/* Simplify tables: tighter paddings */
.user-deposit .table th,
.user-deposit .table td { padding:.55rem .6rem; }
.user-deposit .table thead th { font-weight:600; font-size:.875rem; }
.user-deposit .table tbody td { font-size:.875rem; }
.user-deposit .table-borderless > :not(caption) > * > * { border-bottom: 1px solid #f0f0f0; }
.user-deposit .table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: #fcfcfc; }

/* Empty states */
.user-deposit .empty-state { padding:18px 0; color:#999; font-size:.9rem; }

/* --------------------------------------------------
   Simple List (table-less rows) for deposit.php
---------------------------------------------------*/
.user-deposit .simple-list { display:block; }
.user-deposit .simple-list .sl-row { padding:10px 6px; border-bottom:1px solid #f2f2f2; }
.user-deposit .simple-list .sl-row:last-child { border-bottom:0; }
.user-deposit .simple-list .sl-line1 { display:flex; align-items:center; gap:10px; justify-content:space-between; }
.user-deposit .simple-list .sl-type { min-width:46px; }
.user-deposit .simple-list .sl-amount { min-width:120px; text-align:right; }
.user-deposit .simple-list .sl-status { min-width:52px; text-align:right; }
.user-deposit .simple-list .sl-line2 { display:flex; align-items:center; gap:6px; margin-top:4px; font-size:.82rem; }
.user-deposit .simple-list .sl-divider { color:#d0d0d0; }
.user-deposit .simple-list .sl-content { flex:1; }
.user-deposit .simple-list .sl-amount.plus { color:#111; }
.user-deposit .simple-list .sl-amount.minus { color:#333; }

@media (max-width: 575.98px) {
	.user-deposit .simple-list .sl-line1 { gap:6px; }
	.user-deposit .simple-list .sl-amount { min-width:auto; }
	.user-deposit .simple-list .sl-status { display:none; }
}

/* --------------------------------------
   Modal (Bootstrap 5) monochrome polish
--------------------------------------- */
.user-deposit-native .modal-content { border-radius:4px; border:1px solid #e6e6e6; overflow:visible; }
.user-deposit-native .modal-header { background:#fafafa; border-bottom:1px solid #eee; }
.user-deposit-native .modal-title { color:#111; font-weight:700; }
.user-deposit-native .modal-footer { background:#fff; border-top:1px solid #eee; }
.user-deposit-native .input-group-text { background:#fff; color:#000; border:1px solid #d9d9d9; border-left:0; }
.user-deposit-native .input-group .form-control { border-right:0; }
.user-deposit-native .alert-info { background:#f5f5f5; color:#111; border:1px solid #e6e6e6; }
.user-deposit-native .alert-warning { background:#f9f9f9; color:#111; border:1px solid #e6e6e6; }

/* --------------------------------------------------
   Item Write polish (reduce blockiness)
--------------------------------------------------- */
.user-item-write .card { border-color:#ededed; }
.user-item-write .card-header { background:#fafafa; border-bottom:1px solid #eee; }
.user-item-write .form-label { font-weight:600; color:#111; }
.user-item-write .form-control { border-radius:2px; }
.user-item-write .input-group-text { background:#fff; border-left:0; }
.user-item-write .input-group .form-control { border-right:0; }
.user-item-write .btn-group .btn { min-width:120px; }
.user-item-write .aside-hint .hint-list { padding-left:18px; margin:0; }
.user-item-write .aside-hint .hint-list li { list-style:disc; color:#666; line-height:1.5; margin-bottom:6px; }

/* Item write: form spacing improvements */
.user-item-write .card-body .form-group + .form-group { margin-top: 18px; }
.user-item-write .card-body .form-group.row { margin-bottom: 18px; }
.user-item-write .card-body .col-form-label { padding-top: 10px; }
.user-item-write input.form-control,
.user-item-write textarea.form-control { padding: 10px 12px; }
.user-item-write textarea.form-control { min-height: 180px; }
.user-item-write .card { margin-bottom: 24px; }
.user-item-write .row.g-3 > [class^="col-"] { margin-bottom: 10px; }

/* --------------------------------------------------
   Mobile bottom app bar
   - Visible on small screens only (via utility classes + media query)
   - Central CTA emphasized
--------------------------------------------------- */
@media (max-width: 767.98px) {
	.mobile-appbar {
		position: fixed;
		left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
		height: 70px;
		background: rgba(255,255,255,0.78);
		border: 1px solid rgba(0,0,0,0.06);
		border-radius: 18px;
		backdrop-filter: saturate(140%) blur(16px);
		-webkit-backdrop-filter: saturate(140%) blur(16px);
		box-shadow: 0 14px 34px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.06);
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: center;
		z-index: 1030;
	}
	.mobile-appbar .appbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: rgba(0,0,0,0.9);
		font-size: 13px;
		line-height: 1.1;
		height: 100%;
		gap: 4px;
		transition: transform .12s ease, color .12s ease;
	}
	.mobile-appbar .appbar-item i {
		font-size: 22px;
		margin: 0;
		color: rgba(0,0,0,0.9);
		filter: drop-shadow(0 1px 1px rgba(255,255,255,0.25)) drop-shadow(0 1px 1.5px rgba(0,0,0,0.05));
		transition: transform .12s ease, color .12s ease, filter .12s ease;
	}
	.mobile-appbar .appbar-item span {
		font-weight: 700;
		letter-spacing: -0.15px;
		color: rgba(0,0,0,0.88);
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
	}
	.mobile-appbar .appbar-item:active { transform: translateY(1px); }

	/* Active/current page state */
	.mobile-appbar .appbar-item.active i { color: #000; transform: translateY(-1px) scale(1.06); filter: none; }
	.mobile-appbar .appbar-item.active span { color: #000; }
	.mobile-appbar .appbar-item.active::after {
		content: '';
		position: absolute;
		bottom: 6px;
		width: 18px; height: 3px;
		background: #000;
		border-radius: 2px;
		opacity: .15;
	}

	/* Body bottom padding to avoid content being hidden behind appbar */
	body.has-mobile-appbar { padding-bottom: 108px; }
}

/* (removed) Global glass modal polish */

/* --------------------------------------
   Board: Center images in all boards
   - View pages: content images and attached images
   - Gallery/Webzine list thumbnails
   - Keep max-width responsiveness
--------------------------------------- */
.board-view .board-view-con img,
.board-view #bo_v_img img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Gallery list item image wrapper and images */
.board-gallery .gallery-item-image-in,
.board-gallery .gallery-item-image {
  text-align: center;
}
.board-gallery .gallery-item-image-in img,
.board-gallery .gallery-item-image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Webzine preview images if present inside description/content */
.webzine-desc img,
.webzine-cont img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

/* Disable opening images in new window from board views */
.board-view #bo_v_img a,
.board-view .view-content a.view_image {
  pointer-events: none;
  cursor: default;
}