@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');

:root{
  --bg:#F7F7F4;
  --white:#fff;
  --orange:#FF6B35;
  --orange-l:#FFF3EE;
  --van:#3B5BDB;
  --van-l:#EEF2FF;
  --mkt:#0EA5E9;
  --mkt-l:#F0F9FF;
  --dark:#111827;
  --dark2:#1e293b;
  --gray:#6B7280;
  --gray2:#9CA3AF;
  --gray-l:#F3F4F6;
  --border:#E5E7EB;
  --r:14px;
  --sh:0 2px 20px rgba(0,0,0,.07);
  --font:'Noto Sans KR',-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--dark);font-size:16px;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* ===== TOPBAR ===== */
#topbar{background:var(--dark2);height:36px;overflow:hidden;position:sticky;top:0;z-index:300}
.tb-inner{max-width:1280px;margin:0 auto;padding:0 20px;height:36px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.tb-inner::-webkit-scrollbar{display:none}
.tb-left{display:flex;align-items:center;gap:6px;flex-shrink:0}
.tb-tag{font-size:.68em;font-weight:700;padding:2px 9px;border-radius:10px;white-space:nowrap;flex-shrink:0}
.tb-tag.van{background:var(--van);color:#fff}
.tb-tag.mkt{background:var(--mkt);color:#fff}
.tb-div{width:1px;height:14px;background:rgba(255,255,255,.18);margin:0 4px;flex-shrink:0}
.tb-left a{color:rgba(255,255,255,.6);font-size:.72em;padding:3px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;transition:all .18s;flex-shrink:0}
.tb-left a:hover{color:#fff;background:var(--orange);border-color:var(--orange)}

/* ===== HEADER ===== */
#header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:36px;z-index:200;box-shadow:0 1px 10px rgba(0,0,0,.05)}
.hd-inner{max-width:1280px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:62px}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:1.15em;letter-spacing:-.02em}
.logo-mark{color:var(--orange);font-size:1.2em}
.gnb{display:flex;gap:28px}
.gnb a{font-size:.9em;font-weight:600;color:var(--gray);transition:color .2s;position:relative;padding-bottom:2px}
.gnb a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--orange);transition:width .2s;border-radius:2px}
.gnb a:hover{color:var(--orange)}
.gnb a:hover::after{width:100%}
.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hbg span{display:block;width:22px;height:2px;background:var(--dark);border-radius:2px;transition:all .3s}
.hbg.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hbg.on span:nth-child(2){opacity:0}
.hbg.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== DRAWER ===== */
#drawer{display:none;flex-direction:column;background:var(--white);border-bottom:2px solid var(--orange);position:sticky;top:98px;z-index:190;max-height:60vh;overflow-y:auto}
#drawer.open{display:flex}
#drawer a{padding:13px 20px;font-size:.92em;color:var(--dark);border-bottom:1px solid var(--gray-l);font-weight:500;transition:background .15s}
#drawer a:hover{background:var(--orange-l);color:var(--orange)}

/* ===== LAYOUT ===== */
#wrap{max-width:1280px;margin:32px auto;padding:0 20px;display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}

/* ===== 카드 목록 ===== */
.card{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);border:1px solid var(--border);margin-bottom:22px;transition:transform .22s,box-shadow .22s}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.1)}
.card-a{display:flex}
.card-img{width:210px;flex-shrink:0;position:relative;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card-img img{transform:scale(1.05)}
.card-cat{position:absolute;top:10px;left:10px;background:var(--orange);color:#fff;font-size:.68em;font-weight:700;padding:3px 10px;border-radius:20px}
.card-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px}
.card-date{font-size:.76em;color:var(--gray2)}
.card-title{font-size:1.06em;font-weight:700;line-height:1.5;color:var(--dark)}
.card-desc{font-size:.87em;color:var(--gray);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-more{font-size:.8em;color:var(--orange);font-weight:700;margin-top:auto}

/* ===== 페이징 ===== */
.paging{display:flex;justify-content:center;gap:6px;margin:28px 0}
.paging a,.paging span{padding:9px 18px;border-radius:10px;font-size:.88em;border:1px solid var(--border);background:var(--white);color:var(--gray);font-weight:500;transition:all .2s}
.paging a:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ===== 단일 포스트 ===== */
.post{background:var(--white);border-radius:var(--r);padding:36px;box-shadow:var(--sh);border:1px solid var(--border)}
.post-hd{margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.post-meta{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.post-cat{background:var(--orange-l);color:var(--orange);font-size:.72em;font-weight:700;padding:3px 12px;border-radius:20px}
.post-date,.post-view{font-size:.78em;color:var(--gray2)}
.post-title{font-size:1.75em;font-weight:900;line-height:1.4;letter-spacing:-.03em}

/* 본문 */
.post-body{font-size:1em;line-height:1.9;color:#222;word-break:keep-all}
.post-body h2{font-size:1.28em;font-weight:800;margin:36px 0 14px;padding-left:13px;border-left:4px solid var(--orange)}
.post-body h3{font-size:1.08em;font-weight:700;margin:26px 0 10px}
.post-body p{margin-bottom:18px}
.post-body img{border-radius:10px;margin:20px auto;box-shadow:var(--sh)}
.post-body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.post-body ul,.post-body ol{margin:14px 0 14px 24px}
.post-body li{margin-bottom:8px}
.post-body blockquote{border-left:4px solid var(--orange);padding:14px 18px;background:var(--orange-l);border-radius:0 10px 10px 0;margin:20px 0;color:var(--gray);font-style:italic}
.post-body pre{background:#1e293b;color:#e2e8f0;padding:20px;border-radius:10px;overflow-x:auto;font-size:.85em;margin:16px 0;line-height:1.6}
.post-body code{background:var(--gray-l);padding:2px 7px;border-radius:5px;font-size:.86em}
.post-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.9em}
.post-body th{background:var(--orange-l);color:var(--orange);font-weight:700;padding:11px 12px;border:1px solid var(--border)}
.post-body td{padding:10px 12px;border:1px solid var(--border)}
.post-body tr:nth-child(even) td{background:var(--gray-l)}

/* ===== 광고 ===== */
.ad-wrap{margin:28px 0;text-align:center;min-height:90px}

/* ===== 태그 ===== */
.post-tags{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0}
.post-tags a{background:var(--gray-l);color:var(--gray);font-size:.77em;padding:5px 13px;border-radius:20px;font-weight:500;transition:all .18s}
.post-tags a:hover{background:var(--orange-l);color:var(--orange)}

/* ===== 공유 ===== */
.share-box{background:var(--orange-l);border-radius:var(--r);padding:22px;text-align:center;margin:24px 0;border:1px solid #ffd9c8}
.share-box p{font-size:.9em;font-weight:600;margin-bottom:12px}
.btn-share{padding:11px 28px;border-radius:10px;font-size:.88em;font-weight:700;cursor:pointer;border:none;background:var(--orange);color:#fff;transition:opacity .2s}
.btn-share:hover{opacity:.85}

/* ===== 이전/다음 ===== */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0}
.pn{background:var(--gray-l);border-radius:10px;padding:15px 17px;display:flex;flex-direction:column;gap:5px;border:1px solid var(--border);transition:all .18s}
.pn:hover{background:var(--orange-l);border-color:#ffd9c8}
.pn.next{text-align:right}
.pn-label{font-size:.72em;color:var(--orange);font-weight:700}
.pn-title{font-size:.84em;color:var(--dark);font-weight:500;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== 댓글 ===== */
.comments{margin-top:36px;padding-top:28px;border-top:2px solid var(--border)}

/* ===== 사이드바 ===== */
#sidebar{position:sticky;top:112px}
.widget{background:var(--white);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--sh);border:1px solid var(--border)}
.w-tit{font-size:.87em;font-weight:800;margin-bottom:14px;padding-bottom:9px;border-bottom:2px solid var(--orange)}
.profile{text-align:center}
.profile-ico{width:54px;height:54px;background:linear-gradient(135deg,var(--orange),#ff8c00);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.35em;margin:0 auto 12px}
.profile strong{font-size:.93em;font-weight:700;display:block;margin-bottom:6px}
.profile p{font-size:.79em;color:var(--gray);line-height:1.6}
.recent{list-style:none}
.recent li{padding:8px 0;border-bottom:1px solid var(--gray-l)}
.recent li:last-child{border-bottom:none}
.recent a{font-size:.83em;color:var(--dark);line-height:1.4;font-weight:500;transition:color .18s}
.recent a:hover{color:var(--orange)}

/* ===== 대형 푸터 ===== */
#footer{margin-top:80px}

/* 브랜드 */
.ft-brand{background:var(--dark2);padding:52px 20px}
.ft-inner{max-width:1280px;margin:0 auto}
.ftb-logo{font-size:1.35em;font-weight:900;color:#fff;margin-bottom:14px}
.ftb-logo::before{content:'✦ ';color:var(--orange)}
.ftb-desc{font-size:.9em;color:rgba(255,255,255,.6);line-height:1.85;max-width:640px;margin-bottom:18px}
.ftb-keywords{display:flex;flex-wrap:wrap;gap:6px}
.ftb-keywords span{background:rgba(255,255,255,.07);color:rgba(255,255,255,.55);font-size:.74em;padding:4px 12px;border-radius:20px;border:1px solid rgba(255,255,255,.1)}

/* 서비스 3열 */
.ft-services{background:var(--bg);padding:60px 20px;border-top:1px solid var(--border)}
.ft-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start}
.fts-col{}
.fts-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:14px;border-bottom:2px solid var(--border)}
.van-head{border-bottom-color:var(--van)}
.mkt-head{border-bottom-color:var(--mkt)}
.blog-head{border-bottom-color:var(--orange)}
.fts-icon{font-size:1.6em;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--gray-l);flex-shrink:0}
.van-head .fts-icon{background:var(--van-l)}
.mkt-head .fts-icon{background:var(--mkt-l)}
.blog-head .fts-icon{background:var(--orange-l)}
.fts-head strong{font-size:.95em;font-weight:800;display:block;margin-bottom:3px}
.fts-head p{font-size:.76em;color:var(--gray)}

/* 콜밴·마켓 리스트 */
.fts-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.fts-list a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--white);border-radius:10px;border:1px solid var(--border);box-shadow:0 1px 8px rgba(0,0,0,.04);transition:all .2s}
.fts-list a:hover{border-color:var(--orange);box-shadow:0 4px 16px rgba(255,107,53,.12);transform:translateY(-2px)}
.van-head+.fts-list a:hover{border-color:var(--van);box-shadow:0 4px 16px rgba(59,91,219,.12)}
.mkt-head+.fts-list a:hover{border-color:var(--mkt);box-shadow:0 4px 16px rgba(14,165,233,.12)}
.fts-list strong{font-size:.88em;font-weight:800;color:var(--dark)}
.fts-list span{font-size:.78em;color:var(--gray);line-height:1.6}

/* 블로그 2x4 그리드 */
.fts-blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ftb-item{display:flex;flex-direction:column;gap:3px;padding:12px;background:var(--white);border-radius:10px;border:1px solid var(--border);transition:all .2s}
.ftb-item:hover{border-color:var(--orange);background:var(--orange-l);transform:translateY(-2px)}
.ftb-item span{font-size:1.2em;line-height:1}
.ftb-item strong{font-size:.8em;font-weight:800;color:var(--dark)}
.ftb-item p{font-size:.72em;color:var(--gray);line-height:1.4}
.ftb-item:hover strong{color:var(--orange)}

/* 카피 */
.ft-copy{background:var(--dark);padding:22px 20px;text-align:center}
.ft-copy-text{color:rgba(255,255,255,.3);font-size:.74em;line-height:1.6}

/* ===== 반응형 ===== */
@media(max-width:1024px){
  #wrap{grid-template-columns:1fr}
  #sidebar{position:static}
  .ft-svc-grid{grid-template-columns:1fr 1fr;gap:28px}
  .fts-col:last-child{grid-column:1/-1}
  .fts-blog-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  .gnb{display:none}
  .hbg{display:flex}
  .card-a{flex-direction:column}
  .card-img{width:100%;height:200px}
  .post{padding:20px 16px}
  .post-title{font-size:1.4em}
  .post-nav{grid-template-columns:1fr}
  .ft-svc-grid{grid-template-columns:1fr;gap:32px}
  .fts-blog-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:480px){
  .fts-blog-grid{grid-template-columns:repeat(2,1fr)}
  .tb-left{gap:4px}
}