:root{
  --bg:#fbfbff;
  --bg2:#fff7ed;
  --card: rgba(255,255,255,0.90);
  --border: rgba(30,41,59,0.14);
  --text:#111827;
  --muted:#475569;
  --accent:#7c3aed;
  --accent2:#fb7185;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:
    radial-gradient(circle at top, rgba(124,58,237,.10), transparent 55%),
    radial-gradient(circle at 20% 10%, rgba(251,113,133,.10), transparent 45%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', sans-serif;
}

.container{width:min(980px, 92vw); margin:0 auto; padding:32px 0 80px;}

.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px;}
.brand{font-weight:900; letter-spacing:.01em; font-size:18px;}
.brand a{color:var(--text); text-decoration:none;}
.nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.nav a{color:var(--muted); text-decoration:none; font-size:13px; padding:6px 10px; border:1px solid transparent; border-radius:999px; background:transparent;}
.nav a:hover{border-color:var(--border); color:var(--text); background:rgba(255,255,255,.7)}
.nav a.nav-home{color:#fff; font-weight:900; background:linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent;}
.nav a.nav-home:hover{filter:brightness(1.02);}

.hero{padding:18px 18px 10px; border:1px solid var(--border); background:linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.65)); border-radius:18px; margin-bottom:18px; box-shadow: 0 12px 30px rgba(15,23,42,.06);}
.hero h1{margin:0 0 6px; font-size:26px;}
.hero p{margin:0; color:var(--muted); line-height:1.5}

.controls{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px;}
.input{flex:1; min-width:240px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.92); color:var(--text); outline:none;}
.input::placeholder{color:rgba(71,85,105,.85)}

.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px;}
.card{border:1px solid var(--border); background:var(--card); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 12px 30px rgba(15,23,42,.08);}
.thumb{aspect-ratio: 16/9; background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(251,113,133,.10)); border-bottom:1px solid var(--border); display:block;}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.card-body{padding:14px; display:flex; flex-direction:column; gap:10px;}
.title{font-size:16px; font-weight:850; margin:0; line-height:1.25;}
.meta{color:var(--muted); font-size:12px; display:flex; gap:10px; flex-wrap:wrap;}
.tags{display:flex; flex-wrap:wrap; gap:6px;}
.tag{font-size:12px; color:var(--accent); background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.18); padding:3px 8px; border-radius:999px;}
.card a{color:inherit; text-decoration:none;}

/* tag bar (index) */
.tagbar{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px;}
.tagbar .chip{font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.78); color:var(--muted); text-decoration:none;}
.tagbar .chip:hover{border-color:rgba(124,58,237,.28); color:var(--text)}
.tagbar .chip.active{background:rgba(124,58,237,.10); border-color:rgba(124,58,237,.22); color:var(--accent)}

.post{border:1px solid var(--border); background:rgba(255,255,255,.92); border-radius:18px; padding:22px; box-shadow: 0 12px 30px rgba(15,23,42,.08);}
.post h1{margin:0 0 6px; font-size:28px;}
.post .meta{margin-bottom:14px;}

.prose{line-height:1.75; color:rgba(17,24,39,.96)}
.prose h2{margin-top:28px}
.prose a{color:var(--accent)}
.prose code{background:rgba(15,23,42,.06); padding:2px 6px; border-radius:8px; border:1px solid rgba(15,23,42,.10)}
.prose pre{background:rgba(15,23,42,.06); padding:12px; border-radius:12px; border:1px solid rgba(15,23,42,.10); overflow:auto}
.prose img{max-width:100%; border-radius:14px; border:1px solid rgba(15,23,42,.10)}



/* brunch-like post nav */
.extras{margin-top:22px;}
.navrow{display:flex; justify-content:space-between; gap:18px; padding-top:16px; border-top:1px solid rgba(15,23,42,.12);}
.navlink{flex:1; text-decoration:none; color:var(--text);}
.navlink .cap{display:block; font-size:12px; color:rgba(71,85,105,.90); margin-bottom:6px;}
.navlink .ttl{display:block; font-size:14px; font-weight:800; line-height:1.35; max-height:2.7em; overflow:hidden;}
.navlink.next{text-align:right;}
.navlink.next .cap{justify-content:flex-end;}
.navlink:hover .ttl{color:var(--accent); text-decoration:underline;}

.recobox{margin-top:18px;}
.reco-title{font-size:14px; font-weight:900; margin:0 0 10px; color:var(--text);}
.reco-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.reco-card{display:flex; flex-direction:column; border:1px solid var(--border); background:rgba(255,255,255,.86); border-radius:14px; overflow:hidden; text-decoration:none; color:var(--text);}
.reco-card:hover{border-color:rgba(124,58,237,.28)}
.reco-card .rt{aspect-ratio:16/9; background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(251,113,133,.10)); border-bottom:1px solid var(--border);}
.reco-card .rt img{width:100%; height:100%; object-fit:cover; display:block;}
.reco-card .rb{padding:10px 12px; display:flex; flex-direction:column; gap:6px;}
.reco-card .t{font-size:13px; font-weight:800; line-height:1.35; max-height:2.7em; overflow:hidden;}
.reco-card .m{font-size:12px; color:var(--muted);}

@media (max-width: 860px){
  .reco-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 520px){
  .navrow{flex-direction:column; gap:12px;}
  .navlink.next{text-align:left;}
  .reco-grid{grid-template-columns:1fr;}
}
/* post utilities */
.post-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--border);}
.post-nav a{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--border); background:rgba(255,255,255,.85); padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--text); font-size:13px;}
.post-nav a:hover{border-color:rgba(124,58,237,.28)}

.related{margin-top:14px;}
.related h3{margin:0 0 8px; font-size:14px; color:var(--text)}
.related ul{margin:0; padding-left:18px; color:var(--muted)}
.related a{color:var(--muted); text-decoration:none;}
.related a:hover{color:var(--accent); text-decoration:underline;}




/* comments */
.comments{margin-top:22px; padding-top:18px; border-top:1px solid rgba(15,23,42,.12);}
.comments h3{margin:0 0 10px; font-size:14px; font-weight:900;}

.comment-list{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;}
.comment{border:1px solid var(--border); background:rgba(255,255,255,.86); border-radius:12px; padding:10px 12px;}
.comment .rowline{display:grid; grid-template-columns: 140px 1fr 180px 120px; gap:10px; align-items:start;}
.comment .col{font-size:13px; line-height:1.55;}
.comment .col.name{font-weight:850;}
.comment .col.body{white-space:pre-wrap; word-break:break-word; color:rgba(17,24,39,.96)}
.comment .col.time{font-size:12px; color:var(--muted); text-align:right;}
.comment .col.actions{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}

.comment-form{border:1px solid var(--border); background:rgba(255,255,255,.75); border-radius:14px; padding:12px;}
.comment-form .row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;}
.comment-form .row-wide{margin-bottom:10px;}
.comment-form input,.comment-form textarea{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:rgba(255,255,255,.92); color:var(--text); outline:none;}
.comment-form input{flex:0 0 220px;}
.comment-form textarea{flex:1; width:100%; min-height:90px; resize:vertical;}
.comment-form .submit{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.comment-form .hint{font-size:12px; color:var(--muted);}

.cbtn{font-size:12px; padding:7px 10px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.92); cursor:pointer;}
.cbtn:hover{border-color:rgba(124,58,237,.28)}
.cbtn.primary{background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.25); color:var(--accent); font-weight:800;}
.cbtn.danger{background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.22); color:rgba(185,28,28,1); font-weight:800;}

@media (max-width: 860px){
  .comment .rowline{grid-template-columns: 120px 1fr;}
  .comment .col.time{grid-column: 1 / -1; text-align:left;}
  .comment .col.actions{grid-column: 1 / -1; justify-content:flex-start;}
  .comment-form input{flex:1; min-width:160px;}
}

.pager{display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:16px;}
.pager a{font-size:12px; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.82); color:var(--muted); text-decoration:none;}
.pager a:hover{border-color:rgba(124,58,237,.28); color:var(--text)}
.pager a.active{background:rgba(124,58,237,.12); border-color:rgba(124,58,237,.25); color:var(--accent); font-weight:900;}
.pager .sep{color:rgba(71,85,105,.55); padding:0 2px;}

.footer{margin-top:22px; color:var(--muted); font-size:12px;}
.notice{border:1px dashed rgba(15,23,42,.18); padding:12px; border-radius:12px; color:var(--muted); font-size:12px; background:rgba(255,255,255,.65)}

@media (max-width: 520px){
  .hero h1{font-size:22px}
  .post{padding:16px}
}