/* 에이전트 소식 — 블로그. 실습 노트(notes.css)와 다른 옷을 입힌다.
   모양은 t-auction.co.kr «투놀 이야기»(/stories)를 따른다: 하늘색 머리 띠, 최신 글 하나 크게,
   달별 한 줄 목록, 오른쪽 분류 칸, 글은 680px 한 칼럼 · 17px/1.9 · 소제목 앞 짧은 막대.
   카드·버튼은 2px 연회색 테두리 + 바닥 그림자(누르면 내려앉음).
   서체 나눔스퀘어라운드(SIL OFL 1.1 — hangeul.naver.com 웹폰트 배포본, auction-tools 에서 가져옴. 원문은 fonts/OFL.txt). */

@font-face{font-family:"NanumSquareRound"; font-weight:400; font-display:swap; src:url("../fonts/NanumSquareRoundR.woff2") format("woff2")}
@font-face{font-family:"NanumSquareRound"; font-weight:700; font-display:swap; src:url("../fonts/NanumSquareRoundB.woff2") format("woff2")}
@font-face{font-family:"NanumSquareRound"; font-weight:800; font-display:swap; src:url("../fonts/NanumSquareRoundEB.woff2") format("woff2")}

:root{
  --brand:#1cb0f6; --brand-deep:#1899d6; --brand-soft:#d8f2ff; --brand-text:#1077b5;
  --sun:#ffc800; --sun-soft:#fff4cc;
  --paper:#ffffff; --desk:#f7f7f7; --ink:#111136; --rule:#e5e5e5;
  --ink-80:rgba(17,17,54,0.8); --ink-70:rgba(17,17,54,0.7); --ink-55:rgba(17,17,54,0.55); --ink-45:rgba(17,17,54,0.45);
  --red-soft:#ffe9e7; --red:#c9372c; --green-soft:#e4f6d9; --green:#3d7a1f; --violet-soft:#ece7ff; --violet:#5b3fc4;
  --round:"NanumSquareRound","Apple SD Gothic Neo","Pretendard",sans-serif;
  --mono:"SF Mono","D2Coding",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--round); -webkit-font-smoothing:antialiased; word-break:keep-all}
a{color:inherit}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.loading{padding:120px 24px; text-align:center; color:var(--ink-55)}
.loading.err{color:var(--red)}

/* ── 버튼 · 카드 ───────────────────────────────────────── */
.duo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:3.25rem; padding:0 1.5rem; border-radius:16px; border:0; cursor:pointer;
  font-family:inherit; font-size:.95rem; font-weight:800; letter-spacing:.01em; white-space:nowrap; text-decoration:none;
  transition:transform 80ms ease, box-shadow 80ms ease, filter 120ms ease, background-color 120ms ease;
}
.duo-btn-primary{background:var(--brand); color:#fff; box-shadow:0 4px 0 0 var(--brand-deep)}
.duo-btn-primary:hover{filter:brightness(1.06)}
.duo-btn-primary:active{transform:translateY(4px); box-shadow:none}
.duo-btn-outline{background:var(--paper); color:var(--ink); border:2px solid var(--rule); box-shadow:0 2px 0 0 var(--rule)}
.duo-btn-outline:hover{background:var(--desk)}
.duo-btn-outline:active{transform:translateY(2px); box-shadow:none}
.duo-btn-sm{height:2.5rem; padding:0 1rem; border-radius:12px; font-size:.8rem}
.duo-btn[aria-pressed="true"]{border-color:var(--brand); color:var(--brand-text); box-shadow:0 2px 0 0 var(--brand)}
.duo-card{background:var(--paper); border:2px solid var(--rule); border-radius:16px; box-shadow:0 2px 0 0 var(--rule)}
a.duo-card{display:block; text-decoration:none; color:inherit; cursor:pointer; transition:background-color 120ms ease, transform 80ms ease, box-shadow 80ms ease}
a.duo-card:hover{background:var(--desk)}
a.duo-card:active{transform:translateY(2px); box-shadow:none}
@media (prefers-reduced-motion:reduce){ .duo-btn, a.duo-card{transition:none} }

/* ── 상단 메뉴 ─────────────────────────────────────────── */
.gnb{background:var(--paper)}
body.hub .gnb{background:var(--brand-soft)}
.gnb-in{display:flex; align-items:center; gap:16px; height:76px}
.logo{font-size:20px; font-weight:800; text-decoration:none; white-space:nowrap}
.logo span{margin-left:6px; font-size:14px; font-weight:700; color:var(--ink-55)}
.gnb-menu{display:flex; align-items:center; gap:4px; margin-left:auto}
.gnb-menu a{padding:8px 14px; border-radius:12px; font-size:15px; font-weight:700; color:var(--ink-80); text-decoration:none}
.gnb-menu a:hover{background:rgba(255,255,255,0.6)}
.gnb-menu a[aria-current="page"]{color:var(--brand-text)}
.gnb-menu .duo-btn{margin-left:8px}

/* ── 허브: 머리 띠 ────────────────────────────────────── */
.band{background:var(--brand-soft)}
.band .wrap{padding-top:36px; padding-bottom:48px}
.kicker{
  display:inline-flex; align-items:center; margin:0; padding:4px 14px; border-radius:999px;
  border:2px solid var(--rule); background:var(--paper); font-size:13px; font-weight:700; color:var(--brand-text);
}
.display{margin:20px 0 0; font-size:clamp(2rem, 4.5vw + .5rem, 2.75rem); line-height:1.2; font-weight:800; letter-spacing:-.01em}
.lead{max-width:640px; margin:16px 0 0; font-size:17px; line-height:1.75; color:var(--ink-80)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
.chips .n{margin-left:4px; color:var(--ink-45)}

/* ── 허브: 본문 + 옆 칸 ───────────────────────────────── */
.hub-grid{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:64px; padding-top:48px; padding-bottom:96px}
.featured{display:grid !important; grid-template-columns:minmax(0,5fr) minmax(0,7fr); overflow:hidden}
.featured .cover{min-height:260px; border-radius:0}
.featured-body{display:flex; flex-direction:column; gap:12px; padding:32px}
.featured-body h2{margin:0; font-size:28px; line-height:1.35; font-weight:800}
.featured:hover h2{color:var(--brand-text)}
.featured-body .sum{margin:0; font-size:15px; line-height:1.85; color:var(--ink-70); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.read-more{margin-top:auto; font-size:14px; font-weight:800; color:var(--brand-text)}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:12px; font-weight:700; color:var(--ink-45)}
.meta .cat{color:var(--brand-text)}
.pill-new{border-radius:999px; background:var(--sun); padding:2px 8px; font-size:11px; font-weight:800; color:var(--ink)}

.month{margin-top:48px}
.month-h{display:flex; align-items:center; gap:12px; margin:0; font-size:13px; font-weight:800; color:var(--ink-45)}
.month-h::after{content:""; order:1; flex:1; height:2px; border-radius:2px; background:var(--rule)}
.month-h .n{order:2}
.row{display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:center; padding:24px 0; text-decoration:none; color:inherit; border-bottom:2px solid var(--rule)}
.row:last-child{border-bottom:0}
.row .cover{height:125px; border:2px solid var(--rule); box-shadow:0 2px 0 0 var(--rule)}
.row h3{margin:8px 0 0; font-size:20px; line-height:1.45; font-weight:800}
.row:hover h3{color:var(--brand-text)}
.row .sum{margin:8px 0 0; font-size:15px; line-height:1.7; color:var(--ink-70); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.empty{margin:48px 0; color:var(--ink-55)}

/* 표지 없는 글 — 분류 색 면에 분류 이름 (카드와 글머리가 같이 쓴다) */
.cover{
  display:flex; flex-direction:column; justify-content:flex-end; gap:4px; padding:18px 20px;
  border-radius:16px; background:var(--brand-soft); color:var(--brand-text); overflow:hidden; position:relative;
}
.cover b{font-size:22px; font-weight:800; line-height:1.2}
.cover small{font-size:12px; font-weight:700; opacity:.75}
.cover::before{
  content:""; position:absolute; right:-28px; top:-28px; width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,0.45);
}
.cover.c-sun{background:var(--sun-soft); color:#8a6a00}
.cover.c-green{background:var(--green-soft); color:var(--green)}
.cover.c-violet{background:var(--violet-soft); color:var(--violet)}
.row .cover b{font-size:17px}

.side{display:flex; flex-direction:column; gap:32px; position:sticky; top:24px; align-self:start}
.side-h{margin:0 0 8px; font-size:13px; font-weight:800; color:var(--ink-45)}
.side-cats{list-style:none; margin:0; padding:0}
.side-cats a{display:flex; justify-content:space-between; padding:10px 12px; border-radius:12px; font-size:15px; font-weight:800; text-decoration:none}
.side-cats a:hover, .side-cats a[aria-current="true"]{background:var(--desk)}
.side-cats a[aria-current="true"]{color:var(--brand-text)}
.side-cats .n{font-size:12px; font-weight:700; color:var(--ink-45)}
.author{display:flex; gap:12px; align-items:center}
.avatar{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:16px}
.author b{font-size:15px; font-weight:800}
.author > div > span{display:block; font-size:13px; color:var(--ink-55)}
.cta{padding:20px; border-radius:20px; background:var(--brand-soft)}
.cta b{display:block; font-size:15px; font-weight:800}
.cta p{margin:8px 0 16px; font-size:14px; line-height:1.65; color:var(--ink-70)}

/* ── 글 한 편 ─────────────────────────────────────────── */
.post{max-width:680px; margin:0 auto; padding:40px 24px 120px}
.crumb{margin:0; font-size:13px; font-weight:800; color:var(--ink-45)}
.crumb a{color:var(--brand-text); text-decoration:none}
.crumb a:hover{text-decoration:underline}
.post-title{margin:14px 0 0; font-size:38px; line-height:1.3; font-weight:800; letter-spacing:-.01em}
.post-sum{margin:14px 0 0; font-size:17px; line-height:1.75; color:var(--ink-70)}
.byline{margin-top:24px}
.byline.author > div > span{display:inline; margin-left:6px}
.byline.author > div > .when{display:block; margin:2px 0 0}
.post-cover{margin-top:28px; height:200px}
.post-cover b{font-size:28px}
.toc{margin-top:32px; padding:18px 22px}
.toc-h{margin:0 0 8px; font-size:13px; font-weight:800; color:var(--ink-45)}
.toc ol{margin:0; padding-left:1.3em}
.toc li{margin:4px 0; font-size:15px; font-weight:700}
.toc a{text-decoration:none; color:var(--ink-80)}
.toc a:hover{color:var(--brand-text)}

/* 이 글의 실습 — 글머리 아래 카드 (노트는 로그인해야 열림) */
.practice{margin-top:20px; padding:18px 22px; border-color:var(--sun) !important; box-shadow:0 2px 0 0 var(--sun) !important; background:var(--sun-soft) !important}
a.practice:hover{background:#ffefb3 !important}
.practice-kicker{display:block; font-size:12px; font-weight:800; color:#8a6a00}
.practice-kicker .lock{margin-left:6px; padding:1px 8px; border-radius:999px; background:#fff; color:var(--ink-55)}
.practice b{display:block; margin-top:6px; font-size:18px; line-height:1.45; font-weight:800}
.practice > span:not(.practice-kicker):not(.practice-go){display:block; margin-top:4px; font-size:14px; line-height:1.6; color:var(--ink-70)}
.practice-go{display:block; margin-top:10px; font-size:14px; font-weight:800; color:#8a6a00}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:56px 0 0}
.tags span{padding:4px 12px; border-radius:999px; background:var(--desk); font-size:13px; font-weight:700; color:var(--ink-55)}
.authorbox{display:flex; gap:16px; align-items:flex-start; margin-top:24px; padding:22px}
.authorbox .avatar{width:52px; height:52px; font-size:18px}
.authorbox p{margin:6px 0 0; font-size:14px; line-height:1.7; color:var(--ink-70)}
.post .cta{margin-top:24px; padding:24px}
.cta-actions{display:flex; flex-wrap:wrap; gap:10px}
.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:40px}
.prevnext a{padding:16px 18px}
.prevnext small{display:block; font-size:12px; font-weight:800; color:var(--brand-text)}
.prevnext b{display:block; margin-top:4px; font-size:15px; line-height:1.45; font-weight:800}
.prevnext .next{text-align:right; grid-column:2}

/* ── 본문 조판 (노트 빌드가 만든 HTML 위에 입힌다) ─────────── */
.story-body{margin-top:40px; font-size:17px; line-height:1.9; color:var(--ink); overflow-wrap:anywhere}
.story-body > *{margin-top:0; margin-bottom:0}
.story-body > * + *{margin-top:1.4em}
.story-body li p{margin:0}
.story-body strong{font-weight:800}
.story-body h2{margin:2.4em 0 0; padding-top:.2em; font-size:22px; line-height:1.4; font-weight:800; scroll-margin-top:24px}
.story-body h2::before{content:""; display:block; width:28px; height:4px; border-radius:2px; background:var(--brand); margin-bottom:.6em}
.story-body h3{margin:1.8em 0 0; font-size:18px; line-height:1.5; font-weight:800; scroll-margin-top:24px}
.story-body h2 + *, .story-body h3 + *{margin-top:.8em}
.story-body ul, .story-body ol{margin:0; padding-left:1.4em}
.story-body li + li{margin-top:.4em}
.story-body li > .li-body > p{margin:0}
.story-body blockquote{margin:0; padding:.25em 0 .25em 1.1em; border-left:4px solid var(--brand); color:var(--ink-80)}
.story-body hr{border:0; height:2px; background:var(--rule); margin:2.2em 0}
.story-body code{font-family:var(--mono); font-size:.86em; padding:.12em .4em; border-radius:6px; background:var(--desk); border:1px solid var(--rule)}
.story-body mark{background:var(--sun-soft); padding:0 .2em; border-radius:4px}
.story-body a{color:var(--brand-text); text-decoration:none; border-bottom:2px dotted rgba(16,119,181,0.45)}
.story-body a:hover{border-bottom-style:solid}
.story-body a.external::after{content:" ↗"; font-size:.8em}
/* 실습 노트로 가는 링크 — 로그인 안 했으면 자물쇠 */
.story-body a.locked::after{
  content:"🔒 로그인"; margin-left:4px; padding:1px 7px; border-radius:999px; vertical-align:2px;
  font-size:11px; font-weight:800; color:var(--ink-55); background:var(--desk); border:1px solid var(--rule);
}
/* 도식 — 카드처럼 테두리, 누르면 원본 크기로 */
.story-body a.zoom{display:block; border:0}
.story-body img{display:block; max-width:100%; height:auto; margin:0 auto; border-radius:16px}
.story-body a.zoom img{border:2px solid var(--rule); box-shadow:0 2px 0 0 var(--rule); background:#fff}
.story-body .table-wrap{overflow-x:auto; border:2px solid var(--rule); border-radius:16px}
.story-body table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.55}
.story-body th, .story-body td{padding:10px 14px; text-align:left; vertical-align:top; border-top:1px solid var(--rule)}
.story-body thead th{border-top:0; background:var(--desk); font-weight:800; font-size:13px}
.story-body td:first-child{font-weight:800; white-space:nowrap}
.story-body .code-block{position:relative; border:2px solid var(--rule); border-radius:16px; background:#f9fafb}
.story-body .code-block pre{margin:0; padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.7}
.story-body .code-block code{padding:0; border:0; background:none; font-size:inherit; white-space:pre}
.copy-btn{position:absolute; top:8px; right:8px; height:30px; padding:0 12px; border-radius:10px; font-size:12px}
/* 상자(콜아웃) — 분류 색 면처럼 옅은 바탕 + 2px 테두리 */
.story-body .callout{padding:18px 20px; border-radius:16px; border:2px solid var(--rule); background:var(--desk)}
.story-body .callout-head, .story-body details.callout > summary{display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; cursor:default; list-style:none}
.story-body details.callout > summary{cursor:pointer}
.story-body .callout-body{margin-top:8px; font-size:16px; line-height:1.85}
.story-body .callout-body > *{margin:0}
.story-body .callout-body > * + *{margin-top:.8em}
.story-body .callout.why, .story-body .callout.info{background:var(--brand-soft); border-color:#b9e4fb}
.story-body .callout.why .callout-title, .story-body .callout.info .callout-title{color:var(--brand-text)}
.story-body .callout.tip{background:var(--sun-soft); border-color:#f5df8f}
.story-body .callout.tip .callout-title{color:#8a6a00}
.story-body .callout.danger, .story-body .callout.warning{background:var(--red-soft); border-color:#f6c7c2}
.story-body .callout.danger .callout-title, .story-body .callout.warning .callout-title{color:var(--red)}
.story-body .callout.success{background:var(--green-soft); border-color:#c6e8b3}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:1024px){
  .hub-grid{grid-template-columns:minmax(0,1fr); gap:48px}
  .side{position:static}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .gnb-in{height:64px; gap:8px}
  .logo span, .gnb-me, .gnb-full{display:none}
  .gnb-menu a{padding:8px 10px; font-size:14px}
  .gnb-menu a[href="notes.html"]{white-space:nowrap}
  .featured{grid-template-columns:minmax(0,1fr)}
  .featured .cover{min-height:150px}
  .featured-body{padding:22px}
  .featured-body h2{font-size:23px}
  .row{grid-template-columns:96px minmax(0,1fr); gap:16px}
  .row .cover{height:72px; padding:10px}
  .row .cover b{font-size:13px}
  .row .cover small{display:none}
  .row h3{font-size:17px}
  .post{padding:28px 16px 96px}
  .post-title{font-size:28px}
  .post-cover{height:140px}
  .story-body{font-size:16.5px}
  .prevnext{grid-template-columns:1fr}
  .prevnext .next{grid-column:auto}
}
@media (max-width:400px){
  #logout{display:none}
}