@charset "UTF-8";
/* =========================================================================
   도장통 djt2026 — customerCenter.php (고객센터) 전용 스타일
   -------------------------------------------------------------------------
   · 2026-07-01: customerCenter.php 인라인 <style id="djt-cs-style"> 를 분리.
   · 반응형은 Tailwind CSS 기본 브레이크포인트 기준: md 768 / sm 640
     (기존 900px 단일 분기점을 md 768 로 재정렬 + sm 640 단계 추가)
   ========================================================================= */
.djt-cs{max-width:1280px;margin:0 auto;padding:24px 30px 60px;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;color:#16212E;}
.djt-cs *{box-sizing:border-box;}
.djt-cs-head{margin:0 0 24px;}
.djt-cs-head h1{font-size:26px;font-weight:800;color:#0B2A4A;margin:0 0 6px;letter-spacing:-.01em;}
.djt-cs-head p{font-size:14.5px;color:#6B7686;margin:0;}
.djt-cs-head .em{color:#1D5FBF;font-weight:700;}
/* 액션 카드 3 */
.djt-cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px;}
.djt-cs-card{display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:24px 24px 22px;text-decoration:none;color:#16212E;transition:border-color .15s,box-shadow .15s,transform .15s;min-height:188px;}
a.djt-cs-card:hover{border-color:#1D5FBF;box-shadow:0 16px 30px -20px rgba(29,95,191,.45);transform:translateY(-2px);}
.djt-cs-card .ico{width:48px;height:48px;border-radius:12px;background:#E8F0FE;color:#1D5FBF;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;}
.djt-cs-card h3{font-size:17px;font-weight:800;color:#0B2A4A;margin:0 0 8px;}
.djt-cs-card p{font-size:13.5px;color:#6B7686;line-height:1.55;margin:0 0 16px;flex:1;}
.djt-cs-card .go{font-size:13px;font-weight:700;color:#1D5FBF;display:inline-flex;align-items:center;gap:5px;}
.djt-cs-card.time{background:linear-gradient(135deg,#0B2A4A,#1D5FBF);border:none;color:#fff;}
.djt-cs-card.time .ico{background:rgba(255,255,255,.16);color:#fff;}
.djt-cs-card.time h3{color:#fff;}
.djt-cs-card.time .t-row{display:flex;justify-content:space-between;width:100%;font-size:14px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.18);}
.djt-cs-card.time .t-row:last-child{border-bottom:none;}
.djt-cs-card.time .t-row span{color:#CFE0F5;}
.djt-cs-card.time .t-row b{font-weight:800;}
/* 하단 2분할: 공지 + 연락처 */
.djt-cs-grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
.djt-cs-box{background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:22px 24px;}
.djt-cs-box h2{font-size:16px;font-weight:800;color:#0B2A4A;margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline;}
.djt-cs-box h2 a{font-size:13px;font-weight:700;color:#1D5FBF;text-decoration:none;}
.djt-cs-notice{list-style:none;margin:0;padding:0;}
.djt-cs-notice li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed #E3E8EF;}
.djt-cs-notice li:last-child{border-bottom:none;}
.djt-cs-notice li a{font-size:14px;color:#16212E;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.djt-cs-notice li a:hover{color:#1D5FBF;}
.djt-cs-notice li .date{flex:none;font-size:12.5px;color:#9aa4b2;}
.djt-cs-notice .empty{color:#9aa4b2;font-size:13.5px;padding:10px 0;}
.djt-cs-contact{list-style:none;margin:0;padding:0;}
.djt-cs-contact li{display:flex;gap:10px;padding:9px 0;font-size:13.5px;color:#16212E;line-height:1.5;border-bottom:1px dashed #E3E8EF;}
.djt-cs-contact li:last-child{border-bottom:none;}
.djt-cs-contact li i{flex:none;width:20px;color:#1D5FBF;text-align:center;margin-top:2px;}
.djt-cs-contact li .k{flex:none;width:54px;color:#6B7686;font-weight:600;}

/* ════════════════════════════════════════════════════════════════════════
   반응형 (Tailwind CSS 브레이크포인트 기준: md 768 / sm 640)
════════════════════════════════════════════════════════════════════════ */

/* ---- md 미만 (<768px): 카드 1열, 2분할 그리드 1열 ---- */
@media (max-width:767px){
  .djt-cs{padding:18px 16px 44px;}
  .djt-cs-head h1{font-size:21px;}
  .djt-cs-cards{grid-template-columns:1fr;}
  .djt-cs-grid2{grid-template-columns:1fr;}
  .djt-cs-card{min-height:0;}
}

/* ---- sm 미만 (<640px): 폰 화면 — 카드/박스 여백 축소 ---- */
@media (max-width:639px){
  .djt-cs-head h1{font-size:19px;}
  .djt-cs-card{padding:18px 16px 16px;}
  .djt-cs-box{padding:16px 14px;}
  .djt-cs-contact li .k{width:44px;font-size:12.5px;}
}