/* =========================================================
3JAK CATALOG COMMON CSS
SHOPPING / GONGGU / AUCTION / TENDER
사이트 공통 디자인 시스템으로 색상/톤 통일 (클래스명·구조는 100% 유지)
========================================================= */

:root{
	--bg:#f5f6f8;
	--card:#ffffff;
	--border:#e6e8ec;
	--text:#1c2230;
	--text-muted:#707786;
	--accent:#2f6fed;
	--accent-dark:#1c4fd6;
	--accent-light:#eaf1ff;
	--danger:#e6483c;
	--warn:#e8720c;
	--warn-light:#fff3e8;
	--radius:14px;
	--shadow:0 1px 3px rgba(15,23,42,.06), 0 2px 10px rgba(15,23,42,.04);
	--shadow-md:0 6px 18px rgba(15,23,42,.08);
	--font:"Pretendard","Malgun Gothic","맑은 고딕",-apple-system,BlinkMacSystemFont,sans-serif;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:var(--font);
font-size:14px;
color:var(--text);
background:var(--bg);
}

/* =========================================================
LAYOUT
========================================================= */

.container,
.catalog-wrap{
width:980px;
margin:0 auto;
}

/* =========================================================
TITLE BAR
========================================================= */

.product-title-bar{
background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
border-radius:var(--radius);
padding:28px 35px;
margin-bottom:25px;
color:#fff;
box-shadow:var(--shadow);
}

.product-title-bar h2{
font-size:32px;
font-weight:800;
letter-spacing:-1px;
}

/* =========================================================
CARD
========================================================= */

.info-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
margin-bottom:20px;
box-shadow:var(--shadow);
transition:box-shadow .2s ease;
}

.info-card:hover{
box-shadow:var(--shadow-md);
}

.info-card h3{
padding:15px 20px;
background:var(--accent);
color:#fff;
font-size:16px;
font-weight:700;
text-align:center;
}

/* =========================================================
INFO ROW
========================================================= */

.info-row{
display:flex;
align-items:center;
padding:14px 18px;
border-bottom:1px solid var(--border);
}

.info-row:last-child{
border-bottom:none;
}

.info-label{
width:130px;
font-weight:700;
color:var(--text-muted);
}

.info-value{
flex:1;
color:var(--text);
line-height:1.8;
}

/* =========================================================
AUCTION TIMER
========================================================= */

.auction-timer{
background:var(--warn-light);
border-top:1px solid #ffe0b2;
padding:18px;
margin:0;
text-align:center;
}

.timer-title{
color:var(--warn);
font-weight:700;
margin-bottom:6px;
}

.timer-value{
font-size:28px;
font-weight:800;
color:var(--danger);
}

/* =========================================================
PRICE PANEL
========================================================= */

.price-panel{
display:flex;
border:1px solid var(--border);
border-radius:var(--radius);
overflow:hidden;
background:#fafbfc;
}

.price-box{
flex:1;
text-align:center;
padding:25px;
}

.price-box + .price-box{
border-left:1px solid var(--border);
}

.price-title{
font-size:13px;
color:var(--text-muted);
margin-bottom:10px;
}

.price-start{
color:var(--text);
font-size:26px;
font-weight:800;
}

.price-highlight{
color:var(--danger);
font-size:40px;
font-weight:800;
}

.price-buy{
color:var(--accent);
font-size:26px;
font-weight:800;
}

/* =========================================================
IMAGE
========================================================= */

.product-image{
width:100%;
max-width:100%;
height:auto;
border-radius:12px;
transition:transform .2s ease;
}

.product-image:hover{
transform:scale(1.02);
}

/* =========================================================
TABLE
========================================================= */

.stock-table{
width:100%;
border-collapse:separate;
border-spacing:0;
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--border);
}

.stock-table th{
background:var(--accent);
color:#fff;
font-size:13.5px;
font-weight:700;
padding:12px;
}

.stock-table td{
border-top:1px solid var(--border);
padding:12px;
font-size:14px;
transition:background .15s;
}

.stock-table tr:nth-child(even){
background:#fafbfc;
}

.stock-table tr:hover{
background:var(--accent-light);
}

/* =========================================================
FORM
========================================================= */

input[type=text],
input[type=password],
select,
textarea{
border:1px solid var(--border);
border-radius:8px;
padding:8px 10px;
font-size:14px;
font-family:var(--font);
}

input[type=text]:focus,
input[type=password]:focus,
select:focus,
textarea:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-light);
outline:none;
}

/* =========================================================
BUTTON
========================================================= */

.btn{
display:inline-block;
text-decoration:none;
border-radius:10px;
padding:14px 30px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:filter .15s ease, background .15s ease;
border:1px solid var(--border);
}

.btn-primary{
background:var(--accent);
color:#fff;
border:none;
}

.btn-primary:hover{
filter:brightness(1.06);
}

.btn-danger{
background:var(--danger);
color:#fff;
border:none;
box-shadow:var(--shadow);
}

.btn-danger:hover{
filter:brightness(1.06);
}

.btn-secondary{
background:#fff;
border:1px solid var(--border);
color:var(--text);
}

.btn-secondary:hover{
background:#f7f8fa;
}

/* =========================================================
ACTION BUTTONS
========================================================= */

.action-buttons{
text-align:center;
margin:25px 0;
}

.action-buttons .btn{
margin:0 4px;
}

/* =========================================================
PREMIUM EFFECT (그림자/라운드 유틸리티 - 톤만 완화)
========================================================= */

.shadow-light{
box-shadow:var(--shadow);
}

.shadow-medium{
box-shadow:var(--shadow-md);
}

.shadow-strong{
box-shadow:0 10px 24px rgba(15,23,42,.12);
}

.round-10{
border-radius:10px;
}

.round-15{
border-radius:15px;
}

.round-20{
border-radius:20px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media screen and (max-width:1024px){

.container,
.catalog-wrap{
    width:100%;
    padding:10px;
}

.price-panel{
    display:block;
}

.price-box{
    border-bottom:1px solid var(--border);
}

.info-row{
    display:block;
}

.info-label{
    width:auto;
    margin-bottom:5px;
}

.info-card{
    flex:none !important;
    width:100%;
}

.flex-container{
    flex-direction:column;
}

.gonggu-dashboard,
.gonggu-kpi-banner{
    grid-template-columns:1fr 1fr;
}

.gonggu-floating-cta{
    left:10px;
    right:10px;
    text-align:center;
}

}

.product-image-box{
display:flex;
justify-content:center;
align-items:center;
min-height:320px;
border:1px solid var(--border);
border-radius:12px;
overflow:hidden;
background:var(--card);
}

.highlight-row{
background:var(--warn-light);
border-left:5px solid var(--warn);
}

.payment-badge{
display:inline-block;
padding:4px 10px;
margin:2px;
border-radius:20px;
background:var(--accent-light);
color:var(--accent);
font-size:12px;
font-weight:700;
}

.product-name{
color:var(--text);
font-size:18px;
font-weight:800;
}

.auction-count{
color:var(--danger);
font-size:20px;
font-weight:800;
}

.auction-close{
color:var(--danger);
font-weight:700;
}

/* =========================================================
GONGGU (공동구매) 전용 스타일 - 색상만 공통 팔레트로 통일
========================================================= */

.option-title{
font-weight:700;
color:var(--accent);
}

.qty-input{
width:70px;
height:38px;
border:1px solid var(--border);
border-radius:8px;
text-align:center;
font-size:15px;
font-weight:700;
font-family:var(--font);
}

.qty-input:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-light);
outline:none;
}

.btn-gonggu{
display:inline-block;
background:var(--warn);
color:#fff;
height:56px;
min-width:220px;
line-height:56px;
padding:0 30px;
font-size:17px;
font-weight:800;
border-radius:var(--radius);
box-shadow:var(--shadow-md);
text-decoration:none;
transition:filter .15s ease;
}

.btn-gonggu:hover{
filter:brightness(1.05);
}

.gonggu-qty{
color:var(--danger);
font-size:18px;
font-weight:800;
}

.gonggu-status{
background:var(--warn-light);
border-left:4px solid var(--warn);
padding:12px;
border-radius:8px;
}

.gonggu-option-card{
background:var(--card);
border:1px solid var(--border);
border-radius:var(--radius);
padding:18px;
margin-bottom:12px;
transition:box-shadow .2s ease, border-color .2s ease;
box-shadow:var(--shadow);
}

.gonggu-option-card:hover{
box-shadow:var(--shadow-md);
border-color:var(--accent);
}

.gonggu-option-name{
font-size:17px;
font-weight:800;
color:var(--accent);
}

.gonggu-kpi{ display:flex; gap:15px; margin:15px 0; }
.gonggu-kpi .item{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:15px; text-align:center; box-shadow:var(--shadow); }
.gonggu-kpi .num{ font-size:22px; font-weight:800; color:var(--warn); }

.gonggu-progress{ height:16px; background:var(--border); border-radius:30px; overflow:hidden; margin:10px 0 20px; }
.gonggu-progress-bar{ height:100%; background:var(--warn); }
.gonggu-hero{ background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color:#fff; padding:20px; border-radius:var(--radius); margin-bottom:20px; }
.gonggu-badge{ display:inline-block; padding:6px 12px; border-radius:20px; background:var(--warn); color:#fff; font-weight:700; }

.gonggu-dashboard{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:20px 0; }
.gonggu-stat{ background:var(--card); border-radius:var(--radius); padding:18px; text-align:center; border:1px solid var(--border); box-shadow:var(--shadow); }
.gonggu-stat-title{ font-size:13px; color:var(--text-muted); margin-bottom:8px; }
.gonggu-stat-value{ font-size:26px; font-weight:800; color:var(--text); }

.gonggu-cta{ background:var(--warn); color:#fff; padding:18px; border-radius:var(--radius); text-align:center; font-size:20px; font-weight:800; box-shadow:var(--shadow-md); margin-top:20px; }

.option-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); transition:box-shadow .2s ease; }
.option-card:hover{ box-shadow:var(--shadow-md); }

.gonggu-hero-banner{ background:linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color:#fff; padding:28px; border-radius:var(--radius); margin-bottom:20px; box-shadow:var(--shadow); }
.gonggu-hero-title{ font-size:28px; font-weight:800; margin-bottom:8px; }
.gonggu-live-status{ display:flex; gap:12px; margin:15px 0; flex-wrap:wrap; }
.gonggu-live-pill{ background:#ffffff; border:1px solid var(--border); border-radius:30px; padding:8px 14px; font-weight:700; color:var(--text); }
.gonggu-option-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.gonggu-option-premium{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); transition:box-shadow .2s ease, border-color .2s ease; }
.gonggu-option-premium:hover{ border-color:var(--accent); box-shadow:var(--shadow-md); }

.gonggu-sticky-buy{ position:sticky; bottom:10px; z-index:99; background:var(--card); padding:12px; border-radius:var(--radius); box-shadow:var(--shadow-md); }
.gonggu-section-title{ font-size:22px; font-weight:800; margin:25px 0 15px; color:var(--text); border-left:5px solid var(--accent); padding-left:12px; }
.gonggu-kpi-banner{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.gonggu-kpi-box{ background:var(--card); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow); }
.gonggu-kpi-number{ font-size:28px; font-weight:800; color:var(--accent); }
.gonggu-deadline-alert{ background:var(--warn-light); border:1px solid #fdba74; color:var(--warn); padding:14px; border-radius:var(--radius); font-weight:700; margin:15px 0; }
.gonggu-floating-cta{ position:fixed; right:20px; bottom:20px; z-index:999; padding:16px 22px; border-radius:50px; background:var(--warn); color:#fff; font-weight:800; box-shadow:var(--shadow-md); text-decoration:none; }

.flex-container{ display:flex; gap:20px; margin-bottom:20px; align-items:stretch; }