<?php
if (!defined('_GNUBOARD_')) exit; //개별 페이지 접근 불가

global $at_href, $member;

if(!isset($member['cart'])) {
	thema_member('cart');
}

?>

<style>
	.basic-shop-icon { overflow:visible; margin-bottom:0; text-align:center; }
	.basic-shop-icon .row { margin:0; padding:0; }
	.basic-shop-icon .row .col { margin:0; padding:0 4px; width:33.333333%; }
	.basic-shop-icon .content-box { margin:0px 0px 10px; }
	.basic-shop-icon .heading a {
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:10px;
		padding:10px 8px;
		border:1px solid var(--ws-box-border, #e5e7eb);
		border-radius:12px;
		background:#fff;
		min-height:104px;
		transition:all .18s ease;
		text-decoration:none !important;
	}
	.basic-shop-icon .heading a:hover,
	.basic-shop-icon .heading a:focus {
		border-color:var(--ws-accent-border, #c8d3ff);
		background:#ffffff;
		box-shadow:0 8px 16px rgba(15,23,42,.07);
		transform:none;
		color:var(--ws-title, #111827) !important;
	}
	.basic-shop-icon .heading a:active { transform:none; }
	.basic-shop-icon .heading a:focus-visible {
		outline:0;
		border-color:var(--ws-accent, #4f46e5);
		box-shadow:0 0 0 3px rgba(var(--ws-accent-rgb, 79,70,229), .18);
	}
	.basic-shop-icon .service-icon-box {
		display:inline-flex;
		align-items:center;
		justify-content:center;
		width:50px;
		height:50px;
		border-radius:10px;
		background:linear-gradient(160deg,#ffffff,var(--ws-accent-soft, #f4f7ff));
		border:1px solid var(--ws-accent-border, #dbe4ff);
		box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
		color:var(--ws-accent, #2e3a5a);
		font-size:22px;
		line-height:1;
		transition:all .22s ease;
	}
	.basic-shop-icon .service-icon-box i {
		color:inherit !important;
		background:transparent !important;
		background-color:transparent !important;
		border:0 !important;
		box-shadow:none !important;
		padding:0 !important;
		transition:transform .2s ease, color .2s ease;
	}
	.basic-shop-icon .service-icon-box i:before {
		color:inherit !important;
	}
	.basic-shop-icon .content-box .heading:hover i,
	.basic-shop-icon .content-box .heading:focus i,
	.basic-shop-icon .content-box .heading a:hover i,
	.basic-shop-icon .content-box .heading a:focus i {
		background:transparent !important;
		background-color:transparent !important;
		border-color:transparent !important;
		box-shadow:none !important;
	}
	.basic-shop-icon .heading a:hover .service-icon-box,
	.basic-shop-icon .heading a:focus .service-icon-box {
		background:linear-gradient(160deg,#ffffff,var(--ws-accent-soft, #f4f7ff));
		border-color:var(--ws-accent-border, #dbe4ff);
		box-shadow:
			0 6px 14px rgba(var(--ws-accent-rgb, 30,64,175), .16),
			inset 0 1px 0 rgba(255,255,255,.9);
		color:var(--ws-accent, #1e40af) !important;
	}
	.basic-shop-icon .heading a:hover .service-icon-box i,
	.basic-shop-icon .heading a:focus .service-icon-box i,
	.basic-shop-icon .heading a:hover .service-icon-box i:before,
	.basic-shop-icon .heading a:focus .service-icon-box i:before {
		color:var(--ws-accent, #1e40af) !important;
	}
	.basic-shop-icon .heading a:hover .service-icon-box i,
	.basic-shop-icon .heading a:focus .service-icon-box i {
		transform:translateY(-1px) scale(1.03);
	}
	.basic-shop-icon .icon-wrap { position:relative; display:inline-block; line-height:1; }
	.basic-shop-icon .icon-label {
		display:block;
		margin-top:0;
		font-size:12px;
		font-weight:600;
		line-height:1.2;
		color:var(--ws-title, #111827);
		letter-spacing:-0.35px;
		white-space:nowrap !important;
		overflow:visible !important;
		text-overflow:clip !important;
		word-break:normal;
		overflow-wrap:normal;
		min-height:1.2em;
	}
	.basic-shop-icon .icon-badge {
		position:absolute;
		top:-4px;
		right:-6px;
		display:inline-block;
		padding:2px 5px;
		font-size:11px;
		font-weight:700;
		line-height:1;
		color:#fff;
		background:linear-gradient(135deg,#ff6a00,#ff3b00);
		border:0;
		border-radius:999px;
		text-align:center;
		white-space:nowrap;
		letter-spacing:0.1px;
		pointer-events:none;
		z-index:2;
		box-shadow:0 3px 8px rgba(255,88,0,.35);
	}
	.basic-shop-icon .icon-badge .plus-sign,
	.basic-shop-icon .icon-badge .badge-num { color:#fff; }
	@media (prefers-reduced-motion: reduce) {
		.basic-shop-icon .heading a { transition:none; }
	}
	@media (max-width: 991px) {
		.basic-shop-icon .row .col { width:33.333333%; }
		.basic-shop-icon .heading a { min-height:100px; padding:9px 8px; gap:8px; }
		.basic-shop-icon .service-icon-box { width:46px; height:46px; font-size:20px; }
		.basic-shop-icon .icon-label { font-size:12px; }
	}
	@media (max-width: 480px) {
		.basic-shop-icon .row .col { width:50%; }
	}
</style>

<div class="basic-shop-icon">
	<div class="row">
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['inquiry']; ?>">
						<span class="service-icon-box"><i class="fa fa-truck"></i></span>
						<span class="icon-label ellipsis">주문보기</span>
					</a>
				</div>
			</div>
		</div>

		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['cart'];?>">
						<span class="icon-wrap">
							<span class="service-icon-box"><i class="fa fa-shopping-basket"></i></span>
							<?php if($member['cart']) { ?>
								<span class="icon-badge"><span class="plus-sign">+</span><span class="badge-num"><?php echo number_format($member['cart']);?></span></span>
							<?php } ?>
						</span>
						<span class="icon-label ellipsis">장바구니</span>
					</a>
				</div>
			</div>
		</div>

		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['buyingpoint']; ?>">
						<span class="service-icon-box"><i class="fa fa-product-hunt"></i></span>
						<span class="icon-label ellipsis">포인트구매</span>
					</a>
				</div>
			</div>
		</div>
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['withdrawalpoint']; ?>">
						<span class="service-icon-box"><i class="fa fa-money"></i></span>
						<span class="icon-label ellipsis">포인트출금</span>
					</a>
				</div>
			</div>
		</div>
		<!-- <div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['ppay']; ?>">
						<i class="fa fa-ticket circle light-circle normal"></i>
						<span class="ellipsis">개인결제</span>
					</a>
				</div>
			</div>
		</div> -->
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['faq']; ?>">
						<span class="service-icon-box"><i class="fa fa-question"></i></span>
						<span class="icon-label ellipsis">FAQ</span>
					</a>
				</div>
			</div>
		</div>
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['secret'];?>">
						<span class="service-icon-box"><i class="fa fa-commenting"></i></span>
						<span class="icon-label ellipsis">1:1 문의</span>
					</a>
				</div>
			</div>
		</div>

		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="javascript:;" onclick="sidebar_open('sidebar-cart');">
						<span class="icon-wrap">
							<span class="service-icon-box"><i class="fa fa-eye"></i></span>
							<?php if($member['today']) { ?>
								<span class="icon-badge"><span class="plus-sign">+</span><span class="badge-num"><?php echo number_format($member['today']);?></span></span>
							<?php } ?>
						</span>
						<span class="icon-label ellipsis">투데이뷰</span>
					</a>
				</div>
			</div>
		</div>
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['isearch'];?>">
						<span class="service-icon-box"><i class="fa fa-search"></i></span>
						<span class="icon-label ellipsis">상품찾기</span>
					</a>
				</div>
			</div>
		</div>
		<div class="col-xs-3 col">
			<div class="content-box text-center">
				<div class="heading">
					<a href="<?php echo $at_href['wishlist'];?>">
						<span class="service-icon-box"><i class="fa fa-heart"></i></span>
						<span class="icon-label ellipsis">위시리스트</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
