/*
Theme Name: 코딩센터
Theme URI: https://codingcenter.co.kr
Author: 코딩센터
Description: 비전공 개발 학습·취업 가이드 미디어 커스텀 테마. 홈(중립 가이드) + 포스트(가이드 글) 구조.
Version: 1.0
Text Domain: codingcenter
*/

:root{
  --accent:#5b4ce0; --accent-dark:#4a3cc4; --tint:#efedfd; --tint2:#f7f6fe;
  --grn:#0e9f6e; --grn-t:#e7f7f0; --org:#e8833a; --org-t:#fdf0e4; --blu:#3b7ae0; --blu-t:#e8f0fc;
  --ink:#191527; --sec:#454154; --muted:#928da3;
  --bg:#ffffff; --soft:#f7f6fc; --card:#ffffff; --border:#ebe9f4; --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.62; word-break:keep-all; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.read{max-width:720px; margin:0 auto; padding:0 24px;}
.btn{display:inline-flex; align-items:center; gap:7px; padding:13px 22px; border-radius:11px; font-weight:600; font-size:15px; cursor:pointer; transition:.15s;}
.btn-primary{background:var(--accent); color:#fff; padding:9px 17px; border-radius:10px; font-weight:600; font-size:14px;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.badge{display:inline-block; font-size:13px; font-weight:600; color:var(--accent); background:var(--tint); padding:7px 14px; border-radius:20px;}
section{padding:46px 0;}
h2.sec{font-size:24px; font-weight:700; letter-spacing:-.5px;}
.lead{font-size:15px; color:var(--sec); margin-top:8px; max-width:620px;}

.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border);}
.site-header .nav{display:flex; align-items:center; justify-content:space-between; height:66px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo .mark{width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;}
.logo .mark svg{width:19px; height:19px;}
.logo b{font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--ink);}
.logo .tag{font-size:11.5px; color:var(--muted); display:block; margin-top:-2px;}
.nav-links{display:flex; align-items:center; gap:26px; font-size:15px; color:var(--sec); list-style:none;}
.nav-links a:hover{color:var(--ink);}

.hero{background:linear-gradient(180deg,#fbfaff 0%, #ffffff 100%); border-bottom:1px solid var(--border);}
.hero .wrap{padding:54px 24px 60px; display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center;}
.hero h1{font-size:46px; line-height:1.22; font-weight:800; letter-spacing:-1.6px; margin:18px 0; color:var(--ink);}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p{font-size:16.5px; color:var(--sec); margin-bottom:28px;}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap;}

.rmcard{background:#fff; border:1px solid var(--border); border-radius:20px; padding:26px 28px; box-shadow:0 12px 40px rgba(91,76,224,.07);}
.rm{display:grid; grid-template-columns:46px 116px 1fr; gap:16px; align-items:flex-start; position:relative; padding-bottom:22px;}
.rm:last-child{padding-bottom:0;}
.rm:not(:last-child)::before{content:''; position:absolute; left:22px; top:48px; bottom:2px; width:2px; background:#ece9f8;}
.rm-ic{width:46px; height:46px; border-radius:12px; background:var(--tint); color:var(--accent); display:flex; align-items:center; justify-content:center; z-index:1;}
.rm-ic svg{width:24px; height:24px;}
.rm-tt{font-weight:700; font-size:16px; padding-top:12px;}
.rm-ds{font-size:13px; color:var(--muted); padding-top:10px; line-height:1.55;}

.grid{display:grid; gap:18px;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:repeat(2,1fr);}
.jcard{background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; transition:.15s;}
.jcard:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:0 10px 30px rgba(91,76,224,.08);}
.jic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.jic svg{width:24px; height:24px;}
.jic.v{background:var(--tint); color:var(--accent);} .jic.g{background:var(--grn-t); color:var(--grn);}
.jic.o{background:var(--org-t); color:var(--org);} .jic.b{background:var(--blu-t); color:var(--blu);}
.jcard h3{font-size:17px; font-weight:700; margin-bottom:6px;}
.jcard .desc{font-size:13.5px; color:var(--sec); min-height:38px;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 16px;}
.tags span{font-size:11.5px; color:var(--sec); background:var(--soft); border:1px solid var(--border); padding:4px 9px; border-radius:7px;}
.jfoot{display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--border); padding-top:13px;}
.dur{display:flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted);}
.dur svg{width:14px; height:14px;}
.jfoot a{font-size:13px; font-weight:600; color:var(--accent); white-space:nowrap;}

.cmp{background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px;}
.cmp h3{font-size:16.5px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:9px;}
.cmp h3 svg{width:20px; height:20px; color:var(--accent);}
.cmp ul{list-style:none;}
.cmp li{display:flex; gap:9px; font-size:14px; color:var(--sec); padding:6px 0; align-items:flex-start;}
.cmp li svg{color:var(--accent); width:18px; height:18px; flex-shrink:0; margin-top:1px;}

.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:start;}
.faq-item{background:#fff; border:1px solid var(--border); border-radius:13px; overflow:hidden;}
.faq-q{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:18px 20px; cursor:pointer; font-weight:600; font-size:15px;}
.faq-q svg{width:20px; height:20px; transition:.2s; color:var(--muted); flex-shrink:0;}
.faq-item.open .faq-q > svg{transform:rotate(180deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--sec); font-size:14.5px;}
.faq-a div{padding:0 20px 18px;}

.gcard{background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; transition:.15s; display:block;}
.gcard:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 24px rgba(91,76,224,.07);}
.gcard .k{display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:var(--tint); padding:3px 9px; border-radius:6px;}
.gcard h4{font-size:15px; font-weight:700; margin:12px 0 6px; line-height:1.45;}
.gcard p{font-size:13px; color:var(--muted); line-height:1.55;}

.site-footer{border-top:1px solid var(--border); background:var(--soft); margin-top:22px;}
.site-footer .wrap{padding:30px 24px 46px;}
.site-footer .fb{font-weight:700; font-size:14px;}
.site-footer .ftag{font-size:13px; color:var(--sec); margin-top:4px;}
.site-footer .disc-foot{font-size:12.5px; color:var(--muted); line-height:1.7; margin-top:14px;}

.ahead{padding:40px 0 26px; border-bottom:1px solid var(--border);}
.crumb{font-size:13px; color:var(--muted); margin-bottom:18px;}
.crumb a:hover{color:var(--accent);}
.cat{display:inline-block; font-size:12.5px; font-weight:700; color:var(--accent); background:var(--tint); padding:5px 12px; border-radius:7px;}
.ahead h1{font-size:29px; line-height:1.3; font-weight:800; letter-spacing:-1.2px; margin:16px 0; color:var(--ink);}
.meta{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--muted); flex-wrap:wrap;}
.meta .dot{width:3px; height:3px; border-radius:50%; background:#cfcadd;}
.post-lead{font-size:17px; color:var(--sec); margin-top:22px; line-height:1.75;}

.body{padding-bottom:10px;}
.body h2{font-size:20px; font-weight:700; letter-spacing:-.4px; margin:40px 0 12px; padding-top:6px;}
.body h3{font-size:17px; font-weight:700; margin:24px 0 8px;}
.body p{font-size:16px; color:#2f2b3d; margin:0 0 16px; line-height:1.85;}
.body strong{font-weight:700; color:var(--ink);}
.body ul{margin:0 0 18px; padding-left:2px; list-style:none;}
.body ul li{position:relative; padding:5px 0 5px 26px; font-size:15.5px; color:#2f2b3d;}
.body ul li::before{content:''; position:absolute; left:4px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.body a{color:var(--accent); text-decoration:underline;}

.toc{background:var(--soft); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin:34px 0;}
.toc b{font-size:13px; color:var(--muted); display:block; margin-bottom:10px;}
.toc ol{list-style:none; counter-reset:t;}
.toc li{counter-increment:t; font-size:14.5px; color:var(--sec); padding:5px 0;}
.toc li::before{content:counter(t); display:inline-flex; width:20px; height:20px; border-radius:6px; background:#fff; border:1px solid var(--border); color:var(--accent); font-size:11px; font-weight:700; align-items:center; justify-content:center; margin-right:10px;}
.toc a:hover{color:var(--accent);}

.infobox{background:var(--soft); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; padding:16px 20px; margin:22px 0; font-size:14.5px; color:var(--sec);}
.infobox b{color:var(--ink);}
.warn{background:#fff8ed; border-left:3px solid #e8a33a; border-radius:0 12px 12px 0; padding:16px 20px; margin:22px 0; font-size:14.5px; color:#7a5a1e;}
.warn b{color:#5e4410;}
.callout{background:var(--tint2); border:1px solid #e3def8; border-radius:16px; padding:24px; margin:28px 0;}
.callout .lbl{display:inline-block; font-size:12px; font-weight:700; color:var(--accent); background:#fff; border:1px solid #e3def8; padding:4px 11px; border-radius:7px; margin-bottom:14px;}
.callout h4{font-size:18px; font-weight:700; margin-bottom:6px;}
.callout .ft{display:flex; gap:9px; font-size:14.5px; color:var(--sec); padding:6px 0; align-items:flex-start;}
.callout .ft svg{color:var(--grn); flex-shrink:0; margin-top:3px; width:17px; height:17px;}
.callout .note{font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.6;}
.ctab,.langtable{width:100%; border-collapse:collapse; margin:18px 0; font-size:14.5px; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.ctab th,.langtable th{background:var(--soft); text-align:left; padding:12px 14px; font-weight:700; font-size:13.5px; color:var(--sec);}
.ctab td,.langtable td{border-top:1px solid var(--border); padding:12px 14px; color:#2f2b3d;}
.ctab td:first-child,.langtable td:first-child{font-weight:700;}

.related{background:var(--soft); border-top:1px solid var(--border); margin-top:50px;}
.related .wrap{padding:44px 24px;}
.related h3{font-size:20px; font-weight:700; margin-bottom:18px;}
.rgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.rcard{background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; transition:.15s;}
.rcard:hover{border-color:var(--accent); transform:translateY(-2px);}
.rcard .k{font-size:11px; font-weight:700; color:var(--accent); background:var(--tint); padding:3px 9px; border-radius:6px;}
.rcard h4{font-size:15px; font-weight:700; margin:12px 0 0; line-height:1.45;}
.disc{font-size:12.5px; color:var(--muted); line-height:1.7; border-top:1px solid var(--border); margin-top:36px; padding-top:20px;}

.archead{padding:40px 0 8px;}
.archead h1{font-size:28px; font-weight:800; letter-spacing:-1px;}
.archead p{color:var(--sec); margin-top:8px;}

@media(max-width:860px){
  .nav-links a:not(.btn-primary){display:none;}
  .hero .wrap{grid-template-columns:1fr; gap:30px; padding:36px 24px 44px;}
  .hero h1{font-size:32px; letter-spacing:-1px;}
  .cols-4,.cols-3{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  section{padding:36px 0;}
  .ahead h1{font-size:23px; line-height:1.35;}
  .rgrid{grid-template-columns:1fr;}
}
@media(max-width:520px){ .cols-4,.cols-3,.cols-2{grid-template-columns:1fr;} .rm{grid-template-columns:46px 1fr;} .rm-ds{display:none;} }